feat: 商品详情页面交互

components/ImageSwiper/styles/index.scss

@@ -4,9 +4,9 @@
 }
 
 .swiper-box {
-  border-radius: 8px;
   height: 200px;
   overflow: hidden;
+  // 圆角通过内联样式动态设置
 }
 
 .swiper-item image {
@@ -31,23 +31,53 @@
   left: 12px;
   right: 12px;
   bottom: 36px;
+  height: 60px;
+}
+
+.thumbnail-scroll {
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+}
+
+.thumbnail-list {
   display: flex;
-  gap: 5px;
+  align-items: center;
+  gap: 10px;
+  padding: 0 5px;
 }
 
 .thumbnail-item {
+  flex-shrink: 0;
   text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &.active {
+    image {
+      border: 1px solid #fff;
+    }
+  }
 }
 
 .thumbnail-item image {
   width: 48px;
   height: 38px;
   border-radius: 4px;
-  border: 1px solid #fff;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  transition: all 0.3s ease;
+  display: block;
 }
 
 .thumbnail-item text {
   color: #fff;
   font-size: 8px;
   display: block;
+  margin-top: 4px;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 48px;
 }