kuailelunwen_new_houtai/src/views/Register.vue

<template>
  <div class="register-wrap min-width">
    <!-- 顶部提示语 -->
    <div class="register-top">
      <div class="register-top-left">
        <img src="@/assets/register/register-top-left.svg" alt="">
        <span>设置完这些信息就可以正式售卖啦，也可以选择跳过，先进入后台看看哦 </span>
      </div>
      <div class="register-top-right">
        <img src="@/assets/register/register-top-close.svg" alt="">
      </div>
    </div>
    <!-- 步骤条 -->
    <el-steps :active="activeStep" finish-status="success">
      <el-step title="步骤 1">
        <template #icon>
          <img src="@/assets/register/step1_ing.svg" alt="icon1" class="custom-icon" />
          <!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> -->
        </template>
        <div>
          <span>基础信息</span>
          <span>填写站点信息、选择模板样式</span>
        </div>
      </el-step>
      <el-step title="步骤 2">
        <template #icon>
          <!-- <img src="@/assets/register/step2_ing.svg" alt="icon1" class="custom-icon" /> -->
          <img src="@/assets/register/step2_null.svg" alt="icon2" class="custom-icon" />
          <!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> -->
        </template>
        <div>
          <span>基础信息</span>
          <span>填写站点信息、选择模板样式</span>
        </div>
      </el-step>
      <el-step title="步骤 3">
        <template #icon>
          <!-- <img src="@/assets/register/step3_ing.svg" alt="icon1" class="custom-icon" /> -->
          <img src="@/assets/register/step3_null.svg" alt="icon3" class="custom-icon" />
          <!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> -->
        </template>
        <div>
          <span>基础信息</span>
          <span>填写站点信息、选择模板样式</span>
        </div>
      </el-step>
    </el-steps>

    <el-steps :active="activeStep" finish-status="success">
      <el-step v-for="(step, index) in steps" :key="index" :status="getStepStatus(index)">
        <!-- 自定义图标插槽 -->
        <template #icon>
          <div class="custom-icon">
            <!-- 填写完毕状态 -->
            <img v-if="isStepFinished(index)" src="@/assets/register/step1_ing.svg" alt="checked"
              style="width: 24px; height: 24px" />
            <!-- 填写中状态 -->
            <img v-else-if="isStepActive(index)" :src="step.checked" alt="editing"
              style="width: 24px; height: 24px" />
            <!-- 未填写状态 -->
            <img v-else :src="step.wait" alt="waiting" style="width: 24px; height: 24px" />
          </div>
        </template>

        <!-- 自定义文案插槽 -->
        <template #title>
          <div class="step-title">
            <span>{{ step.title }}</span>
            <div class="step-status">
              {{ getStepStatusText(index) }}
            </div>
          </div>
        </template>
      </el-step>
    </el-steps>

    <p class="pageDesc">搭建售卖渠道</p>

    <div class="step3-wrap">
        <div class="step3-top">
          <h3>服务列表</h3>
          <div class="btngroup">
            <GuipButton type="mild" size="mmedium">添加查重服务</GuipButton>
            <GuipButton type="mild" size="mmedium">添加写作辅助</GuipButton>
            <GuipButton type="mild" size="mmedium">添加AIGC</GuipButton>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import GuipButton from '@/components/GuipButton.vue';

export default {
  data() {
    return {
      activeStep: 0,
      steps: [
        { title: "步骤 1", 'desc': '', 'wait': '@/assets/register/step1_ing.svg', 'checked': '@/assets/register/step1_ing.svg', 'finish': '@/assets/register/step_success.svg' },
        { title: "步骤 2", 'desc': '', 'wait': '@/assets/register/step2_null.svg', 'checked': '@/assets/register/step2_ing.svg', 'finish': '@/assets/register/step_success.svg' },
        { title: "步骤 3", 'desc': '', 'wait': '@/assets/register/step3_null.svg', 'checked': '@/assets/register/step3_ing.svg', 'finish': '@/assets/register/step_success.svg' }
      ]
    };
  },
  components:{
    GuipButton,
  },
  methods: {
    // nextStep() {
    //   if (this.activeStep < 2) {
    //     this.activeStep++;
    //   }
    // },
    // 上一步
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    },
    // 下一步
    nextStep() {
      if (this.activeStep < this.steps.length - 1) {
        this.activeStep++;
      }
    },
    // 判断步骤是否已完成
    isStepFinished(index) {
      return index < this.activeStep;
    },
    // 判断步骤是否为当前步骤（填写中）
    isStepActive(index) {
      return index === this.activeStep;
    },
    // 获取步骤状态
    getStepStatus(index) {
      if (this.isStepFinished(index)) {
        return "success"; // 已完成
      } else if (this.isStepActive(index)) {
        return "process"; // 进行中
      } else {
        return "wait"; // 未开始
      }
    },
    // 获取步骤状态文案
    getStepStatusText(index) {
      if (this.isStepFinished(index)) {
        return "已完成";
      } else if (this.isStepActive(index)) {
        return "填写中";
      } else {
        return "未开始";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.width-box{
  width: 1220px;
}
@media (min-width: 1441px) {
  .width-box{
    width: 1220px;
  }
}
@media  (max-width:1200px) {
  .width-box{
    width: 1100px;
  }
    
}

.custom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-status {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.register-wrap {
  .custom-icon {
    width: 24px;
    height: 24px;
  }

  .register-top {
    display: flex;
    justify-content: space-between;
    // height: 72px;
    align-items: center;
    padding: 20px 40px 20px 110px;
    background: linear-gradient(270deg, #F6EEF7 3%, #EDE9FB 97%);
    color: #23242B;
    letter-spacing: 0.08em;
    line-height: 32px;

    .register-top-left {
      display: flex;
      align-items: center;

      .register-top-left img {
        margin-right: 12px;
      }
    }
  }

  .pageDesc {
    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 24px 110px;
    line-height: 32px;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 0.06em;
    color: #1E2226;
    text-align: left;

  }
  .step3-wrap{
    .step3-top{
      display: flex;
      justify-content: space-between;
      .btngroup{
        display: flex;
        button{
          margin-left: 12px;
        }
      }
    }
  }

}
</style>