hi-ucs/front/src/views/instructionManual/components/TheOverallProcess.vue

<template>
  <div class="TheOverallProcess">
    <div class="TheOverallProcess-title">
      <div class="TheOverallProcess-title-text">总体流程</div>
      <div class="TheOverallProcess-title-line"></div>
    </div>
    <div class="TheOverallProcess-content">
      <span class="neng-li-ji-shi">能力集市</span>
      <span class="neng-li-cha-yue">能力查阅</span>
      <span class="shen-he-fa-bu-xia-jia">审核发布/下架</span>
      <span class="shen-qing">申请</span>
      <span class="neng-li-shang-jia-xia-jia">能力上架/下架</span>
      <span class="shen-he">审核</span>
      <span class="xin-xv-qui-fa-bu">新需求发布</span>
      <span class="neng-li-gong-xiang-fang">能力共享方（区市委办局）</span>
      <span class="UCS-neng-li-gong-xiang-ping-tai">UCS-能力共享平台</span>
      <span class="neng-li-shi-yong-fang">能力使用方（区市委办局）</span>
      <span class="shen-he-fa-bu">审核发布</span>
      <span class="xiang-ying-ping-lun">响应评论</span>
      <span class="shen-he-ti-gong">审核提供</span>
      <span class="xv-qui-zhong-xin">需求中心</span>
      <span class="neng-li-shen-qing-liu-cheng">能力申请流程</span>
      <span class="neng-li-xv-qiu-liu-cheng">能力需求流程</span>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
  .TheOverallProcess {
    width: 100%;
    .TheOverallProcess-title {
      margin: 57px 0 24px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      .TheOverallProcess-title-text {
        font-size: 26px;
        line-height: 26px;
        margin-bottom: 20px;
      }
      .TheOverallProcess-title-line {
        width: 50px;
        height: 3px;
        background: #0058e1;
      }
    }
    .TheOverallProcess-content {
      height: 855px;
      background: url('~@/assets/menu/TheOverallProcess-bg.png');
      position: relative;
      & > span {
        position: absolute;
      }
      .neng-li-ji-shi {
        left: 50%;
        top: 155px;
        font-size: 18px;
        color: #fff;
        margin-left: -36px;
        margin-top: -9px;
      }
      .neng-li-cha-yue {
        top: 85px;
        right: 658px;
        font-size: 16px;
        color: #ffc183;
        margin-top: -8px;
        margin-right: -32px;
      }
      .shen-he-fa-bu-xia-jia {
        top: 232px;
        left: 810px;
        font-size: 16px;
        color: #c1b3ff;
        margin-top: -8px;
      }
      .shen-qing {
        right: 890px;
        top: 232px;
        font-size: 16px;
        margin-top: -8px;
        color: #ffc183;
      }
      .neng-li-shang-jia-xia-jia {
        top: 329px;
        left: 650px;
        font-size: 16px;
        color: #c1b3ff;
        margin-top: -8px;
      }
      .shen-he {
        left: 693px;
        bottom: 409px;
        font-size: 16px;
        margin-top: -8px;
        color: #ffc183;
      }
      .xin-xv-qui-fa-bu {
        right: 650px;
        bottom: 487px;
        font-size: 16px;
        margin-top: -8px;
        color: #85edff;
      }
      .neng-li-gong-xiang-fang {
        left: 350px;
        top: 442px;
        font-size: 18px;
        margin-top: -9px;
        color: #fff;
      }
      .UCS-neng-li-gong-xiang-ping-tai {
        top: 50%;
        left: 50%;
        font-size: 18px;
        color: #fff;
        margin-top: 15px;
        margin-left: -74px;
      }
      .neng-li-shi-yong-fang {
        top: 442px;
        right: 350px;
        font-size: 18px;
        margin-top: -9px;
        color: #fff;
      }
      .shen-he-fa-bu {
        bottom: 321px;
        right: 50%;
        font-size: 16px;
        margin-bottom: -8px;
        color: #85edff;
        margin-right: -77px;
      }
      .xiang-ying-ping-lun {
        bottom: 230px;
        left: 679px;
        font-size: 16px;
        color: #85edff;
      }
      .shen-he-ti-gong {
        left: 50%;
        bottom: 47px;
        font-size: 16px;
        margin-bottom: -8px;
        color: #ffc183;
        margin-left: -32px;
      }
      .xv-qui-zhong-xin {
        font-size: 18px;
        left: 50%;
        margin-left: -36px;
        bottom: 147px;
        color: #fff;
        margin-bottom: -9px;
      }
      .neng-li-shen-qing-liu-cheng {
        color: #fff;
        left: 125px;
        top: 64px;
      }
      .neng-li-xv-qiu-liu-cheng {
        color: #fff;
        left: 125px;
        top: 102px;
      }
    }
  }
</style>