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

feat:新建关卡页面

Browse Source
This commit is contained in:
李晓鸽
2022-10-13 09:18:43 +08:00
parent 4973a0ff04
commit 35ed489f85
2 changed files with 43 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/NavLeft.vue
View File

@@ -416,17 +416,17 @@ export default {
const packUp = () => {
state.packup = !state.packup;
};
const getMousePosition = () => {
const getClientHeight = () => {
state.screenHeight = document.body.clientHeight;
};
onMounted(() => {
// console.log("11111", 1);
window.addEventListener("resize", getMousePosition, false);
window.addEventListener("resize", getClientHeight, false);
// judgeUrl();
});
onUnmounted(() => {
window.removeEventListener("resize", getMousePosition, false);
window.removeEventListener("resize", getClientHeight, false);
});
return {
...toRefs(state),

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

@@ -1,6 +1,6 @@
<template>
<div class="allCon">
<div class="left clearfix">
<div class="allCon" :style="{ height: rightheight }">
<div class="left clearfix" :style="{ height: rightheight }">
<div class="leftmain">
<div class="tit">关卡</div>
<div class="btn btn3">
@@ -40,7 +40,7 @@
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
style="width: 200px"
placeholder="自由学习模式"
:options="projectNameList"
@change="selectProjectName"
@@ -82,15 +82,6 @@
</div>
</div>
<div class="mid">
<!-- <div class="item" v-for="(item, index) in mid" :key="item.id">
<div class="itcon">
<div class="img">
<img :src="item.img" />
</div>
<div class="text">{{ item.title }}</div>
</div>
<div :class="[index === mid.length - 1 ? 'no' : 'lin']"></div>
</div> -->
<div class="item">
<div class="itcon">
<div class="img">
@@ -244,18 +235,15 @@
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 1500, y: 300 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: '40px',
columnWidth: 30,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<!-- :pagination= showSizeChanger: true, showQuickJumper: true,
hideOnSinglePage: true, pageSizeOptions: [], pageSize: pageSize, current:
currentPage, total: tableDataTotal, -->
<div class="pa">
<a-pagination
showSizeChanger="true"
@@ -276,7 +264,7 @@
class="drawerStyle"
title="关联项目"
placement="right"
width="50%"
width="80%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
@@ -311,7 +299,7 @@
</template>
<script>
import { reactive, toRefs } from "vue";
import { reactive, toRefs, onMounted } from "vue";
const drawercolumns = [
{
title: "项目名称",
@@ -354,6 +342,7 @@ export default {
name: "LevelAddDetail",
setup() {
const state = reactive({
rightheight: null,
projectNameList: [
{
id: 1,
@@ -577,7 +566,7 @@ export default {
dataIndex: "state",
// width: "30%",
key: "state",
width: 40,
width: 60,
align: "left",
className: "classify",
scopedSlots: { customRender: "action" }, //引入的插槽
@@ -617,7 +606,7 @@ export default {
title: "必修/选修",
dataIndex: "pubtime",
key: "pubtime",
width: 200,
// width: 100,
align: "center",
className: "h",
scopedSlots: { customRender: "action" }, //引入的插槽
@@ -656,7 +645,7 @@ export default {
title: "时长",
dataIndex: "cretime",
key: "cretime",
width: 100,
// width: 100,
align: "center",
className: "h",
},
@@ -665,7 +654,7 @@ export default {
className: "h",
dataIndex: "opacation",
key: "opacation",
width: 100,
// width: 100,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
@@ -690,6 +679,21 @@ 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]
);
});
return {
...toRefs(state),
selectProjectName,
@@ -790,20 +794,21 @@ export default {
}
.allCon {
width: 100%;
height: 100%;
background-color: #f1f4f8;
// height: 100%;
display: flex;
min-width: 933px;
// min-width: 1200px;
// overflow-x: hidden;
// min-width: 1400px;
// overflow: scroll;
background-color: rgba(245, 247, 250, 1);
.left {
margin-right: 20px;
width: 208px;
// height: 100%;
flex-shrink: 0;
// flex: 1;
height: 100%;
// height: 100%;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
display: flex;
@@ -900,9 +905,8 @@ export default {
}
.right {
flex: 1;
height: 100%;
width: 100%;
// background-color: #fff;
flex-shrink: 0;
display: flex;
flex-direction: column;
.addhead {
@@ -967,18 +971,18 @@ export default {
height: 60px;
width: 1px;
background-color: #e8effa;
margin-right: 28px;
margin-right: 18px;
}
.img2 {
width: 42px;
height: 42px;
margin-right: 22px;
margin-right: 18px;
}
.pub {
color: #ffb64e;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
margin-right: 18px;
}
.return {
color: #4ea6ff;
@@ -1059,8 +1063,8 @@ export default {
justify-content: center;
height: 100%;
width: 100%;
margin-left: 46px;
margin-right: 46px;
margin-left: 38px;
margin-right: 38px;
.img {
cursor: pointer;
}
@@ -1090,7 +1094,7 @@ export default {
justify-content: center;
.boomcen {
width: 95%;
height: 100%;
// height: 100%;
// background-color: #bfa;
.select {
margin-top: 30px;
@@ -1140,12 +1144,11 @@ export default {
}
.ant-table-selection-column {
padding: 0px !important;
padding-left: 68px !important;
padding-left: 60px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
}
// margin: 20px 38px 30px;
th.h {
background-color: #eff4fc !important;
}
@@ -1233,7 +1236,7 @@ export default {
height: 14px;
background-image: url("../../assets/images/leveladd/z1.png");
position: absolute;
left: -47px;
left: -40px;
}
.ch {
margin-left: 10px;