fe-manage/src/components/drawers/CheckStu.vue

<template>
  <a-drawer
    :visible="CheckStuvisible"
    class="drawerStyle CheckStu"
    placement="right"
    width="70%"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">查看</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <div class="main">
        <div class="stuinfor">
          <div class="portrait">
            <img src="../../assets/images/studentimg/character.png" />
          </div>
          <div class="stumation">
            <div class="stuname">王明</div>
            <div class="stugangw">产研部门 - 产品经理</div>
          </div>
          <div class="sortbox">
            <div class="sortname">进度排名</div>
            <div class="sortnub">
              <span class="nub1">2</span>
              <span class="total">/10</span>
            </div>
          </div>
          <a-divider
            type="vertical"
            style="
              height: 49px;
              margin-left: 34px;
              background-color: rgba(170, 166, 166, 0.3);
            "
          />
          <div class="sortbox" style="margin-left: 34px">
            <div class="sortname">完成必修</div>
            <div class="sortnub">
              <span class="nub1">3</span>
              <span class="total">/10</span>
            </div>
          </div>
          <a-divider
            type="vertical"
            style="
              height: 49px;
              margin-left: 34px;
              background-color: rgba(170, 166, 166, 0.3);
            "
          />
          <div class="sortbox" style="margin-left: 34px">
            <div class="sortname">已修证书</div>
            <div class="sortnub">
              <span class="nub1">1</span>
            </div>
          </div>
        </div>
        <div class="secondrow">
          <div class="rowleft">产品经理管理 - 腾飞班1</div>
          <div class="rowbox" @click="showProMess">
            <div class="shuom">说明</div>
            <div><img src="../../assets/images/studentimg/chak.png" /></div>
          </div>
        </div>
        <div class="mainbox">
          <div class="rowtitle" @click="changeDown">
            <div class="titleimg">
              <img
                :src="
                  showDown
                    ? require('../../assets/images/studentimg/open.png')
                    : require('../../assets/images/studentimg/close.png')
                "
              />
            </div>
            <div class="titletext">阶段1 腾飞班阶段1</div>
          </div>
          <div :style="{ display: showDown ? 'block' : 'none' }">
            <div class="rowclass">
              <div class="leftclass">
                <div><img src="../../assets/images/leveladd/zai.png" /></div>
                <div class="text1">在线</div>
                <div class="text2">如何成为一个产品经理</div>
              </div>
              <div class="alreadyclass">
                <div class="alimg">
                  <img src="../../assets/images/studentimg/complete.png" />
                </div>
                <div class="altext">已完成</div>
              </div>
            </div>
            <div class="rowclass">
              <div class="leftclass">
                <div><img src="../../assets/images/leveladd/zhi.png" /></div>
                <div class="text1">直播</div>
                <div class="text2">管理者播课</div>
              </div>
              <div class="alreadyclass">
                <div class="alimg">
                  <img src="../../assets/images/studentimg/complete.png" />
                </div>
                <div class="altext">已完成</div>
              </div>
            </div>
            <div class="rowclass">
              <div class="leftclass">
                <div><img src="../../assets/images/leveladd/mian.png" /></div>
                <div class="text1">面授</div>
                <div class="text2">管理面授课</div>
              </div>
              <div class="alreadyclass">
                <div class="alimg">
                  <img src="../../assets/images/studentimg/notice.png" />
                </div>
                <div class="altext">未完成</div>
              </div>
            </div>
            <div class="rowclass">
              <div class="leftclass">
                <div><img src="../../assets/images/leveladd/huo.png" /></div>
                <div class="text1">活动</div>
                <div class="text2">管理者活动</div>
              </div>
              <div class="alreadyclass">
                <div class="alimg">
                  <img src="../../assets/images/studentimg/notice.png" />
                </div>
                <div class="altext">未完成</div>
              </div>
            </div>
            <div class="rowclass">
              <div class="leftclass">
                <div><img src="../../assets/images/leveladd/zuo.png" /></div>
                <div class="text1">作业</div>
                <div class="text2">管理者作业</div>
              </div>
              <div class="alreadyclass">
                <div class="alimg">
                  <img src="../../assets/images/studentimg/notice.png" />
                </div>
                <div class="altext">未完成</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mainbox" style="margin-top: 15px; height: 56px">
          <div class="rowtitle">
            <div class="titleimg">
              <img src="../../assets/images/studentimg/close.png" />
            </div>
            <div class="titletext">阶段2 腾飞班阶段2</div>
          </div>
        </div>
      </div>
      <div class="btnn">
        <button class="btn2">关闭</button>
      </div>
    </div>
  </a-drawer>
  <check-stu-mess v-model:StuMessvisible="StuMessvisible" />
</template>

<script>
import { reactive, toRefs } from "vue";
import CheckStuMess from "./CheckStuMess.vue";
export default {
  name: "CheckStu",
  components: { CheckStuMess },
  props: {
    CheckStuvisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      StuMessvisible: false,
      showDown: false,
    });
    const closeDrawer = () => {
      ctx.emit("update:CheckStuvisible", false);
    };

    const showProMess = () => {
      state.StuMessvisible = true;
    };
    const afterVisibleChange = (bool) => {
      console.log("state", bool);
    };
    const changeDown = () => {
      state.showDown = !state.showDown;
    };

    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      showProMess,
      changeDown,
      // change,
    };
  },
};
</script>

<style lang="scss" >
.CheckStu {
  .ant-drawer-content-wrapper {
    // max-width: 1000px;
    .ant-drawer-header {
      display: none !important;
    }
    .ant-drawer-body {
      padding: 0;
    }
  }
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    overflow-x: scroll;
    display: flex;
    flex-direction: column;
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: red;
      margin-bottom: 20px;
      flex-shrink: 0;
      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
      }
    }
    .main {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding-bottom: 80px;
      .stuinfor {
        display: flex;
        align-items: center;
        height: 133px;
        margin-top: 20px;
        margin-right: 37px;
        background-image: url("../../assets/images/studentimg/bgimg.png");
        background-repeat: no-repeat;
        background-position: right;
        .stumation {
          margin-left: 24px;
          .stuname {
            color: #333333;
            font-size: 18px;
          }
          .stugangw {
            color: #999999;
            font-size: 16px;
            margin-top: 7px;
          }
        }
        .sortbox {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 114px;
          .sortname {
            color: #666660;
            font-size: 14px;
          }
          .sortnub {
            display: flex;
            justify-content: center;
            margin-top: 7px;
            .nub1 {
              color: #0060ff;
              font-size: 22px;
            }
            .total {
              color: #999999;
              font-size: 22px;
            }
          }
        }
      }
      .secondrow {
        margin-top: 32px;
        display: flex;
        .rowleft {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
        }
        .rowbox {
          width: 64px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 24px;
          border: 1px solid rgba(64, 158, 255, 1);
          background: rgba(64, 158, 255, 0.1);
          cursor: pointer;
          .shuom {
            color: rgba(64, 158, 255, 1);
            font-size: 14px;
            line-height: 20px;
            margin-right: 5px;
          }
        }
      }
      .mainbox {
        // height: 463px;
        margin-right: 37px;
        margin-top: 32px;
        border: 1px solid rgba(221, 238, 255, 1);
        border-radius: 6px;
        .rowtitle {
          height: 56px;
          background: rgba(240, 246, 252, 1);
          display: flex;
          align-items: center;
          .titleimg {
            width: 20px;
            height: 20px;
            margin-left: 23px;
          }
          .titletext {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
            margin-left: 16px;
          }
        }
        .rowclass {
          height: 81px;
          border-bottom: 1px solid rgba(221, 238, 255, 1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .leftclass {
            display: flex;
            margin-left: 25px;
            align-items: center;
            .text1 {
              color: #000000;
              font-size: 14px;
              font-weight: 500;
              margin-left: 25px;
            }
            .text2 {
              color: rgba(51, 51, 51, 0.8);
              font-size: 14px;
              margin-left: 65px;
            }
          }
          .alreadyclass {
            display: flex;
            margin-right: 57px;
            .alimg {
              height: 16px;
              width: 16px;
            }
            .altext {
              color: rgba(56, 125, 247, 1);
              font-size: 14px;
              margin-left: 16px;
            }
          }
        }
      }
    }
    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      bottom: 0;
      background-color: #fff;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
</style>