<template>
  <div class="pathmap">
    <TitleHead text="中级产品经理"></TitleHead>
    <div class="main">
      <div class="title">
        <div class="course">
          <div style="width: 100%">
            <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="top" >
              <el-tab-pane label="课程公告" name="first">
                <div class="work">
                  <div class="question">
                    请各位选课的同学提前阅读本课程的“教学大纲与计划”
                    “课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组<br />
                    每位同学在网上学习的活动轨迹都会自动被系统记录,将作为大家个人线上参与的评价依据；<br />
                    请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="共享文档" name="second" >
                <div
                  v-for="(el, index) in enclosure"
                  :key="el.id"
                  class="enclosure"
                  :style="{
                    'border-bottom':
                      index === enclosure.length - 1
                        ? null
                        : '0px solid rgba(56, 125, 247, 0.2)',
                  }"
                >
                  <div class="enclosureL">
                    <img style="width: 19.5px; height: 22px" :src="el.img" />
                    <div style="margin-left: 15px">{{ el.name }}</div>
                  </div>
                  <div class="download">
                    <img
                      style="width: 13px; height: 12px"
                      src="../../assets/image/faceteach/download.png"
                    />
                    <div style="margin-left: 2.5px">下载</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="messaeg">
        <div class="mani">
          <div class="uptitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">个人信息</div>
              <div class="box"></div>
            </div>
          </div>
          <div class="information">
            <div class="photo"></div>
            <div class="description">
              <span class="text1">乐晓琪（显示事业）</span>
              <span class="text2">真正的陪伴经得起坎坷，经得起平淡。</span>
            </div>
          </div>
          <div class="downtitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">学习进度</div>
              <div class="box"></div>
            </div>
          </div>
          <div class="speed">
            <span class="text3">上次学到：启航班 - 领导寄语</span>
            <button class="btn">去上课</button>
          </div>
          <div class="progress">
            <div class="total">
              <div class="total_part">
                <span class="text4">总进度</span> <span class="text5">32%</span>
              </div>
              <div class="progress">
                <div class="progress_part"></div>
              </div>
            </div>
            <div class="compulsory">
              <div class="compulsory_part">
                <span class="text6">必修进度</span>
                <span class="text7">10%</span>
              </div>
              <div class="progress1">
                <div class="progress1_part"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="course1">
        <div class="course1_box">
          <div class="course1_first">
            <div class="text8">序：产品经理从初级到中级</div>
            <div class="course1_right">
              <div class="circular"></div>
              <div class="text9">进行中</div>
            </div>
          </div>
          <div class="course1_second">
            <div class="course1_part">
              <span class="text6">当前进度</span>
              <span class="text7">70%</span>
            </div>
            <div class="progress2">
              <div class="progress2_part"></div>
            </div>
          </div>
          <div class="course1_threed">
            <div class="explain_up">人工智能启蒙讲解（上）</div>
            <div class="explain_up_part">
              <div class="tag4">#通用力</div>
              <div class="tag2">#前沿趋势</div>
              <div class="tag1">必修</div>
              <div class="tag3">在线</div>
              <button class="btn1">去上课</button>
            </div>
          </div>
          <div class="course1_fourth">
            <div class="course1_part">
              <span class="text6">当前进度</span>
              <span class="text7">0%</span>
            </div>
            <div class="progress3">
              <div class="progress3_part"></div>
            </div>
          </div>
          <div class="course1_fifth">
            <div class="explain_down">人工智能启蒙讲解（下）</div>
            <div class="explain_down_part">
              <div class="tag4">#通用力</div>
              <div class="tag2">#前沿趋势</div>
              <div class="tag1">必修</div>
              <div class="tag3">考试</div>
              <div class="status"></div>
            </div>
          </div>
          <div class="course2_first">
            <div class="text8">第一讲：中级产品经理的思考逻辑</div>
            <div class="course2_right">
              <div class="circular"></div>
              <div class="text9">未开始</div>
            </div>
          </div>
          <div class="course2_second">
            <div class="explain_down">
              趣味课前小测 - MBTI测试：你适合做哪个方向？
            </div>
            <div class="explain_down_part">
              <div class="tag1">选修</div>
              <div class="tag3">测评</div>
              <div class="status"></div>
            </div>
          </div>
          <div class="course2_threed">
            <div class="explain_down">
              建立中级产品经理思考逻辑：脱离初级产品的必要条件
            </div>
            <div class="explain_down_part">
              <div class="tag1">必修</div>
              <div class="tag3">外部链接</div>
              <div class="status"></div>
            </div>
          </div>
          <div class="course3_first">
            <div class="text8">第二讲：模块化产品展示</div>
            <div class="course2_right">
              <div class="circular"></div>
              <div class="text9">未开始</div>
            </div>
          </div>
          <div class="course2_threed">
            <div class="explain_down">
              模块化产品展示相关案例与展示：如何自由组合你的思考？
            </div>
            <div class="explain_down_part">
              <div class="tag1">必修</div>
              <div class="tag3">测评</div>
              <div class="status"></div>
            </div>
          </div>
          <div class="course2_threed">
            <div class="explain_down">社交产品如何做好模块化处理？</div>
            <div class="explain_down_part">
              <div class="tag1">必修</div>
              <div class="tag3">测评</div>
              <div class="status"></div>
            </div>
          </div>
          <div class="course2_second">
            <div class="explain_down">
              微信与Telegram哪个平台的功能模块化做的最好？
            </div>
            <div class="explain_down_part">
              <div class="tag1">选修</div>
              <div class="tag3">测评</div>
              <div class="status"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import TitleHead from "@/components/TitleHead.vue";
export default {
  name: "PathmapPage",
  components: {
    TitleHead,
  },
  setup() {
    const state = reactive({
      activeName: "second",
      enclosure: [
        {
          id: 1,
          name: "项目参考文档.doc",
          img: require("../../assets/image/file/word.png"),
        },
        {
          id: 2,
          name: "人工智能启蒙讲解讲义.pptx",
          img: require("../../assets/image/file/ppt.png"),
        },
        {
          id: 3,
          name: "中级产品经理必备工具.pdf",
          img: require("../../assets/image/file/pdf.png"),
        },
        {
          id: 4,
          name: "Python学习入门讲义.zip",
          img: require("../../assets/image/file/zip.png"),
        },
        {
          id: 5,
          name: "Axure RP10更新内容.md",
          img: require("../../assets/image/file/md.png"),
        },
      ],
    });
    const handleClick = (tab, event) => {
      console.log(tab, event);
    };
    return {
      ...toRefs(state),
      handleClick,
    };
  },
};
</script>

<style lang="scss">
.pathmap {
  width: 100%;
  .main {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: -14.5px;
    .course1 {
      width: 90%;
      height: 830px;
      margin-top: 10px;
      margin-bottom: 27.5px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: center;
      .course1_box {
        display: flex;
        flex-direction: column;
        justify-content: content;
        width: 90%;
        margin-top: 18.5px;
        //background-color: pink;
        .course3_first {
          width: 105%;
          margin-left: -7px;
          height: 35px;
          display: flex;
          justify-content: content;
          margin-top: 18.5px;
          background-color: #f9f9f9;
          .text8 {
            display: flex;
            flex: 1;
            margin-top: 11px;
            margin-left: 10.5px;
            margin-bottom: 10.5px;
            height: 13.5px;
            font-size: 14px;
            font-weight: 600;
            color: #333330;
          }
          .course2_right {
            display: flex;
            position: relative;
            width: 60px;
            height: 13.5px;
            margin-top: 15px;
            // margin-right: 10.5px;
            .circular {
              position: absolute;
              top: 1px;
              left: 1px;
              width: 8.5px;
              height: 8.5px;
              border-radius: 7px;
              border: 1px solid #666666;
            }
            .text9 {
              display: flex;
              justify-content: content;
              position: absolute;
              width: 40px;
              height: 13.5px;
              top: 0;
              left: 20px;
              line-height: 13.5px;
              color: #666666;
              font-size: 13px;
              font-weight: 600;
            }
          }
        }
        .course2_threed {
          display: flex;
          position: relative;
          margin-top: 12px;
          width: 100%;
          height: 68.8px;
          .explain_down {
            position: absolute;
            display: flex;
            width: 100%;
            height: 12.5px;
            color: #333330;
            font-size: 13px;
            font-weight: 400;
            line-height: 24px;
          }
          .explain_down_part {
            position: absolute;
            width: 100%;
            height: 52.3px;
            margin-top: 16.5px;
            .tag1 {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 64px;
              height: 20.8px;
              border: 1px solid #51c6e6;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              color: #51c6e6;
            }
            .tag3 {
              position: absolute;
              left: 73.5px;
              bottom: 0;
              height: 20.8px;
              border: 1px solid #7f96ed;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              color: #7f96ed;
              padding-left: 19px;
              padding-right: 19px;
            }
            .status {
              position: absolute;
              top: 5px;
              right: 11.5px;
              width: 49.5px;
              height: 49px;
              background-image: url(../../assets/image/pathmap/nostart.png);
            }
          }
        }
        .course2_second {
          display: flex;
          position: relative;
          margin-top: 12px;
          width: 100%;
          height: 68.8px;
          .explain_down {
            position: absolute;
            display: flex;
            width: 100%;
            height: 12.5px;
            color: #333330;
            font-size: 13px;
            font-weight: 400;
            line-height: 24px;
          }
          .explain_down_part {
            position: absolute;
            width: 100%;
            height: 52.3px;
            margin-top: 16.5px;
            .tag1 {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 64px;
              height: 20.8px;
              border: 1px solid #cd7fed;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              color: #cd7fed;
            }
            .tag3 {
              position: absolute;
              left: 73.5px;
              bottom: 0;
              height: 20.8px;
              border: 1px solid #7f96ed;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              color: #7f96ed;
              padding-left: 19px;
              padding-right: 19px;
            }
            .status {
              position: absolute;
              top: 5px;
              right: 11.5px;
              width: 49.5px;
              height: 49px;
              background-image: url(../../assets/image/pathmap/nostart.png);
            }
          }
        }
        .course2_first {
          width: 105%;
          margin-left: -7px;
          height: 35px;
          display: flex;
          justify-content: content;
          margin-top: 18.5px;
          background-color: #f9f9f9;
          .text8 {
            display: flex;
            flex: 1;
            margin-top: 11px;
            margin-left: 10.5px;
            margin-bottom: 10.5px;
            height: 13.5px;
            font-size: 14px;
            font-weight: 600;
            color: #333330;
          }
          .course2_right {
            display: flex;
            position: relative;
            width: 60px;
            height: 13.5px;
            margin-top: 15px;
            // margin-right: 10.5px;
            .circular {
              position: absolute;
              top: 1px;
              left: 1px;
              width: 8.5px;
              height: 8.5px;
              border-radius: 7px;
              border: 1px solid #666666;
            }
            .text9 {
              display: flex;
              justify-content: content;
              position: absolute;
              width: 40px;
              height: 13.5px;
              top: 0;
              left: 20px;
              line-height: 13.5px;
              color: #666666;
              font-size: 13px;
              font-weight: 600;
            }
          }
        }
        .course1_fifth {
          display: flex;
          position: relative;
          margin-top: 12px;
          width: 100%;
          height: 68.8px;
          .explain_down {
            position: absolute;
            width: 100%;
            height: 12.5px;
            color: #333330;
            font-size: 13px;
            font-weight: 400;
            line-height: 12.5px;
          }
          .explain_down_part {
            position: absolute;
            width: 100%;
            height: 52.3px;
            margin-top: 16.5px;
            .tag4 {
              position: absolute;
              top: 0;
              left: 0;
              padding-left: 7.5px;
              //padding-right: 12px;
              height: 15.8px;
              border: 1px solid rgba(255, 185, 109, 1);
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              font-weight: 500;
              color: rgba(255, 185, 109, 1);
            }
            .tag2 {
              position: absolute;
              top: 0;
              left: 69px;
              padding-left: 7.5px;
              padding-right: 6.5px;
              width: 62px;
              height: 15.8px;
              border: 1px solid rgba(255, 185, 109, 1);
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              font-weight: 500;
              color: rgba(255, 185, 109, 1);
            }
            .tag1 {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 64px;
              height: 20.8px;
              border: 1px solid #51c6e6;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              color: #51c6e6;
            }
            .tag3 {
              position: absolute;
              left: 73.5px;
              bottom: 0;
              height: 20.8px;
              border: 1px solid #7f96ed;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              color: #7f96ed;
              padding-left: 19px;
              padding-right: 19px;
            }
            .status {
              position: absolute;
              top: 5px;
              right: 11.5px;
              width: 49.5px;
              height: 49px;
              background-image: url(../../assets/image/pathmap/nostart.png);
            }
          }
        }
        .course1_fourth {
          display: flex;
          position: relative;
          margin-top: 11.5px;
          width: 100%;
          height: 29px;
          .course1_part {
            position: absolute;
            top: 0;
            left: 0;
            margin-bottom: 10px;
            width: 100%;
            height: 12.5px;
            .text6 {
              width: 38.5px;
              height: 12.5px;
              font-size: 12px;
              // line-height: 30.29px;
              color: #677d86;
            }
            .text7 {
              position: absolute;
              right: 0;
              width: 25px;
              height: 9.5px;
              font-size: 12px;
              // line-height: 30.29px;
              color: #277aff;
            }
          }
          .progress3 {
            position: absolute;
            width: 100%;
            height: 6.4px;
            margin-top: 20px;
            background-color: #e8f1fe;
            border-radius: 2px;
            .progress3_part {
              width: 0%;
              height: 6.4px;
              border-radius: 2px;
              background: linear-gradient(
                -180deg,
                rgba(36, 120, 255, 1),
                rgba(80, 147, 255, 1)
              );
            }
          }
        }
        .course1_threed {
          display: flex;
          position: relative;
          margin-top: 12px;
          width: 100%;
          height: 68.8px;
          .explain_up {
            position: absolute;
            width: 100%;
            height: 12.5px;
            color: #333330;
            font-size: 13px;
            font-weight: 400;
            line-height: 12.5px;
          }
          .explain_up_part {
            position: absolute;
            width: 100%;
            height: 52.3px;
            margin-top: 16.5px;
            .tag4 {
              position: absolute;
              top: 0;
              left: 0;
              padding-left: 7.5px;
              //padding-right: 12px;
              height: 15.8px;
              border: 1px solid rgba(255, 185, 109, 1);
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              font-weight: 500;
              color: rgba(255, 185, 109, 1);
            }
            .tag2 {
              position: absolute;
              top: 0;
              left: 69px;
              padding-left: 7.5px;
              padding-right: 6.5px;
              width: 62px;
              height: 15.8px;
              border: 1px solid rgba(255, 185, 109, 1);
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              font-weight: 500;
              color: rgba(255, 185, 109, 1);
            }
            .tag1 {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 64px;
              height: 20.8px;
              border: 1px solid #51c6e6;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              color: #51c6e6;
            }
            .tag3 {
              position: absolute;
              left: 73.5px;
              bottom: 0;
              height: 20.8px;
              border: 1px solid #7f96ed;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              color: #7f96ed;
              padding-left: 19px;
              //padding-right: 25px;
            }
            .btn1 {
              position: absolute;
              top: 2px;
              right: 2px;
              width: 73px;
              height: 28px;
              font-size: 13px;
              line-height: 28px;
              color: #ffffff;
              font-weight: 400;
              border: 0.5px solid #2478ff;
              border-radius: 2px;
              background-color: #2478ff;
            }
          }
        }
        .course1_second {
          display: flex;
          position: relative;
          margin-top: 11.5px;
          width: 100%;
          height: 29px;
          .course1_part {
            position: absolute;
            top: 0;
            left: 0;
            margin-bottom: 10px;
            width: 100%;
            height: 12.5px;
            .text6 {
              width: 38.5px;
              height: 12.5px;
              font-size: 12px;
              // line-height: 30.29px;
              color: #677d86;
            }
            .text7 {
              position: absolute;
              right: 0;
              width: 25px;
              height: 9.5px;
              font-size: 12px;
              // line-height: 30.29px;
              color: #277aff;
            }
          }
          .progress2 {
            position: absolute;
            width: 100%;
            height: 6.4px;
            margin-top: 20px;
            background-color: #e8f1fe;
            border-radius: 2px;
            .progress2_part {
              width: 70%;
              height: 6.4px;
              border-radius: 2px;
              background: linear-gradient(
                -180deg,
                rgba(36, 120, 255, 1),
                rgba(80, 147, 255, 1)
              );
            }
          }
        }
        .course1_first {
          width: 105%;
          margin-left: -7px;
          height: 35px;
          display: flex;
          justify-content: content;
          background-color: #f9f9f9;
          .text8 {
            display: flex;
            flex: 1;
            margin-top: 11px;
            margin-left: 10.5px;
            margin-bottom: 10.5px;
            height: 13.5px;
            font-size: 14px;
            font-weight: 600;
            color: #333330;
          }
          .course1_right {
            display: flex;
            position: relative;
            width: 60px;
            height: 13.5px;
            margin-top: 15px;
            // margin-right: 10.5px;
            .circular {
              position: absolute;
              top: 1px;
              left: 1px;
              width: 8.5px;
              height: 8.5px;
              border-radius: 7px;
              border: 1px solid #0060ff;
            }
            .text9 {
              display: flex;
              justify-content: content;
              position: absolute;
              width: 40px;
              height: 13.5px;
              top: 0;
              left: 20px;
              line-height: 13.5px;
              color: #0060ff;
              font-size: 13px;
              font-weight: 600;
            }
          }
        }
      }
    }
    .title {
      width: 90%;
      height: 272px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: center;
      .course {
        width: 90%;
        // padding-bottom: 15px;
        border-radius: 4px;
        background: #ffffff;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .el-tabs__nav {
          width: 90%;
          margin-left: 5%;
          display: flex;
          justify-content: left;
        }
        .el-tabs__item {
          height: 50px;
          padding: 0px;
          font-size: 14px;
          font-weight: 500;
          line-height: 21px;
          padding-top: 15px;
          margin-right: 70px;
        }
        .el-tabs__nav-wrap::after {
          background-color: rgba(56, 125, 247, 0.2);
        }
        .el-tabs__header {
          margin: 0;
        }
        .enclosure {
          width: 90%;
          margin-left: 5%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .enclosureL {
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            color: #677d86;
            line-height: 19px;
          }
          .download {
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            color: #2478ff;
            line-height: 19px;
          }
        }
        .work {
          // margin-left: 51px;
          // margin-right: 40px;
          padding-bottom: 20px;
          width: 90%;
          margin-left: 5%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-top: 17.5px;
        }
        .work .question {
          font-size: 13px;
          font-weight: 400;
          color: #333330;
          line-height: 21.5px;
        }
      }
    }
  }
  .messaeg {
    width: 90%;
    height: 314px;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    margin-top: 10px;
    .mani {
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: content;
      //margin-left: 20.5px;
      margin-top: 23px;
      .downtitle {
        display: flex;
        position: relative;
        width: 90px;
        margin-top: 21.5px;
        .img {
          width: 15.5px;
          height: 14.5px;
          margin-top: 3px;
          background-image: url(../../assets/image/pathmap/study.png);
        }
        .rightmain {
          margin-left: 7.5px;
          .talk {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            position: absolute;
            z-index: 999;
          }
          .box {
            position: absolute;
            width: 62.5px;
            height: 10px;
            right: 6px;
            bottom: -4px;
            background: #ccdfff;
          }
        }
      }
      .uptitle {
        display: flex;
        position: relative;
        width: 90px;
        .img {
          width: 17px;
          height: 15px;
          margin-top: 3px;
          background-image: url(../../assets/image/pathmap/personal.png);
        }
        .rightmain {
          margin-left: 7.5px;
          .talk {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            position: absolute;
            z-index: 999;
          }
          .box {
            position: absolute;
            width: 62.5px;
            height: 10px;
            right: 6px;
            bottom: -4px;
            background: #ccdfff;
          }
        }
      }
      .information {
        width: 100%;
        height: 50px;
        margin-top: 24px;
        display: flex;
        justify-content: content;
        .photo {
          width: 50px;
          height: 50px;
          background-image: url(../../assets/image/pathmap/photo.png);
        }
        .description {
          display: flex;
          flex-direction: column;
          margin-left: 11.5px;
          .text1 {
            height: 13.5px;
            font-size: 14px;
            font-weight: 700;
            color: #394145;
            line-height: 21.6px;
          }
          .text2 {
            height: 13px;
            margin-top: 12px;
            font-size: 13px;
            color: #394145;
            line-height: 21.6px;
          }
        }
      }
    }
    .speed {
      width: 100%;
      margin-top: 11px;
      display: flex;
      justify-content: content;
      .text3 {
        display: flex;
        flex: 1;
        margin-top: 4.5px;
        font-size: 13px;
        font-weight: 500;
        line-height: 24px;
        color: #677d86;
        text-overflow: elipsis;
      }
      .btn {
        width: 73px;
        height: 28px;
        font-size: 13px;
        line-height: 28px;
        color: #2478ff;
        font-weight: 400;
        border: 0.5px solid #2478ff;
        border-radius: 2px;
        background-color: #ffffff;
      }
    }
    .progress {
      display: flex;
      flex-direction: column;
      margin-top: 15px;
      width: 100%;
      height: 74px;
      .total {
        display: flex;
        position: relative;
        width: 100%;
        height: 29px;
        .total_part {
          position: absolute;
          top: 0;
          left: 0;
          margin-bottom: 10px;
          width: 100%;
          height: 12.5px;
          .text4 {
            width: 38.5px;
            height: 12.5px;
            font-size: 12px;
            // line-height: 30.29px;
            color: #677d86;
          }
          .text5 {
            position: absolute;
            right: 0;
            width: 25px;
            height: 9.5px;
            font-size: 12px;
            // line-height: 30.29px;
            color: #277aff;
          }
        }

        .progress {
          position: absolute;
          width: 100%;
          height: 6.4px;
          margin-top: 20px;
          background-color: #e8f1fe;
          border-radius: 2px;
          .progress_part {
            width: 32%;
            height: 6.4px;
            border-radius: 2px;
            background: linear-gradient(
              -180deg,
              rgba(36, 120, 255, 1),
              rgba(80, 147, 255, 1)
            );
          }
        }
      }
      .compulsory {
        display: flex;
        position: relative;
        width: 100%;
        height: 29px;
        margin-top: 16px;
        .compulsory_part {
          position: absolute;
          top: 0;
          left: 0;
          margin-bottom: 10px;
          width: 100%;
          height: 12.5px;
          .text6 {
            width: 38.5px;
            height: 12.5px;
            font-size: 12px;
            // line-height: 30.29px;
            color: #677d86;
          }
          .text7 {
            position: absolute;
            right: 0;
            width: 25px;
            height: 9.5px;
            font-size: 12px;
            // line-height: 30.29px;
            color: #ee6661;
          }
        }
        .progress1 {
          position: absolute;
          width: 100%;
          height: 6.4px;
          margin-top: 20px;
          background-color: #e8f1fe;
          border-radius: 2px;
          .progress1_part {
            width: 10%;
            height: 6.4px;
            border-radius: 2px;
            background: linear-gradient(
              -180deg,
              rgba(238, 98, 94, 1),
              rgba(238, 164, 161, 1)
            );
          }
        }
      }
    }
  }
}
</style>
