slibra-module-web/src/views/carbon/components/BaseStep.vue

<script setup>
import BaseCard from './BaseCard.vue';

const stepsData = [
  { title: '基础信息', subTtile: '碳排放管理基础信息填写', color: '#2454FF' },
  { title: '污水处理', subTtile: '生化反应碳排', color: '#24CCFF' },
  { title: '水厂', subTtile: '能源、药剂碳排', color: '#7969F9' },
  { title: '污泥处理', subTtile: '生化反应总碳排', color: '#3FC56E' },
  { title: '替碳、碳汇', subTtile: '替碳、碳汇基础信息填写', color: '#F59B14' },
]

</script>
<template>
  <div class="steps-list">
    <div class="steps-item" v-for="item, index in stepsData" :key="index">
      <p class="steps-title space-x-[6px]">
        <span class="num" :style="{ color: item.color }">{{ '0' + (index + 1) }}</span>
        <span class="title">{{ item.title }}</span>
      </p>
      <p class="steps-subtitle">{{ item.subTtile }}</p>
      <p class="line" :style="{ background: item.color }"></p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.steps-list {
  @include flex(x, center, between);

  .steps-item {
    position: relative;
    width: 214px;
    height: 84px;
    padding: 14px 26px;
    border: 1px dashed #E6EAEE;
    border-radius: 8px;
    background: #fff;

    .steps-title {
      padding-bottom: 6px;
      margin-bottom: 6px;
      border-bottom: 1px solid #EEEEEE;
      font-size: 18px;
      line-height: 24px;
      font-weight: bold;
    }

    .steps-subtitle {
      font-size: 12px;
      line-height: 14px;
      color: #9E9E9E;
    }

    .line {
      position: absolute;
      top: 0px;
      left: 24px;
      width: 18px;
      height: 2px;
      gap: 0px;
      border-radius: 0px 0px 1px 1px;
    }

    &:not(:last-child) {
      &::after {
        content: ' ';
        position: absolute;
        top: 50%;
        right: -15px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 100%;
        border: 1px solid #fff;
        position: absolute;
        box-shadow: 0px 3px 6px 0px #C6C6C640;
        background: #F4F4F4 url("@/assets/svgs/tool/setp-arrow-right.svg") center center no-repeat;
        z-index: 10;
      }
    }
  }
}
</style>