perf: project样式调整

This commit is contained in:
chenjinsong
2021-04-30 17:11:34 +08:00
parent ceef9ba5dc
commit 24c6f8d052
11 changed files with 728 additions and 735 deletions

View File

@@ -190,7 +190,7 @@
.el-table {
position: absolute;
width: calc(100% - 40px);
border: 1px solid #E7EAED;
border: 1px solid $--right-box-border-color;
border-bottom: none;
.caret-wrapper {
@@ -209,10 +209,10 @@
td {
padding: 9px 0;
border-bottom: 1px solid #E7EAED;
border-bottom: 1px solid $--right-box-border-color;
}
th {
border-color: #E7EAED;
border-color: $--right-box-border-color;
}
.el-table__header th:first-of-type {
border-left: none;
@@ -221,7 +221,7 @@
position: fixed;
right: 31px;
height: 49px;
border-bottom: 1px solid #E7EAED;
border-bottom: 1px solid $--right-box-border-color;
background-color: white;
}
thead {
@@ -284,7 +284,7 @@
}
/* start--覆盖el-table边框、gutter等样式 */
.el-table__body-wrapper, .el-table__fixed-body-wrapper {
box-shadow: 1px 0 #E7EAED;
box-shadow: 1px 0 $--right-box-border-color;
.cell {
color: #333;
@@ -298,20 +298,20 @@
}
/* 最后一列用box-shadow模拟边框 */
.el-table:not(.no-operation).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
box-shadow: 1px 0 #E7EAED;
box-shadow: 1px 0 $--right-box-border-color;
}
.el-table:not(.no-operation).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
border-right: none !important;
box-shadow: 1px 0 #E7EAED;
box-shadow: 1px 0 $--right-box-border-color;
}
.el-table__fixed-body-wrapper {
td:not(.is-hidden) {
border-left: 1px solid #E7EAED;
border-left: 1px solid $--right-box-border-color;
}
}
.el-table__fixed-header-wrapper {
th:not(.is-hidden) {
border-left: 1px solid #E7EAED;
border-left: 1px solid $--right-box-border-color;
}
th:last-of-type {
border-right: none !important;

View File

@@ -50,6 +50,8 @@ $--monitor-color: #98AEC5; //全局停用色灰色
warningColor: var(--theme-color);
suspendedColor: $--suspended-color;
monitorColor: $--monitor-color;
primaryBorderColor: $--primary-border-color;
rightBoxBorderColor: $--right-box-border-color;
}
/* element-ui变量覆盖 */
/*$--color-primary: red; // 覆盖element-ui的主题色

View File

@@ -2073,27 +2073,6 @@ li{
line-height: 20px;
}
.right-bottom-zoom{
position: absolute;
top: calc(100% - 100px);
left: calc(100% - 45px);
height: 90px;
width: 35px;
border: 1px solid #E7EAED;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
.zoom-option{
width: 100%;
height: 50%;
opacity: 0.42;
background: #FFF;
align-items: center;
display: flex;
justify-content: center;
}
.zoom-option:hover{
cursor: pointer;
}
}
.nz-icon-arrow-down{
font-size: 14px;
}

View File

@@ -212,7 +212,7 @@ export default {
justify-content: space-between;
padding: 15px 0 15px 17px;
box-sizing: border-box;
border: 1px solid #E7EAED;
border: 1px solid $--right-box-border-color;
background-color: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;

File diff suppressed because it is too large Load Diff

View File

@@ -851,7 +851,7 @@ export default {
width: 37.5%;
margin-right: 2%;
background: #FFFFFF;
border: 1px solid #E7EAED;
border: 1px solid $--right-box-border-color;
border-radius: 2px;
position: relative;
}
@@ -875,7 +875,7 @@ export default {
width: 100%;
background: #FFFFFF;
border: 1px solid #E7EAED;
border: 1px solid $--right-box-border-color;
border-radius: 2px;
}
/* end--table*/
@@ -884,7 +884,7 @@ export default {
.search-box{
width: calc(100% - 10px);
padding: 10px 5px;
border-bottom: 1px solid #E7EAED;
border-bottom: 1px solid $--right-box-border-color;
display: flex;
}
/deep/ .new-search .search-input-all{

View File

@@ -5,7 +5,7 @@
<!-- 顶部工具栏 -->
<div class="main-modal"></div>
<div class="main-container">
<div v-show="bottomBox.mainResizeShow" class="top-tools">
<div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'padding-right: 5px' : ''" class="top-tools">
<div class="top-tool-left" style="min-width: 300px">
<slot name="top-tool-left"></slot>
</div>
@@ -25,10 +25,10 @@
<div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
<slot name="search"></slot>
</div>
<div v-show="bottomBox.mainResizeShow" class="nz-table2">
<div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'padding-right: 5px' : ''" class="nz-table2">
<slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
</div>
<div v-show="bottomBox.mainResizeShow" class="pagination-bottom">
<div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'width: calc(100% - 15px);bottom: 18px' : ''" class="pagination-bottom">
<slot name="pagination"></slot>
</div>
</div>
@@ -62,6 +62,7 @@
</template>
<script>
import { fromRoute } from '@/components/common/js/constants'
import bottomBox from '@/components/common/bottomBox/bottomBox'
import { bottomBoxWindow } from '@/components/common/js/tools'
@@ -91,6 +92,7 @@ export default {
},
data () {
return {
fromRoute: fromRoute,
/* 二级页面相关 */
bottomBox: {
object: {},

View File

@@ -126,9 +126,6 @@ export default {
return '-'
}
}
},
mounted () {
console.info(this.customTableTitle)
}
}
</script>

View File

@@ -4,6 +4,7 @@
ref="dataTable"
:data="tableData"
:height="height"
style="width: calc(100% - 25px)"
border
@header-dragend="dragend"
@sort-change="tableDataSort"

View File

@@ -549,13 +549,6 @@ export default {
}
}
},
getUserData () {
this.$get('sys/user/list').then(response => {
if (response.code === 200) {
this.userData = response.data.list
}
})
},
// 刷新拓扑图
visNetworkReload () {
this.$refs.facade.$refs.visNetwork.reload()
@@ -617,7 +610,6 @@ export default {
if (pageSize) {
this.endpointPageObj.pageSize = pageSize
}
this.getUserData()
},
mounted () {
// 初始化表头

View File

@@ -23,9 +23,10 @@
v-loading="slotProps.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:height="projectTableHeight"
:table-data="tableData"
:tableId="tableId"
style="padding-right: 0"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@@ -35,7 +36,8 @@
</template>
<template v-slot:pagination>
<div class="project-page">
<Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
<Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" style="width: calc(100% - 15px);padding-bottom: 6px;" @pageNo='pageNo'
@pageSize='pageSize'></Pagination>
</div>
</template>
</nz-data-list>
@@ -68,6 +70,7 @@ export default {
name: '',
remark: ''
},
projectTableHeight: 'calc(100% - 58px)',
tableId: 'projectTable',
queryPermission: 'account_view',
searchMsg: { // 给搜索框子组件传递的信息
@@ -140,8 +143,8 @@ export default {
<style lang="scss">
.project-list{
.project-page{
margin: 0 10px 0 20px;
border: 1px solid #eeeeee;
margin: 0 0 0 20px;
border: 1px solid $--right-box-border-color;
border-top: none;
/deep/ .pagination{
padding-top: 0;