feat(MineTask): 添加轮播图分页器

- 在标题栏添加分页器组件
- 实现分页器的动态显示和切换
- 优化轮播图样式，使其更加美观

src/views/Home/components/MineTask/Index.vue

@@ -1,31 +1,56 @@
 <script setup lang="ts">
 import QuestionList from './components/QuestionList.vue';
-
+import { ref } from 'vue';
+const active = ref(0);
+const total = ref(0);
 const surveys = defineModel('surveys', { required: true });
+function setActive(act, tol) {
+  active.value = act;
+  total.value = tol;
+}
 </script>
 
 <template>
   <div class="carousel-container">
     <div class="title">
       <span>我的任务</span>
+      <div class="carousel-indicators">
+        <i
+          v-for="(item, index) in total"
+          class="van-swipe__indicator"
+          :class="active === index ? 'van-swipe__indicator--active' : ''"
+        ></i>
+      </div>
+      <!--分页器。如果放置在swiper外面，需要自定义样式。-->
+    </div>
+    <div>
+      <van-swipe>
+        <van-swipe-item v-for="question in surveys" :key="question?.sn">
+          <question-list :survey="question" style="max-width: 100vw; overflow: hidden" />
+        </van-swipe-item>
+
+        <template #indicator="{ active, total }">
+          {{ setActive(active, total) }}
+        </template>
+      </van-swipe>
     </div>
-    <van-swipe>
-      <van-swipe-item v-for="question in surveys" :key="question?.sn">
-        <question-list :survey="question" style="max-width: 100vw; overflow: hidden" />
-      </van-swipe-item>
-    </van-swipe>
   </div>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/css/theme';
-
+.carousel-indicators {
+  position: relative;
+  display: flex;
+  transform: translate(-50%);
+}
 .carousel-container {
   background-color: #fff;
   overflow: hidden;
   margin-top: theme.$gap;
   border-radius: theme.$card-radius;
   padding: 10px;
+  position: relative;
 
   .title {
     color: black;
@@ -33,6 +58,9 @@ const surveys = defineModel('surveys', { required: true });
     font-family: PingFangSC-Heavy;
     font-weight: 900;
     line-height: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .carousel-item {