服务流程页面制作有所进展，导入了一些图片。

src/components/ServiceProcess.vue

@@ -1,3 +1,8 @@
+<script setup>
+import { useBootstrapBreakpoint } from './useBreakpoint.js';
+const { breakpoint } = useBootstrapBreakpoint();
+</script>
+
 <template>
   <div class="pageroot" id="serviceprocessroot">
     <div id="serviceprocessbanner" class="pagebanner">
@@ -6,6 +11,47 @@
         <span class="banner2">从「流量收割」转向「价值共生」</span>
       </div>
     </div>
+    <div id="secondwhitesp"
+         style="background-color: white;max-width: 100%;height: auto">
+      <div class="normalcontentdiv">
+        <span class="normalcontenttitle">
+          设计观点
+        </span>
+        <span class="normalcontenttext">
+          在体验驱动商业的时代，用户对产品与服务的期待有了质的变化，要求企业持续且有效地探索用户需求的演变。我们以全局融合体验的理念和深刻的行业理解，整合场景、用户、体验、运营管理形成健康的商业循环系统，为企业赋能破局未来趋势。
+        </span>
+      </div>
+      <div v-if="breakpoint==='xs'||breakpoint==='sm'"
+           src="/ServiceProcessRes/designopinion.png"
+           style="margin-left: 32px;
+                  margin-right: 32px;
+                  margin-top: 20px;
+                  margin-bottom: 41px;
+                  max-width:100%;height:auto;">
+        <img src="/ServiceProcessRes/designopinionwep.png"
+             width="100%" height="100%"/>
+      </div>
+      <div v-if="breakpoint==='md'||breakpoint==='lg'"
+           src="/ServiceProcessRes/designopinion.png"
+           style="margin-left: 100px;
+                  margin-right: 100px;
+                  margin-top: 79px;
+                  margin-bottom: 191px;
+                  max-width:100%;height:auto;">
+        <img src="/ServiceProcessRes/designopinion.png"
+             width="100%" height="100%"/>
+      </div>
+      <div v-if="breakpoint==='xl'||breakpoint==='xxl'"
+           src="/ServiceProcessRes/designopinion.png"
+           style="margin-left: 295px;
+                  margin-right: 295px;
+                  margin-top: 79px;
+                  margin-bottom: 191px;
+                  max-width:100%;height:auto;">
+        <img src="/ServiceProcessRes/designopinion.png"
+             width="100%" height="100%"/>
+      </div>
+    </div>
   </div>
 </template>
 

src/components/useBreakpoint.js

@@ -0,0 +1,29 @@
+import { ref, onMounted, onUnmounted, computed  } from 'vue';
+
+export function useBootstrapBreakpoint() {
+  const width = ref(window.innerWidth);
+
+  const onResize = () => {
+    width.value = window.innerWidth;
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', onResize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
+
+  // 计算当前断点
+  const breakpoint = computed(() => {
+    if (width.value < 576) return 'xs';
+    if (width.value >= 576 && width.value < 768) return 'sm';
+    if (width.value >= 768 && width.value < 992) return 'md';
+    if (width.value >= 992 && width.value < 1200) return 'lg';
+    if (width.value >= 1200 && width.value < 1400) return 'xl';
+    return 'xxl';
+  });
+
+  return { width, breakpoint };
+}

src/publicstyle.scss

@@ -122,13 +122,76 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  height:auto;
   @include media-breakpoint-between(xs, md) {
+    margin-left: 32px;
+    margin-right: 32px;
+    margin-top: 64px;
+  }
+  @include media-breakpoint-between(md,xxl){
+    margin-left: 100px;
+    margin-right: 100px;
+    margin-top: 96px;
+  }
+  @include media-breakpoint-up(xxl) {
+    margin-left: 256px;
+    margin-right: 256px;
+    margin-top: 96px;
+  }
+}
 
+.normalcontenttitle{
+  margin-left: 0px;
+  margin-right: 0px;
+  overflow-wrap: break-word;
+  color: rgba(13, 13, 13, 1);
+  @include media-breakpoint-between(xs, md) {
+    font-size: 24px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    line-height: 48px;
   }
   @include media-breakpoint-between(md,xl){
 
   }
-  @include media-breakpoint-up(xl) {
+  @include media-breakpoint-up(md) {
-
+    width: auto;
+    height: auto;
+    font-size: 48px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 48px;
+  }
+}
+
+.normalcontenttext{
+  margin-left: 0px;
+  margin-right: 0px;
+  width:100%;
+  @include media-breakpoint-between(xs, md) {
+    overflow-wrap: break-word;
+    color: rgba(13, 13, 13, 1);
+    font-size: 15px;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    line-height: 24px;
+    margin-top: 8px;
+  }
+  @include media-breakpoint-between(md,xl){
+
+  }
+  @include media-breakpoint-up(md) {
+    margin-top: 35px;
+    overflow-wrap: break-word;
+    color: rgba(13, 13, 13, 1);
+    font-size: 24px;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    line-height: 42px;
   }
 }