From 4f747837a4fd3eee8fc6d3aece4e5d82be5a35a5 Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Sat, 3 May 2025 16:38:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=84=E9=A1=B5=E9=9D=A2=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=85=AC=E7=94=A8scss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Homepage.vue | 27 +++------------------------
 src/publicstyle.scss        | 30 ++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 24 deletions(-)
 create mode 100644 src/publicstyle.scss

diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index 0f2fcbf..60505cb 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -1,6 +1,6 @@
 <template>
-<div id="homepageroot">
-  <div id="hpbanner" class="banner">
+<div id="homepageroot" class="pageroot">
+  <div id="hpbanner" class="pagebanner">
 
   </div>
 </div>
@@ -13,35 +13,14 @@ export default {
 </script>
 
 <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) {
-  }
-}
+@import "src/publicstyle.scss";
 
 #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');
   }
 }
diff --git a/src/publicstyle.scss b/src/publicstyle.scss
new file mode 100644
index 0000000..543e911
--- /dev/null
+++ b/src/publicstyle.scss
@@ -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%;
+  }
+}