mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-12 12:26:47 +08:00
style：修改弹出框样式 修改分页 解决面包屑跳转 修改返回按钮
This commit is contained in:
songwc
@@ -64,7 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 搜索框及按钮 -->
|
<!-- 搜索框及按钮 -->
|
||||||
<!-- 表格 -->
|
<!-- 表格 -->
|
||||||
<div class="tableBox">
|
<div class="tableBox" style="padding-bottom: 160px; position: relative">
|
||||||
<a-table
|
<a-table
|
||||||
style="border: 1px solid #f2f6fe"
|
style="border: 1px solid #f2f6fe"
|
||||||
:columns="tableDataFunc()"
|
:columns="tableDataFunc()"
|
||||||
@@ -75,7 +75,6 @@
|
|||||||
@expand="expandTable"
|
@expand="expandTable"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="pa">
|
<div class="pa">
|
||||||
<a-pagination
|
<a-pagination
|
||||||
showSizeChanger="true"
|
showSizeChanger="true"
|
||||||
@@ -90,7 +89,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 表格 -->
|
<!-- 表格 -->
|
||||||
<div :class="out ? 'out' : 'unout'">
|
|
||||||
|
<a-modal v-model:visible="out" footer="null" style="margin-top: 400px">
|
||||||
|
<div class="out">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<img class="topimg" src="../../assets/images/courseManage/add1.png" />
|
<img class="topimg" src="../../assets/images/courseManage/add1.png" />
|
||||||
<div class="topc">创建路径</div>
|
<div class="topc">创建路径</div>
|
||||||
@@ -116,7 +117,7 @@
|
|||||||
maxlength="20"
|
maxlength="20"
|
||||||
style="border-radius: 4px"
|
style="border-radius: 4px"
|
||||||
/>
|
/>
|
||||||
<div class="showcount">{{ valuei.length }}/20</div>
|
<div class="showcount">{{ valueE.length }}/20</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bac">
|
<div class="bac">
|
||||||
@@ -166,7 +167,8 @@
|
|||||||
<button class="samtn btn2" @click="handleOut">确定</button>
|
<button class="samtn btn2" @click="handleOut">确定</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div></a-modal
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -564,213 +566,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.clearfix:before,
|
.out {
|
||||||
.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;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 90px;
|
top: 90px;
|
||||||
@@ -937,7 +733,214 @@ 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 {
|
.unout {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,9 +28,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
|
<router-link to="/learningpath"
|
||||||
|
><div style="display: flex">
|
||||||
<img class="img2" src="../../assets/images/leveladd/back.png" />
|
<img class="img2" src="../../assets/images/leveladd/back.png" />
|
||||||
<router-link to="/learningpath">
|
<div class="return">返回</div>
|
||||||
<div class="return">返回</div></router-link
|
</div></router-link
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -434,7 +436,7 @@ export default {
|
|||||||
.return {
|
.return {
|
||||||
color: #4ea6ff;
|
color: #4ea6ff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-top: 5px;
|
margin-top: 10px;
|
||||||
margin-right: 60px;
|
margin-right: 60px;
|
||||||
}
|
}
|
||||||
.more {
|
.more {
|
||||||
|
|||||||
@@ -74,10 +74,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<img class="img2" src="../../assets/images/leveladd/back.png" />
|
|
||||||
<router-link to="/leveladd">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -791,6 +794,7 @@ export default {
|
|||||||
.allCon {
|
.allCon {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
background-color: #f1f4f8;
|
background-color: #f1f4f8;
|
||||||
display: flex;
|
display: flex;
|
||||||
// min-width: 1200px;
|
// min-width: 1200px;
|
||||||
@@ -983,7 +987,7 @@ export default {
|
|||||||
.return {
|
.return {
|
||||||
color: #4ea6ff;
|
color: #4ea6ff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-top: 5px;
|
margin-top: 13px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user