feat：测试

src/views/activity/recruitment/components/sign/index.vue

@@ -17,12 +17,11 @@ const columns = [
 
 
 // 进度条
 // 进度条
 const stages = [
 const stages = [
-    { label: '試合作', value: 33.33, time: "15天" },
-    { label: '中期合作', value: 66.66, time: "180天或收穫200w螢火" },
-    { label: '長期合作', value: 100, time: "365天" }
+    { label: '試合作', time: "15天" },
+    { label: '中期合作', time: "180天或收穫200w螢火" },
+    { label: '長期合作', time: "365天" }
 ];
 ];
 const stageIndex = ref(0)
 const stageIndex = ref(0)
-const currentProgress = ref(33.33); // 默认显示第一阶段
 
 
 const onConfirm = ({ selectedValues }: any) => {
 const onConfirm = ({ selectedValues }: any) => {
     formData.value.platform = selectedValues;
     formData.value.platform = selectedValues;
@@ -52,12 +51,13 @@ const onSubmit = async () => {
                 <div class="text-content">
                 <div class="text-content">
                     <div class="stage-progress">
                     <div class="stage-progress">
                         <div class="progress-bar">
                         <div class="progress-bar">
-                            <div class="progress-fill" :style="{ width: currentProgress + '%' }"></div>
+                            <div class="progress-fill" :style="{ left: `${stageIndex * 33.33}%` }">
+                            </div>
                         </div>
                         </div>
                         <div class="progress-markers">
                         <div class="progress-markers">
                             <div class="marker" v-for="(stage, index) in stages" :key="index">
                             <div class="marker" v-for="(stage, index) in stages" :key="index">
-                                <img src="../../image/down.png" alt="">
-                                <span class="active">{{ stage.label }}</span>
+                                <img v-show="stageIndex === index" src="../../image/down.png" alt="">
+                                <span :class="{ active: stageIndex === index }">{{ stage.label }}</span>
                             </div>
                             </div>
                         </div>
                         </div>
                     </div>
                     </div>
@@ -387,6 +387,7 @@ const onSubmit = async () => {
 
 
                     .progress-fill {
                     .progress-fill {
                         height: 19px;
                         height: 19px;
+                        width: 33.33%;
                         background-color: #49FFC2;
                         background-color: #49FFC2;
                         border-radius: 14px;
                         border-radius: 14px;
                         transition: width 0.3s ease;
                         transition: width 0.3s ease;
@@ -410,7 +411,7 @@ const onSubmit = async () => {
 
 
                     .progress-markers {
                     .progress-markers {
                         display: flex;
                         display: flex;
-                        justify-content: space-between;
+                        gap: 55px;
                         color: rgba(255, 255, 255, 0.5);
                         color: rgba(255, 255, 255, 0.5);
                         font-size: 26px;
                         font-size: 26px;
                         font-family: PingFang SC;
                         font-family: PingFang SC;
@@ -419,10 +420,12 @@ const onSubmit = async () => {
                         .marker {
                         .marker {
                             position: relative;
                             position: relative;
                             padding-top: 2px;
                             padding-top: 2px;
-                            padding-left: 53px;
+                            padding-left: 43px;
                             display: flex;
                             display: flex;
                             flex-direction: column;
                             flex-direction: column;
                             align-items: center;
                             align-items: center;
+                            min-height: 56px;
+                            justify-content: center;
 
 
                             img {
                             img {
                                 width: 18px;
                                 width: 18px;