yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

首页横幅图片显示正常

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-03 16:27:11 +08:00
parent 200bf19711
commit 50486fbcaf
2 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -48,6 +48,6 @@ import Toolbar from './components/Toolbar.vue'
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
} }
@include media-breakpoint-between(md, xl) { @include media-breakpoint-up(md) {
} }
</style> </style>

40
src/components/Homepage.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div style="position: relative; <div id="homepageroot">
flex:1;width: 100%;min-height: 100%;background-color: #0dcaf0"> <div id="hpbanner">
<h1>It works!</h1>
</div>
</div> </div>
</template> </template>
@ -11,6 +12,37 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";
#homepageroot{
display: flex;
flex-direction: column;
width: 100%;
@include media-breakpoint-between(xs, md) {
}
@include media-breakpoint-between(md, xl) {
}
}
#hpbanner{
width: 100%;
background-size:100% 100%;
background-attachment: scroll;
background-size: 100% 100%; /* 图片宽高100%填充div */
background-repeat: no-repeat;
background-position: center center;
@include media-breakpoint-between(xs, md) {
padding-bottom: 192%;
background-image: url('/Homepage/banner_wep.png');
}
@include media-breakpoint-up(md) {
padding-bottom: 52.6673640167364%;
background-image: url('/Homepage/banner.png');
}
}
</style> </style>