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

feat:新增模板库内容 模板库查看LibraryAdd.vue 公告 项目积分 设置

Browse Source
This commit is contained in:
dongwug
2022-10-17 15:24:10 +08:00
parent 050e741d86
commit 26f4f3be34
7 changed files with 753 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

576
src/views/projectcenter/LibraryAdd.vue Normal file
View File

@@ -0,0 +1,576 @@
<template>
<div class="addwrapper">
<div class="addhead">
<div class="leftimg">
<img class="img" src="../../assets/images/projectadd/picture.png" />
</div>
<div class="imgfor">
<div class="forz">管理者进阶-腾飞班1备份</div>
<div class="fort">
<div class="fort1">项目经理：黄华、刘俊备份</div>
<div class="fort2">起止时间：2022-09-21 00:00 至 2022-10-21 00:00</div>
</div>
</div>
<div class="right">
<img class="img1" src="../../assets/images/leveladd/ma.png" />
<div class="line"></div>
<img class="img2" src="../../assets/images/projectadd/ending.png" />
<div class="pub">结束项目</div>
<div class="line"></div>
<img
style="margin-right: 15px"
class="img2"
src="../../assets/images/leveladd/more.png"
/>
<div class="more">
<span style="color: #7096e3; cursor: pointer">更多</span>
<div class="moreArrow"></div>
<div class="moreItems">
<div class="sammo">撤回</div>
<div class="sammo">复制</div>
</div>
</div>
<div class="line"></div>
<router-link to="/templatelibrary"
><div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div></router-link
>
</div>
</div>
<div class="split"></div>
<div class="bom clearfix">
<a-tabs
class="tab"
v-model:activeKey="activeKey"
size="large"
:tabBarStyle="{ marginLeft: '10px' }"
>
<a-tab-pane key="1" tab="任务">
1
</a-tab-pane>
<a-tab-pane key="2" tab="公告" force-render>
<div class="notice">
<div class="ntc_tit"><span>公告</span></div>
<hr color="#E8E8E8"/>
<div class="ntc_body">
<div class="ntc_switch">
<a-switch v-model:checked="checked" @click="changeopclo"/>
<div class="opclo"
:style="{ display: hideshow ? 'block' : 'none' }">
<span>关闭</span>
</div>
<div class="opclo"
:style="{ display: hideshow ? 'none' : 'block' }">
<span>开启</span>
</div>
</div>
<div class="ntc_content"
:style="{ display: hideshow ? 'block' : 'none' }">
<div class="ntcc_tit">公告内容</div>
<div class="textarea">
<a-textarea v-model:value="value2" placeholder="公告信息最多输入150个字。" :maxlength="textnum" allow-clear />
<div class="btnarea">
<div>&nbsp;</div>
<div class="area_btn">
<div class="pub"></div>
<div class="btnText">发布</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="3" tab="项目积分">
<div class="projectscore">
<div class="pjc_tit">
<span>获取规则</span>
</div>
<hr color="#E8E8E8"/>
<div class="pjc_body">
<div class="pjcb_header">
<span>规则</span>
<div class="edit_btn">
<div class="edit"></div>
<div class="btnText">编辑</div>
</div>
</div>
<div class="pjcb_content">
<div class="content content1"><span>当前设计下，学员可以获得 10 积分</span></div>
<div class="content content2"><span>完成【必修/选修】获得 5 积分</span></div>
<div class="content content3"><span>优秀学员可获得 5 积分</span></div>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="4" tab="设置">
<div class="setting">
<div class="set_tit">
<span>基本信息</span>
</div>
<hr color="#E8E8E8"/>
<div class="set_body">
<div class="set_content">
<div class="setc_name"><span>项目名称：</span></div>
<div class="setc_main">
<span style="color:#999999;">管理者进阶 - 管理者腾飞班</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>封面图：</span></div>
<div class="setc_main">
<img src="@/assets/images/projectadd/picture.png" alt="">
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目时间：</span></div>
<div class="setc_main">
<span style="color:#999999;">2022-7-16 12:30 ～ 2022-7-30 12:30</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目经理：</span></div>
<div class="setc_main">
<span style="color:#999999;">张雪</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>资源归属：</span></div>
<div class="setc_main">
<span style="color:#999999;">-</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目说明：</span></div>
<div class="setc_main">
<span style="color:#999999;">-</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>同步学习记录：</span></div>
<div class="setc_main" @click="changecheck2">
<a-radio v-model:checked="checked2"><span style="color:#333333">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目级别：</span></div>
<div class="setc_main">
<span style="color:#999999;">-</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>培训体系：</span></div>
<div class="setc_main">
<span style="color:#999999;">-</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>是否BOEU实施：</span></div>
<div class="setc_main" @click="changecheck3">
<a-radio v-model:checked="checked3"><span style="color:#333333">BOEU实施</span></a-radio>
</div>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
<a-modal
style="padding: 0"
:closable="sh"
v-model:visible="visible"
:footer="null"
centered="true"
>
<div class="con">
<div class="header">
<div class="inhe">
<div class="mod"></div>
<div class="tz">调整关卡</div>
<div class="mg"></div>
</div>
</div>
<div class="mid">
<div class="inher">
<div class="cur">当前关卡：</div>
<div class="select">
<a-select
v-model:value="projectName"
style="width: 100%"
placeholder="请选择关卡"
:options="projectNameList4"
@change="selectProjectName4"
allowClear
showSearch
></a-select>
</div>
<div class="btn">
<button class="sameb btn1">取消</button>
<button class="sameb btn2">确定</button>
</div>
</div>
</div>
</div></a-modal
>
</div>
</div>
</template>
<script>
import { ref, reactive, defineComponent, toRefs } from "vue";
export default defineComponent({
name: "LibraryAdd",
setup() {
const state = reactive({
activeKey: ref("1"),
// value: ref(" "),
checked: false,
checked2: false,
checked3: false,
value3:false,
value4:false,
hideshow:false,
});
const value = ref('');
const value2 = ref('');
const textnum = '150'
const changeopclo = () => {
state.hideshow = !state.hideshow
}
const changecheck2 = () => {
state.checked2 = !state.checked2
}
const changecheck3 = () => {
state.checked3 = !state.checked3
}
return {
...toRefs(state),
value,
value2,
textnum,
changeopclo,
changecheck2,
changecheck3,
};
},
})
</script>
<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.addwrapper {
width: 100%;
height: 100%;
// background-color: green;
.addhead {
width: 100%;
height: 130px;
// background-color: lightgreen;
display: flex;
align-items: center;
position: relative;
.leftimg {
width: 151px;
height: 100px;
border: 10px solid #e7f2ff;
border-radius: 8px;
margin-left: 20px;
.img {
width: 100%;
height: 100%;
}
}
.imgfor {
margin-left: 32px;
color: #333333;
.forz {
font-size: 16px;
font-weight: 500;
}
.fort {
font-weight: 400;
font-size: 14px;
margin-top: 20px;
}
}
@media screen and (max-width: 1030px) {
.imgfor {
margin-left: 20px;
}
}
.right {
// width: 500px;
height: 100%;
// background-color: red;
position: absolute;
right: 0;
display: flex;
align-items: center;
.img1 {
width: 24px;
height: 24px;
margin-right: 50px;
}
.line {
height: 65%;
width: 1px;
background-color: #e8effa;
margin-right: 28px;
}
.img2 {
width: 42px;
height: 42px;
margin-right: 22px;
}
.pub {
// color: #ffb64e;
color: #65A4F8;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
cursor: pointer;
}
.return {
color: #4ea6ff;
font-size: 14px;
margin-top: 10px;
margin-right: 60px;
}
.more {
color: #7895DD;
position: relative;
margin-right: 30px;
height: 30px;
display: flex;
align-items: center;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 15px;
}
.moreItems {
width: 110px;
height: 80px;
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: -48px;
top: 30px;
z-index: 100;
cursor: pointer;
.sammo {
text-align: center;
margin-top: 12px;
cursor: pointer;
}
.sammo:hover {
color: #4ea6ff;
}
}
.moreItems:hover {
display: block;
}
}
@media screen and (max-width: 1240px) {
.line {
margin-right: 10px;
}
.img1 {
margin-right: 15px;
}
.img2 {
margin-right: 10px;
}
.return {
margin-right: 10px;
}
.pub {
margin-right: 10px;
}
.more {
margin-right: 10px;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
}
.split {
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.bom {
.tab {
margin-top: 10px;
// margin-left: 10px;
}
.ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
margin-left: 0px !important;
padding-left: 32px !important;
}
.notice{
.ntc_tit{
margin-left: 34px;
font-size:18px;
font-weight: 500;
color:#232425;
}
.ntc_body{
margin-left: 34px;
margin-right: 34px;
.ntc_switch{
display: flex;
margin: 32px 0px;
.opclo{
margin-left: 9px;
}
}
.ntc_content{
.ntcc_tit{
margin-bottom: 16px;
}
.textarea{
display: flex;
flex-direction: column;
.btnarea{
display: flex;
justify-content: flex-end;
}
.area_btn{
width: 100px;
// padding: 0px 26px 0px 26px;
height: 38px;
margin-top: 24px;
background: rgb(64, 158, 255);
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.pub {
width: 15px;
height: 15px;
background-image: url(@/assets/images/coursewareManage/export1.png);
background-size: 100% 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: rgb(255, 255, 255);
line-height: 36px;
margin-left: 5px;
}
}
}
}
}
}
.projectscore{
.pjc_tit{
margin-left: 34px;
font-size:18px;
font-weight: 500;
color:#232425;
}
.pjc_body{
margin-left:34px;
margin-right:34px;
.pjcb_header{
display: flex;
justify-content: space-between;
align-items: center;
margin:24px auto;
.edit_btn{
width: 100px;
// padding: 0px 26px 0px 26px;
height: 38px;
background: rgb(64, 158, 255);
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.edit {
width: 15px;
height: 15px;
background-image: url(@/assets/images/coursewareManage/export1.png);
background-size: 100% 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: rgb(255, 255, 255);
line-height: 36px;
margin-left: 5px;
}
}
}
.pjcb_content{
border: 1px solid #388BE1;
padding: 32px;
.pjcb_content :last-child{
margin-bottom:0px;
}
.content{
margin-bottom:24px;
}
}
}
}
.setting{
.set_tit{
margin-left: 34px;
font-size:18px;
font-weight: 500;
color:#232425;
}
.set_body{
margin-left:34px;
margin-right:34px;
.set_content{
margin: 32px auto;
display: flex;
// justify-content: end;
.setc_name{
width:150px;
display: flex;
justify-content: end;
}
.setc_main{
flex:1;
margin-left: 12px;
}
}
}
}
}
}
</style>