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

style:增加滚动条样式

Browse Source
This commit is contained in:
李晓鸽
2022-10-25 11:36:37 +08:00
parent 7ed5222366 7b605d4261
commit 2245d2cf4c
25 changed files with 5413 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,16 +40,16 @@
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
<div class="btns">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2">
<div class="btnn btn2">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
<div class="btns">
<!-- <router-link to="/projectadd">
<div class="btn btn3">
<div class="search"></div>
@@ -127,6 +127,127 @@
<div class="showcount">{{ valueE.length }}/20</div>
</div>
</div>
<div class="name" style="margin-left: 27px">
<div class="d" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">归属组织</div>
<div class="in">
<a-input
v-model:value="valueE"
maxlength="20"
style="border-radius: 4px"
/>
<div class="showcount">{{ valueE.length }}/20</div>
</div>
</div>
<div class="bac">
<div class="d" style="margin-top: 12px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">路径图背景</div>
<div class="in">
<!-- <img class="im" src="../../assets/px.jpg" />
<img class="im" src="../../assets/px.jpg" />
<img class="im" src="../../assets/px.jpg" /> -->
<div
@click="chooseImg(item.id)"
v-for="item in imgData"
:key="item.key"
style="
border-radius: 8px;
width: 136px;
height: 106px;
background-size: 100%;
background-repeat: no-repeat;
"
:style="{
border:
learnPathBg === item.id
? '2px solid rgba(78, 166, 255, 1)'
: '2px solid rgba(78, 166, 255, 0)',
'background-image': 'url(' + item.source + ')',
}"
>
<!-- <img class="im" :src="item.source" /> -->
</div>
</div>
</div>
<div class="info">
<div class="inname">路径说明</div>
<div class="in">
<a-textarea v-model:value="valuei" maxlength="150" />
<div class="showcount">{{ valuei.length }}/150</div>
</div>
</div>
<div class="btn">
<button class="samtn btn1" @click="handleOut">取消</button>
<button class="samtn btn2" @click="handleOut">确定</button>
</div>
</div>
</div></a-modal
>
<!-- 编辑路径弹窗 -->
<a-modal
:closable="sh"
centered="true"
v-model:visible="out1"
:footer="null"
wrapClassName="CreatePath"
>
<div class="out">
<div class="top">
<img class="topimg" src="../../assets/images/courseManage/add1.png" />
<div class="topc">编辑路径</div>
<div @click="handleOut1" style="margin-left: 500px; cursor: pointer">
<img
style="width: 20px; height: 20px"
src="../../assets/images/basicinfo/close.png"
/>
</div>
</div>
<div class="mid clearfix">
<div class="name">
<div class="d" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">路径图名称</div>
<div class="in">
<a-input
v-model:value="valueE"
maxlength="20"
style="border-radius: 4px"
/>
<div class="showcount">{{ valueE.length }}/20</div>
</div>
</div>
<div class="name" style="margin-left: 27px">
<div class="d" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">归属组织</div>
<div class="in">
<a-input
v-model:value="valueE"
maxlength="20"
style="border-radius: 4px"
/>
<div class="showcount">{{ valueE.length }}/20</div>
</div>
</div>
<div class="bac">
<div class="d" style="margin-top: 12px">
<img
@@ -400,6 +521,10 @@
</a-modal>
<!-- 归属权抽屉 -->
<owner-ship v-model:Ownervisible="Ownervisible" />
<!-- 查看权抽屉 -->
<query-right v-model:Queryvisible="Queryvisible" />
<!-- 管理权抽屉 -->
<manage-right v-model:Managevisible="Managevisible" />
<!-- 授权名单抽屉 -->
<power-list v-model:PLvisible="PLvisible" />
</div>
@@ -408,10 +533,12 @@
import { reactive, toRefs, onMounted } from "vue";
import OwnerShip from "../../components/drawers/Ownership";
import PowerList from "../../components/drawers/PowerList";
import axios from "axios";
import QueryRight from "../../components/drawers/QueryRight";
import ManageRight from "../../components/drawers/ManageRight";
import * as api from "../../api/index1";
export default {
name: "learningPath",
components: { OwnerShip, PowerList },
components: { OwnerShip, PowerList, QueryRight, ManageRight },
setup() {
const state = reactive({
projectNameList: [
@@ -437,6 +564,7 @@ export default {
},
],
out: false,
out1: false,
number: null,
selectTime: null,
sh: false,
@@ -583,6 +711,8 @@ export default {
closeBack: false, //撤回弹窗关闭图标
Ownervisible: false, //归属权抽屉
PLvisible: false, //授权名单抽屉
Queryvisible: false, //查看权抽屉
Managevisible: false, //管理权抽屉
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
@@ -666,18 +796,39 @@ export default {
pageSize: 0,
status: 0,
};
axios
.post("https://111.231.196.214:30001/admin/router/list", obj, {
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
})
api
.getLearnPath(obj)
.then((res) => {
console.log("获取成功", res);
console.log("获取路径列表数据", res);
})
.catch((err) => {
console.log("获取失败", err);
console.log("获取学习路径失败", err);
});
let getChapterObj = {
routerId: 0,
};
api
.getChapter(getChapterObj)
.then((res) => {
console.log("获取关卡数据", res);
})
.catch((err) => {
console.log("获取关卡数据失败", err);
});
// let editChapterObj = {
// name: "测试关卡",
// remark: "这是测试关卡说明",
// routerId: 0,
// };
// api
// .editChapter(editChapterObj)
// .then((res) => {
// console.log("添加测试关卡数据", res);
// })
// .catch((err) => {
// console.log("添加测试关卡数据失败", err);
// });
};
onMounted(() => {
// console.log("执行");
@@ -693,6 +844,9 @@ export default {
const handleOut = () => {
state.out = !state.out;
};
const handleOut1 = () => {
state.out1 = !state.out1;
};
const chooseImg = (id) => {
console.log(id);
state.learnPathBg = id;
@@ -739,6 +893,12 @@ export default {
const showPower = () => {
state.PLvisible = true;
};
const showQuery = () => {
state.Queryvisible = true;
};
const showManage = () => {
state.Managevisible = true;
};
const getTableDate = () => {
let data = state.tableData;
data.map((value) => {
@@ -758,14 +918,28 @@ export default {
>
发布
</div>
<div class="jc">编辑</div>
<div
class="jc"
onClick={() => {
state.out1 = true;
}}
>
编辑
</div>
</div>
) : (
<div></div>
)}
{value.state === "已发布" ? (
<div class="fb">
<div class="jc">编辑</div>
<div
class="jc"
onClick={() => {
state.out1 = true;
}}
>
编辑
</div>
</div>
) : (
<div></div>
@@ -816,10 +990,22 @@ export default {
</div>
</a-select-option>
<a-select-option value="查看权" label="查看权">
<div>查看权</div>
<div
onClick={() => {
showQuery();
}}
>
查看权
</div>
</a-select-option>
<a-select-option value="管理权" label="管理权">
<div>管理权</div>
<div
onClick={() => {
showManage();
}}
>
管理权
</div>
</a-select-option>
</a-select>
</div>
@@ -969,6 +1155,7 @@ export default {
selectProjectName,
expandTable,
handleOut,
handleOut1,
showPub,
closePub,
showCopyModal,
@@ -985,6 +1172,8 @@ export default {
showPower,
tableDataFunc,
chooseImg,
showQuery,
showManage,
};
},
};
@@ -1447,14 +1636,33 @@ export default {
margin-right: 20px;
margin-bottom: 20px;
}
}
.btns {
display: flex;
// flex-wrap: wrap;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: rgba(64, 158, 255, 0);
background: #409eff;
border-radius: 8px;
//border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btnn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
@@ -1469,7 +1677,7 @@ export default {
.btnText {
font-size: 14px;
font-weight: 400;
color: rgba(64, 158, 255, 1);
color: #409eff;
line-height: 36px;
margin-left: 5px;
}
@@ -1478,7 +1686,7 @@ export default {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search1.png");
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
@@ -1488,16 +1696,8 @@ export default {
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add1.png");
}
}
.btn1:hover {
background: rgba(64, 158, 255, 1);
background: rgba(64, 158, 255, 0.76);
.search {
background-image: url("../../assets/images/courseManage/search0.png");
}
@@ -1505,17 +1705,52 @@ export default {
color: #ffffff;
}
}
.btn1:active {
background: #0982ff;
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
background: rgba(64, 158, 255, 0.1);
}
.btn2:active {
background: rgba(64, 158, 255, 0.2);
}
}
.btns {
display: flex;
// flex-wrap: wrap;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #409eff;
border-radius: 8px;
//border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-image: url("../../assets/images/courseManage/reset0.png");
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add0.png");
}
}
.btn3:hover {
background: rgba(64, 158, 255, 1);
background: rgba(64, 158, 255, 0.76);
.search {
background-image: url("../../assets/images/courseManage/add0.png");
}
@@ -1523,6 +1758,9 @@ export default {
color: #ffffff;
}
}
.btn3:active {
background: #0982ff;
}
}
}
.tableBox {
@@ -1560,6 +1798,7 @@ export default {
font-size: 14px;
margin-left: 20px;
white-space: nowrap;
cursor: pointer;
}
}
}