Commit d8b62bba by kaisa

feat:测试

parent 2b2ac9d9
......@@ -17,12 +17,11 @@ const columns = [
// 进度条
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 currentProgress = ref(33.33); // 默认显示第一阶段
const onConfirm = ({ selectedValues }: any) => {
formData.value.platform = selectedValues;
......@@ -52,12 +51,13 @@ const onSubmit = async () => {
<div class="text-content">
<div class="stage-progress">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: currentProgress + '%' }"></div>
<div class="progress-fill" :style="{ left: `${stageIndex * 33.33}%` }">
</div>
</div>
<div class="progress-markers">
<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>
......@@ -387,6 +387,7 @@ const onSubmit = async () => {
.progress-fill {
height: 19px;
width: 33.33%;
background-color: #49FFC2;
border-radius: 14px;
transition: width 0.3s ease;
......@@ -410,7 +411,7 @@ const onSubmit = async () => {
.progress-markers {
display: flex;
justify-content: space-between;
gap: 55px;
color: rgba(255, 255, 255, 0.5);
font-size: 26px;
font-family: PingFang SC;
......@@ -419,10 +420,12 @@ const onSubmit = async () => {
.marker {
position: relative;
padding-top: 2px;
padding-left: 53px;
padding-left: 43px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 56px;
justify-content: center;
img {
width: 18px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment