style:合并

This commit is contained in:
songwc
2022-10-13 10:31:33 +08:00
3 changed files with 226 additions and 167 deletions

View File

@@ -2,12 +2,12 @@
<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>
@@ -40,7 +40,7 @@
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
style="width: 200px"
placeholder="自由学习模式"
:options="projectNameList"
@change="selectProjectName"
@@ -85,15 +85,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">
@@ -247,18 +238,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"
@@ -279,7 +267,7 @@
class="drawerStyle"
title="关联项目"
placement="right"
width="50%"
width="80%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
@@ -314,7 +302,7 @@
</template>
<script>
import { reactive, toRefs } from "vue";
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
const drawercolumns = [
{
title: "项目名称",
@@ -402,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: [
{
@@ -580,7 +608,7 @@ export default {
dataIndex: "state",
// width: "30%",
key: "state",
width: 40,
width: 60,
align: "left",
className: "classify",
scopedSlots: { customRender: "action" }, //引入的插槽
@@ -620,7 +648,7 @@ export default {
title: "必修/选修",
dataIndex: "pubtime",
key: "pubtime",
width: 200,
// width: 100,
align: "center",
className: "h",
scopedSlots: { customRender: "action" }, //引入的插槽
@@ -659,7 +687,7 @@ export default {
title: "时长",
dataIndex: "cretime",
key: "cretime",
width: 100,
// width: 100,
align: "center",
className: "h",
},
@@ -668,7 +696,7 @@ export default {
className: "h",
dataIndex: "opacation",
key: "opacation",
width: 100,
// width: 100,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
@@ -693,6 +721,25 @@ export default {
state.selectedRowKeys = selectedRowKeys;
};
// 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,
@@ -793,27 +840,25 @@ export default {
}
.allCon {
width: 100%;
height: 100%;
overflow: auto;
background-color: #f1f4f8;
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;
justify-content: center;
.leftmain {
width: 86%;
// width: 86%;
margin-top: 20px;
.tit {
font-size: 18px;
@@ -847,6 +892,7 @@ export default {
}
.btn3 {
width: 171px;
margin-right: 0px;
.search {
width: 17px;
@@ -857,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);
@@ -904,8 +952,6 @@ export default {
}
.right {
flex: 1;
height: 100%;
width: 100%;
// background-color: #fff;
display: flex;
flex-direction: column;
@@ -971,12 +1017,12 @@ 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;
@@ -1074,8 +1120,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;
}
@@ -1106,7 +1152,7 @@ export default {
justify-content: center;
.boomcen {
width: 95%;
height: 100%;
// height: 100%;
// background-color: #bfa;
.select {
margin-top: 30px;
@@ -1156,12 +1202,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;
}
@@ -1249,7 +1294,7 @@ export default {
height: 14px;
background-image: url("../../assets/images/leveladd/z1.png");
position: absolute;
left: -47px;
left: -40px;
}
.ch {
margin-left: 10px;