feat:合并

This commit is contained in:
李晓鸽
2022-10-13 10:19:59 +08:00
7 changed files with 854 additions and 646 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 B

View File

@@ -185,21 +185,61 @@
<!-- 新建选择线上还是面授课弹窗 -->
<!-- 确定新建面授课弹窗 -->
<div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
<div class="ft_header"></div>
<div class="ft_main">
<div class="m_header">
<div class="add_icon"></div>
<span>新建面授课</span>
<div class="close_exit" @click="ft_exit"></div>
<div
style="
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
"
@click="showModal"
>
新建面授课
</div>
<a-modal
v-model:visible="ft_hs"
title="Title"
@ok="closeModal"
:footer="null"
:closable="false"
wrapClassName="modalStyle"
width="80%"
>
<div class="modalHeader">
<div class="headerLeft">
<img
style="width: 17px; height: 18px; margin-right: 8px"
src="../../assets/images/basicinfo/add.png"
/>
<span class="headerLeftText">新建面授课</span>
</div>
<div style="margin-right: 57px; cursor: pointer">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<div class="m_title">课程信息</div>
<div class="m_body">
<div class="mb_left">
<div class="mbl_items1">
<span style="font-weight: 900; color: red; margin-right: 6px"
></span
>
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
<span style="margin-right: 14px">课程名称</span>
</div>
<div class="item_inp">
<div class="i1_input">
<a-input
v-model:value="value"
@@ -208,7 +248,8 @@
/>
</div>
</div>
<div class="mbl_items2">
</div>
<div class="i2_cz">
<div class="i2_top">
<div class="i2_left">课程命名规则</div>
<div class="i2_right" @click="hideShow">
@@ -241,12 +282,12 @@
</span>
</div>
</div>
<div class="mbl_items3">
<div class="i3_top">
<span style="font-weight: 900; color: red; margin-right: 6px"
></span
>
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
<span style="margin-right: 14px">封面图</span>
</div>
<div class="item_inp">
<div class="i3_upload">
<a-upload
v-model:file-list="fileList"
@@ -266,18 +307,20 @@
</div>
</a-upload>
</div>
</div>
<div class="i3_bottom">
<span style="color: #999ba3"
>高宽比为16:9 (:800*450) png或jpg图片</span
>
</div>
</div>
<div class="mbl_items4">
<span style="font-weight: 900; color: red; margin-right: 6px"
></span
>
</div>
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
<span style="margin-right: 14px">目标人群</span>
</div>
<div class="item_inp">
<div class="i1_input">
<a-input
v-model:value="value"
@@ -286,8 +329,12 @@
/>
</div>
</div>
<div class="mbl_items5">
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 14px">课程价值</span>
</div>
<div class="item_inp">
<div class="i1_input">
<a-input
v-model:value="value"
@@ -296,11 +343,13 @@
/>
</div>
</div>
<div class="mbl_items6">
<span style="font-weight: 900; color: red; margin-right: 6px"
></span
>
</div>
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
<span style="margin-right: 14px">内容分类</span>
</div>
<div class="item_inp">
<div class="select i6_input">
<a-select
dropdownClassName="dropdown-style"
@@ -312,8 +361,12 @@
></a-select>
</div>
</div>
<div class="mbl_items7">
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 14px">场景</span>
</div>
<div class="item_inp">
<div class="select i7_input">
<a-select
dropdownClassName="dropdown-style"
@@ -325,10 +378,12 @@
></a-select>
</div>
</div>
<div class="mbl_items8">
<div class="i8_top">
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 14px">内容标签</span>
<div class="i1_input">
</div>
<div class="item_inp">
<a-input
v-model:value="value"
style="width: 440px; height: 40px; border-radius: 8px"
@@ -341,13 +396,13 @@
<a-tag closable @close.prevent>Prevent Default</a-tag>
</div>
</div>
</div>
<div class="mb_right">
<div class="mbl_items9">
<span style="font-weight: 900; color: red; margin-right: 6px"
></span
>
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
<span style="margin-right: 14px">授课教师</span>
</div>
<div class="item_inp">
<div class="i1_input">
<a-input
v-model:value="value"
@@ -356,8 +411,13 @@
/>
</div>
</div>
<div class="mbl_items10">
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 14px">课程简介</span>
</div>
<div class="item_inp">
<div class="i10_textarea">
<a-textarea
v-model:value="value"
@@ -366,15 +426,84 @@
/>
</div>
</div>
<div class="mbl_items11">
<div class="i11_top">
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 10px">附件</span>
<div class="accessory_icon"></div>
</div>
<div class="item_inp">
<div class="accessory">
<div class="accessory_icon"><img src="@/assets/images/coursewareManage/enclosure.png" alt=""></div>
<span style="color: #4ea6ff">添加附件</span>
</div>
</div>
</div>
<div class="mbl_items12">
<div class="i12_box1">
<div class="file_img"></div>
<div class="file_detail">
<div class="file_name">
<span style="color:#6F6F6F;">图片1.png</span>
</div>
<div class="file_size">
<span style="color:#999BA3">152.77K</span>
</div>
</div>
<div class="file_operation"><span style="color: #4EA6FF;">删除</span></div>
</div>
<div class="i12_box1">
<div class="file_img"></div>
<div class="file_detail">
<div class="file_name">
<span style="color:#6F6F6F;">图片2.png</span>
</div>
<div class="file_updata">
<div class="updatabox">
<div class="updatacolor"></div>
<div class="updataxq">上传完成</div>
</div>
<div class="upjd"><span style="margin:auto 5px">100%</span></div>
</div>
</div>
<div class="file_operation"><span style="color: #4EA6FF;">删除</span></div>
</div>
<div class="i12_box1">
<div class="file_img"></div>
<div class="file_detail">
<div class="file_name">
<span style="color:#6F6F6F;">图片3.png</span>
</div>
<div class="file_updata">
<div class="updatabox">
<div class="updatacolor2"></div>
<div class="updataxq2">上传失败</div>
</div>
<div class="upjd"><span style="margin:auto 5px">80%</span></div>
</div>
</div>
<div class="file_operation"><span style="color: #4EA6FF;margin-right:5px;">重传</span><span style="color: #4EA6FF;">取消</span></div>
</div>
<div class="i12_box1">
<div class="file_img"></div>
<div class="file_detail">
<div class="file_name">
<span style="color:#6F6F6F;">图片4.png</span>
</div>
<div class="file_updata">
<div class="updatabox">
<div class="updatacolor3"></div>
<div class="updataxq3">正在上传</div>
</div>
</div>
</div>
<div class="file_operation"><span style="color: #4EA6FF;margin-right:5px;">暂停</span><span style="color: #4EA6FF;">取消</span></div>
</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</div>
<!-- 确定新建面授课弹窗 -->
@@ -2318,29 +2447,6 @@ export default defineComponent({
sm_exit,
};
},
// data() {
// // return {
// // ...toRefs(state),
// // options1,
// // options2,
// // of_hShow,
// // of_exit,
// // hideShow,
// // bs_hShow,
// // bs_unhShow,
// // createft,
// // ft_exit,
// // om_exit,
// // ftm_exit,
// // ckxq_hs,
// // ftsr_exit,
// // gpm_exit,
// // stm_exit,
// // createkk,
// // cstm_exit,
// // sm_exit,
// // };
// },
});
</script>
<style lang="scss">
@@ -2611,156 +2717,13 @@ export default defineComponent({
}
.faceteach {
z-index: 999;
width: 85%;
width: 90%;
min-width: 1000px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.ft_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.ft_main {
width: calc(100%);
position: relative;
.m_header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.add_icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/add1.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.m_title {
margin: 7px auto 25px 52px;
}
.m_body {
display: flex;
height: 500px;
overflow: auto;
.mb_left {
.mbl_items1 {
display: flex;
align-items: center;
margin-left: 87px;
margin-bottom: 10px;
}
.mbl_items2 {
margin-left: 164px;
margin-bottom: 30px;
.i2_top {
display: flex;
.i2_right {
margin-left: 320px;
display: flex;
}
}
.i2_detail {
width: 400px;
}
}
.mbl_items3 {
margin-left: 87px;
margin-bottom: 10px;
.i3_top {
display: flex;
align-items: start;
}
.i3_bottom {
margin-left: 60px;
}
}
.mbl_items4 {
display: flex;
align-items: center;
margin-left: 87px;
margin-bottom: 10px;
}
.mbl_items5 {
display: flex;
align-items: center;
margin-left: 93px;
margin-bottom: 10px;
}
.mbl_items6 {
display: flex;
align-items: center;
margin-left: 87px;
margin-bottom: 10px;
}
.mbl_items7 {
display: flex;
align-items: center;
margin-left: 121px;
margin-bottom: 10px;
}
.mbl_items8 {
margin-left: 93px;
margin-bottom: 10px;
.i8_top {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.i8_bottom {
display: flex;
align-items: center;
margin-left: 71px;
}
}
}
.mb_right {
.mbl_items9 {
display: flex;
align-items: center;
margin-left: 100px;
margin-bottom: 10px;
}
.mbl_items10 {
display: flex;
align-items: flex-start;
margin-left: 107px;
margin-bottom: 30px;
}
.mbl_items11 {
margin-left: 105px;
margin-bottom: 10px;
.i11_top {
display: flex;
align-items: center;
.accessory_icon {
width: 15px;
height: 15px;
background-image: url(@/assets/images/coursewareManage/enclosure.png);
margin-right: 6px;
}
}
}
}
}
}
}
.tableBox {
@@ -3648,4 +3611,182 @@ export default defineComponent({
}
}
}
.modalStyle {
.ant-modal{
.modalHeader {
display: flex;
align-items: center;
justify-content: space-between;
.headerLeft {
margin-left: 27px;
display: flex;
align-items: center;
.headerLeftText {
font-size: 16px;
font-weight: 400;
color: #000000;
line-height: 36px;
}
}
}
.modalMain{
.m_title {
margin: 7px auto 25px 22px;
}
.m_body {
display: flex;
.mb_left {
width: 50%;
.mbl_items {
display: flex;
align-items: center;
margin-bottom: 10px;
.item_nam{
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
.asterisk_icon{
width: 10px;
height: 10px;
margin-right: 5px;
}
}
.item_inp{
flex:1;
}
}
.i2_cz{
width:440px;
margin-left:100px;
.i2_top{
display:flex;
justify-content: space-between;
}
}
.i8_bottom{
display:flex;
width:440px;
margin-left:100px;
}
}
.mb_right {
width: 50%;
.mbl_items {
display: flex;
align-items: center;
margin-bottom: 10px;
.item_nam{
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
.asterisk_icon{
width: 10px;
height: 10px;
margin-right: 5px;
}
}
.item_inp{
flex:1;
}
.accessory{
display:flex;
align-items: center;
.accessory_icon{
width:16px;
height:16px;
margin-right:5px;
}
}
}
.mbl_items12{
width:440px;
margin-left:100px;
.i12_box1{
display: flex;
align-items: center;
padding:17px 0px 17px 21px;
border: 1px solid #EFF4FC;
border-radius: 8px;
margin-bottom:10px;
.file_img{
width:27px;
height:32px;
background-color: red;
margin-right:22px;
}
.file_detail{
width:250px;
margin-right:21px;
.file_updata{
display:flex;
align-items: center;
.updatabox{
position: relative;
width: 230px;
height: 5px;
background-color: rgba(192, 192, 192, 0.25);
border-radius: 3px;
.updatacolor{
position: absolute;
left:0;
width: 100%;
height: 5px;
background-color: #57C887;
border-radius: 3px;
}
.updatacolor2{
position: absolute;
left:0;
width: 80%;
height: 5px;
background-color: #FF7474;
border-radius: 3px;
}
.updatacolor3{
position: absolute;
left:0;
width: 60%;
height: 5px;
background-color: #388BE1;
border-radius: 3px;
}
.updataxq{
position: absolute;
right:2px;
top:-30px;
color: #57C887;
}
.updataxq2{
position: absolute;
right:2px;
top:-30px;
color: #FF7474;
}
.updataxq3{
position: absolute;
right:2px;
top:-30px;
color: #388BE1;
}
}
}
.file_operation{
display: flex;
span{
cursor: pointer;
}
}
}
}
}
}
}
}
}
}
</style>

View File

@@ -64,7 +64,7 @@
</div>
<!-- 搜索框及按钮 -->
<!-- 表格 -->
<div class="tableBox">
<div class="tableBox" style="padding-bottom: 160px; position: relative">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc()"
@@ -75,7 +75,6 @@
@expand="expandTable"
:pagination="false"
/>
<div class="pa">
<a-pagination
showSizeChanger="true"
@@ -90,7 +89,9 @@
</div>
<!-- 表格 -->
<div :class="out ? 'out' : 'unout'">
<a-modal v-model:visible="out" footer="null" style="margin-top: 400px">
<div class="out">
<div class="top">
<img class="topimg" src="../../assets/images/courseManage/add1.png" />
<div class="topc">创建路径</div>
@@ -116,7 +117,7 @@
maxlength="20"
style="border-radius: 4px"
/>
<div class="showcount">{{ valuei.length }}/20</div>
<div class="showcount">{{ valueE.length }}/20</div>
</div>
</div>
<div class="bac">
@@ -166,7 +167,8 @@
<button class="samtn btn2" @click="handleOut">确定</button>
</div>
</div>
</div>
</div></a-modal
>
</div>
</template>
<script>
@@ -564,212 +566,6 @@ export default {
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.learningPath {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
// position: relative;
.filter {
margin-left: 38px;
margin-right: 38px;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.filterItems {
display: flex;
flex-wrap: wrap;
.select {
margin-right: 20px;
margin-bottom: 20px;
}
}
.btns {
display: flex;
// flex-wrap: wrap;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: rgba(64, 158, 255, 1);
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search1.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add1.png");
}
}
.btn1:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("../../assets/images/courseManage/search0.png");
}
.btnText {
color: #ffffff;
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("../../assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
.btn3:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("../../assets/images/courseManage/add0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.tableBox {
margin: 20px 38px 30px;
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
}
.operation {
display: flex;
justify-content: right;
.nSelect {
.fb {
display: flex;
.jc {
color: #4ea6ff;
font-size: 14px;
margin-left: 20px;
}
}
}
.tableSelect {
margin-right: 20px;
display: flex;
align-items: center;
justify-content: right;
.g1 {
color: #4ea6ff;
font-size: 14px;
}
}
}
// .operation {
// font-size: 14px;
// font-weight: 400;
// color: #4ea6ff;
// // line-height: 36px;
// .operation1 {
// margin-left: 21px;
// width: 28px;
// display: inline-block;
// }
// .operation3 {
// margin-left: 21px;
// width: 70px;
// display: inline-block;
// text-align: center;
// }
// .more {
// width: 50px;
// display: inline-block;
// margin-left: 21px;
// position: relative;
// text-align: left;
// // z-index: 99999;
// .moreArrow {
// width: 13px;
// height: 7px;
// display: inline-block;
// background-image: url("../../assets/images/navtop/down.png");
// background-size: 100%;
// margin: 2px;
// margin-left: 7px;
// }
// .moreItems {
// width: 80px;
// padding: 5px;
// display: none;
// background: #ffffff;
// box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
// border-radius: 3px;
// border: 0px solid #dcdcdc;
// position: absolute;
// left: 0px;
// top: 28px;
// z-index: 100;
// text-align: center;
// }
// }
// .more:hover .moreArrow {
// background-image: url("../../assets/images/navtop/up.png");
// }
// .more:hover .moreItems {
// display: block;
// }
// }
.out {
display: block;
position: absolute;
@@ -938,6 +734,213 @@ export default {
}
}
}
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.learningPath {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
// position: relative;
.filter {
margin-left: 38px;
margin-right: 38px;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.filterItems {
display: flex;
flex-wrap: wrap;
.select {
margin-right: 20px;
margin-bottom: 20px;
}
}
.btns {
display: flex;
// flex-wrap: wrap;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: rgba(64, 158, 255, 1);
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search1.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add1.png");
}
}
.btn1:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("../../assets/images/courseManage/search0.png");
}
.btnText {
color: #ffffff;
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("../../assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
.btn3:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("../../assets/images/courseManage/add0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.tableBox {
margin: 20px 38px 30px;
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
}
.operation {
display: flex;
justify-content: right;
.nSelect {
.fb {
display: flex;
.jc {
color: #4ea6ff;
font-size: 14px;
margin-left: 20px;
}
}
}
.tableSelect {
margin-right: 20px;
display: flex;
align-items: center;
justify-content: right;
.g1 {
color: #4ea6ff;
font-size: 14px;
}
}
}
// .operation {
// font-size: 14px;
// font-weight: 400;
// color: #4ea6ff;
// // line-height: 36px;
// .operation1 {
// margin-left: 21px;
// width: 28px;
// display: inline-block;
// }
// .operation3 {
// margin-left: 21px;
// width: 70px;
// display: inline-block;
// text-align: center;
// }
// .more {
// width: 50px;
// display: inline-block;
// margin-left: 21px;
// position: relative;
// text-align: left;
// // z-index: 99999;
// .moreArrow {
// width: 13px;
// height: 7px;
// display: inline-block;
// background-image: url("../../assets/images/navtop/down.png");
// background-size: 100%;
// margin: 2px;
// margin-left: 7px;
// }
// .moreItems {
// width: 80px;
// padding: 5px;
// display: none;
// background: #ffffff;
// box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
// border-radius: 3px;
// border: 0px solid #dcdcdc;
// position: absolute;
// left: 0px;
// top: 28px;
// z-index: 100;
// text-align: center;
// }
// }
// .more:hover .moreArrow {
// background-image: url("../../assets/images/navtop/up.png");
// }
// .more:hover .moreItems {
// display: block;
// }
// }
.unout {
display: none;
}

View File

@@ -28,9 +28,11 @@
</div>
</div>
<div class="line"></div>
<router-link to="/learningpath"
><div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<router-link to="/learningpath">
<div class="return">返回</div></router-link
<div class="return">返回</div>
</div></router-link
>
</div>
</div>
@@ -434,7 +436,7 @@ export default {
.return {
color: #4ea6ff;
font-size: 14px;
margin-top: 5px;
margin-top: 10px;
margin-right: 60px;
}
.more {

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;
}

View File

@@ -11,7 +11,7 @@
<div class="fort">起止时间2022-07-21 00:00至2020-10-21 00:00</div>
</div>
<div class="right">
<div class="end">
<div class="end" style="margin-right: 5px">
<div style="margin-top: 20px;margin-left: 10px">
<img class="endimg" src="../../assets/images/projectadd/ending.png"/>
<span class="endtext">结束项目</span>
@@ -39,23 +39,23 @@
</div>
</div>
</div>
<div class="end">
<router-link to="/projectmanage" class="end">
<div style="margin-top: 20px;margin-left: 10px;margin-right:30px">
<img class="ending" src="../../assets/images/leveladd/back.png" />
<span class="endtext" style="color:#4EA6FF">返回</span>
</div>
</router-link>
</div>
</div>
</div>
<div class="split"></div>
<div class="split" style="flex-shrink: 0;"></div>
<div class="content">
<a-tabs class="tab"
v-model:activeKey="activeKey"
size="large"
:tabBarStyle="{ marginLeft: '10px' }">
<a-tab-pane key="2" tab="概览">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="1" tab="任务" force-render>
:tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }">
<a-tab-pane key="1" tab="概览"><div class="split"></div></a-tab-pane>
<a-tab-pane key="2" tab="任务" force-render>
<div class="split"></div>
<div class="onerow">
<div class="taskmain">任务大纲</div>
<button class="btn">批量面授报名</button>
@@ -65,7 +65,7 @@
</div>
</div>
<div class="stage">
<span class="stageimg"><img src="../../assets/images/projectadd/close.png"/></span>
<span class="stageimg"><img src="../../assets/images/projectadd/open.png"/></span>
<span class="stagename">阶段1腾飞班阶级1</span>
</div>
<div class="course">
@@ -333,21 +333,27 @@
}
.content {
//display: flex;
margin: 0 37px;
//margin: 0 37px;
.ant-tabs-nav-wrap {
margin-left: 30px;
}
.onerow {
width: 100%;
//width: 100%;
display: flex;
height: 40px;
position: relative;
//margin-top: 5xp;
margin-top: 15px;
margin-left: 38px;
//margin-right: 38px;
.taskmain {
font-size: 18px;
padding-top: 7px;
color: #000000;
}
.btn {
position: absolute;
top: 0;
right: 110px;
right: 168px;
background-color: #409EFF;
width: 130px;
height: 40px;
@@ -358,7 +364,7 @@
}
.edit {
position: absolute;
right: 0;
right: 48px;
top: 0;
color: #409EFF;
width: 100px;
@@ -391,6 +397,8 @@
background-color: #EFF4FC;
align-items: center;
margin-top: 20px;
margin-left: 38px;
margin-right: 38px;
.stageimg {
margin-left: 31px;
}
@@ -402,11 +410,13 @@
}
}
.course {
width: 100%;
//width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 10px;
margin-left: 38px;
margin-right: 38px;
//margin: 0 12px;
border: 1px solid #F2F6FC;
.first {

View File

@@ -69,6 +69,8 @@
@expand="expandTable"
:pagination="false"
/>
</div>
<div class="pa">
<a-pagination
showSizeChanger="true"
@@ -80,7 +82,6 @@
class="pagination"
/>
</div>
</div>
<!-- 表格 -->
<div :class="out ? 'out' : 'unout'">
<div class="top">
@@ -354,6 +355,7 @@ export default {
height: 100%;
display: flex;
flex-direction: column;
//align-items: center;
position: relative;
// position: relative;
.filter {
@@ -451,6 +453,7 @@ export default {
.tableBox {
margin: 20px 38px 30px ;
display: flex;
flex: 1;
//position: relative;
flex-direction: column;
@@ -463,15 +466,18 @@ export default {
> td {
background: #f6f9fd;
}
}
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
//position: absolute;
//bottom: 20px;
margin-bottom: 20px;
.pagination {
margin-bottom: 20px;
}
}
.out {
@@ -540,7 +546,7 @@ export default {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
height: 30px;
}
}
}