fe-manage/src/views/learningpath/LevelCheck.vue

<template>
  <div class="checkwrapper">
    <div class="header">
      <div class="left">
        <div class="img"></div>
        <div class="msg">
          <div class="name">哈哈</div>
          <div class="cur">产研部门-产品经理</div>
        </div>
      </div>
      <div class="right">
        <div class="lne"></div>
        <div class="jin">
          <div class="jint">进度排行</div>
          <div class="jinc">
            <span style="color: #ff90ae">2&nbsp;</span>/&nbsp;10
          </div>
        </div>
        <div class="lne"></div>
        <div class="jin">
          <div class="jint">完成必修</div>
          <div class="jinc">
            <span style="color: #a497ff">3&nbsp;</span>/&nbsp;5
          </div>
        </div>
        <div class="lne"></div>
        <div class="jin">
          <div class="jint">已获取证书</div>
          <div class="jinc">
            <span style="color: #ffb64e">1</span>
          </div>
        </div>
        <div class="lne"></div>
        <router-link to="/leveladd">
          <div class="return">
            <div class="im"></div>
            <div class="fan">返回</div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="pad"></div>
    <div class="bottom">
      <div class="padd"></div>
      <div class="bomcen">
        <div class="centop">
          <div class="d"></div>
          <div class="topinf">产品经理进阶路径</div>
          <div class="infor">
            <div class="sy">说明 &nbsp;></div>
          </div>
        </div>
        <div class="item">
          <div v-for="item in gq" :key="item.id">
            <div class="minc">
              <div class="itmtit">关卡{{ item.id }}名称：{{ item.title }}</div>
            </div>
            <div :class="item.haschild ? 'show' : 'i'">
              <div v-for="it in item.child" :key="it.id" class="ite">
                <div class="title">{{ it.title }}</div>
                <div class="btn">
                  <button
                    :class="it.done ? 'btnoo' : 'btno'"
                    style="z-index: 999">
                    已完成
                  </button>
                  <button :class="it.done ? 'btntt' : 'btnt'">未完成</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="padd"></div>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive } from "vue";
export default {
  name: "LevelCheck",
  setup() {
    const state = reactive({
      gq: [
        {
          id: 1,
          title: "初级产品经理",
          haschild: true,
          child: [
            {
              id: 1 - 1,
              done: true,
              title: "「课程」如何成为一个产品经理",
            },
            {
              id: 1 - 2,
              done: false,
              title: "「作业」产品作业",
            },
            {
              id: 1 - 3,
              done: false,
              title: "「考试」产品考试",
            },
          ],
        },
        {
          id: 2,
          title: "中级产品经理",
        },
      ],
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" >
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.checkwrapper {
  width: 100%;
  height: 100%;
  .header {
    display: flex;
    width: 100%;
    // background-color: #bfa;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px;
    .left {
      display: flex;
      height: 100%;
      align-items: center;
      .img {
        width: 90px;
        height: 90px;
        background-color: red;
        border-radius: 50%;
        border: 8px solid #e7f2ff;
        background-image: url(../../assets/px.jpg);
        background-size: 100% 100%;
      }
      .msg {
        height: 100%;
        margin-left: 27px;
        .name {
          font-size: 16px;
          font-weight: 500;
          color: #363636;
        }
        .cur {
          margin-top: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #878b92;
        }
      }
    }
    .right {
      display: flex;
      height: 100%;
      align-items: center;
      .lne {
        width: 1px;
        height: 82px;
        background: #e8effa;
      }
      .jin {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 50px;
        margin-right: 50px;

        .jint {
          font-size: 16px;
          font-weight: 400;
          color: #333330;
        }
        .jinc {
          font-size: 18px;
          font-weight: 600;
          color: #959595;
        }
      }
      .return {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 30px;
        margin-right: 40px;
        .im {
          width: 42px;
          height: 42px;
          background-size: 100% 100%;
          background-image: url(../../assets/images/leveladd/back.png);
        }
        .fan {
          font-size: 14px;
          font-weight: 400;
          color: #4ea6ff;
          margin-left: 20px;
        }
      }
    }
  }
  .pad {
    // #EFF4FC
    width: 100%;
    height: 20px;
    // background-color: #edf0f5;
    background-image: linear-gradient(90deg, #edf0f5, #eff4fc);
  }
  .bottom {
    width: 100%;
    height: 100%;
    // background-color: #bfa;
    display: flex;
    .padd {
      width: 40px;
      height: 100%;
    }
    .bomcen {
      // 内容区
      width: 100%;
      height: 100%;
      // background-color: lavenderblush;
      .centop {
        margin-top: 25px;
        display: flex;
        align-items: center;
        .d {
          width: 4px;
          height: 13px;
          background: #4ea6ff;
          border-radius: 2px;
        }
        .topinf {
          font-size: 16px;
          font-weight: 500;
          color: #333333;
          margin-left: 16px;
        }
        .infor {
          display: flex;
          margin-top: 4px;
          margin-left: 17px;
          cursor: pointer;
          .sy {
            font-size: 14px;
            font-weight: 400;
            color: #4ea6ff;
            text-align: center;
          }
        }
      }
      .item {
        width: 100%;
        margin-top: 30px;
        .minc {
          width: 100%;
          height: 50px;
          background: #eff4fc;
          display: flex;
          align-items: center;
          .itmtit {
            font-size: 14px;
            font-weight: 400;
            color: #4ea6ff;
            margin-left: 20px;
          }
        }
        .show {
          .ite {
            width: 100%;
            height: 49px;
            border: 1px solid #f0f4fe;
            border-top: 0;
            display: flex;
            align-items: center;
            position: relative;
            .title {
              font-size: 14px;
              font-weight: 400;
              color: #6f6f6f;
              margin-left: 22px;
            }
            .btn {
              position: absolute;
              // background-color: red;
              left: 550px;

              .btno {
                width: 73px;
                height: 23px;
                border-radius: 4px;
                top: -12px;
                border: 0;
                color: #ffffff;
                background: #5dc988;
                position: absolute;
                z-index: 999;
              }
              .btnoo {
                width: 73px;
                height: 23px;
                border-radius: 4px;
                top: -12px;
                border: 0;
                color: #ffffff;
                background: #5dc988;
                position: absolute;
                z-index: 998;
              }
              .btnt {
                width: 73px;
                height: 23px;
                border-radius: 4px;
                top: -12px;
                border: 0;
                position: absolute;
                background: #f2f6fc;
                color: #5dc988;
                z-index: 999;
              }
              .btntt {
                width: 73px;
                height: 23px;
                border-radius: 4px;
                top: -12px;
                border: 0;
                position: absolute;
                background: #f2f6fc;
                color: #5dc988;
                z-index: 998;
              }
            }
          }
        }
        .i {
          display: none;
        }
      }
    }
  }
}
</style>