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

各页面使用公用scss

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-03 16:38:23 +08:00
parent d26e2ba436
commit 4f747837a4
2 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Homepage.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="homepageroot"> <div id="homepageroot" class="pageroot">
<div id="hpbanner" class="banner"> <div id="hpbanner" class="pagebanner">
</div> </div>
</div> </div>
@ -13,35 +13,14 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss"; @import "src/publicstyle.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{ #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) { @include media-breakpoint-between(xs, md) {
padding-bottom: 192%;
background-image: url('/Homepage/banner_wep.png'); background-image: url('/Homepage/banner_wep.png');
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding-bottom: 52.6673640167364%;
background-image: url('/Homepage/banner.png'); background-image: url('/Homepage/banner.png');
} }
} }

30
src/publicstyle.scss Normal file
View File

@ -0,0 +1,30 @@
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";
.pageroot{
display: flex;
flex-direction: column;
width: 100%;
@include media-breakpoint-between(xs, md) {
}
@include media-breakpoint-between(md, xl) {
}
}
.pagebanner{
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%;
}
@include media-breakpoint-up(md) {
padding-bottom: 52.6673640167364%;
}
}