mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 02:46:45 +08:00
Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage
This commit is contained in:
岳佳鑫
@@ -36,7 +36,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
|
|||||||
LearningPath.vue:学习路径页面
|
LearningPath.vue:学习路径页面
|
||||||
LevelAdd.vue:关卡页面
|
LevelAdd.vue:关卡页面
|
||||||
LevelAddDetail.vue:创建关卡页面
|
LevelAddDetail.vue:创建关卡页面
|
||||||
|
LevelCheck.vue查看页面
|
||||||
```
|
```
|
||||||
|
|
||||||
### 二、projectcenter:项目文件夹
|
### 二、projectcenter:项目文件夹
|
||||||
|
|||||||
@@ -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") {
|
if (n === "/projectmanage" || n === "/ProjectManage") {
|
||||||
state.list = [
|
state.list = [
|
||||||
{
|
{
|
||||||
@@ -117,7 +132,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "添加任务",
|
name: "添加任务",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
if (n === "/templatelibrary" || n === "/TemplateLibrary") {
|
if (n === "/templatelibrary" || n === "/TemplateLibrary") {
|
||||||
|
|||||||
@@ -258,6 +258,12 @@ export default {
|
|||||||
selectedKeys: "sub1",
|
selectedKeys: "sub1",
|
||||||
pagename: "关卡",
|
pagename: "关卡",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: "/levelcheck",
|
||||||
|
openKeys: "sub1",
|
||||||
|
selectedKeys: "sub1",
|
||||||
|
pagename: "查看",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
href: "/leveladddetail",
|
href: "/leveladddetail",
|
||||||
openKeys: "sub1",
|
openKeys: "sub1",
|
||||||
|
|||||||
@@ -92,9 +92,9 @@
|
|||||||
|
|
||||||
<a-modal
|
<a-modal
|
||||||
:closable="sh"
|
:closable="sh"
|
||||||
|
centered="true"
|
||||||
v-model:visible="out"
|
v-model:visible="out"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
style="margin-top: 400px"
|
|
||||||
>
|
>
|
||||||
<div class="out">
|
<div class="out">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
@@ -572,170 +572,183 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.out {
|
.ant-modal {
|
||||||
display: block;
|
width: 680px !important;
|
||||||
position: absolute;
|
height: 528px !important;
|
||||||
top: 90px;
|
.ant-modal-content {
|
||||||
width: 680px;
|
width: 680px !important;
|
||||||
// height: 525px;
|
height: 528px !important;
|
||||||
background-color: #fff;
|
.ant-modal-body {
|
||||||
|
width: 680px !important;
|
||||||
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
|
height: 528px !important;
|
||||||
left: 50%;
|
padding: 0 !important;
|
||||||
top: 50%;
|
.out {
|
||||||
transform: translate(-50%, -50%);
|
display: block;
|
||||||
.top {
|
position: absolute;
|
||||||
width: 100%;
|
top: 90px;
|
||||||
height: 68px;
|
width: 680px;
|
||||||
|
// height: 525px;
|
||||||
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;
|
background-color: #fff;
|
||||||
color: #4ea6ff;
|
|
||||||
}
|
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
|
||||||
.btn2 {
|
left: 50%;
|
||||||
background-color: #4ea6ff;
|
top: 50%;
|
||||||
color: #fff;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -667,16 +667,19 @@ export default {
|
|||||||
width: 110,
|
width: 110,
|
||||||
align: "center",
|
align: "center",
|
||||||
scopedSlots: { customRender: "action" }, //引入的插槽
|
scopedSlots: { customRender: "action" }, //引入的插槽
|
||||||
customRender: () => {
|
customRender: (text) => {
|
||||||
return (
|
return (
|
||||||
<div class="opa">
|
<div class="opa">
|
||||||
<div class="opacation">
|
<div class="opacation">
|
||||||
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
|
<routerLink to="/levelcheck">
|
||||||
查看
|
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
|
||||||
</span>
|
查看
|
||||||
|
</span>
|
||||||
|
</routerLink>
|
||||||
<span
|
<span
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
state.visible = true;
|
state.visible = true;
|
||||||
|
console.log(text.record.cur);
|
||||||
}}
|
}}
|
||||||
style="color:#4EA6FF;margin-right:25px;cursor:pointer"
|
style="color:#4EA6FF;margin-right:25px;cursor:pointer"
|
||||||
>
|
>
|
||||||
@@ -719,8 +722,11 @@ export default {
|
|||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
.ant-modal {
|
.ant-modal {
|
||||||
|
width: 549px !important;
|
||||||
|
height: 245px !important;
|
||||||
.ant-modal-content {
|
.ant-modal-content {
|
||||||
width: 549px !important;
|
width: 549px !important;
|
||||||
|
height: 245px !important;
|
||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
width: 549px !important;
|
width: 549px !important;
|
||||||
@@ -1317,6 +1323,20 @@ export default {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-right: 20px;
|
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 {
|
.talk {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div class="tit" style="margin-left: 18px">关卡</div>
|
<div class="tit" style="margin-left: 18px">关卡</div>
|
||||||
<div class="btn btn3" style="margin-left: 19px">
|
<div class="btn btn3" style="margin-left: 19px">
|
||||||
<div class="search"></div>
|
<div class="search"></div>
|
||||||
<div class="btnText">添加关卡</div>
|
<div class="btnText" @click="showModal">添加关卡</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="maincon" style="background-color: #fff">
|
<div class="maincon" style="background-color: #fff">
|
||||||
<div class="item" v-for="item in level" :key="item.id">
|
<div class="item" v-for="item in level" :key="item.id">
|
||||||
@@ -24,6 +24,52 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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="right">
|
||||||
<div class="addhead">
|
<div class="addhead">
|
||||||
<div class="filt">
|
<div class="filt">
|
||||||
@@ -587,6 +633,10 @@ export default {
|
|||||||
tableDataTotal: 100,
|
tableDataTotal: 100,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
visible: false,
|
visible: false,
|
||||||
|
modal: false,
|
||||||
|
clos: false,
|
||||||
|
value1: "",
|
||||||
|
value2: "",
|
||||||
selectedRowKeys: [],
|
selectedRowKeys: [],
|
||||||
});
|
});
|
||||||
const selectProjectName = (value, index) => {
|
const selectProjectName = (value, index) => {
|
||||||
@@ -596,7 +646,13 @@ export default {
|
|||||||
console.log("value", value, index);
|
console.log("value", value, index);
|
||||||
};
|
};
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
state.visible = !state.visible;
|
state.visible = true;
|
||||||
|
};
|
||||||
|
const showModal = () => {
|
||||||
|
state.modal = true;
|
||||||
|
};
|
||||||
|
const closeModal = () => {
|
||||||
|
state.modal = false;
|
||||||
};
|
};
|
||||||
const afterVisibleChange = (bool) => {
|
const afterVisibleChange = (bool) => {
|
||||||
console.log("visible", bool);
|
console.log("visible", bool);
|
||||||
@@ -746,6 +802,8 @@ export default {
|
|||||||
selectProjectName2,
|
selectProjectName2,
|
||||||
tableDataFunc,
|
tableDataFunc,
|
||||||
showDrawer,
|
showDrawer,
|
||||||
|
showModal,
|
||||||
|
closeModal,
|
||||||
afterVisibleChange,
|
afterVisibleChange,
|
||||||
drawercolumns,
|
drawercolumns,
|
||||||
onSelectChange,
|
onSelectChange,
|
||||||
@@ -761,7 +819,141 @@ export default {
|
|||||||
display: block;
|
display: block;
|
||||||
clear: both;
|
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 {
|
.drawerStyle {
|
||||||
.ant-drawer-content-wrapper {
|
.ant-drawer-content-wrapper {
|
||||||
// max-width: 1000px;
|
// max-width: 1000px;
|
||||||
|
|||||||
354
src/views/learningpath/LevelCheck.vue
Normal file
354
src/views/learningpath/LevelCheck.vue
Normal 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 </span>/ 10
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lne"></div>
|
||||||
|
<div class="jin">
|
||||||
|
<div class="jint">完成必修</div>
|
||||||
|
<div class="jinc">
|
||||||
|
<span style="color: #a497ff">3 </span>/ 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">说明 ></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>
|
||||||
Reference in New Issue
Block a user