diff --git a/README.md b/README.md index c8f2399c..f057881c 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/). ``` LearningPath.vue:学习路径页面 +LevelAdd.vue:关卡页面 +LevelAddDetail.vue:创建关卡页面 ``` diff --git a/src/assets/images/leveladd/1.png b/src/assets/images/leveladd/1.png new file mode 100644 index 00000000..fbd98c14 Binary files /dev/null and b/src/assets/images/leveladd/1.png differ diff --git a/src/assets/images/leveladd/2.png b/src/assets/images/leveladd/2.png new file mode 100644 index 00000000..a578e5ad Binary files /dev/null and b/src/assets/images/leveladd/2.png differ diff --git a/src/assets/images/leveladd/3.png b/src/assets/images/leveladd/3.png new file mode 100644 index 00000000..597a0b9a Binary files /dev/null and b/src/assets/images/leveladd/3.png differ diff --git a/src/views/learningpath/LearningPath.vue b/src/views/learningpath/LearningPath.vue index e92d62c1..b1476f3e 100644 --- a/src/views/learningpath/LearningPath.vue +++ b/src/views/learningpath/LearningPath.vue @@ -37,7 +37,7 @@ @@ -113,7 +113,12 @@
路径图名称
- + +
{{ valuei.length }}/20
@@ -140,7 +145,8 @@
路径说明
- + +
{{ valuei.length }}/150
@@ -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 ( -
-
- - 发布 - - 编辑 - - 关卡 - + // scopedSlots: { customRender: "action" }, //引入的插槽 + // customRender: (text) => { + // console.log(text); + // return ( + //
+ //
+ // + // 发布 + // + // 编辑 + // + // 关卡 + // - - 授权 -
-
- + //
+ // 授权 + //
+ //
+ //
- - 更多 -
-
- -
-
- ); - }, + //
+ // 更多 + //
+ //
+ //
+ //
+ //
+ // ); + // }, }, ]; 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 = ( +
+
+ {value.state === "草稿" ? ( +
+
发布
+
编辑
+
+ ) : ( +
+ )} + {value.state === "已发布" ? ( +
+
编辑
+
+ ) : ( +
+ )} + {value.state === "已停用" ? ( +
+
复制
+
+ ) : ( +
+ )} +
+
+ +
关卡
+ + + + +
权限名单
+ + +
{ + console.log("点击了"); + }} + > + 归属权 +
+ + +
查看权
+ + +
管理权
+ + + + +
复制
+ + +
{ + console.log("点击了"); + }} + > + 取消 +
+ + +
+
+ ); + } + }); + 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 { diff --git a/src/views/learningpath/LevelAdd.vue b/src/views/learningpath/LevelAdd.vue index 9ee5de90..37d02263 100644 --- a/src/views/learningpath/LevelAdd.vue +++ b/src/views/learningpath/LevelAdd.vue @@ -120,11 +120,14 @@
编辑 - - 更多 +
+
更多
-
- +
+
复制
+
删除
+
+
@@ -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; } } } diff --git a/src/views/learningpath/LevelAddDetail.vue b/src/views/learningpath/LevelAddDetail.vue index 6dc730ce..581718aa 100644 --- a/src/views/learningpath/LevelAddDetail.vue +++ b/src/views/learningpath/LevelAddDetail.vue @@ -57,13 +57,21 @@ class="img2" src="../../assets/images/leveladd/more.png" /> -
- 更多 + +
+
更多
+
+
+
复制
+
删除
+
@@ -257,21 +265,124 @@
- - +
+ +
+
+
关联项目
+ +
+
+ + +
+
+ + +
+
+ +