记流程图样式

<!-- 进度 -->
<template>
  <div class="boxs">
    <ul>
      <!-- <template v-if="examData"> -->
      <li :class="examNum == 0 && 'active'">
        <div class="process-item" @click="examNum = 0">
          <el-icon><LocationInformation /></el-icon>
          <div>制定课程大纲</div>
        </div>
      </li>
      <li>
        <div class="process-item divider">
          <el-divider border-style="dashed" />
        </div>
      </li>
      <li :class="examNum == 1 && 'active'">
        <div class="process-item" @click="examNum = 1">
          <i class="iconfont">&#xe61f;</i>
          <div>制定培养方案</div>
        </div>
      </li>
      <li>
        <div class="process-item divider">
          <el-divider border-style="dashed" />
        </div>
      </li>
      <li :class="examNum == 2 && 'active'">
        <div class="process-item" @click="examNum = 2">
          <i class="iconfont">&#xe67a;</i>
          <div>撰写申请书</div>
        </div>
      </li>
      <li>
        <div class="process-item divider">
          <el-divider border-style="dashed" />
        </div>
      </li>
      <li :class="examNum == 3 && 'active'">
        <div class="process-item" @click="examNum = 3">
          <i class="iconfont">&#xe647;</i>
          <div>提交申请书</div>
        </div>
      </li>
      <li>
        <div class="process-item divider">
          <el-divider border-style="dashed" />
        </div>
      </li>
      <li :class="examNum == 4 && 'active'">
        <div class="process-item" @click="examNum = 4">
          <i class="iconfont">&#xe6a8;</i>
          <div>撰写自评报告</div>
        </div>
      </li>
    </ul>
    <ul class="end">
      <li>
        <div class="process-item divider">
          <el-divider direction="vertical" border-style="dashed" />
        </div>
      </li>
    </ul>
    <ul>
      <li :class="examNum == 9 && 'active'">
        <div class="process-item" @click="examNum = 9">
          <i class="iconfont">&#xe647;</i>
          <div>提交持续改进报告</div>
        </div>
      </li>
      <li>
        <div class="process-item divider">
          <el-divider border-style="dashed" />
        </div>
      </li>
      <li :class="examNum == 8 && 'active'">
        <div class="process-item" @click="examNum = 8">
          <i class="iconfont">&#xe604;</i>
          <div>填写持续改进报告</div>
        </div>
      </li>
      <li>
        <div class="process-item divider">
          <el-divider border-style="dashed" />
        </div>
      </li>
      <li :class="examNum == 7 && 'active'">
        <div class="process-item" @click="examNum = 7">
          <i class="iconfont">&#xe7c4;</i>
          <div>上传审查报告</div>
        </div>
      </li>
      <li>
        <div class="process-item divider">
          <el-divider border-style="dashed" />
        </div>
      </li>
      <li :class="examNum == 6 && 'active'">
        <div class="process-item" @click="examNum = 6">
          <i class="iconfont">&#xe621;</i>
          <div>现场考察</div>
        </div>
      </li>
      <li>
        <div class="process-item divider">
          <el-divider border-style="dashed" />
        </div>
      </li>
      <li :class="examNum == 5 && 'active'">
        <div class="process-item" @click="examNum = 5">
          <i class="iconfont">&#xe647;</i>
          <div>提交自评报告</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from "vue";
import { LocationInformation } from "@element-plus/icons-vue";
const props = defineProps({
  examData: Object,
});
const examNum = ref(0);
defineExpose({ examNum });
</script>

<style lang="scss" scoped>
.boxs {
  // width: 100%;
  padding: 40px;
  margin-right: 40px;
  overflow-x: scroll;
}

ul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1196px;
  //   height: 230px;
  //   padding: 70px 35px 40px;
  margin: 0 auto;

  li {
    position: relative;

    .process-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 164px;
      height: 100px;
      //   font-size: 18px;
      //   font-weight: 600;
      color: var(--el-color-primary);
      background: rgba(32, 109, 230, 0.02);
      border-radius: 4px;
      border: 2px solid var(--el-color-primary);

      .iconfont {
        font-size: 30px;
        margin-bottom: 10px;
      }
    }

    .corrent-task-btn {
      position: absolute;
      right: 0;
      top: -34px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 30px;
      font-weight: 600;
      color: var(--el-color-primary);
      background: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(185, 185, 185, 0.5);
      border-radius: 4px;
      cursor: pointer;
    }

    &:not(:last-child) {
      //   margin-right: 130px;
    }
    .divider {
      border: none;
      background-color: #fff;
    }
    .el-divider--vertical {
      height: 100%;
      border-left: 2px var(--el-color-primary) var(--el-border-style);
    }
    .el-divider {
      border-top: 2px var(--el-color-primary) var(--el-border-style);
    }

    &.active {
      .process-item {
        color: #fff;
        background: var(--el-color-primary)
          url("~@/assets/images/exam-manage/exam-bg.png");
        background-size: 100% 100%;
        cursor: pointer;
      }
    }

    &.error {
      .process-item {
        color: #e54545;
        border-color: #e54545;
        cursor: pointer;
      }
    }
  }
}
</style>