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%;
+  }
+}