设计瞬间wep完成

src/components/Aboutus.vue

@@ -1,3 +1,8 @@
+<script setup>
+import { useBootstrapBreakpoint } from './useBreakpoint.js';
+const { breakpoint } = useBootstrapBreakpoint();
+</script>
+
 <template>
   <div class="pageroot" id="aboutusroot">
     <div id="abubanner" class="pagebanner">
@@ -6,6 +11,42 @@
         <span class="banner2">赋能客户产品体验创新</span>
       </div>
     </div>
+    <div id="gslc" class="pageroot">
+      <div class="normalcontentdiv" id="gslcblk">
+        <span class="normalcontenttitle">公司历程</span>
+        <span class="normalcontenttext">
+          2023年初春，公司在创意与梦想的交织中诞生。成立伊始，我们便确立了以创新设计服务客户的理念。<br />3月，团队成员深入市场调研，拜访众多企业，精准把握行业需求，为后续发展筑牢根基。<br />5月，迎来首个重要项目——为一家新兴科技企业打造品牌形象。团队日夜钻研，从标志设计到品牌视觉系统构建，反复打磨，最终方案收获客户高度认可。<br />8月，我们积极拓展业务版图，涉足电商视觉设计领域，助力多家店铺实现页面转化率提升，凭借出色成果在业内崭露头角。<br />11月，参与行业设计研讨会，与诸多资深设计团队交流碰撞，汲取灵感的同时，也向业界展示了我们的独特设计思维与风格。<br />2023年的每一步探索，都是我们成长的印记。
+        </span>
+      </div>
+    </div>
+    <div id="hxtd" class="pageroot">
+      <div class="normalcontentdiv" id="hxtdblk">
+        <span class="normalcontenttitle" style="color: white;">核心团队</span>
+        <span class="normalcontenttext" style="color: white;">
+          核心团队来自各大互联网公司，每位成员都具备多年跨领域用户体验设计经验。我们在电商、社交、金融等多元领域的深耕中，积累了深厚的实战经验，深谙不同行业用户的需求与痛点。<br />我们坚信，设计是一门综合的艺术,用户体验设计又是一种商业艺术。用户体验设计并非只是视觉的呈现，更是情感的传递与价值的创造。从用户旅程的全流程出发，我们注重每一个细节，力求通过设计打破人与产品之间的壁垒，构建自然、流畅且富有情感的交互体验。凭借多元的背景和丰富的经验，我们能够从不同视角剖析问题，为客户提供定制化且极具前瞻性的用户体验设计方案，助力产品在市场中脱颖而出，实现商业价值与用户体验的双赢。
+        </span>
+      </div>
+    </div>
+    <div id="sjsj" class="pageroot" style="background-color: white;">
+      <div class="normalcontentdiv" id="sjsjblk">
+        <span class="normalcontenttitle" style="background-color: white;">设计瞬间</span>
+      </div>
+      <div v-if="breakpoint==='xs'||breakpoint==='sm'" id="sjsjimgwep">
+        <img src="/AboutusRes/pcp1wep.png"/>
+        <img src="/AboutusRes/pcp2wep.png"style="margin-top: 5px;"/>
+        <img src="/AboutusRes/pcp3wep.png"style="margin-top: 5px;"/>
+        <img src="/AboutusRes/pcp4wep.png"style="margin-top: 5px;"/>
+        <img src="/AboutusRes/pcp5wep.png"style="margin-top: 5px;"/>
+        <img src="/AboutusRes/pcp6wep.png"style="margin-top: 5px;"/>
+        <img src="/AboutusRes/pcp7wep.png"style="margin-top: 5px;"/>
+      </div>
+      <div v-else id="sjsjimg">
+
+      </div>
+      <div class="normalcontentdiv" id="jrwmblk">
+        <span class="normalcontenttitle" style="background-color: white;">加入我们</span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -27,4 +68,84 @@ export default {
     background-image: url('/AboutusRes/aboutusbanner.png');
   }
 }
+
+#gslc{
+  @include media-breakpoint-between(xs, md) {
+    padding-bottom: 64px;
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-bottom: 80px;
+  }
+}
+
+#sjsj{
+  @include media-breakpoint-between(xs, md) {
+    padding-bottom: 48px;
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-bottom: 160px;
+  }
+}
+
+#hxtd{
+  /* 背景图垂直、水平均居中 */
+  background-position: center center;
+  /* 背景图不平铺 */
+  background-repeat: no-repeat;
+  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+  background-attachment: scroll;
+  @include media-breakpoint-between(xs, md) {
+    background-size:100%;
+    padding-bottom: 112px;
+    background-image: url('/AboutusRes/innerteamwep.png');
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-bottom: 164px;
+    background-image: url('/AboutusRes/innerteam.png');
+  }
+
+  @media (max-width: 375px) {
+    background-size: 100% 100%;
+  }
+
+  @media (min-width: 375px) {
+    /* 让背景图基于容器大小伸缩 */
+    background-size: cover;
+  }
+}
+
+#hxtdblk{
+  @include media-breakpoint-between(xs, md) {
+    margin-top: 112px;
+  }
+
+  @include media-breakpoint-up(md) {
+    margin-top: 135px;
+  }
+}
+
+#sjsjimg{
+  @include media-breakpoint-between(xs, md) {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+  @include media-breakpoint-up(md) {
+    margin-left: 256px;
+    margin-right: 256px;
+  }
+}
+
+#sjsjimgwep{
+  width: 100%;
+  margin-top: 32px;
+}
+
+#sjsjimgwep img{
+  width: 100%;
+  height: auto;
+}
 </style>

src/publicstyle.scss

@@ -26,16 +26,10 @@
   align-items: center;
   max-height: 100vh;
   @include media-breakpoint-between(xs, md) {
-    //padding-bottom: 192%;
-    //padding-top: 96%;
-    //padding-bottom: 96%;
     aspect-ratio: 0.526673640167364;
   }
 
   @include media-breakpoint-up(md) {
-    //padding-bottom: 52.6673640167364%;
-    //padding-top: 26.3336820083682%;
-    //padding-bottom: 26.3336820083682%;
     aspect-ratio: 1.92;
   }
 
@@ -177,7 +171,7 @@
     font-size: 15px;
     font-family: PingFangSC-Regular;
     font-weight: normal;
-    text-align: left;
+    text-align: justify;
     line-height: 24px;
     margin-top: 8px;
   }
@@ -191,7 +185,7 @@
     font-size: 24px;
     font-family: PingFangSC-Regular;
     font-weight: normal;
-    text-align: left;
+    text-align: justify;
     line-height: 42px;
   }
 }