fe-manage/src/views/courselibrary/conponents/OnlineManage.vue

<template>
    <div class="onlinemanage">
        <div class="om_header">
        </div>
        <div class="main">
            <div class="m_header">
                <div class="pc_icon"></div>
                <span>在线课程管理</span>
                <div class="pc_exit">x</div>
            </div>
            <div class="m_body">
                <div class="b_title">课程：BMOT2021年职级晋升-安全管理（高级）</div>
                <div class="b_sub">
                    <div class="bs_type">类型：</div>
                    <div class="bs_right">录播课</div>
                    <div class="bs_left">内容分类：</div>
                    <div class="bs_right">领导力</div>
                    <div class="bs_left">状态：</div>
                    <div class="bs_right">已审核</div>
                </div>
                <div class="b_menu">
                    <a-menu v-model:selectedKeys="current" mode="horizontal">
                        <a-menu-item key="mail">
                            报名管理
                        </a-menu-item>
                        <a-menu-item key="sub2">
                            学习记录
                        </a-menu-item>
                        <a-menu-item key="sub3">
                            资源完成情况
                        </a-menu-item>
                    </a-menu>
                </div>
                <div class="b_menunav">
                    <div class="bm_select">
                        <a-select
                            class="select"
                            ref="select"
                            placeholder="请选择状态"
                            v-model:value="value1"
                            style="width: 200px;"
                            @focus="focus"
                            @change="handleChange"
                            >
                            <a-select-option value="status">状态</a-select-option>
                            <a-select-option value="passed">已通过</a-select-option>
                            <a-select-option value="weishenhe">未审核</a-select-option>
                            <a-select-option value="reject">管理员拒绝</a-select-option>
                        </a-select>
                    </div>
                    <div class="bm_input">
                        <a-input v-model:value="value" style="width: 200px ;height:40px;border-radius: 8px;" placeholder="姓名" />
                    </div>
                    <div class="bm_btn">
                        <div class="btn btn1">
                            <div class="search"></div>
                            <div class="btnText">搜索</div>
                        </div>
                    </div>
                </div>
                <div class="bm_table">
                    <a-table
                        :columns="columns"
                        :data-source="tableData"
                        :loading="tableDataTotal === -1 ? true : false"
                        :pagination="false"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
const columns = [
    {
        title: "姓名",
        dataIndex: "projectName",
        key: "projectName",
        width: '16%',
        align: "center",
    },
    {
        title: "工号",
        dataIndex: "numb",
        key: "numb",
        width: '16%',
        align: "center",
    },
    {
        title: "报名时间",
        dataIndex: "applytime",
        key: "applytime",
        width: '16%',
        align: "center",
    },
    {
        title: "签到时间",
        dataIndex: "signtime",
        key: "signtime",
        width: '16%',
        align: "center",
    },
    {
        title: "状态",
        dataIndex: "status",
        key: "status",
        width: '16%',
        align: "center",
    },
    {
        title: "操作",
        dataIndex: "opacation",
        key: "opacation",
        width: '16%',
        align: "center",
    },
];
export default {
name: "onlineManage",
setup() {
    const current = ref(['mail']);
    const state = reactive({
        tableData: [
            {
                key: 1,
                projectName:"刘莉",
                numb: "10064511",
                applytime:"2022-07-20 14:00:00",
                signtime: "-",
                status: "已通过",
            },
            {
                key: 2,
                projectName:"",
                numb: "",
                applytime:"2022-07-20 14:00:00",
                signtime: "2022-09-26 13:30:30",
                status:"已通过",
            },
        ],
    });

    
    return {
        columns,
        current,
        ...toRefs(state),
    };
  },
};
</script>
<style lang="scss" scoped>
.onlinemanage{
    width: 1358px;
    min-width: 1000px;
    height: 537px;
    background: #FFFFFF;
    box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    font-family: PingFangSC-Regular;
    color: #000000;
    overflow: auto;
    .om_header{
        position: absolute;
        width:calc(100%);
        height: 40px;
        background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
    }
    .main{
        width:calc(100%);
        position: relative;
        .m_header{
            display: flex;
            align-items: center;
            padding-top: 20px;
            padding-left: 26px;
            font-size: 16px;
            .pc_icon{
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/pc.png);
            }
            .pc_exit{
                position: absolute;
                right:42px;
                cursor: pointer;
            }
        }
        .m_body{
            width:calc(100% - 50px);
            padding-left: 50px;
            padding-top: 17px;
            .b_title{
                color: #4F5156;
                font-weight: 500;
                margin-bottom: 19px;
            }
            .b_sub{
                display: flex;
                margin-bottom: 10px;
                .bs_type{
                    color: #999BA3;
                }
                .bs_left{
                    color: #999BA3;
                    margin-left: 35px;
                }
                .bs_right{
                    color: #4F5156;
                }
            }
            .b_menu{
                width:calc(100%);
            }
            .b_menunav{
                display: flex;
                margin-top: 20px;
                margin-bottom: 20px;
                .bm_select{
                    margin-right: 20px;
                }
                .bm_input{
                    margin-right: 20px;
                }
                .bm_btn {
                display: flex;
                // flex-wrap: wrap;
                .btn {
                    padding: 0px 26px 0px 26px;
                    height: 40px;
                    background: rgba(64, 158, 255, 0);
                    border-radius: 8px;
                    border: 1px solid rgba(64, 158, 255, 1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 14px;
                    flex-shrink: 0;
                    .search {
                    background-size: 100%;
                    }
                    .btnText {
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(64, 158, 255, 1);
                    line-height: 36px;
                    margin-left: 5px;
                    }
                }
                .btn1 {
                    .search {
                    width: 15px;
                    height: 17px;
                    background-image: url("@/assets/images/coursewareManage/search1.png");
                    }
                }
                .btn1:hover {
                    background: rgba(64, 158, 255, 1);
                    .search {
                    background-image: url("@/assets/images/coursewareManage/search0.png");
                    }
                    .btnText {
                    color: #ffffff;
                    }
                }
            }
            }
        }
    }
}

</style>