优化首页账号展示体验

frontend/src/features/listings/components/HomeBanner.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ElCarousel, ElCarouselItem } from 'element-plus'
-
 interface HomeBannerSlide {
   title?: string
   eyebrow?: string
@@ -47,6 +45,20 @@ defineProps<Props>()
   min-width: 0;
   border-radius: 16px;
   overflow: hidden;
+  background: #ffffff;
+}
+
+.hero-board :deep(.el-carousel) {
+  min-width: 0;
+}
+
+.hero-board :deep(.el-carousel__container) {
+  height: 240px;
+  overflow: hidden;
+}
+
+.hero-board :deep(.el-carousel__item) {
+  height: 100%;
 }
 
 .hero-slide {
@@ -55,7 +67,13 @@ defineProps<Props>()
   display: flex;
   align-items: center;
   padding: 40px;
-  background: #f8fafc;
+  overflow: hidden;
+  color: #17233d;
+  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 58%, #fff7ed 100%);
+}
+
+.hero-slide.tone-blue {
+  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 56%, #fff7ed 100%);
 }
 
 .hero-slide.tone-orange {
@@ -77,7 +95,7 @@ defineProps<Props>()
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
+  background: linear-gradient(90deg, rgba(15, 23, 42, 0.74) 0%, rgba(15, 23, 42, 0.24) 62%, transparent 100%);
 }
 
 .hero-copy {
@@ -86,22 +104,50 @@ defineProps<Props>()
   max-width: 480px;
 }
 
+.hero-copy span {
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 900;
+}
+
 .hero-slide.has-image .hero-copy {
   color: #ffffff;
 }
 
+.hero-slide.has-image .hero-copy span {
+  color: #fed7aa;
+}
+
 .hero-copy h1 {
   margin: 12px 0;
   font-size: 32px;
+  font-weight: 900;
   line-height: 1.2;
 }
 
 .hero-copy p {
   display: inline-block;
+  margin: 0;
   padding: 6px 12px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.2);
+  color: #1e293b;
+  background: rgba(255, 255, 255, 0.72);
   backdrop-filter: blur(4px);
   font-size: 14px;
+  font-weight: 800;
+}
+
+.hero-slide em {
+  position: absolute;
+  top: 22px;
+  right: 24px;
+  z-index: 1;
+  padding: 6px 10px;
+  border-radius: 999px;
+  color: #ffffff;
+  background: #ff6a00;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 900;
 }
 </style>