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

<template>
  <a-modal
    :visible="signQRvisible"
    :footer="null"
    :closable="closeCopy"
    wrapClassName="signQRModal"
    centered="true"
    @cancel="closeModal"
  >
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="icon"></div>
          <span>签到二维码</span>
          <div class="close_exit" @click="closeModal"></div>
        </div>
        <div class="body">
          <div class="tit">{{ "时间管理面授课程" }}</div>
          <div><img src="../../assets/images/taskpage/erweima.png" /></div>
        </div>
        <div class="footerr">
          <div class="onload">下载二维码</div>
          <div class="onloadpx">200*200</div>
          <!-- <div class="onloadpx">400*400</div>
            <div class="onloadpx">800*800</div> -->
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
  name: "SignQR",
  props: {
    signQRvisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      signQRvisible: false,
      closeCopy: false, //二维码关闭图标
    });
    const closeModal = () => {
      ctx.emit("update:signQRvisible", false);
    };
    const afterVisibleChange = (bool) => {
      console.log(bool);
    };
    return {
      ...toRefs(state),
      closeModal,
      afterVisibleChange,
    };
  },
};
</script>
<style lang="scss">
.signQRModal {
  .ant-modal {
    width: 532px !important;
    height: 428px !important;

    .ant-modal-content {
      width: 532px !important;
      height: 428px !important;

      .ant-modal-body {
        width: 532px !important;
        height: 428px !important;
        padding: 0 !important;

        .delete {
          z-index: 999;
          width: 532px;
          height: 428px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;

          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 68px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }

          .del_main {
            width: 100%;
            position: relative;

            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;

              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/QR.png);
                background-size: 100% 100%;
              }

              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .body {
              width: 100%;
              margin: 20px auto 36px auto;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .tit {
                margin-bottom: 15px;
                font-size: 16px;
                font-weight: 500;
              }
            }

            .footerr {
              display: flex;
              justify-content: center;
              align-items: center;

              .onload {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
              }

              .onloadpx {
                width: 80px;
                height: 32px;
                border: 1px solid rgba(56, 125, 247, 1);
                border-radius: 4px;
                color: rgba(56, 125, 247, 1);
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>