样式修改

src/views/withmind/assets/index.rem.css

@@ -600,7 +600,7 @@ html {
 .group_10 {
   width: 38.054rem;
   height: 13.36rem;
-  margin: 3.2rem 0 0 6.934rem;     /* 知识库跟 Agent 中间间距过大,从 9.974rem 缩到 3.2rem(跟 group_8 对称) */
+  margin: 3.2rem 0 0 5.434rem;     /* 左移 0.5+0.3+0.3+0.2+0.2rem(共 1.5rem,原 6.934rem) */
 }
 
 .image_9 {
@@ -1618,16 +1618,29 @@ html {
   margin-top: 0.534rem;
 }
 
+/* 左列容器:企业管理大师 + 新媒体专家 */
 .group_28 {
   width: 9.814rem;
   height: 16.294rem;
   margin: 3.947rem 0 0 2.507rem;
 }
 
+/* 企业管理大师独立卡片框(比照 newcss .group_28,只是装第一张) */
+.group_28_top {
+  box-shadow: 0px 0px 20px 0px rgba(7, 42, 88, 0.04);
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 16px;
+  width: 9.814rem;
+  height: 8.107rem;
+  justify-content: flex-center;
+}
+
 .label_3 {
-  width: 1.147rem;
+  width: 1.44rem;
-  height: 1.147rem;
+  height: 1.44rem;
-  margin-left: 0.934rem;
+  margin: 1.067rem 0 0 1.334rem;
+  position: relative;
+  z-index: 2;
 }
 
 .text_49 {
@@ -1643,21 +1656,21 @@ html {
   white-space: nowrap;
   /* 比照 newcss .text_56:line-height 0.96rem */
   line-height: 0.96rem;
-  margin: 1.067rem 0 0 0.747rem;
+  margin: 0.534rem 0 0 1.334rem;
 }
 
 .text_50 {
   width: 8.32rem;
-  height: 1.6rem;
+  height: 2.72rem;
   display: block;
   overflow-wrap: break-word;
   color: rgba(86, 86, 86, 1);
-  font-size: 0.426rem;
+  font-size: 0.48rem;
   font-family: Source Han Sans CN-Regular;
   font-weight: 400;
   text-align: justify;
-  line-height: 0.8rem;
+  line-height: 0.907rem;
-  margin: 0.32rem 0 0 0.747rem;
+  margin: 0.32rem 0 0 1.334rem;
 }
 
 .group_29 {
@@ -1666,8 +1679,8 @@ html {
   border-radius: 16px;
   width: 9.814rem;
   height: 8.107rem;
-  /* 比照 newcss .group_28:margin-top 3.094rem(原 3.2rem 略大,微调对齐) */
+  /* 比照右列 .box_15:0.8rem(原 3.094rem 过大,左列两张卡间距跟右列对齐) */
-  margin-top: 3.094rem;
+  margin-top: 0.8rem;
   justify-content: flex-center;
 }
 
@@ -1679,9 +1692,9 @@ html {
 }
 
 .label_4 {
-  width: 1.147rem;
+  width: 1.44rem;
-  height: 1.147rem;
+  height: 1.44rem;
-  margin: 0.187rem 0 0 0.187rem;
+  margin: 0;
 }
 
 .box_11 {
@@ -1732,7 +1745,7 @@ html {
 .group_30 {
   width: 9.814rem;
   height: 17.014rem;
-  margin: 4.294rem 6.934rem 0 0.8rem;
+  margin: 4.8rem 6.934rem 0 0.8rem;
 }
 
 .box_12 {
@@ -1875,7 +1888,7 @@ html {
   margin: 1.067rem 0 0 1.334rem;
 }
 
-.image-wrapper_13 {
+/* .image-wrapper_13 {
   position: relative;
   width: 0.827rem;
   height: 1.067rem;
@@ -1899,7 +1912,7 @@ html {
   top: 0.134rem;
   width: 0.32rem;
   height: 0.8rem;
-}
+} */
 
 .text-group_16 {
   width: 7.147rem;

src/views/withmind/index.vue

@@ -460,13 +460,15 @@
         <span class="text_48">四大核心技能插件，覆盖企业高频应用场景</span>
       </div>
       <div class="group_28 flex-col">
-        <img
+        <div class="group_28_top flex-col">
-          class="label_3"
+          <img
-          referrerpolicy="no-referrer"
+            class="label_3"
-          src="./assets/img/Slice_13@3x.png"
+            referrerpolicy="no-referrer"
-        />
+            src="./assets/img/Slice_11@3x.png"
-        <span class="text_49">企业管理大师</span>
+          />
-        <span class="text_50">覆盖行政人事财务等制度流程，员工自助查询，减少答疑，实现管理自动化标准化。</span>
+          <span class="text_49">企业管理大师</span>
+          <span class="text_50">覆盖行政人事财务等制度流程，<br />员工自助查询，减少答疑，实现<br />管理自动化标准化。</span>
+        </div>
         <div class="group_29 flex-col">
           <div class="block_12 flex-col">
             <img
@@ -507,27 +509,6 @@
           </div>
         </div>
       </div>
-      <div class="group_31 flex-col"></div>
-      <div class="group_32 flex-col">
-        <div class="group_33 flex-col">
-          <div class="image-wrapper_13 flex-col">
-            <img
-              class="image_32"
-              referrerpolicy="no-referrer"
-              src="./assets/img/FigmaDDSSlicePNG70cb065a8289fcc42ca78e42855a5469.png"
-            />
-            <img
-              class="image_33"
-              referrerpolicy="no-referrer"
-              src="./assets/img/FigmaDDSSlicePNGb5a93f0d10a547f00f477afb7b34d708.png"
-            />
-          </div>
-        </div>
-        <div class="text-group_16 flex-col justify-between">
-          <span class="text_57">企业管理大师</span>
-          <span class="text_58">覆盖行政人事财务等制度流程，员工自助查询，减少答疑，实现管理自动化标准化。</span>
-        </div>
-      </div>
     </div>
     <img
       class="image_34"
@@ -678,10 +659,15 @@ export default {
       const el = document.getElementById(id);
       if (el) {
         if (id === 'gateway') {
-          const rect = el.getBoundingClientRect();
+          // gateway 段高度 23.574rem 可能超过视口,按"底部对齐"算会让顶部滚出视口看不见
-          const elBottom = rect.bottom + window.pageYOffset;
+          // 改成顶部对齐(留 100px 给 nav,不让"统一的大模型接口网关"标题被挡)
-          const target = elBottom - window.innerHeight + 250;
+          const top = el.getBoundingClientRect().top + window.pageYOffset - 100;
-          window.scrollTo({ top: Math.max(0, target), behavior: 'smooth' });
+          window.scrollTo({ top: top, behavior: 'smooth' });
+        } else if (id === 'skills') {
+          // skills 段是 absolute 定位 (group_27 top: 35.547rem),点击时让它顶部贴视口顶部,
+          // 不要再留 260px(否则会露出上面 gateway 段的"降本/增效/留资/安全"等模块内容)
+          const top = el.getBoundingClientRect().top + window.pageYOffset;
+          window.scrollTo({ top: top, behavior: 'smooth' });
         } else {
           const top = el.getBoundingClientRect().top + window.pageYOffset - 260;
           window.scrollTo({ top: top, behavior: 'smooth' });