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

style：table渲染图片 修改弹窗类名

Browse Source
This commit is contained in:
songwc
2022-10-20 10:51:25 +08:00
parent fd063e6ff4
commit ab652a0924
6 changed files with 322 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/taskpage/one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/images/taskpage/three.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/taskpage/two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@@ -95,6 +95,7 @@
centered="true" centered="true"
v-model:visible="out" v-model:visible="out"
:footer="null" :footer="null"
wrapClassName="CreatePath"
> >
<div class="out"> <div class="out">
<div class="top"> <div class="top">
@@ -534,193 +535,195 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.ant-modal { .clearfix:before,
width: 680px !important; .clearfix:after {
height: 528px !important; content: " ";
.ant-modal-content { display: block;
clear: both;
}
.CreatePath {
.ant-modal {
width: 680px !important; width: 680px !important;
height: 528px !important; height: 528px !important;
.ant-modal-body { .ant-modal-content {
width: 680px !important; width: 680px !important;
height: 528px !important; height: 528px !important;
padding: 0 !important; .ant-modal-body {
.out { width: 680px !important;
display: block; height: 528px !important;
position: absolute; padding: 0 !important;
top: 90px; .out {
width: 680px; display: block;
// height: 525px; position: absolute;
background-color: #fff; top: 90px;
width: 680px;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21); // height: 525px;
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;
margin-top: -2px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff; 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 { box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
color: #6f6f6f; left: 50%;
font-size: 14px; top: 50%;
margin-left: 7px; 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;
margin-top: -2px;
} }
.in { .topc {
margin-left: 14px; color: #000000;
width: 81%; font-size: 16px;
position: relative; margin-left: 8px;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
} }
} }
.bac { .mid {
width: 78%; width: 100%;
// background-color: lightcoral; height: 100%;
background-color: #fff;
display: flex; display: flex;
margin-top: 30px; flex-direction: column;
// border: 1px solid black; align-items: center;
.d { .d {
margin-top: 18px; // margin-top: 8px;
color: #ff4e4e; // color: #ff4e4e;
margin-left: -5px;
} }
.inname { .name {
color: #6f6f6f; width: 78%;
font-size: 14px; // background-color: lightcoral;
margin-left: 7px; display: flex;
margin-top: 15px; 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%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
} }
.in { .bac {
margin-left: 14px; width: 78%;
width: 81%; // background-color: lightcoral;
height: 110px; display: flex;
// background-color: red; margin-top: 30px;
// border: 1px solid black;
.d {
margin-top: 18px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
height: 110px;
// background-color: red;
display: flex;
justify-content: space-between;
.im {
border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer;
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.im { margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px; border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer; cursor: pointer;
} }
} .btn1 {
} background-color: #fff;
.info { color: #4ea6ff;
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
} }
.showcount { .btn2 {
position: absolute; background-color: #4ea6ff;
right: 10px; color: #fff;
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 #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #fff;
}
}
} }
} }
} }
} }
} }
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.learningPath { .learningPath {
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@@ -29,6 +29,7 @@
centered="true" centered="true"
:footer="null" :footer="null"
:closable="clos" :closable="clos"
wrapClassName="AddLevel"
> >
<div class="header"> <div class="header">
<div class="headmain"> <div class="headmain">
@@ -310,7 +311,7 @@
<div class="draw" style="position: relative"> <div class="draw" style="position: relative">
<a-drawer <a-drawer
v-model:visible="visible" v-model:visible="visible"
class="drawerStyle" class="drawerStyle ProjectDrawer"
title="关联项目" title="关联项目"
placement="right" placement="right"
width="80%" width="80%"
@@ -322,7 +323,7 @@
<img <img
style="width: 29px; height: 29px; cursor: pointer" style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png" src="../../assets/images/basicinfo/close.png"
@click="showDrawer" @click="closeDrawer"
/> />
</div> </div>
<div class="drawerbox"> <div class="drawerbox">
@@ -648,6 +649,9 @@ export default {
const showDrawer = () => { const showDrawer = () => {
state.visible = true; state.visible = true;
}; };
const closeDrawer = () => {
state.visible = false;
};
const showModal = () => { const showModal = () => {
state.modal = true; state.modal = true;
}; };
@@ -802,6 +806,7 @@ export default {
selectProjectName2, selectProjectName2,
tableDataFunc, tableDataFunc,
showDrawer, showDrawer,
closeDrawer,
showModal, showModal,
closeModal, closeModal,
afterVisibleChange, afterVisibleChange,
@@ -819,151 +824,153 @@ export default {
display: block; display: block;
clear: both; clear: both;
} }
.ant-modal { .AddLevel {
width: 624px !important; .ant-modal {
height: 388px !important;
.ant-modal-content {
width: 624px !important; width: 624px !important;
height: 388px !important; height: 388px !important;
border-radius: 4px !important; .ant-modal-content {
.ant-modal-body { width: 624px !important;
// background-color: blue; height: 388px !important;
width: 100% !important; border-radius: 4px !important;
height: 100% !important; .ant-modal-body {
padding: 0 !important; // background-color: blue;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
.header { .header {
width: 624px; width: 624px;
height: 68px; height: 68px;
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100% rgba(78, 166, 255, 0) 100%
); );
display: flex;
justify-content: center;
.headmain {
width: 90%;
height: 100%;
display: flex; display: flex;
align-items: center; justify-content: center;
justify-content: space-between; .headmain {
.add { width: 90%;
font-size: 16px; height: 100%;
font-weight: 600; display: flex;
color: #333333; align-items: center;
} justify-content: space-between;
.img { .add {
width: 20px; font-size: 16px;
height: 20px; font-weight: 600;
background-image: url(../../assets/images/basicinfo/close22.png); color: #333333;
background-size: 100% 100%; }
.img {
width: 20px;
height: 20px;
background-image: url(../../assets/images/basicinfo/close22.png);
background-size: 100% 100%;
}
} }
} }
} .main {
.main { width: 100%;
width: 100%; height: calc(100% - 68px);
height: calc(100% - 68px); // background-color: #bfa;
// background-color: #bfa; display: flex;
display: flex; justify-content: center;
justify-content: center; .inma {
.inma { width: 75%;
width: 75%; height: 100%;
height: 100%; // background-color: lightblue;
// background-color: lightblue; .name {
.name { display: flex;
display: flex; position: relative;
position: relative; margin-top: 30px;
margin-top: 30px; .fir {
.fir { font-size: 14px;
font-size: 14px; font-weight: 400;
font-weight: 400; color: rgba(0, 0, 0, 0.85);
color: rgba(0, 0, 0, 0.85); white-space: nowrap;
white-space: nowrap; margin-top: 3px;
margin-top: 3px; }
.input {
width: 100%;
.ant-input {
border-radius: 8px;
border: 1px solid #c7cbd2;
&::placeholder {
font-size: 12px;
position: absolute;
top: 5px;
}
}
.ant-textarea {
border-radius: 8px;
border: 1px solid #c7cbd2;
&::placeholder {
font-size: 12px;
position: absolute;
top: 5px;
}
}
}
.co {
position: absolute;
right: 10px;
top: 4px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
.co1 {
position: absolute;
right: 10px;
bottom: 8px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
} }
.input { .btn {
margin-top: 40px;
width: 100%; width: 100%;
.ant-input { display: flex;
border-radius: 8px; justify-content: center;
border: 1px solid #c7cbd2; .btn1 {
&::placeholder { width: 100px;
font-size: 12px; height: 40px;
position: absolute; border-radius: 4px;
top: 5px; border: 1px solid #387df7;
} font-size: 14px;
color: #387df7;
cursor: pointer;
background: #ffffff;
margin-right: 20px;
} }
.ant-textarea { .btn2 {
border-radius: 8px; width: 100px;
border: 1px solid #c7cbd2; height: 40px;
&::placeholder { border-radius: 4px;
font-size: 12px; font-size: 14px;
position: absolute; color: #fff;
top: 5px; cursor: pointer;
} border: 0;
background: #388be1;
} }
} }
.co {
position: absolute;
right: 10px;
top: 4px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
.co1 {
position: absolute;
right: 10px;
bottom: 8px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
}
.btn {
margin-top: 40px;
width: 100%;
display: flex;
justify-content: center;
.btn1 {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #387df7;
font-size: 14px;
color: #387df7;
cursor: pointer;
background: #ffffff;
margin-right: 20px;
}
.btn2 {
width: 100px;
height: 40px;
border-radius: 4px;
font-size: 14px;
color: #fff;
cursor: pointer;
border: 0;
background: #388be1;
}
} }
} }
} }
} }
} }
} }
.drawerStyle { .ProjectDrawer {
.ant-drawer-content-wrapper { // .ant-drawer-content-wrapper {
// max-width: 1000px;
.ant-drawer-header { // .ant-drawer-header {
display: none !important; // display: none !important;
} // }
.ant-drawer-body { // .ant-drawer-body {
padding: 0; // padding: 0;
} // }
} // }
.drawerMain { .drawerMain {
min-width: 600px; min-width: 600px;
margin: 0px 32px 0px 32px; margin: 0px 32px 0px 32px;

22
src/views/projectcenter/TaskPage.vue
View File

@@ -1485,6 +1485,28 @@ export default {
width: 50, width: 50,
align: "center", align: "center",
className: "h", className: "h",
customRender: (text) => {
if (text.record.rank == "1") {
return (
<div
style={{
width: 24,
height: 24,
backgroundImage:
"url(" +
require("../../assets/images/taskpage/one.png") +
")",
}}
>fewfwe</div>
);
} else if (text.record.rank == "2") {
return <div>ggg</div>;
} else if (text.record.rank == "3") {
return <div>ggg</div>;
} else {
return <div>{text.record.rank}</div>;
}
},
}, },
{ {
title: "名称", title: "名称",