Quellcode durchsuchen

fix:修改步骤组件,放大效果和正常兄啊过

zlong vor 1 Jahr
Ursprung
Commit
c3021cfd1c
2 geänderte Dateien mit 38 neuen und 7 gelöschten Zeilen
  1. 37 6
      src/components/FeedStep.vue
  2. 1 1
      src/pages/feed-plan/index.vue

+ 37 - 6
src/components/FeedStep.vue

@@ -1,26 +1,57 @@
 <script setup lang="ts">
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   list: Array<{
     step: number
     title: string
   }>
-}>()
+  stage: number
+}>(), {
+  stage: -1,
+})
 </script>
 
 <template>
   <view v-for="(item, index) in props.list" :key="index">
     <view class="flex">
-      <view class="w-[21px] h-[21px] bg-[#999] rounded-xl flex items-center justify-center text-[white]">
+      <view class="flex items-center justify-center text-[white]" :class="props.stage === index ? 'step_select' : props.stage === -1 ? 'step' : 'step step_left' ">
         {{ item.step }}
       </view>
-      <view class="ml-1 text-[#999] font-pingfangsc font-normal tracking-[0.8px]">
+      <view class="ml-1 font-pingfangsc tracking-[0.8px]" :class="props.stage === index ? 'step_title_select' : props.stage === -1 ? '' : 'step_title' ">
         {{ item.title }}
       </view>
     </view>
-    <view v-if="index !== props.list.length - 1" class="w-[1px] h-[13px] bg-[#999] ml-2.5 mt-1 mb-1" />
+    <view v-if="index !== props.list.length - 1" class="w-[1px] h-[13px] bg-[#999] mt-1 mb-1 step_line" :class="props.stage === -1 ? 'step_line' : 'step_line_select' " />
   </view>
 </template>
 
 <style scoped>
-
+.step{
+  background: #999999;
+  width: 21px;
+  height: 21px;
+  border-radius: 30px;
+}
+.step_left{
+  margin-left: 3px;
+}
+.step_select{
+  background: #0052D9;
+  width: 27px;
+  height: 27px;
+  border-radius: 20px;
+}
+.step_title{
+  color: #999999;
+  font-size:16px;
+}
+.step_title_select{
+  color: #151515;
+  font-size: 20px;
+}
+.step_line{
+  margin-left: 10px;
+}
+.step_line_select{
+  margin-left: 13px;
+}
 </style>

+ 1 - 1
src/pages/feed-plan/index.vue

@@ -25,7 +25,7 @@ const stepInfo = ref<StepInfo[]>([
       <image :src="feedTitle" class="w-full h-full" />
     </view>
 
-    <view class="w-[127px] h-[121px] ml-15 mt-14">
+    <view class="h-[121px] ml-15 mt-14">
       <FeedStep :list="stepInfo" />
     </view>