feat ui设计稿

src/views/home/cpns/HomeBanner.vue

@@ -78,6 +78,16 @@ onBeforeUnmount(stop)
       >
         ›
       </button>
+
+      <!-- 设计稿底部居中的指示条（长条=当前，圆点=其余） -->
+      <div class="home-banner__dots">
+        <span
+          v-for="(slide, index) in slides"
+          :key="`dot-${slide.id ?? index}`"
+          class="home-banner__dot"
+          :class="{ 'is-active': index === current }"
+        />
+      </div>
     </template>
   </section>
 </template>
@@ -85,11 +95,10 @@ onBeforeUnmount(stop)
 <style lang="less" scoped>
 .home-banner {
   position: relative;
-  height: 240px;
+  // 设计稿头图通栏 1920×661 设计px → 高 509 CSS，紧贴顶栏无圆角
+  height: 509px;
   overflow: hidden;
-  border-radius: @radius-lg;
-  background: @bg-color;
-  box-shadow: @shadow-base;
+  background: @home-banner-bg;
 
   &__img {
     display: block;
@@ -105,7 +114,7 @@ onBeforeUnmount(stop)
     height: 32px;
     transform: translateY(-50%);
     border-radius: @radius-round;
-    background: rgba(31, 39, 51, 0.35);
+    background: fade(@black, 35%);
     color: @white;
     font-size: @font-size-xl;
     line-height: 1;
@@ -124,5 +133,29 @@ onBeforeUnmount(stop)
   &:hover &__arrow {
     opacity: 1;
   }
+
+  &__dots {
+    position: absolute;
+    bottom: 48px;
+    left: 50%;
+    transform: translateX(-50%);
+    .flex(row, center, center);
+    gap: 10px;
+  }
+
+  &__dot {
+    width: 4px;
+    height: 4px;
+    border-radius: @radius-round;
+    background: @home-banner-dot;
+    transition: width 0.2s;
+
+    // 当前页：设计稿 44×5 设计px 长条
+    &.is-active {
+      width: 34px;
+      height: 4px;
+      border-radius: @radius-round;
+    }
+  }
 }
 </style>