mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-11 18:42:54 +00:00
feat: 优化表格分页样式
This commit is contained in:
kuaifan
parent
39cd9f4a44
commit
885437de8d
@ -30,17 +30,26 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
|
||||
<Page
|
||||
class="page-container"
|
||||
:total="total"
|
||||
:current="page"
|
||||
:pageSize="pageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
showTotal
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
<div class="table-page-box">
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
:loading="loadIng > 0"
|
||||
:no-data-text="$L(noText)"
|
||||
stripe/>
|
||||
<Page
|
||||
:total="total"
|
||||
:current="page"
|
||||
:page-size="pageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
:page-size-opts="[10,20,30,50,100]"
|
||||
show-elevator
|
||||
show-sizer
|
||||
show-total
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -74,10 +83,19 @@ export default {
|
||||
initLanguage() {
|
||||
this.columns = [
|
||||
{
|
||||
title: this.$L('ID'),
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
minWidth: 50,
|
||||
maxWidth: 70,
|
||||
width: 80,
|
||||
render: (h, {row, column}) => {
|
||||
return h('TableAction', {
|
||||
props: {
|
||||
column: column,
|
||||
align: 'left'
|
||||
}
|
||||
}, [
|
||||
h("div", row.id),
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$L('项目名称'),
|
||||
@ -127,51 +145,50 @@ export default {
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (h, params) => {
|
||||
const recoveryNode = h('Poptip', {
|
||||
props: {
|
||||
title: this.$L('你确定要还原归档吗？'),
|
||||
confirm: true,
|
||||
transfer: true,
|
||||
placement: 'left',
|
||||
},
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer',
|
||||
color: '#8bcf70',
|
||||
},
|
||||
on: {
|
||||
'on-ok': () => {
|
||||
this.recovery(params.row);
|
||||
}
|
||||
},
|
||||
}, this.$L('还原'));
|
||||
const deleteNode = h('Poptip', {
|
||||
props: {
|
||||
title: this.$L('你确定要删除项目吗？'),
|
||||
confirm: true,
|
||||
transfer: true,
|
||||
placement: 'left',
|
||||
},
|
||||
style: {
|
||||
marginLeft: '6px',
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer',
|
||||
color: '#f00',
|
||||
},
|
||||
on: {
|
||||
'on-ok': () => {
|
||||
this.delete(params.row);
|
||||
}
|
||||
},
|
||||
}, this.$L('删除'));
|
||||
const vNode = [
|
||||
h('Poptip', {
|
||||
props: {
|
||||
title: this.$L('你确定要还原归档吗？'),
|
||||
confirm: true,
|
||||
transfer: true,
|
||||
placement: 'left',
|
||||
},
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer',
|
||||
color: '#8bcf70',
|
||||
},
|
||||
on: {
|
||||
'on-ok': () => {
|
||||
this.recovery(params.row);
|
||||
}
|
||||
},
|
||||
}, this.$L('还原')),
|
||||
h('Poptip', {
|
||||
props: {
|
||||
title: this.$L('你确定要删除项目吗？'),
|
||||
confirm: true,
|
||||
transfer: true,
|
||||
placement: 'left',
|
||||
},
|
||||
style: {
|
||||
marginLeft: '8px',
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer',
|
||||
color: '#f00',
|
||||
},
|
||||
on: {
|
||||
'on-ok': () => {
|
||||
this.delete(params.row);
|
||||
}
|
||||
},
|
||||
}, this.$L('删除'))
|
||||
];
|
||||
return h('TableAction', {
|
||||
props: {
|
||||
column: params.column
|
||||
}
|
||||
}, [
|
||||
recoveryNode,
|
||||
deleteNode,
|
||||
]);
|
||||
}, vNode);
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
@ -42,17 +42,26 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
|
||||
<Page
|
||||
class="page-container"
|
||||
:total="total"
|
||||
:current="page"
|
||||
:pageSize="pageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
showTotal
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
<div class="table-page-box">
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
:loading="loadIng > 0"
|
||||
:no-data-text="$L(noText)"
|
||||
stripe/>
|
||||
<Page
|
||||
:total="total"
|
||||
:current="page"
|
||||
:page-size="pageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
:page-size-opts="[10,20,30,50,100]"
|
||||
show-elevator
|
||||
show-sizer
|
||||
show-total
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -86,10 +95,19 @@ export default {
|
||||
initLanguage() {
|
||||
this.columns = [
|
||||
{
|
||||
title: this.$L('ID'),
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
minWidth: 50,
|
||||
maxWidth: 70,
|
||||
width: 80,
|
||||
render: (h, {row, column}) => {
|
||||
return h('TableAction', {
|
||||
props: {
|
||||
column: column,
|
||||
align: 'left'
|
||||
}
|
||||
}, [
|
||||
h("div", row.id),
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$L('项目名称'),
|
||||
|
||||
@ -46,30 +46,32 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
class="tableFill report-row-content"
|
||||
ref="tableRef"
|
||||
:columns="columns" :data="lists"
|
||||
:loading="loadIng > 0"
|
||||
:no-data-text="$L(noDataText)"
|
||||
stripe/>
|
||||
<Page
|
||||
class="page-box report-row-foot"
|
||||
:total="listTotal"
|
||||
:current="listPage"
|
||||
:disabled="loadIng > 0"
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"
|
||||
:page-size-opts="[10,20,30,50,100]"
|
||||
placement="top"
|
||||
show-elevator
|
||||
show-sizer
|
||||
show-total
|
||||
transfer/>
|
||||
<div class="table-page-box">
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="lists"
|
||||
:loading="loadIng > 0"
|
||||
:no-data-text="$L(noDataText)"
|
||||
stripe/>
|
||||
<Page
|
||||
:total="listTotal"
|
||||
:current="listPage"
|
||||
:page-size="listPageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
:page-size-opts="[10,20,30,50,100]"
|
||||
show-elevator
|
||||
show-sizer
|
||||
show-total
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "ReportMy",
|
||||
data() {
|
||||
@ -79,8 +81,9 @@ export default {
|
||||
lists: [],
|
||||
listPage: 1,
|
||||
listTotal: 0,
|
||||
listPageSize: 10,
|
||||
listPageSize: 20,
|
||||
noDataText: "",
|
||||
|
||||
createAt: [],
|
||||
reportType: '',
|
||||
reportTypeList: [],
|
||||
@ -89,6 +92,9 @@ export default {
|
||||
mounted() {
|
||||
this.getLists();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['windowMax768'])
|
||||
},
|
||||
methods: {
|
||||
initLanguage() {
|
||||
this.noDataText = this.noDataText || "数据加载中.....";
|
||||
@ -102,13 +108,13 @@ export default {
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
maxWidth: 80,
|
||||
width: 80,
|
||||
}, {
|
||||
title: this.$L("汇报时间"),
|
||||
key: 'created_at',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
maxWidth: 180,
|
||||
width: 180,
|
||||
}, {
|
||||
title: this.$L("操作"),
|
||||
align: 'center',
|
||||
@ -118,36 +124,27 @@ export default {
|
||||
if (!row.id) {
|
||||
return null;
|
||||
}
|
||||
const vNodes = [
|
||||
h('ETooltip', {
|
||||
props: {content: this.$L('编辑'), transfer: true, delay: 600}
|
||||
}, [h('Icon', {
|
||||
props: {type: 'md-create', size: 16},
|
||||
style: {margin: '0 3px', cursor: 'pointer'},
|
||||
on: {
|
||||
click: () => {
|
||||
this.$emit("on-edit", row.id);
|
||||
}
|
||||
}
|
||||
})]),
|
||||
h('ETooltip', {
|
||||
props: {content: this.$L('查看'), transfer: true, delay: 600},
|
||||
style: {position: 'relative', marginLeft: '6px'},
|
||||
}, [h('Icon', {
|
||||
props: {type: 'md-eye', size: 16},
|
||||
style: {margin: '0 3px', cursor: 'pointer'},
|
||||
on: {
|
||||
click: () => {
|
||||
this.$emit("on-view", row);
|
||||
}
|
||||
}
|
||||
})]),
|
||||
];
|
||||
return h('TableAction', {
|
||||
props: {
|
||||
column
|
||||
column,
|
||||
menu: [
|
||||
{
|
||||
icon: "md-create",
|
||||
action: "edit",
|
||||
},
|
||||
{
|
||||
icon: "md-eye",
|
||||
action: "view",
|
||||
}
|
||||
]
|
||||
},
|
||||
on: {
|
||||
action: (name) => {
|
||||
if (name === 'edit') this.$emit("on-edit", row.id);
|
||||
if (name === 'view') this.$emit("on-view", row);
|
||||
}
|
||||
}
|
||||
}, vNodes);
|
||||
});
|
||||
},
|
||||
}];
|
||||
this.reportTypeList = [
|
||||
|
||||
@ -49,26 +49,26 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
class="tableFill report-row-content"
|
||||
ref="tableRef"
|
||||
:columns="columns" :data="lists"
|
||||
:loading="loadIng > 0"
|
||||
:no-data-text="$L(noDataText)"
|
||||
stripe/>
|
||||
<Page
|
||||
class="page-box report-row-foot"
|
||||
:total="listTotal"
|
||||
:current="listPage"
|
||||
:disabled="loadIng > 0"
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"
|
||||
:page-size-opts="[10,20,30,50,100]"
|
||||
placement="top"
|
||||
show-elevator
|
||||
show-sizer
|
||||
show-total
|
||||
transfer/>
|
||||
<div class="table-page-box">
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="lists"
|
||||
:loading="loadIng > 0"
|
||||
:no-data-text="$L(noDataText)"
|
||||
stripe/>
|
||||
<Page
|
||||
:total="listTotal"
|
||||
:current="listPage"
|
||||
:page-size="listPageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
:page-size-opts="[10,20,30,50,100]"
|
||||
show-elevator
|
||||
show-sizer
|
||||
show-total
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -84,7 +84,7 @@ export default {
|
||||
lists: [],
|
||||
listPage: 1,
|
||||
listTotal: 0,
|
||||
listPageSize: 10,
|
||||
listPageSize: 20,
|
||||
noDataText: "",
|
||||
|
||||
username: '',
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
this.getLists();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userId'])
|
||||
...mapState(['userId', 'windowMax768'])
|
||||
},
|
||||
methods: {
|
||||
initLanguage() {
|
||||
@ -124,7 +124,6 @@ export default {
|
||||
h('span', row.title)
|
||||
)
|
||||
}
|
||||
|
||||
return h('div', arr)
|
||||
}
|
||||
}, {
|
||||
@ -132,31 +131,35 @@ export default {
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
maxWidth: 80,
|
||||
width: 80,
|
||||
}, {
|
||||
title: this.$L("接收时间"),
|
||||
key: 'receive_time',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
maxWidth: 180,
|
||||
width: 180,
|
||||
}, {
|
||||
title: this.$L("操作"),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
minWidth: 100,
|
||||
width: 90,
|
||||
minWidth: 90,
|
||||
render: (h, {column, row}) => {
|
||||
if (!row.id) {
|
||||
return null;
|
||||
}
|
||||
const vNodes = [
|
||||
h('ETooltip', {
|
||||
props: {content: this.$L('查看'), transfer: true, delay: 600},
|
||||
style: {position: 'relative'},
|
||||
}, [h('Icon', {
|
||||
props: {type: 'md-eye', size: 16},
|
||||
style: {margin: '0 3px', cursor: 'pointer'},
|
||||
on: {
|
||||
click: () => {
|
||||
return h('TableAction', {
|
||||
props: {
|
||||
column,
|
||||
menu: [
|
||||
{
|
||||
icon: "md-eye",
|
||||
action: "view",
|
||||
}
|
||||
]
|
||||
},
|
||||
on: {
|
||||
action: (name) => {
|
||||
if (name === 'view') {
|
||||
this.$emit("on-view", row)
|
||||
const myUser = row.receives_user.find(({userid}) => userid == this.userId)
|
||||
if (myUser) {
|
||||
@ -164,13 +167,8 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
})])
|
||||
];
|
||||
return h('TableAction', {
|
||||
props: {
|
||||
column: column
|
||||
}
|
||||
}, vNodes);
|
||||
});
|
||||
},
|
||||
}];
|
||||
this.reportTypeList = [
|
||||
|
||||
@ -30,17 +30,26 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Table :columns="columns" :data="list" :loading="loadIng > 0" :no-data-text="$L(noText)"></Table>
|
||||
<Page
|
||||
class="page-container"
|
||||
:total="total"
|
||||
:current="page"
|
||||
:pageSize="pageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
showTotal
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
<div class="table-page-box">
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
:loading="loadIng > 0"
|
||||
:no-data-text="$L(noText)"
|
||||
stripe/>
|
||||
<Page
|
||||
:total="total"
|
||||
:current="page"
|
||||
:page-size="pageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
:page-size-opts="[10,20,30,50,100]"
|
||||
show-elevator
|
||||
show-sizer
|
||||
show-total
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -88,10 +97,19 @@ export default {
|
||||
initLanguage() {
|
||||
this.columns = [
|
||||
{
|
||||
title: this.$L('ID'),
|
||||
minWidth: 50,
|
||||
maxWidth: 70,
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
render: (h, {row, column}) => {
|
||||
return h('TableAction', {
|
||||
props: {
|
||||
column: column,
|
||||
align: 'left'
|
||||
}
|
||||
}, [
|
||||
h("div", row.id),
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$L('任务名称'),
|
||||
|
||||
@ -60,17 +60,26 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table>
|
||||
<Page
|
||||
class="page-container"
|
||||
:total="total"
|
||||
:current="page"
|
||||
:pageSize="pageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
showTotal
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
<div class="table-page-box">
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
:loading="loadIng > 0"
|
||||
:no-data-text="$L(noText)"
|
||||
stripe/>
|
||||
<Page
|
||||
:total="total"
|
||||
:current="page"
|
||||
:page-size="pageSize"
|
||||
:disabled="loadIng > 0"
|
||||
:simple="windowMax768"
|
||||
:page-size-opts="[10,20,30,50,100]"
|
||||
show-elevator
|
||||
show-sizer
|
||||
show-total
|
||||
@on-change="setPage"
|
||||
@on-page-size-change="setPageSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -104,10 +113,19 @@ export default {
|
||||
initLanguage() {
|
||||
this.columns = [
|
||||
{
|
||||
title: this.$L('ID'),
|
||||
minWidth: 50,
|
||||
maxWidth: 70,
|
||||
title: 'ID',
|
||||
key: 'userid',
|
||||
width: 80,
|
||||
render: (h, {row, column}) => {
|
||||
return h('TableAction', {
|
||||
props: {
|
||||
column: column,
|
||||
align: 'left'
|
||||
}
|
||||
}, [
|
||||
h("div", row.userid),
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$L('邮箱'),
|
||||
|
||||
36
resources/assets/sass/components/report.scss
vendored
36
resources/assets/sass/components/report.scss
vendored
@ -1,44 +1,28 @@
|
||||
.report {
|
||||
height: 100%;
|
||||
padding: 10px 20px;
|
||||
padding: 20px;
|
||||
|
||||
.report-list-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
top: 0;
|
||||
padding-top: 53px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
|
||||
.report-row-foot {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.report-row-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
|
||||
.ivu-table {
|
||||
.ivu-table-body {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
.table-page-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.manage-box-report{
|
||||
|
||||
.manage-box-report {
|
||||
margin-left: 4px;
|
||||
transform: scale(0.8);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.page-box {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.ivu-tabs {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
@ -172,6 +156,7 @@
|
||||
.ivu-form-item-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.teditor-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -248,6 +233,7 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.report-buttongroup {
|
||||
margin-left: 20px;
|
||||
background: #F4F5F7 !important;
|
||||
|
||||
150
resources/assets/sass/pages/common.scss
vendored
150
resources/assets/sass/pages/common.scss
vendored
@ -1,24 +1,30 @@
|
||||
body {
|
||||
overflow: hidden;
|
||||
|
||||
.form-tip {
|
||||
color: #999999;
|
||||
line-height: 22px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.ivu-input,
|
||||
.ivu-select-selection {
|
||||
border-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.ivu-select-dropdown {
|
||||
max-height: 360px;
|
||||
|
||||
&.select-node {
|
||||
.ivu-select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.option-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ivu-tag {
|
||||
flex-shrink: 0;
|
||||
margin-left: 18px;
|
||||
@ -28,23 +34,28 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ivu-date-picker-transfer {
|
||||
max-width: 98%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-tooltip-popper {
|
||||
.ivu-tooltip-inner {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-table {
|
||||
table {
|
||||
width: 100% !important;
|
||||
|
||||
.ivu-table-cell {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
thead {
|
||||
.ivu-table-cell {
|
||||
display: block;
|
||||
@ -53,11 +64,13 @@ body {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
.tree-icon-loading {
|
||||
.ivu-table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ivu-table-cell-tree {
|
||||
margin-right: 6px;
|
||||
}
|
||||
@ -65,10 +78,12 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.td-ellipsis {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
|
||||
.remark-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -78,11 +93,13 @@ body {
|
||||
line-height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.remark-icon {
|
||||
display: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.remark-tag {
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
@ -98,6 +115,7 @@ body {
|
||||
padding: 0 4px;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
|
||||
&.pointer-tag {
|
||||
cursor: pointer;
|
||||
color: #1890ff;
|
||||
@ -105,6 +123,7 @@ body {
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-tooltip {
|
||||
.ivu-tooltip-rel {
|
||||
display: flex;
|
||||
@ -112,27 +131,34 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.td-action {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.td-action-container {
|
||||
flex-shrink: 0;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&.td-action-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-dropdown {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
font-size: 21px;
|
||||
padding: 0 6px;
|
||||
|
||||
&.ivu-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -140,6 +166,7 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-table-row-hover {
|
||||
&:hover {
|
||||
.td-ellipsis {
|
||||
@ -149,12 +176,15 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-wrap {
|
||||
overflow: overlay;
|
||||
|
||||
.ivu-modal {
|
||||
top: 100px;
|
||||
padding-bottom: 100px;
|
||||
@ -162,56 +192,71 @@ body {
|
||||
top: 35px;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
|
||||
&.ivu-modal-fullscreen {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ivu-modal-header,
|
||||
.ivu-modal-footer {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.ivu-modal-header {
|
||||
padding: 22px 24px 20px;
|
||||
|
||||
.ivu-modal-header-inner {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-body {
|
||||
padding: 16px 32px 2px;
|
||||
}
|
||||
|
||||
.ivu-modal-footer {
|
||||
padding: 20px 30px 22px;
|
||||
|
||||
.ivu-btn {
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
min-width: 94px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.adaption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .ivu-btn {
|
||||
padding: 0;
|
||||
|
||||
> span {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-btn {
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.ivu-btn,
|
||||
.ivu-btn-group,
|
||||
.ivu-poptip {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ivu-btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ivu-poptip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ivu-poptip-rel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -221,8 +266,10 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-content {
|
||||
border-radius: 18px;
|
||||
|
||||
.ivu-modal-close {
|
||||
.ivu-icon-ios-close {
|
||||
font-size: 38px;
|
||||
@ -230,6 +277,7 @@ body {
|
||||
right: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ivu-icon-ios-close {
|
||||
transform: rotate(-90deg);
|
||||
@ -238,29 +286,36 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-confirm {
|
||||
padding: 6px 0 20px;
|
||||
|
||||
.ivu-modal-confirm-body {
|
||||
> div {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-network-add-tabs {
|
||||
.ivu-tabs-tabpane {
|
||||
padding: 10px 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-network-add-in-out {
|
||||
padding: 0 6px;
|
||||
|
||||
.select-in-type {
|
||||
span.ivu-radio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-in-type-item-checked {
|
||||
color: $primary-color;
|
||||
border: 1px solid $primary-color !important;
|
||||
}
|
||||
|
||||
.select-in-type-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -269,34 +324,42 @@ body {
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
margin: 0 8px 0 0;
|
||||
|
||||
> span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-in-type-icon {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-in-node {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ivu-progress-outer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.ivu-progress-show-info {
|
||||
.ivu-progress-outer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ivu-progress-text {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
@ -305,13 +368,16 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-drawer-right {
|
||||
.ivu-drawer-content {
|
||||
border-radius: 18px 0 0 18px;
|
||||
|
||||
.ivu-drawer-header {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
.ivu-drawer-header-inner {
|
||||
font-size: 18px;
|
||||
padding: 0 4px;
|
||||
@ -319,16 +385,20 @@ body {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-drawer-body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-drawer-bottom {
|
||||
.ivu-drawer-content {
|
||||
border-radius: 18px 18px 0 0;
|
||||
|
||||
.ivu-drawer-close {
|
||||
top: -40px;
|
||||
|
||||
.ivu-icon {
|
||||
font-size: 40px;
|
||||
color: #ffffff;
|
||||
@ -350,11 +420,72 @@ body {
|
||||
display: table;
|
||||
content: ""
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both
|
||||
}
|
||||
}
|
||||
|
||||
.table-page-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ivu-table-wrapper {
|
||||
flex: 1;
|
||||
|
||||
.ivu-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ivu-table-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ivu-table-body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
overflow-y: overlay !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb:hover {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-page {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
text-align: center;
|
||||
@ -363,10 +494,12 @@ body {
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 12px;
|
||||
|
||||
> ul {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> li {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
@ -375,26 +508,32 @@ body {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-content {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
&.search-button {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
> button + button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.lr {
|
||||
> ul {
|
||||
> li:not(.search-button) {
|
||||
@ -402,12 +541,15 @@ body {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 18px;
|
||||
|
||||
.search-label {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-content {
|
||||
margin-top: 0;
|
||||
margin-left: 6px;
|
||||
|
||||
.ivu-input-wrapper,
|
||||
.ivu-select {
|
||||
width: 168px;
|
||||
@ -417,13 +559,16 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.auto {
|
||||
> ul {
|
||||
> li:not(.search-button) {
|
||||
flex: none;
|
||||
|
||||
.search-content {
|
||||
margin-top: 0;
|
||||
margin-left: 6px;
|
||||
|
||||
.ivu-input-wrapper,
|
||||
.ivu-select {
|
||||
width: 150px;
|
||||
@ -434,23 +579,28 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-expand {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.search-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.expand-button-group {
|
||||
flex-shrink: 0;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-button-clear {
|
||||
.ivu-tooltip-inner {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ivu-btn {
|
||||
min-width: 80px;
|
||||
font-size: 13px;
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.archived-title {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
@ -14,6 +16,7 @@
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -21,9 +24,15 @@
|
||||
height: 14px;
|
||||
margin-left: 4px;
|
||||
margin-top: 2px;
|
||||
|
||||
> i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-page-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.management-title {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
@ -14,6 +16,7 @@
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -21,14 +24,17 @@
|
||||
height: 14px;
|
||||
margin-left: 4px;
|
||||
margin-top: 2px;
|
||||
|
||||
> i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ivu-tag {
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
@ -41,10 +47,17 @@
|
||||
white-space: nowrap
|
||||
}
|
||||
}
|
||||
|
||||
.project-percent {
|
||||
line-height: 1;
|
||||
|
||||
.ivu-progress {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-page-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.archived-title {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
@ -14,6 +16,7 @@
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -21,9 +24,15 @@
|
||||
height: 14px;
|
||||
margin-left: 4px;
|
||||
margin-top: 2px;
|
||||
|
||||
> i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-page-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.management-title {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
@ -14,6 +16,7 @@
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -21,14 +24,17 @@
|
||||
height: 14px;
|
||||
margin-left: 4px;
|
||||
margin-top: 2px;
|
||||
|
||||
> i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-email {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ivu-tag {
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
@ -41,4 +47,9 @@
|
||||
white-space: nowrap
|
||||
}
|
||||
}
|
||||
|
||||
.table-page-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user