mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-22 09:16:46 +08:00
3454 lines
104 KiB
Vue
3454 lines
104 KiB
Vue
<!-- 课件管理页面 -->
|
||
<template>
|
||
<div class="courseManage">
|
||
<div class="headerf">
|
||
<!-- 搜索框及按钮 -->
|
||
<div class="filter">
|
||
<div class="filterItems">
|
||
<div class="fi_input fitems">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 270px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入项目名称"
|
||
/>
|
||
</div>
|
||
<div class="fi_input fitems">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 270px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入名称"
|
||
/>
|
||
</div>
|
||
<div class="fi_input fitems">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 270px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入所属项目"
|
||
/>
|
||
</div>
|
||
<div class="select fitems">
|
||
<a-select
|
||
dropdownClassName="dropdown-style"
|
||
style="width: 200px"
|
||
placeholder="请选择状态"
|
||
:options="options1"
|
||
allowClear
|
||
showSearch
|
||
>
|
||
</a-select>
|
||
</div>
|
||
<div class="select fitems">
|
||
<a-select
|
||
dropdownClassName="dropdown-style"
|
||
style="width: 200px"
|
||
placeholder="请选择内容分类"
|
||
:options="options2"
|
||
allowClear
|
||
showSearch
|
||
></a-select>
|
||
</div>
|
||
<div class="select fitems">
|
||
<a-range-picker
|
||
v-model:value="value2"
|
||
separator="至"
|
||
:placeholder="[' 开始时间', ' 结束时间']"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn btn1">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="btn btn2">
|
||
<div class="search"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
<div class="btn btn3">
|
||
<div class="search"></div>
|
||
<div class="btnText">导出</div>
|
||
</div>
|
||
<div class="btn btn4">
|
||
<div class="search"></div>
|
||
<div class="btnText" @click="of_hShow">新建课程</div>
|
||
</div>
|
||
</div>
|
||
<!-- 搜索框及按钮 -->
|
||
</div>
|
||
|
||
<!-- 新建选择线上还是面授课弹窗 -->
|
||
<div class="selectonlineface"
|
||
:style="{ display: of_hs ? 'block' : 'none' }"
|
||
>
|
||
<div class="of_header"></div>
|
||
<div class="of_main">
|
||
<div class="ofm_header">
|
||
<div class="add_icon"></div>
|
||
<span>请选择课程类型</span>
|
||
<div class="close_exit" @click="of_exit"></div>
|
||
</div>
|
||
<div class="ofm_body">
|
||
<div class="ofmb_header">
|
||
<div class="sign"></div>
|
||
<span style="margin-right: 14px">课程名称</span>
|
||
<div class="b_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入课程名称"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="b_sub">
|
||
<div class="bs_header">
|
||
<div class="b_left">课程命名规则</div>
|
||
<div class="b_right" @click="hideShow">
|
||
<div
|
||
class="b_zk"
|
||
:style="{ display: hideshow ? 'block' : 'none' }"
|
||
>
|
||
<span style="color: #4ea6ff">收起</span>
|
||
</div>
|
||
<div
|
||
class="b_sq"
|
||
:style="{ display: hideshow ? 'none' : 'block' }"
|
||
>
|
||
<span style="color: #4ea6ff">展开</span>
|
||
</div>
|
||
<div class="b_icon"></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="bl_detail"
|
||
:style="{ display: hideshow ? 'block' : 'none' }"
|
||
>
|
||
<span style="color: #999ba3">
|
||
1、课程名称统一不加书名号。<br />
|
||
2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
|
||
之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
|
||
看到的是课程内容主题。<br />
|
||
3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
|
||
版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="b_center">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px"
|
||
>⃰</span
|
||
>
|
||
<span style="margin-right: 14px">授课形式</span>
|
||
<a-radio-group v-model:value="onftvalue">
|
||
<div class="bc_box">
|
||
<div class="bc_boxl" @click="bs_unhShow">
|
||
<div class="ol_checkbox"><a-radio v-model:checked="checked" :value="1">线上</a-radio></div>
|
||
</div>
|
||
<div class="bc_boxr" @click="bs_hShow">
|
||
<div class="ol_checkbox"><a-radio v-model:checked="checked" :value="2">面授</a-radio></div>
|
||
</div>
|
||
</div>
|
||
</a-radio-group>
|
||
</div>
|
||
<div class="b_sup" :style="{ display: bs_hs ? 'block' : 'none' }">
|
||
<div class="bs_box">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px"
|
||
>⃰</span
|
||
>
|
||
<span style="margin-right: 14px">是否设置目录</span>
|
||
<a-radio-group v-model:value="value">
|
||
<div class="bc_box">
|
||
<div class="ol_checkbox"><a-radio v-model:checked="checked" :value="1">是</a-radio></div>
|
||
<div class="ol_checkbox"><a-radio v-model:checked="checked" :value="2">否</a-radio></div>
|
||
</div>
|
||
</a-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="b_footer">
|
||
<div class="btn btn5">
|
||
<div class="btnText">取消</div>
|
||
</div>
|
||
<div class="btn btn6">
|
||
<div class="btnText" @click="createft">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 新建选择线上还是面授课弹窗 -->
|
||
|
||
<!-- 确定新建面授课弹窗 -->
|
||
<div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
|
||
<div class="ft_header"></div>
|
||
<div class="ft_main">
|
||
<div class="m_header">
|
||
<div class="add_icon"></div>
|
||
<span>新建面授课</span>
|
||
<div class="close_exit" @click="ft_exit" ></div>
|
||
</div>
|
||
<div class="m_title">课程信息</div>
|
||
<div class="m_body">
|
||
<div class="mb_left">
|
||
<div class="mbl_items1">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px"
|
||
>⃰</span
|
||
>
|
||
<span style="margin-right: 14px">课程名称</span>
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入课程名称"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items2">
|
||
<div class="i2_top">
|
||
<div class="i2_left">课程命名规则</div>
|
||
<div class="i2_right" @click="hideShow">
|
||
<div
|
||
class="b_zk"
|
||
:style="{ display: hideshow ? 'block' :'none' }"
|
||
>
|
||
<span style="color: #4ea6ff">收起</span>
|
||
</div>
|
||
<div
|
||
class="b_sq"
|
||
:style="{ display: hideshow ? 'none' : 'block' }"
|
||
>
|
||
<span style="color: #4ea6ff">展开</span>
|
||
</div>
|
||
<div class="b_icon"></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="i2_detail"
|
||
:style="{ display: hideshow ? 'block' : 'none' }"
|
||
>
|
||
<span style="color: #999ba3">
|
||
1、课程名称统一不加书名号。<br />
|
||
2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
|
||
之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
|
||
看到的是课程内容主题。<br />
|
||
3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
|
||
版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items3">
|
||
<div class="i3_top">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px"
|
||
>⃰</span
|
||
>
|
||
<span style="margin-right: 14px">封面图</span>
|
||
<div class="i3_upload">
|
||
<a-upload
|
||
v-model:file-list="fileList"
|
||
name="avatar"
|
||
list-type="picture-card"
|
||
class="avatar-uploader"
|
||
:show-upload-list="false"
|
||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||
:before-upload="beforeUpload"
|
||
@change="handleChange"
|
||
>
|
||
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
||
<div v-else>
|
||
<loading-outlined v-if="loading"></loading-outlined>
|
||
<plus-outlined v-else></plus-outlined>
|
||
<div class="ant-upload-text">Upload</div>
|
||
</div>
|
||
</a-upload>
|
||
</div>
|
||
</div>
|
||
<div class="i3_bottom">
|
||
<span style="color: #999ba3"
|
||
>高宽比为16:9 (如:800*450) png或jpg图片</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items4">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px"
|
||
>⃰</span
|
||
>
|
||
<span style="margin-right: 14px">目标人群</span>
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入目标人群"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items5">
|
||
<span style="margin-right: 14px">课程价值</span>
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入课程价值"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items6">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px"
|
||
>⃰</span
|
||
>
|
||
<span style="margin-right: 14px">内容分类</span>
|
||
<div class="select i6_input">
|
||
<a-select
|
||
dropdownClassName="dropdown-style"
|
||
style="width: 440px"
|
||
placeholder="请选择"
|
||
:options="options2"
|
||
allowClear
|
||
showSearch
|
||
></a-select>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items7">
|
||
<span style="margin-right: 14px">场景</span>
|
||
<div class="select i7_input">
|
||
<a-select
|
||
dropdownClassName="dropdown-style"
|
||
style="width: 440px"
|
||
placeholder="请选择"
|
||
:options="options2"
|
||
allowClear
|
||
showSearch
|
||
></a-select>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items8">
|
||
<div class="i8_top">
|
||
<span style="margin-right: 14px">内容标签</span>
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入按回车键创建成功"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="i8_bottom">
|
||
<a-tag closable @close="log">Tag 2</a-tag>
|
||
<a-tag closable @close.prevent>Prevent Default</a-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb_right">
|
||
<div class="mbl_items9">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px"
|
||
>⃰</span
|
||
>
|
||
<span style="margin-right: 14px">授课教师</span>
|
||
<div class="i1_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items10">
|
||
<span style="margin-right: 14px">课程简介</span>
|
||
<div class="i10_textarea">
|
||
<a-textarea
|
||
v-model:value="value"
|
||
style="width: 440px; height: 100px; border-radius: 8px"
|
||
placeholder="请输入"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items11">
|
||
<div class="i11_top">
|
||
<span style="margin-right: 10px">附件</span>
|
||
<div class="accessory_icon"></div>
|
||
<span style="color: #4ea6ff">添加附件</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 确定新建面授课弹窗 -->
|
||
|
||
<!-- 表格 -->
|
||
<div class="tableBox">
|
||
<!-- <a-table
|
||
:columns="tableDataFunc()"
|
||
:data-source="tableData"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:scroll="{ x: 600 }"
|
||
expandRowByClick="true"
|
||
@expand="expandTable"
|
||
:pagination="false"
|
||
/> -->
|
||
<a-table
|
||
:columns="columns5"
|
||
:data-source="tableData"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:scroll="{ x: 800 }"
|
||
expandRowByClick="true"
|
||
@expand="expandTable"
|
||
:pagination="false"
|
||
/>
|
||
</div>
|
||
<!-- 表格 -->
|
||
|
||
<!-- 操作管理在线课程管理页面 -->
|
||
<div class="onlinemanage" :style="{ display: om_1 ? 'block' : 'none' }">
|
||
<div class="om_header"></div>
|
||
<div class="om_main">
|
||
<div class="omm_header">
|
||
<div class="pc_icon"></div>
|
||
<span>在线课程管理</span>
|
||
<div class="close_exit" @click="om_exit"></div>
|
||
</div>
|
||
<div class="om_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" style="margin-bottom:20px;">
|
||
<a-table
|
||
:columns="columns1"
|
||
:data-source="tableData2"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:pagination="false"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 操作管理在线课程管理页面 -->
|
||
|
||
<!-- 操作管理面授课程管理页面 -->
|
||
<div class="faceteachmanage" :style="{ display: ftm_1 ? 'block' : 'none' }">
|
||
<div class="om_header"></div>
|
||
<div class="om_main">
|
||
<div class="omm_header">
|
||
<div class="pc_icon"></div>
|
||
<span>面授课程管理</span>
|
||
<div class="close_exit" @click="ftm_exit"></div>
|
||
</div>
|
||
<div class="om_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>
|
||
</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" style="margin-bottom:20px;">
|
||
<a-table
|
||
:columns="columns1"
|
||
:data-source="tableData3"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:pagination="false"
|
||
>
|
||
<template #bodyCell="{ column }">
|
||
<template v-if="column.key === 'opacation'">
|
||
<a @click="ckxq_hs">查看详情</a>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 操作管理面授课程管理页面 -->
|
||
|
||
<!-- 操作管理面授课程管理查看详情页面 -->
|
||
<div class="ftsturecord" :style="{ display: om_ckxq ? 'block' : 'none' }">
|
||
<div class="ftsr_header"></div>
|
||
<div class="ftsr_main">
|
||
<div class="m_header">
|
||
<div class="det_icon"></div>
|
||
<span>查看详情</span>
|
||
<div class="det_exit" @click="ftsr_exit"></div>
|
||
</div>
|
||
<div class="ftsr_table">
|
||
<a-table
|
||
:columns="columns2"
|
||
:data-source="tableData4"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:pagination="false"
|
||
>
|
||
</a-table>
|
||
</div>
|
||
<div class="ftsr_btn" @click="ftsr_exit">
|
||
<div class="btnText">取消</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 面授课程管理查看详情页面 -->
|
||
|
||
<!-- 操作授权页面 -->
|
||
<div class="givepower" :style="{ display: gpm_hs ? 'block' : 'none' }">
|
||
<div class="gp_header"></div>
|
||
<div class="gp_main">
|
||
<div class="gpm_header">
|
||
<div class="givepower_icon"></div>
|
||
<span>授权</span>
|
||
<div class="close_exit" @click="gpm_exit"></div>
|
||
</div>
|
||
<div class="gpm_inputbtn">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 270px; height: 40px; border-radius: 8px; margin-right: 14px;"
|
||
placeholder="请输入姓名"
|
||
/>
|
||
<div class="gpm_btn btn1">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="gpm_btn btn2">
|
||
<div class="reset"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
</div>
|
||
<div class="gpm_notice">
|
||
<div class="th_icon"></div>
|
||
<div class="textarea">已选择 <span style="color: #4EA6FF;">1</span> 项</div>
|
||
<div class="textarea"><span style="color:#999BA3;">列表选项总计：</span><span>5条</span></div>
|
||
</div>
|
||
<div class="gpm_table">
|
||
<a-table
|
||
:columns="columns3"
|
||
:data-source="tableData5"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:pagination="{
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
hideOnSinglePage: true,
|
||
pageSizeOptions: [],
|
||
pageSize: pageSize,
|
||
current: currentPage,
|
||
total: tableDataTotal,
|
||
onChange: (page, pageSize) => {
|
||
currentPage = page;
|
||
// console.log('page', page)
|
||
// 加翻页查找代码
|
||
// this.setState({
|
||
// currentPage: page,
|
||
// }, () => {
|
||
// this.getMilitaryDeployment()
|
||
// })
|
||
},
|
||
}"
|
||
>
|
||
<template #bodyCell="{ column }">
|
||
<template v-if="column.key === 'opacation'">
|
||
<a>取消授权</a>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--操作授权页面 -->
|
||
|
||
<!--开课页面 -->
|
||
<div class="schooltime" :style="{ display: stm_hs ? 'block' : 'none' }">
|
||
<div class="st_header"></div>
|
||
<div class="st_main">
|
||
<div class="stm_header">
|
||
<div class="scht_icon"></div>
|
||
<span>开课</span>
|
||
<div class="close_exit" @click="stm_exit"></div>
|
||
</div>
|
||
<div class="stm_inputbtn">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 270px; height: 40px; border-radius: 8px; margin-right: 14px;"
|
||
placeholder="请输入创建人"
|
||
/>
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 270px; height: 40px; border-radius: 8px; margin-right: 14px;"
|
||
placeholder="请输入教师名称"
|
||
/>
|
||
<div class="select">
|
||
<a-date-picker
|
||
v-model="selectTime"
|
||
type="date"
|
||
placeholder="创建时间"
|
||
style="width: 270px; margin-right: 14px;"
|
||
/>
|
||
</div>
|
||
<div class="stm_btn btn1">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="stm_btn btn2">
|
||
<div class="reset"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
<div class="stm_btn3 btn3" >
|
||
<div class="add"></div>
|
||
<div class="btnText" @click="createkk"><span style="color:#ffffff;">新建开课</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="stm_table">
|
||
<a-table
|
||
:columns="columns4"
|
||
:data-source="tableData6"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:scroll="{ x: 700, y: 800 }"
|
||
expandRowByClick="true"
|
||
@expand="expandTable"
|
||
:pagination="{
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
hideOnSinglePage: true,
|
||
pageSizeOptions: [],
|
||
pageSize: pageSize,
|
||
current: currentPage,
|
||
total: tableDataTotal,
|
||
onChange: (page, pageSize) => {
|
||
currentPage = page;
|
||
// console.log('page', page)
|
||
// 加翻页查找代码
|
||
// this.setState({
|
||
// currentPage: page,
|
||
// }, () => {
|
||
// this.getMilitaryDeployment()
|
||
// })
|
||
},
|
||
}"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--开课页面 -->
|
||
|
||
<!--新建开课页面 -->
|
||
<div class="createschooltime" :style="{ display: cstm_hs ? 'block' : 'none' }">
|
||
<div class="cst_header"></div>
|
||
<div class="cst_main">
|
||
<div class="cstm_header">
|
||
<div class="add_icon"></div>
|
||
<span>新建开课</span>
|
||
<div class="close_exit" @click="cstm_exit"></div>
|
||
</div>
|
||
<div class="cstm_title"><span>面授名称：管理者的专属面授课</span></div>
|
||
<div class="cstm_items items1">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px">⃰</span>
|
||
<span style="margin-right: 14px">开课名称</span>
|
||
<div class="b_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入开课名称"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items2">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px">⃰</span>
|
||
<span style="margin-right: 14px">地点</span>
|
||
<div class="b_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入详细地点"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items3">
|
||
<div class="select fitems">
|
||
<span style="margin-right: 14px">面授时间</span>
|
||
<a-range-picker
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
v-model:value="value2"
|
||
separator="至"
|
||
:placeholder="[' 开始时间', ' 结束时间']"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items4">
|
||
<span style="font-weight: 900; color: red; margin-right: 6px">⃰</span>
|
||
<span style="margin-right: 14px">授课教师</span>
|
||
<div class="b_input">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入教师"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items5">
|
||
<div class="select fitems">
|
||
<span style="margin-right: 14px; color: #6f6f6f">报名设置</span>
|
||
<a-checkbox v-model:checked="checked"
|
||
><span style="color: #6d7584">是否允许公开报名</span></a-checkbox
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items6">
|
||
<div class="select fitems">
|
||
<span style="margin-right: 14px; color: #6f6f6f">签到设置</span>
|
||
<a-checkbox v-model:checked="checked"
|
||
><span style="color: #6d7584; margin-right: 30px"
|
||
>是否允许未报名的学员签到</span
|
||
></a-checkbox
|
||
>
|
||
<a-checkbox v-model:checked="checked"
|
||
><span style="color: #6d7584">签到是否需要口令</span></a-checkbox
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items7">
|
||
<div class="select fitems">
|
||
<span style="margin-right: 14px; color: #6f6f6f">评估设置</span>
|
||
<a-checkbox v-model:checked="checked"
|
||
><span style="color: #6d7584">是否需要评估</span></a-checkbox
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items8">
|
||
<div class="select fitems">
|
||
<span style="margin-right: 14px; color: #6f6f6f">完成规则</span>
|
||
<a-checkbox v-model:checked="checked"
|
||
><span style="color: #6d7584; margin-right: 30px"
|
||
>报名即完成</span
|
||
></a-checkbox
|
||
>
|
||
<a-checkbox v-model:checked="checked"
|
||
><span style="color: #6d7584; margin-right: 30px"
|
||
>签到即完成</span
|
||
></a-checkbox
|
||
>
|
||
<a-checkbox v-model:checked="checked"
|
||
><span style="color: #6d7584">请假算完成</span></a-checkbox
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="cstm_items items9">
|
||
<div class="items9box">
|
||
<span style="color: #6d7584; margin-right: 14px">附件</span>
|
||
<div class="upload_box">
|
||
<div class="upload_icon"></div>
|
||
<span style="color: #4ea6ff">上传附件</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="i9_sup">
|
||
<span style="color: #999ba3; margin-left: 158px"
|
||
>支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</span
|
||
>
|
||
</div>
|
||
<div class="cstm_items items10">
|
||
<div class="cstm_btn btn5">
|
||
<div class="btnText">取消</div>
|
||
</div>
|
||
<div class="cstm_btn btn6">
|
||
<div class="btnText" @click="cstm_exit">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--新建开课页面 -->
|
||
|
||
<!--新建开课学员管理页面页面 -->
|
||
<div class="studentsmanage"
|
||
:style="{ display: sm_hs ? 'block' : 'none' }">
|
||
<div class="stm_header">
|
||
</div>
|
||
<div class="stm_main">
|
||
<div class="stmm_header">
|
||
<div class="stum_icon"></div>
|
||
<span>学员管理</span>
|
||
<div class="close_exit" @click="sm_exit"></div>
|
||
</div>
|
||
<div class="stmmitems">
|
||
<div class="stmm_i1"><span style="margin-right:52px;">XXX课程-第1期-20220726</span><span style="color:#FFB751;">已开课 4.5</span></div>
|
||
<div class="stmm_i2"><span style="color:#999BA3;">时间：</span><span>2022-07-26 14：30-15：00</span></div>
|
||
<div class="stmm_i3"><span style="color:#999BA3;">地点：</span><span>核心能力大楼培训教室</span></div>
|
||
<div class="stmm_i4"><span style="color:#999BA3;">授课教师：</span><span>王雪han</span></div>
|
||
<div class="stmm_i5">
|
||
<div class="i5_left">
|
||
<a-input
|
||
v-model:value="value"
|
||
style="width: 270px; height: 40px; border-radius: 8px; margin-right: 14px;"
|
||
placeholder="请输入姓名"
|
||
/>
|
||
<div class="stmm_btn btn1">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="stmm_btn btn2">
|
||
<div class="reset"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
</div>
|
||
<div class="i5_right">
|
||
<div class="stmm_btn btn3">
|
||
<span style="color: #ffffff;">添加学员</span>
|
||
</div>
|
||
<div class="stmm_btn btn4" @click="hideShow">
|
||
<div class="btn4_sub">
|
||
<span style="color:#4EA6FF;margin-right:4px;">批量操作</span>
|
||
<div
|
||
class="b_zk"
|
||
:style="{ display: hideshow ? 'block' :'none' }"
|
||
>
|
||
</div>
|
||
<div
|
||
class="b_sq"
|
||
:style="{ display: hideshow ? 'none' : 'block' }"
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="btn4_sup"
|
||
:style="{ display: hideshow ? 'none' : 'block' }">
|
||
<div class="btn4_tit"><span style="color:#4EA6FF;">批量录入成绩</span></div>
|
||
<div class="btn4_op1"><span style="margin:10px auto">批量结业</span></div>
|
||
<div class="btn4_op2"><span style="margin:10px auto">批量通过</span></div>
|
||
<div class="btn4_op3"><span style="margin:10px auto">批量拒绝</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="stmm_btn btn5">
|
||
<div class="export"></div>
|
||
<div class="btnText">导出</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="stmm_i6">
|
||
<a-table
|
||
:columns="columns6"
|
||
:data-source="tableData7"
|
||
:loading="tableDataTotal === -1 ? true : false"
|
||
:scroll="{ x: 800 }"
|
||
expandRowByClick="true"
|
||
@expand="expandTable"
|
||
:pagination="{
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
hideOnSinglePage: true,
|
||
pageSizeOptions: [],
|
||
pageSize: pageSize,
|
||
current: currentPage,
|
||
total: tableDataTotal,
|
||
onChange: (page, pageSize) => {
|
||
currentPage = page;
|
||
// console.log('page', page)
|
||
// 加翻页查找代码
|
||
// this.setState({
|
||
// currentPage: page,
|
||
// }, () => {
|
||
// this.getMilitaryDeployment()
|
||
// })
|
||
},
|
||
}"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--新建开课学员管理页面页面 -->
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { reactive, toRefs, defineComponent, ref } from "vue";
|
||
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
|
||
import { message } from "ant-design-vue";
|
||
|
||
function getBase64(img, callback) {
|
||
const reader = new FileReader();
|
||
reader.addEventListener("load", () => callback(reader.result));
|
||
reader.readAsDataURL(img);
|
||
}
|
||
const columns1 = [
|
||
{
|
||
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",
|
||
},
|
||
];
|
||
const columns2 = [
|
||
{
|
||
title: "开课名称",
|
||
dataIndex: "projectName",
|
||
key: "projectName",
|
||
width: "30%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "地点",
|
||
dataIndex: "address",
|
||
key: "address",
|
||
width: "30%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "状态",
|
||
dataIndex: "status",
|
||
key: "status",
|
||
width: "40%",
|
||
align: "center",
|
||
},
|
||
];
|
||
const columns3 = [
|
||
{
|
||
title: "姓名",
|
||
dataIndex: "name",
|
||
key: "name",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "归属组织",
|
||
dataIndex: "organization",
|
||
key: "organization",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "岗位",
|
||
dataIndex: "position",
|
||
key: "position",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "拥有权限",
|
||
dataIndex: "authority",
|
||
key: "authority",
|
||
width: "18%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "操作",
|
||
dataIndex: "opacation",
|
||
key: "opacation",
|
||
width: "30%",
|
||
align: "center",
|
||
},
|
||
];
|
||
const columns4 = [
|
||
{
|
||
title: "序号",
|
||
dataIndex: "num",
|
||
key: "num",
|
||
width: "10%",
|
||
},
|
||
{
|
||
title: "归属组织",
|
||
dataIndex: "organization",
|
||
key: "organization",
|
||
width: "12%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "场地",
|
||
dataIndex: "address",
|
||
key: "saddress",
|
||
width: "12%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "开始时间",
|
||
dataIndex: "starttime",
|
||
key: "starttime",
|
||
width: "20%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "创建时间",
|
||
dataIndex: "createtime",
|
||
key: "createtime",
|
||
width: "20%",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "操作",
|
||
dataIndex: "opacation",
|
||
key: "opacation",
|
||
width: "26%",
|
||
align: "center",
|
||
scopedSlots: { customRender: "action" }, //引入的插槽
|
||
customRender: () => {
|
||
// console.log(text);
|
||
return (
|
||
<div class="opacation">
|
||
<span>签到</span>
|
||
<span style={{ "margin-left": "21px" }}>编辑</span>
|
||
<span style={{ "margin-left": "21px" }}>管理</span>
|
||
<span style={{ "margin-left": "21px" }} class="more">
|
||
<span>更多</span>
|
||
<div class="moreArrow"></div>
|
||
<div class="moreItems"></div>
|
||
</span>
|
||
</div>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
const columns5 = [
|
||
{
|
||
title: '序号',
|
||
width: 200,
|
||
dataIndex: 'num',
|
||
key: 'num',
|
||
align: "center",
|
||
}, {
|
||
title: '名称',
|
||
width: 200,
|
||
dataIndex: 'name',
|
||
key: 'name',
|
||
}, {
|
||
title: '内容分类',
|
||
width: 200,
|
||
dataIndex: 'content',
|
||
key: '1',
|
||
align: "center",
|
||
}, {
|
||
title: '课程形式',
|
||
width: 200,
|
||
dataIndex: 'courseform',
|
||
key: '2',
|
||
align: "center",
|
||
}, {
|
||
title: ' 所属项目',
|
||
width: 300,
|
||
dataIndex: 'project',
|
||
key: '3',
|
||
align: "center",
|
||
}, {
|
||
title: '学习人数',
|
||
width: 200,
|
||
dataIndex: 'stunum',
|
||
key: '4',
|
||
align: "center",
|
||
}, {
|
||
title: '评分',
|
||
width: 200,
|
||
dataIndex: 'grade',
|
||
key: '5',
|
||
align: "center",
|
||
}, {
|
||
title: '状态',
|
||
width: 200,
|
||
dataIndex: 'status',
|
||
key: '6',
|
||
align: "center",
|
||
}, {
|
||
title: '是否发布',
|
||
width: 200,
|
||
dataIndex: 'ynpub',
|
||
key: '7',
|
||
align: "center",
|
||
}, {
|
||
title: '创建人',
|
||
width: 200,
|
||
dataIndex: 'creator',
|
||
key: '8',
|
||
align: "center",
|
||
}, {
|
||
title: '创建时间',
|
||
width: 280,
|
||
dataIndex: 'createtime',
|
||
key: '9',
|
||
align: "center",
|
||
}, {
|
||
title: '上线时间',
|
||
width: 280,
|
||
dataIndex: 'pubtime',
|
||
key: '10',
|
||
align: "center",
|
||
}, {
|
||
title: '是否停用',
|
||
width: 200,
|
||
key: 'either',
|
||
dataIndex: 'ynuse',
|
||
align: "center",
|
||
}, {
|
||
title: '操作',
|
||
width: 400,
|
||
className: "h",
|
||
dataIndex: "operation",
|
||
key: 'operation',
|
||
fixed: 'right',
|
||
align: "center",
|
||
},
|
||
];
|
||
const columns6 = [
|
||
{
|
||
title: '序号',
|
||
width: 200,
|
||
dataIndex: 'num',
|
||
key: 'num',
|
||
align: "center",
|
||
}, {
|
||
title: '姓名',
|
||
width: 200,
|
||
dataIndex: 'name',
|
||
key: 'name',
|
||
}, {
|
||
title: '工号',
|
||
width: 200,
|
||
dataIndex: 'number',
|
||
key: '1',
|
||
align: "center",
|
||
}, {
|
||
title: '部门',
|
||
width: 200,
|
||
dataIndex: 'department',
|
||
key: '2',
|
||
align: "center",
|
||
}, {
|
||
title: ' 岗位',
|
||
width: 300,
|
||
dataIndex: 'postion',
|
||
key: '3',
|
||
align: "center",
|
||
}, {
|
||
title: 'Band',
|
||
width: 200,
|
||
dataIndex: 'band',
|
||
key: '4',
|
||
align: "center",
|
||
}, {
|
||
title: '报名状态',
|
||
width: 200,
|
||
dataIndex: 'status',
|
||
key: '5',
|
||
align: "center",
|
||
}, {
|
||
title: '加入方式',
|
||
width: 200,
|
||
dataIndex: 'join',
|
||
key: '6',
|
||
align: "center",
|
||
}, {
|
||
title: '签到状态',
|
||
width: 200,
|
||
dataIndex: 'signstatus',
|
||
key: '7',
|
||
align: "center",
|
||
}, {
|
||
title: '评估状态',
|
||
width: 200,
|
||
dataIndex: 'evastatus',
|
||
key: '8',
|
||
align: "center",
|
||
}, {
|
||
title: '结业状态',
|
||
width: 280,
|
||
dataIndex: 'overstatus',
|
||
key: '9',
|
||
align: "center",
|
||
},{
|
||
title: '操作',
|
||
width: 400,
|
||
className: "h",
|
||
dataIndex: "operation",
|
||
key: 'operation',
|
||
fixed: 'right',
|
||
align: "center",
|
||
},
|
||
];
|
||
export default defineComponent({
|
||
components: {
|
||
LoadingOutlined,
|
||
PlusOutlined,
|
||
},
|
||
|
||
setup() {
|
||
const current = ref(["mail"]);
|
||
const state = reactive({
|
||
tableData: [
|
||
{
|
||
key: "1",
|
||
num: 1,
|
||
name: "时间管理",
|
||
content: "领导力",
|
||
courseform: "线上",
|
||
project: "管理者进阶-腾飞班1",
|
||
stunum: "50",
|
||
grade: "5",
|
||
status: "未提交",
|
||
ynpub: "未发布",
|
||
creator: "管理员",
|
||
createtime: "2022-07-20 9:30",
|
||
pubtime: "2022-07-20 9:30",
|
||
ynuse: "启用",
|
||
kkty: false,
|
||
},
|
||
{
|
||
key: "2",
|
||
num: 2,
|
||
name: "智能制造初级课程",
|
||
content: "专业力",
|
||
courseform: "线上",
|
||
project: "-",
|
||
stunum: "200",
|
||
grade: "5",
|
||
status: "待审核",
|
||
ynpub: "未发布",
|
||
creator: "管理员",
|
||
createtime: "2022-07-20 9:30",
|
||
pubtime: "2022-07-20 9:30",
|
||
ynuse: "启用",
|
||
kkty: true,
|
||
},
|
||
{
|
||
key: "3",
|
||
num: 3,
|
||
name: "产业必备技能",
|
||
content: "专业力",
|
||
courseform: "线上",
|
||
project: "-",
|
||
stunum: "200",
|
||
grade: "5",
|
||
status: "已审核",
|
||
ynpub: "已发布",
|
||
creator: "管理员",
|
||
createtime: "2022-07-20 9:30",
|
||
pubtime: "2022-07-20 9:30",
|
||
ynuse: "启用",
|
||
kkty: true,
|
||
},
|
||
{
|
||
key: "4",
|
||
num: 4,
|
||
name: "B11入模培训",
|
||
content: "专业力",
|
||
courseform: "线上",
|
||
project: "-",
|
||
stunum: "200",
|
||
grade: "5",
|
||
status: "审核未通过",
|
||
ynpub: "未发布",
|
||
creator: "管理员",
|
||
createtime: "2022-07-20 9:30",
|
||
pubtime: "2022-07-20 9:30",
|
||
ynuse: "停用",
|
||
kkty: true,
|
||
},
|
||
{
|
||
key: "5",
|
||
num: 5,
|
||
name: "入职培训",
|
||
content: "通用力",
|
||
courseform: "面授",
|
||
project: "-",
|
||
stunum: "5",
|
||
grade: "5",
|
||
status: "未提交",
|
||
ynpub: "未发布",
|
||
creator: "管理员",
|
||
createtime: "2022-07-20 9:30",
|
||
pubtime: "2022-07-20 9:30",
|
||
ynuse: "启用",
|
||
kkty: true,
|
||
},
|
||
{
|
||
key: "6",
|
||
num: 6,
|
||
name: "入职培训",
|
||
content: "通用力",
|
||
courseform: "面授",
|
||
project: "-",
|
||
stunum: "5",
|
||
grade: "6",
|
||
status: "已审核",
|
||
ynpub: "已发布",
|
||
creator: "管理员",
|
||
createtime: "2022-07-20 9:30",
|
||
pubtime: "2022-07-20 9:30",
|
||
ynuse: "启用",
|
||
kkty: true,
|
||
},
|
||
],
|
||
tableData2: [
|
||
{
|
||
key: 1,
|
||
projectName: "刘莉",
|
||
numb: "10064511",
|
||
applytime: "2022-07-20 14:00:00",
|
||
signtime: "-",
|
||
status: "已通过",
|
||
},
|
||
],
|
||
tableData3: [
|
||
{
|
||
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: "已完成",
|
||
},
|
||
],
|
||
tableData4: [
|
||
{
|
||
key: 1,
|
||
projectName: "刘莉",
|
||
address: "10064511",
|
||
status: "已通过",
|
||
},
|
||
],
|
||
tableData5: [
|
||
{
|
||
key: 1,
|
||
name: "李明",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "归属权",
|
||
},
|
||
{
|
||
key: 2,
|
||
name: "李洋",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "查看权",
|
||
},
|
||
{
|
||
key: 3,
|
||
name: "小李",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "管理权",
|
||
},
|
||
{
|
||
key: 4,
|
||
name: "雄安名",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "管理权",
|
||
},
|
||
{
|
||
key: 5,
|
||
name: "王哥",
|
||
organization: "-",
|
||
position: "产品经理",
|
||
authority: "管理权",
|
||
},
|
||
],
|
||
tableData6: [
|
||
{
|
||
key: 1,
|
||
num: 1,
|
||
organization: "管理者面授课1",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
{
|
||
key: 2,
|
||
num: 2,
|
||
organization: "管理者面授课2",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
{
|
||
key: 3,
|
||
num: 3,
|
||
organization: "管理者面授课3",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
{
|
||
key: 4,
|
||
num: 4,
|
||
organization: "管理者面授课4",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
{
|
||
key: 5,
|
||
num: 5,
|
||
organization: "管理者面授课5",
|
||
address: "核心能力大楼培训",
|
||
starttime: "2022-07-20 14:00:00",
|
||
createtime: "2022-07-14 14:00:00",
|
||
},
|
||
],
|
||
tableData7: [
|
||
{
|
||
key: "1",
|
||
num: 1,
|
||
name: "李梦",
|
||
number: "1000",
|
||
department: "显示事业",
|
||
postion: "产品经理",
|
||
band: "Band9",
|
||
status: "待审核",
|
||
join: "手动加入",
|
||
signstatus: "-",
|
||
evastatus: "-",
|
||
overstatus: "-",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
{
|
||
key: "2",
|
||
num: 2,
|
||
name: "李梦",
|
||
number: "1001",
|
||
department: "智慧医工",
|
||
postion: "产品经理",
|
||
band: "Band10",
|
||
status: "已通过",
|
||
join: "手动加入",
|
||
signstatus: "已签到",
|
||
evastatus: "已评估",
|
||
overstatus: "-",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
{
|
||
key: "3",
|
||
num: 3,
|
||
name: "李梦",
|
||
number: "1002",
|
||
department: "业务支援",
|
||
postion: "产品经理",
|
||
band: "Band10",
|
||
status: "已拒绝",
|
||
join: "手动加入",
|
||
signstatus: "-",
|
||
evastatus: "-",
|
||
overstatus: "-",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
{
|
||
key: "4",
|
||
num: 4,
|
||
name: "李梦",
|
||
number: "1003",
|
||
department: "业务支援",
|
||
postion: "产品经理",
|
||
band: "Band9",
|
||
status: "已通过",
|
||
join: "报名加入",
|
||
signstatus: "已签到",
|
||
evastatus: "-",
|
||
overstatus: "90/已结业",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
{
|
||
key: "5",
|
||
num: 5,
|
||
name: "李梦",
|
||
number: "1004",
|
||
department: "业务支援",
|
||
postion: "产品经理",
|
||
band: "Band9",
|
||
status: "已通过",
|
||
join: "报名加入",
|
||
signstatus: "请假",
|
||
evastatus: "-",
|
||
overstatus: "",
|
||
operation: "2022-07-20 9:30",
|
||
},
|
||
],
|
||
currentPage: 1,
|
||
tableDataTotal: 100,
|
||
pageSize: 10,
|
||
});
|
||
// const tableDataFunc = () => {
|
||
// const columns = [
|
||
// {
|
||
// title: '序号',
|
||
// width: 200,
|
||
// dataIndex: 'num',
|
||
// key: 'num',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '名称',
|
||
// width: 200,
|
||
// dataIndex: 'name',
|
||
// key: 'name',
|
||
// }, {
|
||
// title: '内容分类',
|
||
// width: 200,
|
||
// dataIndex: 'content',
|
||
// key: '1',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '课程形式',
|
||
// width: 200,
|
||
// dataIndex: 'courseform',
|
||
// key: '2',
|
||
// align: "center",
|
||
// }, {
|
||
// title: ' 所属项目',
|
||
// width: 300,
|
||
// dataIndex: 'project',
|
||
// key: '3',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '学习人数',
|
||
// width: 200,
|
||
// dataIndex: 'stunum',
|
||
// key: '4',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '评分',
|
||
// width: 200,
|
||
// dataIndex: 'grade',
|
||
// key: '5',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '状态',
|
||
// width: 200,
|
||
// dataIndex: 'status',
|
||
// key: '6',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '是否发布',
|
||
// width: 200,
|
||
// dataIndex: 'ynpub',
|
||
// key: '7',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '创建人',
|
||
// width: 200,
|
||
// dataIndex: 'creator',
|
||
// key: '8',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '创建时间',
|
||
// width: 280,
|
||
// dataIndex: 'createtime',
|
||
// key: '9',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '上线时间',
|
||
// width: 280,
|
||
// dataIndex: 'pubtime',
|
||
// key: '10',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '是否停用',
|
||
// width: 200,
|
||
// key: 'either',
|
||
// dataIndex: 'ynuse',
|
||
// align: "center",
|
||
// }, {
|
||
// title: '操作',
|
||
// width: 400,
|
||
// className: "h",
|
||
// dataIndex: "opacation",
|
||
// key: 'operation',
|
||
// fixed: 'right',
|
||
// align: "center",
|
||
// scopedSlots: { customRender: "action" },
|
||
// customRender: (text) => {
|
||
// // console.log('111',text);
|
||
// return (
|
||
// <div class="op_box">
|
||
// <div class="opacation">
|
||
// <span class={text.record.courseform === '面授' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >开课</span>
|
||
// <span class={text.record.ynuse === '停用' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >停用</span>
|
||
// <span class={text.record.status === '未提交' || text.record.status === '审核未通过' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >编辑</span>
|
||
// <span onClick={() => {}} class={text.record.status === '已审核' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >管理</span>
|
||
// <span class={text.record.status === '待审核' ? "errorCls" : "activecls"} style={{ "margin-left": "25px" }} >复制</span>
|
||
// <span style={{ "margin-left": "25px" }} class="more">
|
||
// <span>授权</span>
|
||
// <div class="moreArrow"></div>
|
||
// <div class="moreItems">
|
||
// <span style="color:#4EA6FF;">权限名单</span>
|
||
// <div class="mitems1">归属权</div>
|
||
// <div class="mitems2">管理权</div>
|
||
// <div class="mitems3">查看权</div>
|
||
// </div>
|
||
// </span>
|
||
// <span
|
||
// style={{ "margin-left": "21px", "margin-right": "30px" }}
|
||
// class="more"
|
||
// >
|
||
// <span>更多</span>
|
||
// <div class="moreArrow"></div>
|
||
// <div class="moreItems"></div>
|
||
// </span>
|
||
// </div>
|
||
// </div>
|
||
// );
|
||
// },
|
||
// },
|
||
// ];
|
||
// return columns;
|
||
// };
|
||
|
||
const fileList = ref([]);
|
||
const loading = ref(false);
|
||
const imageUrl = ref("");
|
||
|
||
const handleChange = (info) => {
|
||
if (info.file.status === "uploading") {
|
||
loading.value = true;
|
||
return;
|
||
}
|
||
|
||
if (info.file.status === "done") {
|
||
// Get this url from response in real world.
|
||
getBase64(info.file.originFileObj, (base64Url) => {
|
||
imageUrl.value = base64Url;
|
||
loading.value = false;
|
||
});
|
||
}
|
||
|
||
if (info.file.status === "error") {
|
||
loading.value = false;
|
||
message.error("upload error");
|
||
}
|
||
};
|
||
|
||
const beforeUpload = (file) => {
|
||
const isJpgOrPng =
|
||
file.type === "image/jpeg" || file.type === "image/png";
|
||
|
||
if (!isJpgOrPng) {
|
||
message.error("You can only upload JPG file!");
|
||
}
|
||
|
||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
|
||
if (!isLt2M) {
|
||
message.error("Image must smaller than 2MB!");
|
||
}
|
||
|
||
return isJpgOrPng && isLt2M;
|
||
};
|
||
|
||
const getTableDate = () => {
|
||
let data = state.tableData;
|
||
data.map((value) => {
|
||
{
|
||
//单层项目
|
||
value.operation = (
|
||
<div class="operation">
|
||
<div class="nSelect">
|
||
{value.status === "已审核" ? (
|
||
<div class="nselect">
|
||
|
||
<div class='ops1'>
|
||
<div class="jc">开课</div>
|
||
</div>
|
||
|
||
<div class='ops2'>
|
||
<div class="jc">管理</div>
|
||
</div>
|
||
|
||
<div class='ops3'>
|
||
<div class="jc">复制</div>
|
||
</div>
|
||
|
||
<div class="tableSelect">
|
||
<div class='ops4'>
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px"
|
||
value="授权"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option value="权限名单" label="权限名单">
|
||
<div>权限名单</div>
|
||
</a-select-option>
|
||
<a-select-option value="归属权" label="归属权">
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
归属权
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="查看权" label="查看权">
|
||
<div>查看权</div>
|
||
</a-select-option>
|
||
<a-select-option value="管理权" label="管理权">
|
||
<div>管理权</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
<div class="tableSelect">
|
||
<div class='ops5'>
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px"
|
||
value="更多"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option
|
||
value="复制"
|
||
label="复制"
|
||
style="padding-left:35px"
|
||
>
|
||
<div>复制</div>
|
||
</a-select-option>
|
||
<a-select-option
|
||
value="取消"
|
||
label="取消"
|
||
style="padding-left:35px"
|
||
>
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
取消
|
||
</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "待审核" ? (
|
||
<div class="nselect">
|
||
|
||
<div class='ops1'>
|
||
<div class="jc">开课</div>
|
||
</div>
|
||
|
||
<div class='ops5'>
|
||
<div class="jc">撤回</div>
|
||
</div>
|
||
|
||
<div class="tableSelect">
|
||
<div class='ops4'>
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px"
|
||
value="授权"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option value="权限名单" label="权限名单">
|
||
<div>权限名单</div>
|
||
</a-select-option>
|
||
<a-select-option value="归属权" label="归属权">
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
归属权
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="查看权" label="查看权">
|
||
<div>查看权</div>
|
||
</a-select-option>
|
||
<a-select-option value="管理权" label="管理权">
|
||
<div>管理权</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "未提交" ? (
|
||
<div class="nselect">
|
||
|
||
<div class='ops1'>
|
||
<div class="jc">开课</div>
|
||
</div>
|
||
|
||
<div class='ops2'>
|
||
<div class="jc">编辑</div>
|
||
</div>
|
||
|
||
<div class='ops3'>
|
||
<div class="jc">复制</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "审核未通过" ? (
|
||
<div class="nselect">
|
||
<div class='ops1'>
|
||
<div class="jc">开课</div>
|
||
</div>
|
||
|
||
<div class='ops2'>
|
||
<div class="jc">编辑</div>
|
||
</div>
|
||
|
||
<div class='ops3'>
|
||
<div class="jc">复制</div>
|
||
</div>
|
||
|
||
|
||
<div class="tableSelect">
|
||
<div class='ops4'>
|
||
<a-select
|
||
style="width: 50px;margin-top:2px;margin-left:25px"
|
||
value="授权"
|
||
// options={state.projectNameList}
|
||
dropdownClassName="tabledropdown"
|
||
>
|
||
<a-select-option value="权限名单" label="权限名单">
|
||
<div>权限名单</div>
|
||
</a-select-option>
|
||
<a-select-option value="归属权" label="归属权">
|
||
<div
|
||
onClick={() => {
|
||
console.log("点击了");
|
||
}}
|
||
>
|
||
归属权
|
||
</div>
|
||
</a-select-option>
|
||
<a-select-option value="查看权" label="查看权">
|
||
<div>查看权</div>
|
||
</a-select-option>
|
||
<a-select-option value="管理权" label="管理权">
|
||
<div>管理权</div>
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='ops5'>
|
||
<div class="jc">删除</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
});
|
||
state.tableData = data;
|
||
};
|
||
getTableDate();
|
||
|
||
const getTableDate2 = () => {
|
||
let data2 = state.tableData7;
|
||
data2.map((value) => {
|
||
{
|
||
//单层项目
|
||
value.operation = (
|
||
<div class="operation">
|
||
<div class="nSelect">
|
||
{value.status === "待审核" ? (
|
||
<div class="nselect">
|
||
<div class='ops1'>
|
||
<div class="jc">通过</div>
|
||
</div>
|
||
<div class='ops1'>
|
||
<div class="jc">拒绝</div>
|
||
</div>
|
||
<div class='ops2'>
|
||
<div class="jc">删除</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "已通过" ? (
|
||
<div class="nselect">
|
||
<div class='ops2'>
|
||
<div class="jc">删除</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{value.status === "已拒绝" ? (
|
||
<div class="nselect">
|
||
<div class='ops2'>
|
||
<div class="jc">删除</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
});
|
||
state.tableData2 = data2;
|
||
};
|
||
getTableDate2();
|
||
|
||
const onftvalue = ref();
|
||
|
||
return {
|
||
onftvalue,
|
||
current,
|
||
...toRefs(state),
|
||
fileList,
|
||
loading,
|
||
imageUrl,
|
||
columns1,
|
||
columns2,
|
||
columns3,
|
||
columns4,
|
||
columns5,
|
||
columns6,
|
||
// tableDataFunc,
|
||
handleChange,
|
||
beforeUpload,
|
||
getTableDate,
|
||
getTableDate2,
|
||
};
|
||
},
|
||
|
||
data() {
|
||
const options1 = ref([
|
||
{
|
||
value: "value1",
|
||
label: "请选择状态",
|
||
},
|
||
{
|
||
value: "uncommitted",
|
||
label: "未提交",
|
||
},
|
||
{
|
||
value: "tocheck",
|
||
label: "待审核",
|
||
},
|
||
{
|
||
value: "checked",
|
||
label: "已审核",
|
||
},
|
||
{
|
||
value: "uncheck",
|
||
label: "审核未通过",
|
||
},
|
||
]);
|
||
|
||
const options2 = ref([
|
||
{
|
||
value: "value2",
|
||
label: "请选择内容分类",
|
||
},
|
||
{
|
||
value: "leadership",
|
||
label: "领导力",
|
||
},
|
||
{
|
||
value: "ingeneral",
|
||
label: "通用力",
|
||
},
|
||
{
|
||
value: "profession",
|
||
label: "专业力",
|
||
},
|
||
]);
|
||
|
||
const state = reactive({
|
||
of_hs: false,
|
||
hideshow: true,
|
||
bs_hs: true,
|
||
ft_hs:false,
|
||
om_1: false,
|
||
ftm_1:false,
|
||
om_ckxq: false,
|
||
gpm_hs:false,
|
||
stm_hs: false,
|
||
cstm_hs:false,
|
||
sm_hs:false,
|
||
});
|
||
|
||
const of_hShow = () => {
|
||
if (state.of_hs == false) {
|
||
state.of_hs = true;
|
||
}
|
||
};
|
||
const of_exit = () => {
|
||
state.of_hs = false;
|
||
};
|
||
const hideShow = () => {
|
||
if (state.hideshow == true) {
|
||
state.hideshow = false;
|
||
} else {
|
||
state.hideshow = true;
|
||
}
|
||
};
|
||
const bs_hShow = () => {
|
||
state.bs_hs = true;
|
||
};
|
||
const bs_unhShow = () => {
|
||
state.bs_hs = false;
|
||
};
|
||
const createft = () => {
|
||
if (state.bs_hs == true) {
|
||
state.of_hs = false;
|
||
state.ft_hs = true;
|
||
}
|
||
};
|
||
const ft_exit = () => {
|
||
state.ft_hs = false;
|
||
};
|
||
|
||
const om_exit = () => {
|
||
state.om_1 = false;
|
||
};
|
||
const ftm_exit = () => {
|
||
state.ftm_1 = false;
|
||
};
|
||
|
||
const ckxq_hs = () => {
|
||
state.om_ckxq = true;
|
||
};
|
||
const ftsr_exit = () => {
|
||
state.om_ckxq = false;
|
||
};
|
||
const gpm_exit = () => {
|
||
state.gpm_hs = false;
|
||
};
|
||
const stm_exit = () => {
|
||
state.stm_hs = false;
|
||
};
|
||
const createkk = () => {
|
||
state.cstm_hs = true;
|
||
};
|
||
const cstm_exit = () => {
|
||
state.cstm_hs = false;
|
||
};
|
||
const sm_exit = () => {
|
||
state.sm_hs = false;
|
||
};
|
||
|
||
return {
|
||
...toRefs(state),
|
||
options1,
|
||
options2,
|
||
of_hShow,
|
||
of_exit,
|
||
hideShow,
|
||
bs_hShow,
|
||
bs_unhShow,
|
||
createft,
|
||
ft_exit,
|
||
om_exit,
|
||
ftm_exit,
|
||
ckxq_hs,
|
||
ftsr_exit,
|
||
gpm_exit,
|
||
stm_exit,
|
||
createkk,
|
||
cstm_exit,
|
||
sm_exit,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
// .dropdown-style{
|
||
// .ant-select-dropdown-menu{
|
||
// background: #6767bd;
|
||
// }
|
||
// .ant-select-dropdown-menu-item {
|
||
// color: #4EA6FF !important;
|
||
// }
|
||
// }
|
||
.courseManage {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
.headerf {
|
||
.filter {
|
||
margin-left: 38px;
|
||
margin-right: 38px;
|
||
margin-top: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
.filterItems {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.fitems {
|
||
margin-right: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
// flex-wrap: wrap;
|
||
margin-left: 38px;
|
||
.btn {
|
||
padding: 0px 26px 0px 26px;
|
||
height: 38px;
|
||
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/courseManage/search1.png");
|
||
}
|
||
}
|
||
.btn2 {
|
||
.search {
|
||
width: 16px;
|
||
height: 18px;
|
||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||
}
|
||
}
|
||
.btn3 {
|
||
.search {
|
||
width: 17px;
|
||
height: 18px;
|
||
background-image: url("../../assets/images/courseManage/add1.png");
|
||
}
|
||
}
|
||
.btn4 {
|
||
margin-right: 0px;
|
||
.search {
|
||
width: 17px;
|
||
height: 18px;
|
||
background-image: url("../../assets/images/courseManage/add1.png");
|
||
}
|
||
}
|
||
.btn1:hover {
|
||
background: rgba(64, 158, 255, 1);
|
||
.search {
|
||
background-image: url("../../assets/images/courseManage/search0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn2:hover {
|
||
background: rgba(64, 158, 255, 1);
|
||
.search {
|
||
background-image: url("../../assets/images/courseManage/reset0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn3:hover {
|
||
background: rgba(64, 158, 255, 1);
|
||
.search {
|
||
background-image: url("../../assets/images/courseManage/add0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn4:hover {
|
||
background: rgba(64, 158, 255, 1);
|
||
.search {
|
||
background-image: url("../../assets/images/courseManage/add0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.selectonlineface {
|
||
z-index: 999;
|
||
width: 679px;
|
||
// height: 525px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
.of_header {
|
||
position: absolute;
|
||
width: calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient(
|
||
rgba(78, 166, 255, 0.2) 0%,
|
||
rgba(78, 166, 255, 0) 100%
|
||
);
|
||
}
|
||
.of_main {
|
||
width: calc(100%);
|
||
position: relative;
|
||
.ofm_header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.add_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/coursewareManage/add1.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%;
|
||
}
|
||
}
|
||
.ofm_body {
|
||
width: 90%;
|
||
.ofmb_header{
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 14px auto;
|
||
.sign{
|
||
width: 7px;
|
||
height: 7px;
|
||
margin-left: 78px;
|
||
margin-right: 6px;
|
||
background-image: url(@/assets/images/coursewareManage/asterisk.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.ol_checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left:6px;
|
||
}
|
||
.b_header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 21px auto 14px 80px;
|
||
}
|
||
.b_sub {
|
||
margin-left: 164px;
|
||
.bs_header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.b_right {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
.bl_detail {
|
||
top: 24px;
|
||
}
|
||
.b_center {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 21px auto 14px 80px;
|
||
.bc_box{
|
||
display: flex;
|
||
.bc_boxl,
|
||
.bc_boxr {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.b_sup {
|
||
margin: 21px auto 14px 52px;
|
||
.bs_box {
|
||
display: flex;
|
||
align-items: center;
|
||
.bc_box{
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
.b_footer {
|
||
width: 100%;
|
||
margin-left: 212px;
|
||
margin-top: 25px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
.btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: rgba(64, 158, 255, 0);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn5 {
|
||
border: 1px solid rgba(64, 158, 255, 1);
|
||
color: #4ea6ff;
|
||
}
|
||
.btn6 {
|
||
background-color: #4ea6ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.faceteach {
|
||
z-index: 999;
|
||
width: 85%;
|
||
min-width: 1000px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
.ft_header {
|
||
position: absolute;
|
||
width: calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient(
|
||
rgba(78, 166, 255, 0.2) 0%,
|
||
rgba(78, 166, 255, 0) 100%
|
||
);
|
||
}
|
||
.ft_main {
|
||
width: calc(100%);
|
||
position: relative;
|
||
.m_header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.add_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/coursewareManage/add1.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%;
|
||
}
|
||
}
|
||
.m_title {
|
||
margin: 7px auto 25px 52px;
|
||
}
|
||
.m_body {
|
||
display: flex;
|
||
height: 500px;
|
||
overflow: auto;
|
||
.mb_left {
|
||
.mbl_items1 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 87px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.mbl_items2 {
|
||
margin-left: 164px;
|
||
margin-bottom: 30px;
|
||
.i2_top {
|
||
display: flex;
|
||
.i2_right {
|
||
margin-left: 320px;
|
||
display: flex;
|
||
}
|
||
}
|
||
.i2_detail {
|
||
width: 400px;
|
||
}
|
||
}
|
||
.mbl_items3 {
|
||
margin-left: 87px;
|
||
margin-bottom: 10px;
|
||
.i3_top {
|
||
display: flex;
|
||
align-items: start;
|
||
}
|
||
.i3_bottom {
|
||
margin-left: 60px;
|
||
}
|
||
}
|
||
.mbl_items4 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 87px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.mbl_items5 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 93px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.mbl_items6 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 87px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.mbl_items7 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 121px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.mbl_items8 {
|
||
margin-left: 93px;
|
||
margin-bottom: 10px;
|
||
.i8_top {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.i8_bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 71px;
|
||
}
|
||
}
|
||
}
|
||
.mb_right {
|
||
.mbl_items9 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 100px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.mbl_items10 {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-left: 107px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.mbl_items11 {
|
||
margin-left: 105px;
|
||
margin-bottom: 10px;
|
||
.i11_top {
|
||
display: flex;
|
||
align-items: center;
|
||
.accessory_icon {
|
||
width: 15px;
|
||
height: 15px;
|
||
background-image: url(@/assets/images/coursewareManage/enclosure.png);
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tableBox {
|
||
margin: 20px 38px 30px;
|
||
.operation {
|
||
display: flex;
|
||
justify-content: right;
|
||
.nSelect {
|
||
display: flex;
|
||
.nselect {
|
||
display: flex;
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
.ops1,.ops2,.ops3,.ops4,.ops5{
|
||
margin-left: 20px;
|
||
}
|
||
// .jc {
|
||
// margin-left: 20px;
|
||
// }
|
||
}
|
||
}
|
||
.tableSelect {
|
||
margin-left: -30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.onlinemanage,
|
||
.faceteachmanage {
|
||
display: none;
|
||
z-index: 999;
|
||
width: 85%;
|
||
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%);
|
||
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%
|
||
);
|
||
}
|
||
.om_main{
|
||
width:calc(100%);
|
||
position: relative;
|
||
.omm_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);
|
||
}
|
||
.close_exit{
|
||
position: absolute;
|
||
right:42px;
|
||
cursor: pointer;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-image: url(@/assets/images/coursewareManage/close.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.om_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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.ftsturecord{
|
||
z-index: 999;
|
||
width: 80%;
|
||
min-width: 1000px;
|
||
// height: 274px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%,-50%);
|
||
overflow: auto;
|
||
.ftsr_header{
|
||
position: absolute;
|
||
width:calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
|
||
}
|
||
.ftsr_main{
|
||
width:calc(100%);
|
||
position: relative;
|
||
.m_header{
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.det_icon{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/coursewareManage/detail.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
.det_exit{
|
||
position: absolute;
|
||
right:42px;
|
||
cursor: pointer;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-image: url(@/assets/images/coursewareManage/close.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.ftsr_table{
|
||
width: 90%;
|
||
margin:30px auto;
|
||
border: 1px solid #F0F4FE;
|
||
}
|
||
.ftsr_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: #ffffff;
|
||
border: 1px solid #4EA6FF;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 30px auto ;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4EA6FF;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.givepower{
|
||
z-index: 999;
|
||
width: 85%;
|
||
min-width: 1000px;
|
||
// height: 646px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%,-50%);
|
||
overflow: auto;
|
||
.gp_header{
|
||
position: absolute;
|
||
width:calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
|
||
}
|
||
.gp_main{
|
||
width:calc(100%);
|
||
position: relative;
|
||
.gpm_header{
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.givepower_icon{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/coursewareManage/givepower.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%;
|
||
}
|
||
}
|
||
.gpm_inputbtn{
|
||
width: 90%;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
.gpm_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 14px;
|
||
background: #ffffff;
|
||
border: 1px solid #4EA6FF;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4EA6FF;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn1 {
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
margin-right: 6px;
|
||
background-image: url("../../assets/images/courseManage/search1.png");
|
||
}
|
||
}
|
||
.btn2 {
|
||
.reset {
|
||
width: 16px;
|
||
height: 18px;
|
||
margin-right: 6px;
|
||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||
}
|
||
}
|
||
.btn1:hover {
|
||
background: #4EA6FF;
|
||
.search {
|
||
background-image: url("@/assets/images/coursewareManage/search0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn2:hover {
|
||
background: #4EA6FF;
|
||
.reset {
|
||
background-image: url("@/assets/images/coursewareManage/reset0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.gpm_notice{
|
||
display: flex;
|
||
background: rgba(78,166,255,0.25);
|
||
border: 1px solid #4EA6FF;
|
||
width: 90%;
|
||
height: 62px;
|
||
margin:20px auto;
|
||
align-items: center;
|
||
line-height: 64px;
|
||
.th_icon{
|
||
width: 16px;
|
||
height: 16px;
|
||
background-image: url(@/assets/images/coursewareManage/gan.png);
|
||
background-size: 100% 100%;
|
||
margin: auto 13px auto 37px;
|
||
}
|
||
.textarea{
|
||
margin-right: 33px;
|
||
}
|
||
}
|
||
.gpm_table{
|
||
width: 90%;
|
||
margin:30px auto;
|
||
border: 1px solid #F0F4FE;
|
||
}
|
||
}
|
||
}
|
||
.schooltime{
|
||
z-index: 999;
|
||
width: 85%;
|
||
min-width: 1000px;
|
||
// height: 646px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%,-50%);
|
||
overflow: auto;
|
||
.st_header{
|
||
position: absolute;
|
||
width:calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
|
||
}
|
||
.st_main{
|
||
width:calc(100%);
|
||
position: relative;
|
||
.stm_header{
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.scht_icon{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/coursewareManage/scht.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%;
|
||
}
|
||
}
|
||
.stm_inputbtn{
|
||
display: flex;
|
||
width: 90%;
|
||
margin: 20px auto;
|
||
.stm_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 14px;
|
||
background: #ffffff;
|
||
border: 1px solid #4EA6FF;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4EA6FF;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn1 {
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
margin-right: 6px;
|
||
background-image: url("@/assets/images/coursewareManage/search1.png");
|
||
}
|
||
}
|
||
.btn2 {
|
||
.reset {
|
||
width: 16px;
|
||
height: 18px;
|
||
margin-right: 6px;
|
||
background-image: url("@/assets/images/coursewareManage/reset1.png");
|
||
}
|
||
}
|
||
.btn1:hover {
|
||
background: #4EA6FF;
|
||
.search {
|
||
background-image: url("@/assets/images/coursewareManage/search0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn2:hover {
|
||
background: #4EA6FF;
|
||
.reset {
|
||
background-image: url("@/assets/images/coursewareManage/reset0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.stm_btn3{
|
||
width: 130px;
|
||
height: 40px;
|
||
border: 1px solid #4EA6FF;
|
||
background-color: #4EA6FF;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
.btn3 {
|
||
.add {
|
||
width: 17px;
|
||
height: 18px;
|
||
background-image: url("@/assets/images/coursewareManage/add0.png");
|
||
background-size: 100% 100%;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stm_table{
|
||
width: 90%;
|
||
margin:30px auto;
|
||
border: 1px solid #F0F4FE;
|
||
}
|
||
.opacation {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #4ea6ff;
|
||
// line-height: 36px;
|
||
.more {
|
||
position: relative;
|
||
.moreArrow {
|
||
width: 13px;
|
||
height: 7px;
|
||
display: inline-block;
|
||
background-image: url("../../assets/images/navtop/down.png");
|
||
background-size: 100%;
|
||
margin: 2px;
|
||
margin-left: 7px;
|
||
}
|
||
.moreItems {
|
||
width: 80px;
|
||
height: 70px;
|
||
display: none;
|
||
background: #ffffff;
|
||
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
|
||
border-radius: 3px;
|
||
border: 0px solid #dcdcdc;
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 18px;
|
||
z-index: 100;
|
||
}
|
||
}
|
||
.more:hover .moreArrow {
|
||
background-image: url("../../assets/images/navtop/up.png");
|
||
}
|
||
.more:hover .moreItems {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.createschooltime{
|
||
z-index: 999;
|
||
width: 679px;
|
||
// height: 705px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%,-50%);
|
||
overflow: auto;
|
||
.cst_header{
|
||
position: absolute;
|
||
width:calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
|
||
}
|
||
.cst_main{
|
||
width:calc(100%);
|
||
position: relative;
|
||
.cstm_header{
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.add_icon{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/coursewareManage/add1.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%;
|
||
}
|
||
}
|
||
.cstm_title{
|
||
margin: 10px auto 20px 51px;
|
||
font-weight: bold;
|
||
}
|
||
.cstm_items{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 23px;
|
||
}
|
||
.items1,.items4{
|
||
margin-left: 80px;
|
||
}
|
||
.items2{
|
||
margin-left: 108px;
|
||
}
|
||
.items3,.items5,.items6,.items7,.items8{
|
||
margin-left: 86px;
|
||
}
|
||
.items9{
|
||
margin-left: 115px;
|
||
text-align: center;
|
||
margin-bottom: 0;
|
||
.items9box{
|
||
display: flex;
|
||
.upload_box{
|
||
display: flex;
|
||
cursor: pointer;
|
||
.upload_icon{
|
||
width: 16px;
|
||
height: 16px;
|
||
background-image: url('@/assets/images/coursewareManage/enclosure.png');
|
||
background-size: 100% 100%;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.items10{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
.cstm_btn{
|
||
width: 100px;
|
||
height: 40px;
|
||
background: rgba(64, 158, 255, 0);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn5 {
|
||
border: 1px solid rgba(64, 158, 255, 1);
|
||
color: #4ea6ff;
|
||
}
|
||
.btn6 {
|
||
background-color: #4ea6ff;
|
||
color: #ffffff;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
.studentsmanage{
|
||
z-index: 999;
|
||
width: 85%;
|
||
min-width: 1000px;
|
||
// height: 646px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%,-50%);
|
||
overflow: auto;
|
||
.stm_header{
|
||
position: absolute;
|
||
width:calc(100%);
|
||
height: 40px;
|
||
background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
|
||
}
|
||
.stm_main{
|
||
width:calc(100%);
|
||
position: relative;
|
||
.stmm_header{
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.stum_icon{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/coursewareManage/stum.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%;
|
||
}
|
||
}
|
||
.stmmitems{
|
||
margin: auto 49px;
|
||
height: 400px;
|
||
overflow: auto;
|
||
.stmm_i1,
|
||
.stmm_i2,
|
||
.stmm_i3,
|
||
.stmm_i4{
|
||
margin: 19px 0;
|
||
}
|
||
.stmm_i5{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.i5_left{
|
||
display: flex;
|
||
.stmm_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 14px;
|
||
background: #ffffff;
|
||
border: 1px solid #4EA6FF;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4EA6FF;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn1 {
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
margin-right: 6px;
|
||
background-image: url("../../assets/images/courseManage/search1.png");
|
||
}
|
||
}
|
||
.btn2 {
|
||
.reset {
|
||
width: 16px;
|
||
height: 18px;
|
||
margin-right: 6px;
|
||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||
}
|
||
}
|
||
.btn1:hover {
|
||
background: rgba(64, 158, 255, 1);
|
||
.search {
|
||
background-image: url("../../assets/images/courseManage/search0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn2:hover {
|
||
background: rgba(64, 158, 255, 1);
|
||
.reset {
|
||
background-image: url("../../assets/images/courseManage/reset0.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.i5_right{
|
||
display: flex;
|
||
.stmm_btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 14px;
|
||
background: #ffffff;
|
||
border: 1px solid #4EA6FF;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
.btnText {
|
||
color: #4EA6FF;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.btn3 {
|
||
background-color: #4EA6FF;
|
||
}
|
||
.btn4{
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
.btn4_sub{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.b_zk{
|
||
width: 10px;
|
||
height: 8px;
|
||
background-image: url('@/assets/images/coursewareManage/down.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.b_sq{
|
||
width: 10px;
|
||
height: 8px;
|
||
background-image: url('@/assets/images/coursewareManage/up.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.btn4_sup{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
|
||
position: absolute;
|
||
top: 40px;
|
||
z-index: 999;
|
||
.btn4_tit{
|
||
margin-top:8px;
|
||
margin-left:8px;
|
||
}
|
||
.btn4_op1,.btn4_op2,.btn4_op3{
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
.btn5 {
|
||
margin-right: 0px;
|
||
.export {
|
||
width: 17px;
|
||
height: 18px;
|
||
margin-right: 5px;
|
||
background-image: url("@/assets/images/coursewareManage/export.png");
|
||
}
|
||
}
|
||
.btn5:hover {
|
||
background: #4EA6FF;
|
||
.export {
|
||
background-image: url("@/assets/images/coursewareManage/export1.png");
|
||
}
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.stmm_i6{
|
||
margin-top:20px;
|
||
.operation,.nselect{
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #4EA6FF;
|
||
font-size: 14px;
|
||
.ops1,.ops2{
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|