微调横幅

src/components/Aboutus.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="pageroot" id="aboutusroot">
     <div id="abubanner" class="pagebanner">
-
+      <div class="bannercontent">
+        <span class="banner1">多年专业深耕<br /></span>
+        <span class="banner2">赋能客户产品体验创新</span>
+      </div>
     </div>
   </div>
 </template>

src/components/Examples.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="pageroot" id="examplesprocessroot">
     <div id="examplesprocessbanner" class="pagebanner">
-
+      <div class="bannercontent">
+        <span class="banner1">助力不同行业客户<br /></span>
+        <span class="banner2">实现业务增长和竞争力提升</span>
+      </div>
     </div>
   </div>
 </template>

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>

src/components/ServiceProcess.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="pageroot" id="serviceprocessroot">
     <div id="serviceprocessbanner" class="pagebanner">
-
+      <div class="bannercontent">
+        <span class="banner1">以体验设计重构用户关系<br /></span>
+        <span class="banner2">从「流量收割」转向「价值共生」</span>
+      </div>
     </div>
   </div>
 </template>

src/publicstyle.scss

@@ -17,14 +17,89 @@
   width: 100%;
   background-size:100% 100%;
   background-attachment: scroll;
-  background-size: 100% 100%;      /* 图片宽高100%填充div */
+  background-size: 100%;      /* 图片宽高100%填充div */
   background-repeat: no-repeat;
   background-position: center center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-height: 100vh;
   @include media-breakpoint-between(xs, md) {
-    padding-bottom: 192%;
+    //padding-bottom: 192%;
+    //padding-top: 96%;
+    //padding-bottom: 96%;
+    aspect-ratio: 0.526673640167364;
   }
 
   @include media-breakpoint-up(md) {
-    padding-bottom: 52.6673640167364%;
+    //padding-bottom: 52.6673640167364%;
+    //padding-top: 26.3336820083682%;
+    //padding-bottom: 26.3336820083682%;
+    aspect-ratio: 1.92;
+  }
+
+  .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;
+    }
   }
 }