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

style：修改学习路径 关卡 创建关卡页面的样式

Browse Source
This commit is contained in:
songwc
2022-10-11 15:31:17 +08:00
parent e26fdbd49a
commit 87361da9dc
7 changed files with 620 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -34,6 +34,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
```
LearningPath.vue:学习路径页面
LevelAdd.vue:关卡页面
LevelAddDetail.vue:创建关卡页面
```

BIN
src/assets/images/leveladd/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/images/leveladd/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
src/assets/images/leveladd/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

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

@@ -37,7 +37,7 @@
<a-range-picker
v-model:value="value2"
separator="至"
:placeholder="['开始时间', '结束时间']"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
@@ -113,7 +113,12 @@
</div>
<div class="inname">路径图名称</div>
<div class="in">
<a-input v-model:value="valueE" />
<a-input
v-model:value="valueE"
maxlength="20"
style="border-radius: 4px"
/>
<div class="showcount">{{ valuei.length }}/20</div>
</div>
</div>
<div class="bac">
@@ -140,7 +145,8 @@
<div class="info">
<div class="inname">路径说明</div>
<div class="in">
<a-textarea v-model:value="valuei" />
<a-textarea v-model:value="valuei" maxlength="150" />
<div class="showcount">{{ valuei.length }}/150</div>
</div>
</div>
<div class="btn">
@@ -228,25 +234,25 @@ export default {
imgData: [
{
id: 1,
source: require("../../assets/px.jpg"),
source: require("../../assets/images/leveladd/1.png"),
},
{
id: 2,
source: require("../../assets/px.jpg"),
source: require("../../assets/images/leveladd/2.png"),
},
{
id: 3,
source: require("../../assets/px.jpg"),
source: require("../../assets/images/leveladd/3.png"),
},
],
currentPage: 1,
tableDataTotal: 20,
tableDataTotal: 100,
pageSize: 10,
value1: " ",
value1: "",
value2: ref(),
valueE: ref(" "),
valueEE: ref(" "),
valuei: ref(" "),
valueE: "",
valueEE: "",
valuei: "",
});
const tableDataFunc = () => {
const columns = [
@@ -314,38 +320,38 @@ export default {
key: "opacation",
width: 200,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
console.log(text);
return (
<div class="opa">
<div class="opacation">
<span class={text.record.haspub ? "activecls" : "errorCls"}>
发布
</span>
<span style={{ "margin-left": "25px" }}>编辑</span>
<router-link to="/leveladd">
<span style={{ "margin-left": "25px" }}>关卡</span>
</router-link>
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text) => {
// console.log(text);
// return (
// <div class="opa">
// <div class="opacation">
// <span class={text.record.haspub ? "activecls" : "errorCls"}>
// 发布
// </span>
// <span style={{ "margin-left": "25px" }}>编辑</span>
// <router-link to="/leveladd">
// <span style={{ "margin-left": "25px" }}>关卡</span>
// </router-link>
<span style={{ "margin-left": "25px" }} class="more">
<span>授权</span>
<div class="moreArrow"></div>
<div class="moreItems"></div>
</span>
// <div style={{ "margin-left": "25px" }} class="more">
// <span>授权</span>
// <div class="moreArrow"></div>
// <div class="moreItems"></div>
// </div>
<span
style={{ "margin-left": "21px", "margin-right": "30px" }}
class="more"
>
<span>更多</span>
<div class="moreArrow"></div>
<div class="moreItems"></div>
</span>
</div>
</div>
);
},
// <div
// style={{ "margin-left": "21px", "margin-right": "30px" }}
// class="more"
// >
// <span>更多</span>
// <div class="moreArrow"></div>
// <div class="moreItems"></div>
// </div>
// </div>
// </div>
// );
// },
},
];
return columns;
@@ -366,6 +372,102 @@ export default {
const chooseImg = (id) => {
console.log(id);
};
const getTableDate = () => {
let data = state.tableData;
data.map((value) => {
{
//单层项目
value.opacation = (
<div class="operation">
<div class="nSelect">
{value.state === "草稿" ? (
<div class="fb">
<div class="jc">发布</div>
<div class="jc">编辑</div>
</div>
) : (
<div></div>
)}
{value.state === "已发布" ? (
<div class="fb">
<div class="jc">编辑</div>
</div>
) : (
<div></div>
)}
{value.state === "已停用" ? (
<div class="fb">
<div class="jc">复制</div>
</div>
) : (
<div></div>
)}
</div>
<div class="tableSelect">
<router-link to="/leveladd">
<div class="g1">关卡</div>
</router-link>
<a-select
style="width: 50px;margin-top:2px;margin-left:25px"
value="授权"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option value="权限名单" label="权限名单">
<div>权限名单</div>
</a-select-option>
<a-select-option value="归属权" label="归属权">
<div
onClick={() => {
console.log("点击了");
}}
>
归属权
</div>
</a-select-option>
<a-select-option value="查看权" label="查看权">
<div>查看权</div>
</a-select-option>
<a-select-option value="管理权" label="管理权">
<div>管理权</div>
</a-select-option>
</a-select>
<a-select
style="width: 50px;margin-top:2px;margin-left:25px"
value="更多"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option
value="复制"
label="复制"
style="padding-left:35px"
>
<div>复制</div>
</a-select-option>
<a-select-option
value="取消"
label="取消"
style="padding-left:35px"
>
<div
onClick={() => {
console.log("点击了");
}}
>
取消
</div>
</a-select-option>
</a-select>
</div>
</div>
);
}
});
state.tableData = data;
};
getTableDate();
return {
...toRefs(state),
selectProjectName,
@@ -505,6 +607,85 @@ export default {
bottom: 20px;
}
}
.operation {
display: flex;
justify-content: right;
.nSelect {
.fb {
display: flex;
.jc {
color: #4ea6ff;
font-size: 14px;
margin-left: 20px;
}
}
}
.tableSelect {
margin-right: 20px;
display: flex;
align-items: center;
justify-content: right;
.g1 {
color: #4ea6ff;
font-size: 14px;
}
}
}
// .operation {
// font-size: 14px;
// font-weight: 400;
// color: #4ea6ff;
// // line-height: 36px;
// .operation1 {
// margin-left: 21px;
// width: 28px;
// display: inline-block;
// }
// .operation3 {
// margin-left: 21px;
// width: 70px;
// display: inline-block;
// text-align: center;
// }
// .more {
// width: 50px;
// display: inline-block;
// margin-left: 21px;
// position: relative;
// text-align: left;
// // z-index: 99999;
// .moreArrow {
// width: 13px;
// height: 7px;
// display: inline-block;
// background-image: url("../../assets/images/navtop/down.png");
// background-size: 100%;
// margin: 2px;
// margin-left: 7px;
// }
// .moreItems {
// width: 80px;
// padding: 5px;
// 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: 0px;
// top: 28px;
// z-index: 100;
// text-align: center;
// }
// }
// .more:hover .moreArrow {
// background-image: url("../../assets/images/navtop/up.png");
// }
// .more:hover .moreItems {
// display: block;
// }
// }
.out {
display: block;
position: absolute;
@@ -531,6 +712,7 @@ export default {
width: 18px;
height: 18px;
margin-left: 27px;
margin-top: -2px;
}
.topc {
color: #000000;
@@ -567,12 +749,19 @@ export default {
.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 {
@@ -624,6 +813,7 @@ export default {
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
@@ -631,6 +821,12 @@ export default {
height: 130px;
resize: none;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
@@ -669,6 +865,7 @@ export default {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
display: flex;
// line-height: 36px;
.activecls {
display: inline-block;
@@ -678,6 +875,7 @@ export default {
}
.more {
position: relative;
height: 100%;
.moreArrow {
width: 13px;
height: 7px;
@@ -697,8 +895,8 @@ export default {
border: 0px solid #dcdcdc;
position: absolute;
left: 0px;
top: 18px;
z-index: 100;
top: 30px;
z-index: 999;
}
}
.more:hover .moreArrow {

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

@@ -120,11 +120,14 @@
<div class="linee"></div>
<div class="itright">
<span class="te">编辑</span>
<span class="more">
<span class="te" style="margin-left: 20px">更多</span>
<div class="more">
<div class="te" style="margin-left: 20px">更多</div>
<div class="moreArrow"></div>
<div class="moreItems"></div>
</span>
<div class="moreItems">
<div class="roleItem">复制</div>
<div class="roleItem">删除</div>
</div>
</div>
</div>
</div>
</div>
@@ -441,7 +444,9 @@ export default {
.more {
position: relative;
margin-right: 30px;
height: 30px;
display: flex;
align-items: center;
.moreArrow {
width: 13px;
height: 7px;
@@ -461,7 +466,7 @@ export default {
border: 0px solid #dcdcdc;
position: absolute;
left: -48px;
top: 28px;
top: 30px;
z-index: 100;
.sammo {
text-align: center;
@@ -611,6 +616,7 @@ export default {
}
.Lbom {
position: relative;
margin-bottom: 20px;
.item {
width: 100%;
height: 200px;
@@ -680,41 +686,56 @@ export default {
.itright {
position: absolute;
right: 45px;
display: flex;
.te {
color: #4ea6ff;
font-size: 14px;
}
}
.more {
position: relative;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 7px;
.more {
position: relative;
height: 30px;
display: flex;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 7px;
margin-top: 6px;
}
.moreItems {
width: 80px;
height: 70px;
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: 0px;
top: 20px;
z-index: 100;
.roleItem {
font-size: 14px;
font-weight: 400;
color: rgba(79, 81, 86, 1);
line-height: 36px;
display: flex;
justify-content: center;
}
.roleItem:hover {
color: #4ea6ff;
}
}
}
.moreItems {
width: 80px;
height: 70px;
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: 0px;
top: 18px;
z-index: 100;
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
}

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

@@ -57,13 +57,21 @@
class="img2"
src="../../assets/images/leveladd/more.png"
/>
<div class="more">
<span style="color: #7096e3">更多</span>
<!-- <div class="more">
<div style="color: #7096e3">更多</div>
<div class="moreArrow"></div>
<div class="moreItems">
<div class="sammo">撤回</div>
<div class="sammo">复制</div>
</div>
</div> -->
<div class="role">
<div>更多</div>
<div class="roleArrow"></div>
<div class="roleItems">
<div class="roleItem">复制</div>
<div class="roleItem">删除</div>
</div>
</div>
<div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/back.png" />
@@ -257,21 +265,124 @@
</div>
</div>
</div>
<a-drawer
v-model:visible="visible"
class="custom-class"
title="关联项目"
placement="right"
width="50%"
@after-visible-change="afterVisibleChange"
>
</a-drawer>
<div class="draw" style="position: relative">
<a-drawer
v-model:visible="visible"
class="drawerStyle"
title="关联项目"
placement="right"
width="50%"
@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"
style="
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
"
>
<button
@click="showDrawer"
style="
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
"
>
取消
</button>
<button
@click="showDrawer"
style="
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
"
>
确定
</button>
</div>
</div>
</a-drawer>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
const drawercolumns = [
{
title: "项目名称",
dataIndex: "projectName",
key: "projectName",
width: 200,
// align: "center",
ellipsis: true,
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text, record) => {
// console.log(text, record);
// return <span>{text.text}</span>;
// },
},
{
title: "项目经理",
dataIndex: "manager",
key: "manager",
width: 100,
align: "center",
},
{
title: "创建人",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 100,
align: "center",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: 180,
align: "center",
},
];
export default {
name: "LevelAddDetail",
setup() {
@@ -301,23 +412,18 @@ export default {
projectNameList2: [
{
id: 1,
value: "项目一",
label: "项目一",
value: "批量操作",
label: "批量操作",
},
{
id: 2,
value: "项目二",
label: "项目二",
value: "删除任务",
label: "删除任务",
},
{
id: 3,
value: "项目三",
label: "项目三",
},
{
id: 4,
value: "项目四",
label: "项目四",
value: "移动任务到关卡",
label: "移动任务到关卡",
},
],
level: [
@@ -389,6 +495,101 @@ export default {
checkedd: false,
},
],
drawertableData: [
{
key: 1,
projectName: "管理者进阶",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "1-1",
projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "1-1-1",
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
],
},
{
key: 2,
projectName: "管理者进阶",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "2-1",
projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "2-1-1",
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
],
},
{
key: 3,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 5,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 6,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 7,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
@@ -401,7 +602,7 @@ export default {
console.log("value", value, index);
};
const showDrawer = () => {
state.visible = true;
state.visible = !state.visible;
};
const afterVisibleChange = (bool) => {
console.log("visible", bool);
@@ -513,6 +714,7 @@ export default {
tableDataFunc,
showDrawer,
afterVisibleChange,
drawercolumns,
};
},
};
@@ -526,6 +728,52 @@ export default {
clear: both;
}
.drawerStyle {
.ant-drawer-content-wrapper {
max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
overflow-x: scroll;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.drawerbox {
margin: 20px 38px 30px;
th {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
}
}
}
.allCon {
width: 100%;
height: 100%;
@@ -719,50 +967,52 @@ export default {
margin-right: 20px;
}
.more {
.role {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
color: #333330;
line-height: 36px;
cursor: pointer;
position: relative;
margin-right: 30px;
.moreArrow {
margin-right: 20px;
.roleArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
margin-left: 8px;
background-image: url(../../assets/images/navtop/down.png);
background-size: 100%;
margin: 2px;
margin-left: 15px;
}
.moreItems {
width: 110px;
height: 80px;
display: none;
.roleItems {
width: 109px;
height: 90px;
padding-top: 10px;
background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
// border-radius: 3px;
border: 0px solid #dcdcdc;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: -48px;
top: 28px;
top: 35px;
right: 0px;
text-align: center;
display: none;
z-index: 100;
.sammo {
text-align: center;
margin-top: 12px;
}
.sammo:hover {
color: #4ea6ff;
}
}
.moreItems:hover {
display: block;
.roleItem {
font-size: 14px;
font-weight: 400;
color: rgba(79, 81, 86, 1);
line-height: 36px;
}
.roleItem:hover {
color: #4ea6ff;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
.role:hover .roleItems {
display: block;
}
.role:hover .roleArrow {
background-image: url(../../assets/images/navtop/up.png);
}
}
}
}
@@ -879,7 +1129,24 @@ export default {
}
}
}
// .drawerbox {
// // margin: 20px 38px 30px;
// th.h {
// background-color: #eff4fc !important;
// }
// .ant-table-tbody
// > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
// > td {
// background: #f6f9fd;
// }
// }
.draw {
.drawerbox {
}
}
}
.opat {
.opacationt {
display: flex;