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

style:合并

Browse Source
This commit is contained in:
songwc
2022-10-13 10:31:33 +08:00
parent eff7c6fc48 9fb92c878b
commit 7980911be1
3 changed files with 226 additions and 167 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),

131
src/views/learningpath/LevelAddDetail.vue
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;

256
src/views/research/ResearchManage.vue
View File

@@ -83,36 +83,42 @@
/>
</div>
<!-- 表格 -->
<div :class="out ? 'out' : 'unout'">
<div class="top">
<img class="topimg" src="../../assets/images/courseManage/add1.png" />
<div class="topc">创建调研</div>
<div @click="handleOut" style="margin-left: 440px; 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">
<a-modal v-model:visible="out" :footer="null" :closable="false" style="margin-top: 250px">
<div class="out">
<div class="top">
<img class="topimg" src="../../assets/images/courseManage/add1.png" />
<div class="topc">创建调研</div>
<div @click="handleOut" style="margin-left: 500px; cursor: pointer">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
style="width: 20px; height: 20px"
src="../../assets/images/basicinfo/close.png"
/>
</div>
<div class="inname">调研名称</div>
<div class="in">
<a-input v-model:value="valueE" show-count :maxlength="15" style="border-radius: 8px"/>
</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="value"
show-count :maxlength="15"
style="border-radius: 8px"
/>
</div>
</div>
<div class="btn">
<button class="samtn btn1" @click="handleOut">取消</button>
<button class="samtn btn2" @click="handleOut">确定</button>
</div>
</div>
<div class="btn">
<button class="samtn btn1" @click="handleOut">取消</button>
<button class="samtn btn2" @click="handleOut">确定</button>
</div>
</div>
</div>
</div></a-modal
>
</div>
</template>
<script>
@@ -350,6 +356,109 @@ export default {
display: block;
clear: both;
}
.out {
//display: flex;
display: block;
position: absolute;
top: 120px;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #409EFF;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
margin-left: 10px;
background-color: #409EFF;
color: #fff;
}
}
}
}
.researchmanage {
width: 100%;
height: 100%;
@@ -480,102 +589,7 @@ export default {
margin-bottom: 20px;
}
}
.out {
display: block;
position: absolute;
top: 120px;
width: 600px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #409EFF;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
margin-left: 10px;
background-color: #409EFF;
color: #fff;
}
}
}
}
.unout {
display: none;
}