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

Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage

Browse Source
This commit is contained in:
岳佳鑫
2022-10-14 18:36:05 +08:00
parent 17cf9e258e 0b12ac79e0
commit 98699dff7d
7 changed files with 772 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -36,7 +36,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
LearningPath.vue:学习路径页面
LevelAdd.vue:关卡页面
LevelAddDetail.vue:创建关卡页面
LevelCheck.vue查看页面
```
### 二、projectcenter:项目文件夹

17
src/components/BreadCrumb.vue
View File

@@ -68,6 +68,21 @@ export default {
},
];
}
if (n === "/levelcheck" || n === "/LevelCheck") {
state.list = [
{
name: "学习路径",
href: "/learningpath",
},
{
name: "关卡",
href: "/leveladd",
},
{
name: "查看",
},
];
}
if (n === "/projectmanage" || n === "/ProjectManage") {
state.list = [
{
@@ -117,7 +132,7 @@ export default {
},
{
name: "添加任务",
}
},
];
}
if (n === "/templatelibrary" || n === "/TemplateLibrary") {

6
src/components/NavLeft.vue
View File

@@ -258,6 +258,12 @@ export default {
selectedKeys: "sub1",
pagename: "关卡",
},
{
href: "/levelcheck",
openKeys: "sub1",
selectedKeys: "sub1",
pagename: "查看",
},
{
href: "/leveladddetail",
openKeys: "sub1",

341
src/views/learningpath/LearningPath.vue
View File

@@ -92,9 +92,9 @@
<a-modal
:closable="sh"
centered="true"
v-model:visible="out"
:footer="null"
style="margin-top: 400px"
>
<div class="out">
<div class="top">
@@ -572,170 +572,183 @@ export default {
};
</script>
<style lang="scss">
.out {
display: block;
position: absolute;
top: 90px;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
margin-top: -2px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.bac {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// border: 1px solid black;
.d {
margin-top: 18px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
height: 110px;
// background-color: red;
display: flex;
justify-content: space-between;
.im {
border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer;
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
.ant-modal {
width: 680px !important;
height: 528px !important;
.ant-modal-content {
width: 680px !important;
height: 528px !important;
.ant-modal-body {
width: 680px !important;
height: 528px !important;
padding: 0 !important;
.out {
display: block;
position: absolute;
top: 90px;
width: 680px;
// height: 525px;
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
margin-top: -2px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.bac {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// border: 1px solid black;
.d {
margin-top: 18px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
height: 110px;
// background-color: red;
display: flex;
justify-content: space-between;
.im {
border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer;
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #fff;
}
}
}
}
}
}

28
src/views/learningpath/LevelAdd.vue
View File

@@ -667,16 +667,19 @@ export default {
width: 110,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
customRender: (text) => {
return (
<div class="opa">
<div class="opacation">
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
查看
</span>
<routerLink to="/levelcheck">
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
查看
</span>
</routerLink>
<span
onClick={() => {
state.visible = true;
console.log(text.record.cur);
}}
style="color:#4EA6FF;margin-right:25px;cursor:pointer"
>
@@ -719,8 +722,11 @@ export default {
clear: both;
}
.ant-modal {
width: 549px !important;
height: 245px !important;
.ant-modal-content {
width: 549px !important;
height: 245px !important;
.ant-modal-body {
padding: 0 !important;
width: 549px !important;
@@ -1317,6 +1323,20 @@ export default {
cursor: pointer;
margin-right: 20px;
}
.select {
.ant-select {
//
// border: 0 !important;
border-radius: 11px;
.ant-select-selector {
border: 1px solid #4ea6ff !important;
.ant-select-selection-placeholder {
padding-left: 15px;
color: #4ea6ff;
}
}
}
}
}
.talk {
margin-top: 24px;

196
src/views/learningpath/LevelAddDetail.vue
View File

@@ -5,7 +5,7 @@
<div class="tit" style="margin-left: 18px">关卡</div>
<div class="btn btn3" style="margin-left: 19px">
<div class="search"></div>
<div class="btnText">添加关卡</div>
<div class="btnText" @click="showModal">添加关卡</div>
</div>
<div class="maincon" style="background-color: #fff">
<div class="item" v-for="item in level" :key="item.id">
@@ -24,6 +24,52 @@
</div>
</div>
</div>
<a-modal
v-model:visible="modal"
centered="true"
:footer="null"
:closable="clos"
>
<div class="header">
<div class="headmain">
<div class="add">添加关卡</div>
<div class="img" style="cursor: pointer" @click="closeModal"></div>
</div>
</div>
<div class="main">
<div class="inma">
<div class="name">
<div class="fir">关卡名称：</div>
<div class="input">
<a-input
style="width: 100%"
v-model:value="value1"
:maxlength="20"
placeholder="请输入关卡名称"
/>
</div>
<div class="co">{{ value1.length }}/20</div>
</div>
<div class="name">
<div class="fir">关卡说明：</div>
<div class="input">
<a-textarea
style="width: 100%"
v-model:value="value2"
:maxlength="100"
placeholder="请输入关卡说明"
:rows="5"
/>
</div>
<div class="co1">{{ value2.length }}/100</div>
</div>
<div class="btn">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</div>
</a-modal>
<div class="right">
<div class="addhead">
<div class="filt">
@@ -587,6 +633,10 @@ export default {
tableDataTotal: 100,
pageSize: 10,
visible: false,
modal: false,
clos: false,
value1: "",
value2: "",
selectedRowKeys: [],
});
const selectProjectName = (value, index) => {
@@ -596,7 +646,13 @@ export default {
console.log("value", value, index);
};
const showDrawer = () => {
state.visible = !state.visible;
state.visible = true;
};
const showModal = () => {
state.modal = true;
};
const closeModal = () => {
state.modal = false;
};
const afterVisibleChange = (bool) => {
console.log("visible", bool);
@@ -746,6 +802,8 @@ export default {
selectProjectName2,
tableDataFunc,
showDrawer,
showModal,
closeModal,
afterVisibleChange,
drawercolumns,
onSelectChange,
@@ -761,7 +819,141 @@ export default {
display: block;
clear: both;
}
.ant-modal {
width: 624px !important;
height: 388px !important;
.ant-modal-content {
width: 624px !important;
height: 388px !important;
border-radius: 4px !important;
.ant-modal-body {
// background-color: blue;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
.header {
width: 624px;
height: 68px;
background: linear-gradient(
180deg,
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
justify-content: center;
.headmain {
width: 90%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.add {
font-size: 16px;
font-weight: 600;
color: #333333;
}
.img {
width: 20px;
height: 20px;
background-image: url(../../assets/images/basicinfo/close22.png);
background-size: 100% 100%;
}
}
}
.main {
width: 100%;
height: calc(100% - 68px);
// background-color: #bfa;
display: flex;
justify-content: center;
.inma {
width: 75%;
height: 100%;
// background-color: lightblue;
.name {
display: flex;
position: relative;
margin-top: 30px;
.fir {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
white-space: nowrap;
margin-top: 3px;
}
.input {
width: 100%;
.ant-input {
border-radius: 8px;
border: 1px solid #c7cbd2;
&::placeholder {
font-size: 12px;
position: absolute;
top: 5px;
}
}
.ant-textarea {
border-radius: 8px;
border: 1px solid #c7cbd2;
&::placeholder {
font-size: 12px;
position: absolute;
top: 5px;
}
}
}
.co {
position: absolute;
right: 10px;
top: 4px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
.co1 {
position: absolute;
right: 10px;
bottom: 8px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
}
.btn {
margin-top: 40px;
width: 100%;
display: flex;
justify-content: center;
.btn1 {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #387df7;
font-size: 14px;
color: #387df7;
cursor: pointer;
background: #ffffff;
margin-right: 20px;
}
.btn2 {
width: 100px;
height: 40px;
border-radius: 4px;
font-size: 14px;
color: #fff;
cursor: pointer;
border: 0;
background: #388be1;
}
}
}
}
}
}
}
.drawerStyle {
.ant-drawer-content-wrapper {
// max-width: 1000px;

354
src/views/learningpath/LevelCheck.vue Normal file
View File

@@ -0,0 +1,354 @@
<template>
<div class="checkwrapper">
<div class="header">
<div class="left">
<div class="img"></div>
<div class="msg">
<div class="name">哈哈</div>
<div class="cur">产研部门-产品经理</div>
</div>
</div>
<div class="right">
<div class="lne"></div>
<div class="jin">
<div class="jint">进度排行</div>
<div class="jinc">
<span style="color: #ff90ae">2&nbsp;</span>/&nbsp;10
</div>
</div>
<div class="lne"></div>
<div class="jin">
<div class="jint">完成必修</div>
<div class="jinc">
<span style="color: #a497ff">3&nbsp;</span>/&nbsp;5
</div>
</div>
<div class="lne"></div>
<div class="jin">
<div class="jint">已获取证书</div>
<div class="jinc">
<span style="color: #ffb64e">1</span>
</div>
</div>
<div class="lne"></div>
<div class="return">
<div class="im"></div>
<div class="fan">返回</div>
</div>
</div>
</div>
<div class="pad"></div>
<div class="bottom">
<div class="padd"></div>
<div class="bomcen">
<div class="centop">
<div class="d"></div>
<div class="topinf">产品经理进阶路径</div>
<div class="infor">
<div class="sy">说明 &nbsp;></div>
</div>
</div>
<div class="item">
<div v-for="item in gq" :key="item.id">
<div class="minc">
<div class="itmtit">关卡{{ item.id }}名称：{{ item.title }}</div>
</div>
<div :class="item.haschild ? 'show' : 'i'">
<div v-for="it in item.child" :key="it.id" class="ite">
<div class="title">{{ it.title }}</div>
<div class="btn">
<button
:class="it.done ? 'btnoo' : 'btno'"
style="z-index: 999"
>
已完成
</button>
<button :class="it.done ? 'btntt' : 'btnt'">未完成</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="padd"></div>
</div>
</div>
</template>
<script>
import { toRefs, reactive } from "vue";
export default {
name: "LevelCheck",
setup() {
const state = reactive({
gq: [
{
id: 1,
title: "初级产品经理",
haschild: true,
child: [
{
id: 1 - 1,
done: true,
title: "「课程」如何成为一个产品经理",
},
{
id: 1 - 2,
done: false,
title: "「作业」产品作业",
},
{
id: 1 - 3,
done: false,
title: "「考试」产品考试",
},
],
},
{
id: 2,
title: "中级产品经理",
},
],
});
return {
...toRefs(state),
};
},
};
</script>
<style lang="scss" >
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.checkwrapper {
width: 100%;
height: 100%;
.header {
display: flex;
width: 100%;
// background-color: #bfa;
justify-content: space-between;
flex-wrap: wrap;
padding: 20px;
.left {
display: flex;
height: 100%;
align-items: center;
.img {
width: 90px;
height: 90px;
background-color: red;
border-radius: 50%;
border: 8px solid #e7f2ff;
background-image: url(../../assets/px.jpg);
background-size: 100% 100%;
}
.msg {
height: 100%;
margin-left: 27px;
.name {
font-size: 16px;
font-weight: 500;
color: #363636;
}
.cur {
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #878b92;
}
}
}
.right {
display: flex;
height: 100%;
align-items: center;
.lne {
width: 1px;
height: 82px;
background: #e8effa;
}
.jin {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 50px;
margin-right: 50px;
.jint {
font-size: 16px;
font-weight: 400;
color: #333330;
}
.jinc {
font-size: 18px;
font-weight: 600;
color: #959595;
}
}
.return {
display: flex;
align-items: center;
cursor: pointer;
margin-left: 30px;
margin-right: 40px;
.im {
width: 42px;
height: 42px;
background-size: 100% 100%;
background-image: url(../../assets/images/leveladd/back.png);
}
.fan {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
margin-left: 20px;
}
}
}
}
.pad {
// #EFF4FC
width: 100%;
height: 20px;
// background-color: #edf0f5;
background-image: linear-gradient(90deg, #edf0f5, #eff4fc);
}
.bottom {
width: 100%;
height: 100%;
// background-color: #bfa;
display: flex;
.padd {
width: 40px;
height: 100%;
}
.bomcen {
// 内容区
width: 100%;
height: 100%;
// background-color: lavenderblush;
.centop {
margin-top: 25px;
display: flex;
align-items: center;
.d {
width: 4px;
height: 13px;
background: #4ea6ff;
border-radius: 2px;
}
.topinf {
font-size: 16px;
font-weight: 500;
color: #333333;
margin-left: 16px;
}
.infor {
display: flex;
margin-top: 4px;
margin-left: 17px;
cursor: pointer;
.sy {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
text-align: center;
}
}
}
.item {
width: 100%;
margin-top: 30px;
.minc {
width: 100%;
height: 50px;
background: #eff4fc;
display: flex;
align-items: center;
.itmtit {
font-size: 14px;
font-weight: 400;
color: #409eff;
margin-left: 20px;
}
}
.show {
.ite {
width: 100%;
height: 49px;
border: 1px solid #f0f4fe;
border-top: 0;
display: flex;
align-items: center;
position: relative;
.title {
font-size: 14px;
font-weight: 400;
color: #6f6f6f;
margin-left: 22px;
}
.btn {
position: absolute;
// background-color: red;
left: 550px;
.btno {
width: 73px;
height: 23px;
border-radius: 4px;
top: -12px;
border: 0;
color: #ffffff;
background: #5dc988;
position: absolute;
z-index: 999;
}
.btnoo {
width: 73px;
height: 23px;
border-radius: 4px;
top: -12px;
border: 0;
color: #ffffff;
background: #5dc988;
position: absolute;
z-index: 998;
}
.btnt {
width: 73px;
height: 23px;
border-radius: 4px;
top: -12px;
border: 0;
position: absolute;
background: #f2f6fc;
color: #5dc988;
z-index: 999;
}
.btntt {
width: 73px;
height: 23px;
border-radius: 4px;
top: -12px;
border: 0;
position: absolute;
background: #f2f6fc;
color: #5dc988;
z-index: 998;
}
}
}
}
.i {
display: none;
}
}
}
}
}
</style>