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(md, xl) {
@include media-breakpoint-up(md) {
}
</style>

40
src/components/Homepage.vue
View File

@ -1,7 +1,8 @@
<template>
<div style="position: relative;
flex:1;width: 100%;min-height: 100%;background-color: #0dcaf0">
<h1>It works!</h1>
<div id="homepageroot">
<div id="hpbanner">
</div>
</div>
</template>
@ -11,6 +12,37 @@ export default {
}
</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>