mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-06 17:36:44 +08:00
Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage
This commit is contained in:
岳佳鑫
BIN
src/assets/images/coursewareManage/add0.png
Normal file
BIN
src/assets/images/coursewareManage/add0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 B |
BIN
src/assets/images/coursewareManage/add1.png
Normal file
BIN
src/assets/images/coursewareManage/add1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
@@ -16,22 +16,21 @@
|
||||
</div>
|
||||
<div class="select fitems">
|
||||
<a-select
|
||||
v-model:value="projectName"
|
||||
dropdownClassName="dropdown-style"
|
||||
style="width: 200px"
|
||||
placeholder="请选择状态"
|
||||
:options="projectNameList"
|
||||
@change="selectProjectName"
|
||||
:options="options1"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="select fitems">
|
||||
<a-select
|
||||
v-model:value="projectName"
|
||||
dropdownClassName="dropdown-style"
|
||||
style="width: 200px"
|
||||
placeholder="请选择内容分类"
|
||||
:options="projectNameList"
|
||||
@change="selectProjectName"
|
||||
:options="options2"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
@@ -63,15 +62,95 @@
|
||||
</div>
|
||||
<div class="btn btn4">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">新建课程</div>
|
||||
<div class="btnText" @click="ft_hShow">新建课程</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="add_exit">x</div>
|
||||
</div>
|
||||
<div class="m_body">
|
||||
<div class="b_header">
|
||||
<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="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>
|
||||
<div class="bc_boxl">
|
||||
<div class="ol_checkbox"><div class="checkbtn"></div></div>
|
||||
<span style="margin:auto 31px auto 5px;">线上</span>
|
||||
</div>
|
||||
<div class="bc_boxr" @click="bs_hShow">
|
||||
<div class="ol_checkbox"><div class="checkbtn"></div></div>
|
||||
<span style="margin:auto 31px auto 5px;">面授</span>
|
||||
</div>
|
||||
</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>
|
||||
<div class="ol_checkbox">
|
||||
<div class="checkbtn"></div>
|
||||
</div>
|
||||
<span style="margin:auto 31px auto 5px;">线上</span>
|
||||
<div class="ol_checkbox">
|
||||
<div class="checkbtn"></div>
|
||||
</div>
|
||||
<span style="margin:auto 31px auto 5px;">面授</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b_footer">
|
||||
<div class="btn btn5">
|
||||
<div class="btnText">取消</div>
|
||||
</div>
|
||||
<div class="btn btn6" >
|
||||
<div class="btnText">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新建面授课弹窗 -->
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1300, y: 1000 }">
|
||||
<a-table :columns="columns" :data-source="data" :scroll="{ x: 800 }">
|
||||
<template #bodyCell="{ column }">
|
||||
<template v-if="column.key === 'operation'">
|
||||
<a>action</a>
|
||||
@@ -83,7 +162,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { reactive, toRefs, defineComponent, ref } from 'vue';
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
width: 200,
|
||||
@@ -200,20 +279,93 @@ const data = [{
|
||||
pubtime: '2022-07-20 9:30',
|
||||
ynuse: '启用',
|
||||
kkty:true,
|
||||
}];
|
||||
}];
|
||||
export default defineComponent({
|
||||
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({
|
||||
ft_hs:false,
|
||||
hideshow: false,
|
||||
bs_hs:true,
|
||||
});
|
||||
|
||||
const ft_hShow = () => {
|
||||
if (state.ft_hs == false) {
|
||||
state.ft_hs = true
|
||||
}
|
||||
}
|
||||
|
||||
const hideShow = () => {
|
||||
if (state.hideshow == false) {
|
||||
state.hideshow = true
|
||||
} else {
|
||||
state.hideshow = false
|
||||
}
|
||||
}
|
||||
|
||||
const bs_hShow = () => {
|
||||
if (state.bs_hs == true) {
|
||||
state.bs_hs = false
|
||||
} else {
|
||||
state.bs_hs = true
|
||||
}
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
data,
|
||||
columns,
|
||||
options1,
|
||||
options2,
|
||||
ft_hShow,
|
||||
hideShow,
|
||||
bs_hShow,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .dropdown-style{
|
||||
// .ant-select-dropdown-menu{
|
||||
// background: #6767bd;
|
||||
// }
|
||||
// .ant-select-dropdown-menu-item {
|
||||
// color: #4EA6FF !important;
|
||||
// }
|
||||
// }
|
||||
.courseManage {
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -222,8 +374,8 @@ export default defineComponent({
|
||||
margin-left: 38px;
|
||||
margin-top: 30px;
|
||||
.filter {
|
||||
width: calc(69% - 34px);
|
||||
margin-right: 34px;
|
||||
width: calc(70% - 40px) ;
|
||||
margin-right: 30px ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
@@ -328,6 +480,131 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faceteach{
|
||||
z-index: 1000;
|
||||
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%);
|
||||
.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%;
|
||||
}
|
||||
.add_exit{
|
||||
position: absolute;
|
||||
right:42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.m_body{
|
||||
width: 88%;
|
||||
.checkbtn{
|
||||
width: 7.8px;
|
||||
height: 7.8px;
|
||||
border: 1px solid #4EA6FF;
|
||||
background-color: #4EA6FF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ol_checkbox{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.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_boxl,.bc_boxr{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.b_sup{
|
||||
margin: 21px auto 14px 52px;
|
||||
.bs_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.b_footer{
|
||||
width: 100%;
|
||||
margin-left: 212px;
|
||||
margin-top: 25px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user