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

feat:合并

Browse Source
This commit is contained in:
李晓鸽
2022-10-13 10:19:59 +08:00
parent 35ed489f85 a766c628a7
commit 45fda8abe4
7 changed files with 854 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
<template>
<div class="allCon" :style="{ height: rightheight }">
<div class="left clearfix" :style="{ height: rightheight }">
<div class="allCon">
<div class="left clearfix">
<div class="leftmain">
<div class="tit">关卡</div>
<div class="btn btn3">
<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>
<div class="maincon">
<div class="maincon" style="background-color: #fff">
<div class="item" v-for="item in level" :key="item.id">
<div class="itemle">
<div class="tit">{{ item.tit }}</div>
@@ -74,10 +74,13 @@
</div>
</div>
<div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/back.png" />
<router-link to="/leveladd">
<div class="return">返回</div></router-link
>
<div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div>
</router-link>
</div>
</div>
</div>
@@ -299,7 +302,7 @@
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
const drawercolumns = [
{
title: "项目名称",
@@ -342,7 +345,6 @@ export default {
name: "LevelAddDetail",
setup() {
const state = reactive({
rightheight: null,
projectNameList: [
{
id: 1,
@@ -388,6 +390,46 @@ export default {
tit: "关卡2",
name: "中级产品经理",
},
{
id: "2",
tit: "关卡2",
name: "中级产品经理",
},
{
id: "2",
tit: "关卡2",
name: "中级产品经理",
},
{
id: "2",
tit: "关卡2",
name: "中级产品经理",
},
{
id: "2",
tit: "关卡2",
name: "中级产品经理",
},
{
id: "2",
tit: "关卡2",
name: "中级产品经理",
},
{
id: "2",
tit: "关卡2",
name: "中级产品经理",
},
{
id: "2",
tit: "关卡2",
name: "中级产品经理",
},
{
id: "2",
tit: "关卡2",
name: "中级产品经理",
},
],
tableData: [
{
@@ -679,21 +721,25 @@ export default {
state.selectedRowKeys = selectedRowKeys;
};
onMounted(() => {
state.rightheight =
document.getElementsByClassName("addhead")[0].offsetHeight +
document.getElementsByClassName("mid")[0].offsetHeight +
document.getElementsByClassName("boom")[0].offsetHeight +
40 +
"px";
console.log(
"获取元素",
state.rightheight,
document.getElementsByClassName("right")[0].offsetHeight,
document.getElementsByClassName("right")[0]
);
});
// const getClientHeight = () => {
// state.rightheight =
// document.getElementsByClassName("addhead")[0].offsetHeight +
// document.getElementsByClassName("mid")[0].offsetHeight +
// document.getElementsByClassName("boom")[0].offsetHeight +
// 40 +
// "px";
// };
onMounted(() => {
document.getElementsByTagName("main")[0].style.background =
"rgb(245, 247, 250,1)";
document.getElementsByTagName("main")[0].style.boxShadow = "none";
});
onUnmounted(() => {
document.getElementsByTagName("main")[0].style.background = "#ffffff";
document.getElementsByTagName("main")[0].style.boxShadow =
"0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
});
return {
...toRefs(state),
selectProjectName,
@@ -794,7 +840,6 @@ export default {
}
.allCon {
width: 100%;
// height: 100%;
display: flex;
min-width: 933px;
// min-width: 1200px;
@@ -806,7 +851,6 @@ export default {
margin-right: 20px;
width: 208px;
// height: 100%;
flex-shrink: 0;
// flex: 1;
// height: 100%;
background: #ffffff;
@@ -814,7 +858,7 @@ export default {
display: flex;
justify-content: center;
.leftmain {
width: 86%;
// width: 86%;
margin-top: 20px;
.tit {
font-size: 18px;
@@ -848,6 +892,7 @@ export default {
}
.btn3 {
width: 171px;
margin-right: 0px;
.search {
width: 17px;
@@ -858,10 +903,12 @@ export default {
}
.maincon {
margin-top: 17px;
width: 100%;
// background-color: #bfa;
width: 208px;
display: flex;
flex-direction: column;
align-items: center; // background-color: #bfa;
.item {
width: 100%;
width: 171px;
height: 83px;
display: flex;
background: rgba(255, 182, 78, 0.1);
@@ -906,7 +953,6 @@ export default {
.right {
flex: 1;
// background-color: #fff;
flex-shrink: 0;
display: flex;
flex-direction: column;
.addhead {
@@ -987,7 +1033,7 @@ export default {
.return {
color: #4ea6ff;
font-size: 14px;
margin-top: 5px;
margin-top: 13px;
margin-right: 20px;
}