hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-16 06:16:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:小组管理

Browse Source
This commit is contained in:
岳佳鑫
2022-10-18 11:27:06 +08:00
parent 03eb4686aa fc45ee3390
commit 00ebdd7b72
5 changed files with 2382 additions and 1334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

441
src/components/drawers/AddOnline.vue Normal file
View File

@@ -0,0 +1,441 @@
<template>
<a-drawer
:visible="addonlineVisible"
class="drawerStyle"
width="80%"
title="添加在线"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">添加在线</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<div class="main_items">
<div class="mi_ipts">
<div class="mii_ipt">
<div class="ipt_name">课程编号：</div>
<div class="fi_input">
<a-input
v-model:value="value1"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
/>
</div>
</div>
<div class="mii_ipt">
<div class="ipt_name">内容分类：</div>
<div class="select">
<a-select
dropdownClassName="dropdown-style"
style="width: 200px"
placeholder="请选择"
:options="options1"
allowClear
showSearch
/>
</div>
</div>
</div>
<div class="mi_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>
</div>
<div class="main_notice">
<div class="mntc_left">
<div class="notice_icon"></div>
<span style="color:rgba(0, 0, 0, .65); margin-right:17px;">已选择 <span style="color:#388BE1;">4</span> 项</span>
<span style="color:rgba(0, 0, 0, .65)">列表选项总计：<span>14</span> 条</span>
</div>
<div class="mntc_right">
<span style="color:#387DF7; margin-right:24px;">清空</span>
</div>
</div>
<div class="main_table">
<a-table class="ant-table-striped"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
:row-selection="rowSelection"
:columns="columns1"
:data-source="tableData1"
: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()
// })
},
}"
/>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
const options1 = ref([
{
value: "value1",
label: "请选择状态",
},
]);
const columns1 = [
{
title: "课程编号",
width: '20%',
dataIndex: "num",
key: "num",
align: "center",
},
{
title: "名称",
width: '20%',
dataIndex: "name",
key: "name",
align: "center",
},
{
title: "内容分类",
width: '13%',
dataIndex: "content",
key: "content",
align: "center",
},
{
title: "授课教师",
width: '13%',
dataIndex: "teacher",
key: "teacher",
align: "center",
},
{
title: "创建人",
width: '13%',
dataIndex: "creator",
key: "creator",
align: "center",
},
{
title: "完成时间",
width: '20%',
dataIndex: "time",
key: "time",
align: "center",
},
]
const rowSelection = ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
});
export default {
name: "AddOnline",
props: {
addonlineVisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({
tableData1: [
{
key: "1",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'通用力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "2",
num: 'JDF2022071100001',
name:'管理能力课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "3",
num: 'JDF2022071100001',
name:'快速换模SMED',
content:'通用力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "4",
num: 'JDF2022071100001',
name:'巧妙对话人见人夸',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "5",
num: 'JDF2022071100001',
name:'管理能力课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "6",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "7",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "8",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "9",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
],
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
});
const closeDrawer = () => {
ctx.emit("update:addonlineVisible", false);
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
const showDrawerOnline = () => {
state.visible = true;
};
return {
...toRefs(state),
afterVisibleChange,
showDrawerOnline,
closeDrawer,
options1,
columns1,
rowSelection,
// change,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.drawerStyle {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
.main_items{
display: flex;
justify-content: space-between;
margin-bottom: 32px;
.mi_ipts{
display: flex;
.mii_ipt{
display: flex;
align-items: center;
margin-right: 24px;
}
}
.mi_btns{
display: flex;
margin-left: 38px;
cursor: pointer;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
background: rgb(64, 158, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/search0.png");
}
.btnText{
color: rgb(255, 255, 255);
}
}
.btn2 {
background: rgb(255, 255, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/reset1.png");
}
.btnText{
color: rgb(64, 158, 255);
}
}
.btn1:hover {
background: rgb(255, 255, 255);
.search {
background-image: url("@/assets/images/courseManage/search1.png");
}
.btnText {
color: #388BE1;
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("@/assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.main_notice{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
height: 40px;
background-color: #E9F6FE;
.mntc_left{
display: flex;
align-items: center;
.notice_icon{
width: 14px;
height: 14px;
margin-right: 9px;
margin-left: 9px;
background-image: url(@/assets/images/coursewareManage/gan.png);
background-size: 100% 100%;
}
}
.mntc_right{
cursor: pointer;
}
}
.main_btns{
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
}
</style>

441
src/components/drawers/EidtOnline.vue Normal file
View File

@@ -0,0 +1,441 @@
<template>
<a-drawer
:visible="editonlineVisible"
class="drawerStyle"
width="80%"
title="添加在线"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">添加在线</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<div class="main_items">
<div class="mi_ipts">
<div class="mii_ipt">
<div class="ipt_name">课程编号：</div>
<div class="fi_input">
<a-input
v-model:value="value1"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
/>
</div>
</div>
<div class="mii_ipt">
<div class="ipt_name">内容分类：</div>
<div class="select">
<a-select
dropdownClassName="dropdown-style"
style="width: 200px"
placeholder="请选择"
:options="options1"
allowClear
showSearch
/>
</div>
</div>
</div>
<div class="mi_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>
</div>
<div class="main_notice">
<div class="mntc_left">
<div class="notice_icon"></div>
<span style="color:rgba(0, 0, 0, .65); margin-right:17px;">已选择 <span style="color:#388BE1;">4</span> 项</span>
<span style="color:rgba(0, 0, 0, .65)">列表选项总计：<span>14</span> 条</span>
</div>
<div class="mntc_right">
<span style="color:#387DF7; margin-right:24px;">清空</span>
</div>
</div>
<div class="main_table">
<a-table class="ant-table-striped"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
:row-selection="rowSelection"
:columns="columns1"
:data-source="tableData1"
: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()
// })
},
}"
/>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
const options1 = ref([
{
value: "value1",
label: "请选择状态",
},
]);
const columns1 = [
{
title: "课程编号",
width: '20%',
dataIndex: "num",
key: "num",
align: "center",
},
{
title: "名称",
width: '20%',
dataIndex: "name",
key: "name",
align: "center",
},
{
title: "内容分类",
width: '13%',
dataIndex: "content",
key: "content",
align: "center",
},
{
title: "授课教师",
width: '13%',
dataIndex: "teacher",
key: "teacher",
align: "center",
},
{
title: "创建人",
width: '13%',
dataIndex: "creator",
key: "creator",
align: "center",
},
{
title: "完成时间",
width: '20%',
dataIndex: "time",
key: "time",
align: "center",
},
]
const rowSelection = ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
});
export default {
name: "EditOnline",
props: {
editonlineVisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({
tableData1: [
{
key: "1",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'通用力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "2",
num: 'JDF2022071100001',
name:'管理能力课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "3",
num: 'JDF2022071100001',
name:'快速换模SMED',
content:'通用力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "4",
num: 'JDF2022071100001',
name:'巧妙对话人见人夸',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "5",
num: 'JDF2022071100001',
name:'管理能力课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "6",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "7",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "8",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
{
key: "9",
num: 'JDF2022071100001',
name:'时间管理课程',
content:'领导力',
teacher:'BOE教师',
creator:'管理员',
time:'2022-10-31 23:12:00',
},
],
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
});
// const closeDrawer = () => {
// ctx.emit("update:addonlineVisible", false);
// };
// const afterVisibleChange = (bool) => {
// console.log("state", bool);
// };
// const showDrawerOnline = () => {
// state.visible = true;
// };
return {
...toRefs(state),
afterVisibleChange,
showDrawerOnline,
closeDrawer,
options1,
columns1,
rowSelection,
// change,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.drawerStyle {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
.main_items{
display: flex;
justify-content: space-between;
margin-bottom: 32px;
.mi_ipts{
display: flex;
.mii_ipt{
display: flex;
align-items: center;
margin-right: 24px;
}
}
.mi_btns{
display: flex;
margin-left: 38px;
cursor: pointer;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
background: rgb(64, 158, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/search0.png");
}
.btnText{
color: rgb(255, 255, 255);
}
}
.btn2 {
background: rgb(255, 255, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/reset1.png");
}
.btnText{
color: rgb(64, 158, 255);
}
}
.btn1:hover {
background: rgb(255, 255, 255);
.search {
background-image: url("@/assets/images/courseManage/search1.png");
}
.btnText {
color: #388BE1;
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("@/assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.main_notice{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
height: 40px;
background-color: #E9F6FE;
.mntc_left{
display: flex;
align-items: center;
.notice_icon{
width: 14px;
height: 14px;
margin-right: 9px;
margin-left: 9px;
background-image: url(@/assets/images/coursewareManage/gan.png);
background-size: 100% 100%;
}
}
.mntc_right{
cursor: pointer;
}
}
.main_btns{
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
}
</style>

69
src/views/courselibrary/CoursewareManage.vue
View File

@@ -697,12 +697,16 @@
<div class="bs_left">状态：</div> <div class="bs_left">状态：</div>
<div class="bs_right">已审核</div> <div class="bs_right">已审核</div>
</div> </div>
<div class="b_menu"> <a-tabs
<a-menu v-model:selectedKeys="current" mode="horizontal"> class="b_menu"
<a-menu-item key="mail"> 报名管理 </a-menu-item> v-model:activeKey="activeKey"
<a-menu-item key="sub2"> 学习记录 </a-menu-item> size="large"
</a-menu> :tabBarStyle="{ marginLeft: '10px' }"
</div> >
<a-tab-pane key="1" tab="报名管理">
1
</a-tab-pane>
<a-tab-pane key="2" tab="学习记录">
<div class="b_menunav"> <div class="b_menunav">
<div class="bm_select"> <div class="bm_select">
<a-select <a-select
@@ -748,6 +752,59 @@
</template> </template>
</a-table> </a-table>
</div> </div>
</a-tab-pane>
</a-tabs>
<!-- <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="value14"
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="value15"
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="columns2"
: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>
</div> </div>

126
src/views/projectcenter/TaskAdd.vue
View File

@@ -62,12 +62,17 @@
</div> </div>
<div class="mid"> <div class="mid">
<div class="item"> <div class="item">
<div class="itcon"> <div class="itcon" @click="showDrawerOnline">
<div class="img"> <div class="img">
<img src="../../assets/images/leveladd/zai.png" /> <img src="../../assets/images/leveladd/zai.png" />
</div> </div>
<div class="text" >在线</div> <div class="text" >在线</div>
</div> </div>
<!-- 添加在线侧弹窗 -->
<div>
<add-online v-model:addonlineVisible="visible" />
</div>
<!-- 添加在线侧弹窗 -->
<div class="lin"></div> <div class="lin"></div>
</div> </div>
<div class="item"> <div class="item">
@@ -220,43 +225,12 @@
/> />
</div> </div>
</div> </div>
<!-- 编辑在线侧弹窗 -->
<div>
<add-online v-model:addonlineVisible="visible" />
</div> </div>
<!-- 编辑在线侧弹窗 -->
</div> </div>
<div class="draw" style="position: relative">
<a-drawer
v-model:visible="visible"
class="drawerStyle"
title="关联项目"
placement="right"
width="80%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">关联项目</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="showDrawer"
/>
</div>
<div class="drawerbox">
<a-table
:columns="drawercolumns"
:data-source="drawertableData"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }"
@expand="expandTable"
:pagination="false"
>
</a-table>
</div>
<div class="btnn">
<button @click="showDrawer" class="btn1">取消</button>
<button @click="showDrawer" class="btn2">确定</button>
</div>
</div>
</a-drawer>
</div> </div>
</div> </div>
<div> <div>
@@ -318,6 +292,7 @@
<script> <script>
import { reactive, toRefs, onMounted, onUnmounted } from "vue"; import { reactive, toRefs, onMounted, onUnmounted } from "vue";
import AddOnline from "../../components/drawers/AddOnline.vue";
const drawercolumns = [ const drawercolumns = [
{ {
title: "项目名称", title: "项目名称",
@@ -358,6 +333,9 @@ const drawercolumns = [
]; ];
export default { export default {
name: "LevelAddDetail", name: "LevelAddDetail",
components: {
AddOnline,
},
setup() { setup() {
const state = reactive({ const state = reactive({
projectNameList: [ projectNameList: [
@@ -523,7 +501,6 @@ export default {
key: "1-1", key: "1-1",
projectName: "管理者进阶-腾飞班", projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊", manager: "黄华 刘俊",
creater: "毛继禹", creater: "毛继禹",
time: "2022-07-20 14:00:03", time: "2022-07-20 14:00:03",
children: [ children: [
@@ -549,7 +526,6 @@ export default {
key: "2-1", key: "2-1",
projectName: "管理者进阶-腾飞班", projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊", manager: "黄华 刘俊",
creater: "毛继禹", creater: "毛继禹",
time: "2022-07-20 14:00:03", time: "2022-07-20 14:00:03",
children: [ children: [
@@ -564,12 +540,10 @@ export default {
}, },
], ],
}, },
{ {
key: 3, key: 3,
projectName: "管理者进阶-腾飞班K1", projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊", manager: "黄华 刘俊",
creater: "毛继禹", creater: "毛继禹",
time: "2022-07-20 14:00:03", time: "2022-07-20 14:00:03",
}, },
@@ -577,7 +551,6 @@ export default {
key: 4, key: 4,
projectName: "管理者进阶-腾飞班K1", projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊", manager: "黄华 刘俊",
creater: "毛继禹", creater: "毛继禹",
time: "2022-07-20 14:00:03", time: "2022-07-20 14:00:03",
}, },
@@ -585,7 +558,6 @@ export default {
key: 5, key: 5,
projectName: "管理者进阶-腾飞班K1", projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊", manager: "黄华 刘俊",
creater: "毛继禹", creater: "毛继禹",
time: "2022-07-20 14:00:03", time: "2022-07-20 14:00:03",
}, },
@@ -593,7 +565,6 @@ export default {
key: 6, key: 6,
projectName: "管理者进阶-腾飞班K1", projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊", manager: "黄华 刘俊",
creater: "毛继禹", creater: "毛继禹",
time: "2022-07-20 14:00:03", time: "2022-07-20 14:00:03",
}, },
@@ -601,7 +572,6 @@ export default {
key: 7, key: 7,
projectName: "管理者进阶-腾飞班K1", projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊", manager: "黄华 刘俊",
creater: "毛继禹", creater: "毛继禹",
time: "2022-07-20 14:00:03", time: "2022-07-20 14:00:03",
}, },
@@ -610,6 +580,7 @@ export default {
tableDataTotal: 100, tableDataTotal: 100,
pageSize: 10, pageSize: 10,
visible: false, visible: false,
visible2:false,
stage: false, stage: false,
selectedRowKeys: [], selectedRowKeys: [],
}); });
@@ -619,9 +590,6 @@ export default {
const selectProjectName2 = (value, index) => { const selectProjectName2 = (value, index) => {
console.log("value", value, index); console.log("value", value, index);
}; };
const showDrawer = () => {
state.visible = !state.visible;
};
const afterVisibleChange = (bool) => { const afterVisibleChange = (bool) => {
console.log("visible", bool); console.log("visible", bool);
}; };
@@ -635,18 +603,13 @@ export default {
width: 60, width: 60,
align: "left", align: "left",
className: "classify", className: "classify",
scopedSlots: { customRender: "action" }, //引入的插槽 scopedSlots: { customRender: "action" },
customRender: (text) => { customRender: (text) => {
// console.log(text.record.checked1); // console.log(text.record.checked1);
return ( return (<div class="racona">
<div class="racona"> <div class="img" style={{ cursor: "pointer" }} onClick={() => {
<div
class="img"
style={{ cursor: "pointer" }}
onClick={() => {
console.log("点击了"); console.log("点击了");
}} }}></div>
></div>
<span> {text.record.lei}</span> <span> {text.record.lei}</span>
{/** {/**
@@ -655,8 +618,7 @@ export default {
{text.record.lei} {text.record.lei}
</a-checkbox> </a-checkbox>
*/} */}
</div> </div>);
);
}, },
}, },
{ {
@@ -675,36 +637,23 @@ export default {
// width: 100, // width: 100,
align: "center", align: "center",
className: "h", className: "h",
scopedSlots: { customRender: "action" }, //引入的插槽 scopedSlots: { customRender: "action" },
customRender: (text) => { customRender: (text) => {
// console.log(text.record.checked1); // console.log(text.record.checked1);
return ( return (<div class="opat">
<div class="opat">
<div class="opacationt clearfix"> <div class="opacationt clearfix">
<a-switch <a-switch style="margin-left:-50px;margin-top:3px" checked={text.record.checked1} size="small" active-color="red" onClick={() => {
style="margin-left:-50px;margin-top:3px"
checked={text.record.checked1}
size="small"
active-color="red"
onClick={() => {
console.log("点击了"); console.log("点击了");
text.record.checked1 = !text.record.checked1; text.record.checked1 = !text.record.checked1;
}} }}/>
/>
<div class="showt clearfix"> <div class="showt clearfix">
<div <div class="bi" style={text.record.checked1 ? "z-index:999" : "z-index:998"}>
class="bi"
style={
text.record.checked1 ? "z-index:999" : "z-index:998"
}
>
必修 必修
</div> </div>
<div class="xuan">选修</div> <div class="xuan">选修</div>
</div> </div>
</div> </div>
</div> </div>);
);
}, },
}, },
{ {
@@ -722,29 +671,30 @@ export default {
key: "opacation", key: "opacation",
// width: 100, // width: 100,
align: "center", align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽 scopedSlots: { customRender: "action" },
customRender: () => { customRender: () => {
return ( return (<div class="opa">
<div class="opa">
<div class="opacation"> <div class="opacation">
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer"> <span
onClick={() => {
state.visible2 = true;
}}
style="color:#4EA6FF;margin-right:25px;cursor:pointer"
>
编辑 编辑
</span> </span>
<span style="color:#4EA6FF;cursor:pointer">删除</span> <span style="color:#4EA6FF;cursor:pointer">删除</span>
</div> </div>
</div> </div>);
);
}, },
}, },
]; ];
return columns; return columns;
}; };
const onSelectChange = (selectedRowKeys) => { const onSelectChange = (selectedRowKeys) => {
console.log("selectedRowKeys changed: ", selectedRowKeys); console.log("selectedRowKeys changed: ", selectedRowKeys);
state.selectedRowKeys = selectedRowKeys; state.selectedRowKeys = selectedRowKeys;
}; };
// const getClientHeight = () => { // const getClientHeight = () => {
// state.rightheight = // state.rightheight =
// document.getElementsByClassName("addhead")[0].offsetHeight + // document.getElementsByClassName("addhead")[0].offsetHeight +
@@ -769,6 +719,9 @@ export default {
document.getElementsByTagName("main")[0].style.boxShadow = document.getElementsByTagName("main")[0].style.boxShadow =
"0px 1px 35px 0px rgba(118, 136, 166, 0.07)"; "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
}); });
const showDrawerOnline = () => {
state.visible = true;
};
return { return {
...toRefs(state), ...toRefs(state),
selectProjectName, selectProjectName,
@@ -776,10 +729,11 @@ export default {
tableDataFunc, tableDataFunc,
showModal, showModal,
closeModal, closeModal,
showDrawer, // showDrawer,
afterVisibleChange, afterVisibleChange,
drawercolumns, drawercolumns,
onSelectChange, onSelectChange,
showDrawerOnline,
}; };
}, },
}; };

371
src/views/projectcenter/TaskPage.vue
View File

@@ -38,37 +38,93 @@
> >
</div> </div>
</div> </div>
<div class="split" style="flex-shrink: 0;"></div> <div class="split" style="flex-shrink: 0"></div>
<div class="content"> <div class="content">
<a-tabs class="tab" <a-tabs
class="tab"
v-model:activeKey="activeKey" v-model:activeKey="activeKey"
size="large" size="large"
:tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }"> :tabBarStyle="{ marginLeft: '10px', marginTop: '5px' }"
>
<a-tab-pane key="1" tab="概览"> <a-tab-pane key="1" tab="概览">
<div class="split"></div> <div class="split"></div>
<!-- 概览（无数据） --> <!-- 概览（无数据） -->
<div> <div>
<div class="onerow"><div class="taskmain">快速创建项目详情</div></div> <div class="onerow">
<div class="taskmain">快速创建项目详情</div>
</div>
<div class="second"> <div class="second">
<div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> <div
<div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div> class="taskbox"
<div class="photo"><img src="../../assets/images/taskpage/picture1.png"/></div> style="
<div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div> background: linear-gradient(
<div class="centerbox" style="color: rgba(255, 182, 78, 1)">添加任务</div> 180deg,
rgba(254, 243, 221, 1) 100%,
rgba(255, 250, 240, 1) 100%
);
"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left1.png" />
</div>
<div class="photo">
<img src="../../assets/images/taskpage/picture1.png" />
</div>
<div class="rightt">
<img src="../../assets/images/taskpage/right1.png" />
</div>
<div class="centerbox" style="color: rgba(255, 182, 78, 1)">
添加任务
</div>
<div class="centermain">快速添加任务/阶段</div> <div class="centermain">快速添加任务/阶段</div>
</div> </div>
<div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);"> <div
<div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div> class="taskbox"
<div class="photo"><img src="../../assets/images/taskpage/picture2.png"/></div> style="
<div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div> background: linear-gradient(
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">添加学员</div> 180deg,
rgba(221, 234, 255, 1) 100%,
rgba(240, 248, 254, 1) 100%
);
"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
</div>
<div class="photo">
<img src="../../assets/images/taskpage/picture2.png" />
</div>
<div class="rightt">
<img src="../../assets/images/taskpage/right2.png" />
</div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">
添加学员
</div>
<div class="centermain">快速添加学员</div> <div class="centermain">快速添加学员</div>
</div> </div>
<div class="taskbox" @click="showModal" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);"> <div
<div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div> class="taskbox"
<div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div> @click="showModal"
<div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div> style="
<div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div> background: linear-gradient(
180deg,
rgba(229, 246, 236, 1) 100%,
rgba(238, 249, 243, 1) 100%
);
"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left3.png" />
</div>
<div class="photo">
<img src="../../assets/images/taskpage/picture3.png" />
</div>
<div class="rightt">
<img src="../../assets/images/taskpage/right3.png" />
</div>
<div class="centerbox" style="color: rgba(93, 201, 136, 1)">
发布
</div>
<div class="centermain">快速发布项目</div> <div class="centermain">快速发布项目</div>
</div> </div>
</div> </div>
@@ -83,28 +139,31 @@
<div class="nub2">总人数</div> <div class="nub2">总人数</div>
</div> </div>
<div class="nubbox"> <div class="nubbox">
<span class="nub1" style="color: #FF90AE">15</span> <span class="nub1" style="color: #ff90ae">15</span>
<div class="nub2">必修课</div> <div class="nub2">必修课</div>
</div> </div>
<div class="nubbox"> <div class="nubbox">
<span class="nub1" style="color: #A497FF">15</span> <span class="nub1" style="color: #a497ff">15</span>
<div class="nub2">选修课</div> <div class="nub2">选修课</div>
</div> </div>
<div class="nubbox"> <div class="nubbox">
<div> <div>
<span class="nub1" style="color: #5DC988">50</span><span style="color: #5DC988;font-size: 14px">%</span> <span class="nub1" style="color: #5dc988">50</span
><span style="color: #5dc988; font-size: 14px">%</span>
</div> </div>
<div class="nub2">完成率</div> <div class="nub2">完成率</div>
</div> </div>
<div class="nubbox"> <div class="nubbox">
<div> <div>
<span class="nub1" style="color: #FF90AE">30</span><span style="color: #FF90AE;font-size: 14px">%</span> <span class="nub1" style="color: #ff90ae">30</span
><span style="color: #ff90ae; font-size: 14px">%</span>
</div> </div>
<div class="nub2">必修完成率</div> <div class="nub2">必修完成率</div>
</div> </div>
<div class="nubbox"> <div class="nubbox">
<div> <div>
<span class="nub1" style="color: #A497FF">30</span><span style="color: #A497FF;font-size: 14px">%</span> <span class="nub1" style="color: #a497ff">30</span
><span style="color: #a497ff; font-size: 14px">%</span>
</div> </div>
<div class="nub2">选修完成率</div> <div class="nub2">选修完成率</div>
</div> </div>
@@ -120,15 +179,30 @@
</div> </div>
<div class="stagelast"> <div class="stagelast">
<div class="stagepro"> <div class="stagepro">
<a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" /> <a-progress
type="dashboard"
gapDegree="0"
:percent="50"
:width="140"
/>
<div class="protext">课程完成率</div> <div class="protext">课程完成率</div>
</div> </div>
<div class="stagepro"> <div class="stagepro">
<a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" /> <a-progress
type="dashboard"
gapDegree="0"
:percent="50"
:width="140"
/>
<div class="protext">考试通过率</div> <div class="protext">考试通过率</div>
</div> </div>
<div class="stagepro" style="margin-right: 0"> <div class="stagepro" style="margin-right: 0">
<a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" /> <a-progress
type="dashboard"
gapDegree="0"
:percent="50"
:width="140"
/>
<div class="protext">作业合格率</div> <div class="protext">作业合格率</div>
</div> </div>
<div class="proright"> <div class="proright">
@@ -158,17 +232,24 @@
<div class="taskmain">任务大纲</div> <div class="taskmain">任务大纲</div>
<button class="btn">批量面授报名</button> <button class="btn">批量面授报名</button>
<router-link to="/taskadd" class="edit"> <router-link to="/taskadd" class="edit">
<img class="editimg" src="../../assets/images/projectadd/edit.png"/> <img
class="editimg"
src="../../assets/images/projectadd/edit.png"
/>
<span class="editext">编辑</span> <span class="editext">编辑</span>
</router-link> </router-link>
</div> </div>
<div class="stage"> <div class="stage">
<span class="stageimg"><img src="../../assets/images/projectadd/open.png"/></span> <span class="stageimg"
><img src="../../assets/images/projectadd/open.png"
/></span>
<span class="stagename">阶段1腾飞班阶级1</span> <span class="stagename">阶段1腾飞班阶级1</span>
</div> </div>
<div class="course"> <div class="course">
<div class="first"> <div class="first">
<div class="icon"><img src="../../assets/images/leveladd/zai.png"/></div> <div class="icon">
<img src="../../assets/images/leveladd/zai.png" />
</div>
<div> <div>
<div class="iconame">「在线」</div> <div class="iconame">「在线」</div>
<div class="icontext">时间管理</div> <div class="icontext">时间管理</div>
@@ -184,19 +265,26 @@
<div class="progress"> <div class="progress">
<div class="progresstext">25/50人</div> <div class="progresstext">25/50人</div>
<div style="display: flex"> <div style="display: flex">
<a-progress :showInfo="false" :percent="50" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/> <a-progress
:showInfo="false"
:percent="50"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px">50%</span> <span class="progresstext" style="margin-left: 10px">50%</span>
</div> </div>
</div> </div>
<div class="operations"> <div class="operations">
<div class="operation" style="cursor: pointer" @click="showTime">
<div class="operation" style="cursor: pointer" @click="showTime">管理</div> 管理
</div>
</div> </div>
</div> </div>
<div class="course"> <div class="course">
<div class="first"> <div class="first">
<div class="icon"><img src="../../assets/images/leveladd/zhi.png"/></div> <div class="icon">
<img src="../../assets/images/leveladd/zhi.png" />
</div>
<div> <div>
<div class="iconame">「直播」</div> <div class="iconame">「直播」</div>
<div class="icontext">管理直播间</div> <div class="icontext">管理直播间</div>
@@ -212,7 +300,12 @@
<div class="progress"> <div class="progress">
<div class="progresstext">0/50人</div> <div class="progresstext">0/50人</div>
<div style="display: flex"> <div style="display: flex">
<a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/> <a-progress
:showInfo="false"
:percent="0"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px">0%</span> <span class="progresstext" style="margin-left: 10px">0%</span>
</div> </div>
</div> </div>
@@ -224,7 +317,9 @@
</div> </div>
<div class="course"> <div class="course">
<div class="first"> <div class="first">
<div class="icon"><img src="../../assets/images/leveladd/mian.png"/></div> <div class="icon">
<img src="../../assets/images/leveladd/mian.png" />
</div>
<div> <div>
<div class="iconame">「面授」</div> <div class="iconame">「面授」</div>
<div class="icontext">管理面授课</div> <div class="icontext">管理面授课</div>
@@ -240,19 +335,28 @@
<div class="progress"> <div class="progress">
<div class="progresstext">0/50人</div> <div class="progresstext">0/50人</div>
<div style="display: flex"> <div style="display: flex">
<a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/> <a-progress
:showInfo="false"
:percent="0"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px">0%</span> <span class="progresstext" style="margin-left: 10px">0%</span>
</div> </div>
</div> </div>
<div class="operations"> <div class="operations">
<div class="operation">学员</div> <div class="operation">学员</div>
<div class="operation" style="cursor: pointer" @click="showFace">管理</div> <div class="operation" style="cursor: pointer" @click="showFace">
管理
</div>
<div class="operation">二维码</div> <div class="operation">二维码</div>
</div> </div>
</div> </div>
<div class="course"> <div class="course">
<div class="first"> <div class="first">
<div class="icon"><img src="../../assets/images/leveladd/huo.png"/></div> <div class="icon">
<img src="../../assets/images/leveladd/huo.png" />
</div>
<div> <div>
<div class="iconame">「活动」</div> <div class="iconame">「活动」</div>
<div class="icontext">管理活动</div> <div class="icontext">管理活动</div>
@@ -268,7 +372,12 @@
<div class="progress"> <div class="progress">
<div class="progresstext">0/50人</div> <div class="progresstext">0/50人</div>
<div style="display: flex"> <div style="display: flex">
<a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/> <a-progress
:showInfo="false"
:percent="0"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px">0%</span> <span class="progresstext" style="margin-left: 10px">0%</span>
</div> </div>
</div> </div>
@@ -280,7 +389,9 @@
</div> </div>
<div class="course"> <div class="course">
<div class="first"> <div class="first">
<div class="icon"><img src="../../assets/images/leveladd/zuo.png"/></div> <div class="icon">
<img src="../../assets/images/leveladd/zuo.png" />
</div>
<div> <div>
<div class="iconame">「作业」</div> <div class="iconame">「作业」</div>
<div class="icontext">管理者作业</div> <div class="icontext">管理者作业</div>
@@ -296,19 +407,24 @@
<div class="progress"> <div class="progress">
<div class="progresstext">0/50人</div> <div class="progresstext">0/50人</div>
<div style="display: flex"> <div style="display: flex">
<a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/> <a-progress
:showInfo="false"
:percent="0"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px">0%</span> <span class="progresstext" style="margin-left: 10px">0%</span>
</div> </div>
</div> </div>
<div class="operations"> <div class="operations">
<div class="operation">管理</div> <div class="operation">管理</div>
</div> </div>
</div> </div>
<div class="course"> <div class="course">
<div class="first"> <div class="first">
<div class="icon"><img src="../../assets/images/leveladd/kao.png"/></div> <div class="icon">
<img src="../../assets/images/leveladd/kao.png" />
</div>
<div> <div>
<div class="iconame">「考试」</div> <div class="iconame">「考试」</div>
<div class="icontext">管理者考试</div> <div class="icontext">管理者考试</div>
@@ -324,18 +440,23 @@
<div class="progress"> <div class="progress">
<div class="progresstext">0/50人</div> <div class="progresstext">0/50人</div>
<div style="display: flex"> <div style="display: flex">
<a-progress :showInfo="false" :percent="0" strokeColor="#FFC067" trailColor="rgba(253, 209, 98, 0.2)"/> <a-progress
:showInfo="false"
:percent="0"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px">0%</span> <span class="progresstext" style="margin-left: 10px">0%</span>
</div> </div>
</div> </div>
<div class="operations"> <div class="operations">
<div class="operation">管理</div> <div class="operation">管理</div>
</div> </div>
</div> </div>
<div class="stage" style="margin-top: 0"> <div class="stage" style="margin-top: 0">
<span class="stageimg"><img src="../../assets/images/projectadd/close.png"/></span> <span class="stageimg"
><img src="../../assets/images/projectadd/close.png"
/></span>
<span class="stagename">阶段2 腾飞班阶级2</span> <span class="stagename">阶段2 腾飞班阶级2</span>
</div> </div>
<div style="display: flex; height: 20px"></div> <div style="display: flex; height: 20px"></div>
@@ -426,12 +547,30 @@
width="679px" width="679px"
height="437px" height="437px"
> >
<div class="modalHeader" <div
style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)" class="modalHeader"
style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
"
> >
<div class="headerLeft" style="margin-left: 32px"> <div class="headerLeft" style="margin-left: 32px">
<span style="width: 15px;height: 15px"><img src="../../assets/images/taskpage/pub.png"/></span> <span style="width: 15px; height: 15px"
<span class="headerLeftText" style="font-size: 16px;margin-left:10px">项目发布</span> ><img src="../../assets/images/taskpage/pub.png"
/></span>
<span
class="headerLeftText"
style="font-size: 16px; margin-left: 10px"
>项目发布</span
>
</div> </div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal"> <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
<img <img
@@ -442,7 +581,10 @@
</div> </div>
<div class="modalMain"> <div class="modalMain">
<div class="projectname">管理者进阶-腾飞班1</div> <div class="projectname">管理者进阶-腾飞班1</div>
<div class="projecttime"><span class="timeti">项目时间：</span><span class="timeme">2022/08/01-2022/08/30</span></div> <div class="projecttime">
<span class="timeti">项目时间：</span
><span class="timeme">2022/08/01-2022/08/30</span>
</div>
<div class="projectbox"> <div class="projectbox">
<div class="promessage"> <div class="promessage">
<div class="messageme">项目信息</div> <div class="messageme">项目信息</div>
@@ -458,8 +600,12 @@
<span class="sendtext">发送项目通知</span> <span class="sendtext">发送项目通知</span>
</div> </div>
<div class="ckb"> <div class="ckb">
<a-checkbox v-model:checked="checked1"><span class="sendpeo">发给老师</span></a-checkbox> <a-checkbox v-model:checked="checked1"
<a-checkbox v-model:checked="checked2"><span class="sendpeo">发给学员</span></a-checkbox> ><span class="sendpeo">发给老师</span></a-checkbox
>
<a-checkbox v-model:checked="checked2"
><span class="sendpeo">发给学员</span></a-checkbox
>
</div> </div>
<div class="pubtn"> <div class="pubtn">
<a-button class="pubtn1" @click="closeModal">取消</a-button> <a-button class="pubtn1" @click="closeModal">取消</a-button>
@@ -614,13 +760,14 @@ export default {
return { return {
...toRefs(state), ...toRefs(state),
showModal, showModal,
closeModal,showModal2, closeModal,
showModal2,
closeModal2, closeModal2,
showTime, showTime,
showFace, showFace,
}; };
}, },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.pubproject { .pubproject {
@@ -655,7 +802,11 @@ export default {
.promessage { .promessage {
width: 280px; width: 280px;
height: 110px; height: 110px;
background:linear-gradient(180deg,rgba(254, 243, 221, 1),rgba(255, 250, 240, 1)); background: linear-gradient(
180deg,
rgba(254, 243, 221, 1),
rgba(255, 250, 240, 1)
);
border-radius: 10px; border-radius: 10px;
margin-right: 7px; margin-right: 7px;
.messageme { .messageme {
@@ -674,7 +825,11 @@ export default {
.stumessage { .stumessage {
width: 280px; width: 280px;
height: 110px; height: 110px;
background:linear-gradient(180deg,rgba(221, 234, 255, 1),rgba(240, 248, 254, 1)); background: linear-gradient(
180deg,
rgba(221, 234, 255, 1),
rgba(240, 248, 254, 1)
);
border-radius: 10px; border-radius: 10px;
.messageme1 { .messageme1 {
color: rgba(78, 166, 255, 1); color: rgba(78, 166, 255, 1);
@@ -720,25 +875,25 @@ export default {
height: 40px; height: 40px;
margin-right: 16px; margin-right: 16px;
margin-bottom: 29px; margin-bottom: 29px;
border: 1px solid #409EFF; border: 1px solid #409eff;
border-radius: 4px; border-radius: 4px;
color: rgba(78, 166, 255, 1); color: rgba(78, 166, 255, 1);
font-size: 14px; font-size: 14px;
//line-height: 36px; //line-height: 36px;
align-items: center; align-items: center;
background: rgba(255, 255, 255, 1) background: rgba(255, 255, 255, 1);
} }
.pubtn2 { .pubtn2 {
width: 100px; width: 100px;
height: 40px; height: 40px;
margin-bottom: 29px; margin-bottom: 29px;
border: 1px solid #409EFF; border: 1px solid #409eff;
border-radius: 4px; border-radius: 4px;
color: #FFFFFF; color: #ffffff;
font-size: 14px; font-size: 14px;
align-items: center; align-items: center;
//line-height: 36px; //line-height: 36px;
background: #409EFF; background: #409eff;
} }
} }
} }
@@ -990,7 +1145,6 @@ export default {
padding: 5px 16px; padding: 5px 16px;
background-color: #eff4fc; background-color: #eff4fc;
} }
} }
.split { .split {
width: 100%; width: 100%;
@@ -1020,22 +1174,22 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
right: 168px; right: 168px;
background-color: #409EFF; background-color: #409eff;
width: 130px; width: 130px;
height: 40px; height: 40px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #409EFF; border: 1px solid #409eff;
color: #FFFFFF; color: #ffffff;
cursor: pointer; cursor: pointer;
} }
.edit { .edit {
position: absolute; position: absolute;
right: 48px; right: 48px;
top: 0; top: 0;
color: #409EFF; color: #409eff;
width: 100px; width: 100px;
height: 40px; height: 40px;
border: 1px solid #409EFF; border: 1px solid #409eff;
border-radius: 8px; border-radius: 8px;
.editimg { .editimg {
width: 15px; width: 15px;
@@ -1049,8 +1203,8 @@ export default {
} }
} }
.edit:hover { .edit:hover {
color: #FFFFFF; color: #ffffff;
background-color: #409EFF; background-color: #409eff;
cursor: pointer; cursor: pointer;
.editimg { .editimg {
background-image: url("../../assets/images/projectadd/edit1.png"); background-image: url("../../assets/images/projectadd/edit1.png");
@@ -1071,16 +1225,16 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #FAFBFC; background: #fafbfc;
border-radius: 10px; border-radius: 10px;
margin-left: 15px; margin-left: 15px;
.nub1 { .nub1 {
color: #FFB54A; color: #ffb54a;
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
} }
.nub2 { .nub2 {
color: #6D7584; color: #6d7584;
font-size: 14px; font-size: 14px;
} }
} }
@@ -1133,9 +1287,9 @@ export default {
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
border-radius: 6px; border-radius: 6px;
color: #FFFFFF; color: #ffffff;
font-size: 16px; font-size: 16px;
background: #4EA6FF; background: #4ea6ff;
margin-right: 10px; margin-right: 10px;
margin-top: 19px; margin-top: 19px;
cursor: pointer; cursor: pointer;
@@ -1146,10 +1300,10 @@ export default {
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #EBEEF3; border: 1px solid #ebeef3;
color: #000000; color: #000000;
font-size: 16px; font-size: 16px;
background: #FFFFFF; background: #ffffff;
margin-right: 10px; margin-right: 10px;
margin-top: 19px; margin-top: 19px;
cursor: pointer; cursor: pointer;
@@ -1160,11 +1314,11 @@ export default {
margin-left: 39px; margin-left: 39px;
margin-top: 29px; margin-top: 29px;
.staname { .staname {
color: #999BA3; color: #999ba3;
font-size: 14px; font-size: 14px;
} }
.stamess { .stamess {
color: #4F5156; color: #4f5156;
font-size: 14px; font-size: 14px;
} }
} }
@@ -1180,14 +1334,14 @@ export default {
margin-top: 55px; margin-top: 55px;
margin-right: 120px; margin-right: 120px;
.ant-progress-circle-path { .ant-progress-circle-path {
stroke: #4EA6FF; stroke: #4ea6ff;
} }
.ant-progress-text { .ant-progress-text {
color: #4EA6FF; color: #4ea6ff;
font-weight: 700; font-weight: 700;
} }
.protext { .protext {
color: #6D7584; color: #6d7584;
font-size: 14px; font-size: 14px;
margin-top: 25px; margin-top: 25px;
} }
@@ -1198,13 +1352,13 @@ export default {
margin-left: 50px; margin-left: 50px;
.ant-progress-bg { .ant-progress-bg {
height: 24px !important; height: 24px !important;
background: #4EA6FF; background: #4ea6ff;
} }
.ant-progress-inner { .ant-progress-inner {
height: 24px; height: 24px;
} }
.pronub { .pronub {
color: #4EA6FF; color: #4ea6ff;
font-size: 14px; font-size: 14px;
margin: 5px 0; margin: 5px 0;
} }
@@ -1212,12 +1366,12 @@ export default {
display: flex; display: flex;
justify-content: right; justify-content: right;
.textpro { .textpro {
color: #6D7584; color: #6d7584;
font-size: 14px; font-size: 14px;
margin-right: 20px; margin-right: 20px;
} }
.ant-progress-text { .ant-progress-text {
color: #4EA6FF; color: #4ea6ff;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
} }
@@ -1227,7 +1381,7 @@ export default {
.stage { .stage {
display: flex; display: flex;
height: 49px; height: 49px;
background-color: #EFF4FC; background-color: #eff4fc;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
margin-left: 38px; margin-left: 38px;
@@ -1236,7 +1390,7 @@ export default {
margin-left: 31px; margin-left: 31px;
} }
.stagename { .stagename {
color: #409EFF; color: #409eff;
font-size: 16px; font-size: 16px;
padding-left: 9px; padding-left: 9px;
line-height: 36px; line-height: 36px;
@@ -1251,7 +1405,7 @@ export default {
margin-left: 38px; margin-left: 38px;
margin-right: 38px; margin-right: 38px;
//margin: 0 12px; //margin: 0 12px;
border: 1px solid #F2F6FC; border: 1px solid #f2f6fc;
.first { .first {
//position: relative; //position: relative;
display: flex; display: flex;
@@ -1265,12 +1419,12 @@ export default {
} }
.iconame { .iconame {
//position: absolute; //position: absolute;
color: #4F5156; color: #4f5156;
font-size: 16px; font-size: 16px;
} }
.icontext { .icontext {
//positipn: absolute; //positipn: absolute;
color: #999BA3; color: #999ba3;
font-size: 14px; font-size: 14px;
margin-left: 8px; margin-left: 8px;
width: 83px; width: 83px;
@@ -1285,18 +1439,18 @@ export default {
.typename { .typename {
width: 63px; width: 63px;
height: 23px; height: 23px;
color: #5DC988; color: #5dc988;
font-size: 14px; font-size: 14px;
background-color: #F2F6FC; background-color: #f2f6fc;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
} }
.typename1 { .typename1 {
width: 63px; width: 63px;
height: 23px; height: 23px;
color: #F0F4FE; color: #f0f4fe;
font-size: 14px; font-size: 14px;
background-color: #5DC988; background-color: #5dc988;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
} }
@@ -1307,7 +1461,7 @@ export default {
margin-right: 50px; margin-right: 50px;
.timetext { .timetext {
font-size: 14px; font-size: 14px;
color: #999BA3; color: #999ba3;
} }
} }
.progress { .progress {
@@ -1316,7 +1470,7 @@ export default {
margin-right: 50px; margin-right: 50px;
flex-grow: 1; flex-grow: 1;
.progresstext { .progresstext {
color: #FFC067; color: #ffc067;
font-size: 14px; font-size: 14px;
} }
} }
@@ -1325,7 +1479,7 @@ export default {
width: 200px; width: 200px;
//flex-grow: 1; //flex-grow: 1;
.operation { .operation {
color: #4EA6FF; color: #4ea6ff;
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
margin-left: auto; margin-left: auto;
@@ -1406,12 +1560,12 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 16px; margin-right: 16px;
border: 1px solid #409EFF; border: 1px solid #409eff;
border-radius: 8px; border-radius: 8px;
background: #409EFF; background: #409eff;
cursor: pointer; cursor: pointer;
.btn1text { .btn1text {
color: #FFFFFF; color: #ffffff;
margin-left: 5px; margin-left: 5px;
font-size: 14px; font-size: 14px;
} }
@@ -1423,12 +1577,12 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 32px; margin-right: 32px;
border: 1px solid #409EFF; border: 1px solid #409eff;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
background: #FFFFFF; background: #ffffff;
.btn2text { .btn2text {
color: #409EFF; color: #409eff;
margin-left: 5px; margin-left: 5px;
font-size: 14px; font-size: 14px;
} }
@@ -1549,3 +1703,4 @@ export default {
} }
} }
</style> </style>