```

feat(fittingRoom): 替换轮播D堆叠效果

- 引图组件为3入新的 `hbxw-stack-carousel` 轮播图组件，支持3D堆叠、自动播放和手势滑动
- 更新页面结构与样式以适配新组件
- 增加点击事件处理函数 `handleItemClick` 和轮播切换事件 `handleChange`
- 添加动态更新轮播数据的功能，通过 `dian` 方法测试数据变更
- 调整图片展示模式为 `aspectFill` 并设定固定宽高
-优化样式布局，设置相对定位及层级控制

docs(readme): 添加接口文档链接

- 在 README 中补充项目相关接口文档的访问地址
```

pages/fittingRoom/components/s-select-mote.vue

@@ -31,7 +31,7 @@
   const sizeType = ['original'];
   const imageStyle = {
     width: 200,
-    height: 200,
+    height: 50,
   };
 
   const fittingRoom = sheep.$store('fittingRoom');
@@ -60,6 +60,7 @@
     overflow: hidden;
     height: 76rpx;
     transition: height 0.3s ease-in-out;
+    z-index: 200;
   }
   .unfold {
     height: 700rpx;
@@ -105,6 +106,7 @@
     left: 0;
     width: 100%;
     height: 100%;
+    opacity: 0;
   }
 
   .item-image {

pages/fittingRoom/index.vue

@@ -1,29 +1,31 @@
 <template>
   <view v-if="template">
-    <uni-swiper-dot :current="state.current" :info="state.info" :mode="'default'" field="content">
-      <view class="uni-margin-wrap">
-        <swiper
-          :autoplay="true"
-          :duration="500"
-          :interval="5000"
-          circular
-          class="swiper"
-          @change="swiperChange"
-        >
-          <swiper-item v-for="(item, index) in state.info" :key="index">
-            <view class="swiper-item uni-bg-red">
-              <image class="swiper-image" mode="heightFix" src="/static/mote.png"></image>
-            </view>
-          </swiper-item>
-        </swiper>
-        <s-select-mote />
-      </view>
-    </uni-swiper-dot>
+    <view class="uni-margin-wrap">
+      <!--    https://ext.dcloud.net.cn/plugin?id=22930-->
+      <hbxw-stack-carousel
+        @click="handleItemClick"
+        :interval="15000"
+        :list="state.info"
+        :width="430"
+        :height="680"
+        loop
+        :key="state.info"
+        indicatorStyle="line"
+        @change="handleChange"
+      >
+        <template #default="{ item, index }">
+          <view class="custom-item">
+            <image class="swiper-image" :src="item.image" mode="aspectFill" />
+          </view>
+        </template>
+      </hbxw-stack-carousel>
+      <s-select-mote />
+    </view>
     <uv-sticky :customNavHeight="0" :offset-top="0">
       <s-tabs />
     </uv-sticky>
     <s-grid-clothes />
-    <view class="height1"></view>
+    <view class="height1" @click="dian"></view>
   </view>
 </template>
 
@@ -36,26 +38,73 @@
   import SGridClothes from './components/s-grid-clothes.vue'; // 隐藏原生tabBar
 
   const fittingRoom = sheep.$store('fittingRoom');
+
   sheep.$helper.toast('请选择是否同意协议');
   // 隐藏原生tabBar
   uni.hideTabBar({
     fail: () => {},
   });
 
+  function handleItemClick(index, item) {
+    console.log(index, item, '12');
+  }
+
+  const carouselList = [
+    {
+      image: 'https://picsum.photos/600/300?random=1',
+    },
+    {
+      image: 'https://picsum.photos/600/300?random=2',
+    },
+    {
+      image: 'https://picsum.photos/600/300?random=3',
+    },
+    {
+      image: 'https://picsum.photos/600/300?random=4',
+    },
+    {
+      image: 'https://picsum.photos/600/300?random=5',
+    },
+  ];
+
   const state = reactive({
     info: [
       {
-        content: '内容 A',
+        image: 'https://picsum.photos/600/300?random=1',
       },
       {
-        content: '内容 B',
+        image: 'https://picsum.photos/600/300?random=2',
       },
       {
-        content: '内容 C',
-      },
+        image: 'https://picsum.photos/600/300?random=3',
+      }
     ],
     current: 0,
   });
+  function handleChange(index, oldIndex) {
+    // state.current = index;
+    console.log('---- change ----', index, oldIndex)
+  };
+
+  function dian() {
+    state.info = [
+      {
+        image: 'https://picsum.photos/600/300?random=1',
+      },
+      {
+        image: 'https://picsum.photos/600/300?random=2',
+      },
+      {
+        image: 'https://picsum.photos/600/300?random=3',
+      },
+      {
+        image: 'https://picsum.photos/600/300?random=4',
+      },
+      {
+        image: 'https://picsum.photos/600/300?random=5',
+      },
+    ]
+  }
   const swiperChange = (e) => {
     state.current = e.detail.current;
   };
@@ -102,6 +151,7 @@
 <style lang="scss" scoped>
   .uni-margin-wrap {
     width: 100%;
+    position: relative;
   }
 
   .swiper {
@@ -116,11 +166,31 @@
     background: #ffffff;
   }
 
-  .swiper-image {
+  .custom-item {
     width: 100%;
     height: 100%;
   }
 
+  .swiper-image {
+    width: 430rpx;
+    height: 680rpx;
+  }
+
+  .swiper-item-card {
+    //width: 92% !important;
+    height: 100%;
+    margin: 0 4%;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  .swiper-item-card-margin {
+    padding: 4% 0;
+  }
+
   .height1 {
     height: 2000px;
   }