diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index 60505cb..81428db 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -1,7 +1,10 @@
 <template>
 <div id="homepageroot" class="pageroot">
   <div id="hpbanner" class="pagebanner">
-
+    <div class="bannercontent">
+      <span class="banner1">以体验设计重构用户关系<br /></span>
+      <span class="banner2">从「流量收割」转向「价值共生」</span>
+    </div>
   </div>
 </div>
 </template>
diff --git a/src/components/ServiceProcess.vue b/src/components/ServiceProcess.vue
index 743cb3f..280703c 100644
--- a/src/components/ServiceProcess.vue
+++ b/src/components/ServiceProcess.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="pageroot" id="serviceprocessroot">
     <div id="serviceprocessbanner" class="pagebanner">
+      <div class="bannercontent">
 
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/publicstyle.scss b/src/publicstyle.scss
index 543e911..61271db 100644
--- a/src/publicstyle.scss
+++ b/src/publicstyle.scss
@@ -20,11 +20,83 @@
   background-size: 100% 100%;      /* 图片宽高100%填充div */
   background-repeat: no-repeat;
   background-position: center center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   @include media-breakpoint-between(xs, md) {
-    padding-bottom: 192%;
+    //padding-bottom: 192%;
+    padding-top: 96%;
+    padding-bottom: 96%;
   }
 
   @include media-breakpoint-up(md) {
-    padding-bottom: 52.6673640167364%;
+    //padding-bottom: 52.6673640167364%;
+    padding-top: 26.3336820083682%;
+    padding-bottom: 26.3336820083682%;
+  }
+
+  .bannercontent{
+    text-align: left;
+    position: relative;
+    @include media-breakpoint-between(xs, md) {
+      //margin-left: 45px;
+    }
+
+    @include media-breakpoint-up(md) {
+      //margin-left: 368px;
+    }
+  }
+
+  .banner1 {
+    @include media-breakpoint-between(xs, md) {
+      width: 285px;
+      height: 80px;
+      overflow-wrap: break-word;
+      color: rgba(255, 255, 255, 1);
+      font-size: 32px;
+      font-family: PingFangSC-Thin;
+      font-weight: 100;
+      text-align: left;
+      line-height: 40px;
+    }
+
+    @include media-breakpoint-up(md) {
+      //width: 1125px;
+      //height: 188px;
+      overflow-wrap: break-word;
+      color: rgba(255, 255, 255, 1);
+      font-size: 76px;
+      font-family: PingFangSC-Thin;
+      font-weight: 100;
+      text-align: left;
+      line-height: 94px;
+    }
+  }
+
+  .banner2 {
+    @include media-breakpoint-between(xs, md) {
+      //width: 285px;
+      //height: 80px;
+      overflow-wrap: break-word;
+      color: rgba(255, 255, 255, 1);
+      font-size: 32px;
+      font-family: PingFangSC-Semibold;
+      font-weight: 600;
+      text-align: left;
+      line-height: 40px;
+    }
+
+    @include media-breakpoint-up(md) {
+      //width: 1125px;
+      //height: 188px;
+      overflow-wrap: break-word;
+      color: rgba(255, 255, 255, 1);
+      font-size: 76px;
+      font-family: PingFangSC-Semibold;
+      font-weight: 600;
+      text-align: left;
+      line-height: 94px;
+    }
   }
 }