tall3-pc-keti/src/components/tall/task/CheckSubjectProgress.vue

<template>
  <div class="task-progress flex flex-wrap justify-between">
    <div class="wrap overflow-hidden">
      <a-card title="任务目标">
        <div class="flex flex-wrap justify-center">
          <div class="achievements border-right text-center">
            <p class="num">1/6</p>
            <p class="name">论文</p>
          </div>
          <div class="achievements border-bottom text-center">
            <p class="num">1/6</p>
            <p class="name">专利</p>
          </div>
          <div class="achievements border-top text-center">
            <p class="num">1/6</p>
            <p class="name">软著</p>
          </div>
          <div class="achievements border-left text-center">
            <p class="num">1/6</p>
            <p class="name">会议</p>
          </div>
        </div>
      </a-card>
    </div>
    <div class="wrap overflow-hidden">
      <a-card title="概览">
        <div class="topic">
          <p>脑卒中远程康复与健康监护系统</p>
          <a-progress
            :percent="30"
            :strokeWidth="22"
            :show-info="false"
            :stroke-color="'#1890FF'"
            :trail-color="'rgba(24, 144, 255, 0.2)'"
          />
        </div>

        <div class="sub-topic flex justify-between flex-wrap">
          <div class="topic">
            <p>穿戴式运动捕获单元</p>
            <a-progress
              :percent="30"
              :strokeWidth="22"
              :show-info="false"
              :stroke-color="colorList[0].color"
              :trail-color="colorList[0].bgColor"
            />
          </div>

          <div class="topic">
            <p>穿戴式康复数据手套</p>
            <a-progress
              :percent="30"
              :strokeWidth="22"
              :show-info="false"
              :stroke-color="colorList[1].color"
              :trail-color="colorList[1].bgColor"
            />
          </div>
        </div>
      </a-card>
    </div>
    <div class="wrap overflow-hidden">
      <a-card title="穿戴式运动捕获单元">
        <div class="flex flex-wrap justify-center">
          <div class="achievements border-right text-center">
            <p class="num">1/6</p>
            <p class="name">论文</p>
          </div>
          <div class="achievements border-bottom text-center">
            <p class="num">1/6</p>
            <p class="name">专利</p>
          </div>
          <div class="achievements border-top text-center">
            <p class="num">1/6</p>
            <p class="name">软著</p>
          </div>
          <div class="achievements border-left text-center">
            <p class="num">1/6</p>
            <p class="name">会议</p>
          </div>
        </div>
      </a-card>
    </div>
    <div class="wrap overflow-hidden">
      <a-card title="穿戴式康复数据手套">
        <div class="flex flex-wrap justify-center">
          <div class="achievements border-right text-center">
            <p class="num">1/6</p>
            <p class="name">论文</p>
          </div>
          <div class="achievements border-bottom text-center">
            <p class="num">1/6</p>
            <p class="name">专利</p>
          </div>
          <div class="achievements border-top text-center">
            <p class="num">1/6</p>
            <p class="name">软著</p>
          </div>
          <div class="achievements border-left text-center">
            <p class="num">1/6</p>
            <p class="name">会议</p>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
// import { computed, watch, ref } from 'vue';
import { ref } from 'vue';

// import { useStore } from 'vuex';

// const store = useStore();

const colorList = ref([
  { color: '#FF9191', bgColor: 'rgba(255, 145, 145, 0.2)' },
  { color: '#FF934B', bgColor: 'rgba(255, 147, 75, 0.2)' },
]);
</script>

<style scoped>
.wrap {
  margin-top: 16px;
  width: calc((100% - 16px) / 2);
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #cccccc;
}

.wrap:nth-child(-n + 2) {
  margin-top: 0;
}

:deep(.ant-card-head) {
  padding: 0 16px;
  min-height: 45px;
  max-height: 45px;
  border-color: #cccccc;
  font-size: 14px;
}

:deep(.ant-card-head-title) {
  padding: 0;
  line-height: 45px;
}

.wrap .num {
  font-size: 22px;
  color: #4b8aff;
}

.wrap .name {
  color: #666666;
}

.wrap p {
  margin: 0;
}

.border-right {
  border-right: 1px solid #cccccc;
  margin-right: -1px;
}

.border-left {
  border-left: 1px solid #cccccc;
}

.border-top {
  border-top: 1px solid #cccccc;
  margin-top: -1px;
}

.border-bottom {
  border-bottom: 1px solid #cccccc;
}

.achievements {
  width: 40%;
  padding: 25px 0;
}

.topic p {
  margin-bottom: 8px;
  color: #666666;
}

.sub-topic .topic {
  margin-top: 40px;
  width: calc((100% - 32px) / 2);
}

.ant-card {
  height: 100%;
}

.ant-card :deep(.ant-card-body) {
  height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>