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

<template>
      <a-modal
        :visible="exportHWorkvisible"
        :closable="close"
        :footer="null"
        wrapClassName="WorkManage"
        centered="true"
        @cancel="closeModal"
      >
        <div class="header">
          <div class="inheader">
            <div class="left">提示</div>
            <div class="right" @click="closeModal"></div>
          </div>
        </div>
        <div class="main">
          <div class="check"></div>
          <div class="text"><span>作业导出完成，请在下载本地或去下载中心查看</span></div>
          <div class="btn">
            <button class="btn1 sabtn" style="margin-right: 20px;">查看</button>
            <button class="btn2 sabtn">下载</button>
          </div>
        </div>
      </a-modal>
</template>

<script>
import { reactive,toRefs } from '@vue/reactivity';
export default {
    name:"EHWork",
    props: {
        exportHWorkvisible:{
            type:Boolean,
            default:false,
        }
    },
  setup(props,ctx){
    const state = reactive({
        close:false
    })
    const closeModal = ()=> {
        ctx.emit('update:exportHWorkvisible',false)
    }
    return {
        ...toRefs(state),
        closeModal,
    }
  }
};
</script>
<style lang="scss">
.WorkManage {
  .drawerMain {
    min-width: 550px;
    margin: 0px 32px 0px 32px;
    overflow-x: auto;
    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;
      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
      }
    }
    .main {
      width: 100%;
      height: 100%;
      // margin-bottom: 30px;
      // background-color: #bfa;
      overflow-y: auto;
      .endtime {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
      .search {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        justify-content: space-between;

        .sealeft {
          display: flex;
          flex-wrap: wrap;
          .namecon {
            display: flex;
            flex-wrap: nowrap;
            margin-bottom: 10px;
            .name {
              margin-top: 8px;
              white-space: nowrap;
            }
          }
        }
        .btns {
          display: flex;
          flex-wrap: nowrap;

          .btn {
            cursor: pointer;
            width: 100px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            .img1 {
              width: 15px;
              height: 17px;
              background-image: url(../../assets/images/courseManage/search0.png);
              background-size: 100% 100%;
              margin-right: 7px;
            }
            .img2 {
              width: 16px;
              height: 18px;
              background-image: url(../../assets/images/courseManage/reset1.png);
              background-size: 100% 100%;
              margin-right: 7px;
            }
          }

          .btn1 {
            background: #4ea6ff;

            color: #ffffff;
          }
          .btn2 {
            background: #ffffff;

            color: #4ea6ff;
            border: 1px solid #4ea6ff;
          }
        }
      }
      .btnss {
        display: flex;
        flex-wrap: nowrap;

        .btn {
          cursor: pointer;
          width: 130px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          .img1 {
            width: 17px;
            height: 16px;
            background-image: url(../../assets/images/coursewareManage/export1.png);
            background-size: 100% 100%;
            margin-right: 7px;
          }
        }

        .btn1 {
          background: #4ea6ff;
          color: #ffffff;
        }
        .btn2 {
          background: #ffffff;
          color: #4ea6ff;
          border: 1px solid #4ea6ff;
        }
      }
      .tab {
        th.h {
          background-color: #eff4fc !important;
        }

        .ant-table-tbody
          > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
          > td {
          background: #f6f9fd;
        }
        .tableBox {
          .pa {
            // left: 0;
            margin-top: 15px;
            width: 100%;
            // height: 20px;
            // background-color: red;
            display: flex;
            justify-content: center;
            // position: absolute;
            // bottom: 20px;
            .ant-pagination-prev,
            .ant-pagination-next,
            .ant-pagination-item,
            .ant-pagination-options {
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .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);
      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }
      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
</style>