github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 11:19:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化表格分页样式

Browse Source
This commit is contained in:
kuaifan 2022-03-08 16:05:25 +08:00
parent 39cd9f4a44
commit 885437de8d
12 changed files with 462 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
resources/assets/js/pages/manage/components/ProjectArchived.vue
View File

@ -30,18 +30,27 @@
</li> </li>
</ul> </ul>
</div> </div>
<Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table> <div class="table-page-box">
<Table
:columns="columns"
:data="list"
:loading="loadIng > 0"
:no-data-text="$L(noText)"
stripe/>
<Page <Page
class="page-container"
:total="total" :total="total"
:current="page" :current="page"
:pageSize="pageSize" :page-size="pageSize"
:disabled="loadIng > 0" :disabled="loadIng > 0"
:simple="windowMax768" :simple="windowMax768"
showTotal :page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer
show-total
@on-change="setPage" @on-change="setPage"
@on-page-size-change="setPageSize"/> @on-page-size-change="setPageSize"/>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -74,10 +83,19 @@ export default {
initLanguage() { initLanguage() {
this.columns = [ this.columns = [
{ {
title: this.$L('ID'), title: 'ID',
key: 'id', key: 'id',
minWidth: 50, width: 80,
maxWidth: 70, render: (h, {row, column}) => {
return h('TableAction', {
props: {
column: column,
align: 'left'
}
}, [
h("div", row.id),
]);
}
}, },
{ {
title: this.$L('项目名称'), title: this.$L('项目名称'),
@ -127,7 +145,8 @@ export default {
align: 'center', align: 'center',
width: 100, width: 100,
render: (h, params) => { render: (h, params) => {
const recoveryNode = h('Poptip', { const vNode = [
h('Poptip', {
props: { props: {
title: this.$L('你确定要还原归档吗？'), title: this.$L('你确定要还原归档吗？'),
confirm: true, confirm: true,
@ -144,8 +163,8 @@ export default {
this.recovery(params.row); this.recovery(params.row);
} }
}, },
}, this.$L('还原')); }, this.$L('还原')),
const deleteNode = h('Poptip', { h('Poptip', {
props: { props: {
title: this.$L('你确定要删除项目吗？'), title: this.$L('你确定要删除项目吗？'),
confirm: true, confirm: true,
@ -153,7 +172,7 @@ export default {
placement: 'left', placement: 'left',
}, },
style: { style: {
marginLeft: '6px', marginLeft: '8px',
fontSize: '13px', fontSize: '13px',
cursor: 'pointer', cursor: 'pointer',
color: '#f00', color: '#f00',
@ -163,15 +182,13 @@ export default {
this.delete(params.row); this.delete(params.row);
} }
}, },
}, this.$L('删除')); }, this.$L('删除'))
];
return h('TableAction', { return h('TableAction', {
props: { props: {
column: params.column column: params.column
} }
}, [ }, vNode);
recoveryNode,
deleteNode,
]);
}, },
} }
] ]

32
resources/assets/js/pages/manage/components/ProjectManagement.vue
View File

@ -42,18 +42,27 @@
</li> </li>
</ul> </ul>
</div> </div>
<Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table> <div class="table-page-box">
<Table
:columns="columns"
:data="list"
:loading="loadIng > 0"
:no-data-text="$L(noText)"
stripe/>
<Page <Page
class="page-container"
:total="total" :total="total"
:current="page" :current="page"
:pageSize="pageSize" :page-size="pageSize"
:disabled="loadIng > 0" :disabled="loadIng > 0"
:simple="windowMax768" :simple="windowMax768"
showTotal :page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer
show-total
@on-change="setPage" @on-change="setPage"
@on-page-size-change="setPageSize"/> @on-page-size-change="setPageSize"/>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -86,10 +95,19 @@ export default {
initLanguage() { initLanguage() {
this.columns = [ this.columns = [
{ {
title: this.$L('ID'), title: 'ID',
key: 'id', key: 'id',
minWidth: 50, width: 80,
maxWidth: 70, render: (h, {row, column}) => {
return h('TableAction', {
props: {
column: column,
align: 'left'
}
}, [
h("div", row.id),
]);
}
}, },
{ {
title: this.$L('项目名称'), title: this.$L('项目名称'),

73
resources/assets/js/pages/manage/components/ReportMy.vue
View File

@ -46,30 +46,32 @@
</div> </div>
</div> </div>
<div class="table-page-box">
<Table <Table
class="tableFill report-row-content" :columns="columns"
ref="tableRef" :data="lists"
:columns="columns" :data="lists"
:loading="loadIng > 0" :loading="loadIng > 0"
:no-data-text="$L(noDataText)" :no-data-text="$L(noDataText)"
stripe/> stripe/>
<Page <Page
class="page-box report-row-foot"
:total="listTotal" :total="listTotal"
:current="listPage" :current="listPage"
:page-size="listPageSize"
:disabled="loadIng > 0" :disabled="loadIng > 0"
@on-change="setPage" :simple="windowMax768"
@on-page-size-change="setPageSize"
:page-size-opts="[10,20,30,50,100]" :page-size-opts="[10,20,30,50,100]"
placement="top"
show-elevator show-elevator
show-sizer show-sizer
show-total show-total
transfer/> @on-change="setPage"
@on-page-size-change="setPageSize"/>
</div>
</div> </div>
</template> </template>
<script> <script>
import {mapState} from "vuex";
export default { export default {
name: "ReportMy", name: "ReportMy",
data() { data() {
@ -79,8 +81,9 @@ export default {
lists: [], lists: [],
listPage: 1, listPage: 1,
listTotal: 0, listTotal: 0,
listPageSize: 10, listPageSize: 20,
noDataText: "", noDataText: "",
createAt: [], createAt: [],
reportType: '', reportType: '',
reportTypeList: [], reportTypeList: [],
@ -89,6 +92,9 @@ export default {
mounted() { mounted() {
this.getLists(); this.getLists();
}, },
computed: {
...mapState(['windowMax768'])
},
methods: { methods: {
initLanguage() { initLanguage() {
this.noDataText = this.noDataText || "数据加载中....."; this.noDataText = this.noDataText || "数据加载中.....";
@ -102,13 +108,13 @@ export default {
key: 'type', key: 'type',
align: 'center', align: 'center',
sortable: true, sortable: true,
maxWidth: 80, width: 80,
}, { }, {
title: this.$L("汇报时间"), title: this.$L("汇报时间"),
key: 'created_at', key: 'created_at',
align: 'center', align: 'center',
sortable: true, sortable: true,
maxWidth: 180, width: 180,
}, { }, {
title: this.$L("操作"), title: this.$L("操作"),
align: 'center', align: 'center',
@ -118,36 +124,27 @@ export default {
if (!row.id) { if (!row.id) {
return null; 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', { return h('TableAction', {
props: { props: {
column column,
menu: [
{
icon: "md-create",
action: "edit",
},
{
icon: "md-eye",
action: "view",
} }
}, vNodes); ]
},
on: {
action: (name) => {
if (name === 'edit') this.$emit("on-edit", row.id);
if (name === 'view') this.$emit("on-view", row);
}
}
});
}, },
}]; }];
this.reportTypeList = [ this.reportTypeList = [

56
resources/assets/js/pages/manage/components/ReportReceive.vue
View File

@ -49,26 +49,26 @@
</ul> </ul>
</div> </div>
<div class="table-page-box">
<Table <Table
class="tableFill report-row-content" :columns="columns"
ref="tableRef" :data="lists"
:columns="columns" :data="lists"
:loading="loadIng > 0" :loading="loadIng > 0"
:no-data-text="$L(noDataText)" :no-data-text="$L(noDataText)"
stripe/> stripe/>
<Page <Page
class="page-box report-row-foot"
:total="listTotal" :total="listTotal"
:current="listPage" :current="listPage"
:page-size="listPageSize"
:disabled="loadIng > 0" :disabled="loadIng > 0"
@on-change="setPage" :simple="windowMax768"
@on-page-size-change="setPageSize"
:page-size-opts="[10,20,30,50,100]" :page-size-opts="[10,20,30,50,100]"
placement="top"
show-elevator show-elevator
show-sizer show-sizer
show-total show-total
transfer/> @on-change="setPage"
@on-page-size-change="setPageSize"/>
</div>
</div> </div>
</template> </template>
@ -84,7 +84,7 @@ export default {
lists: [], lists: [],
listPage: 1, listPage: 1,
listTotal: 0, listTotal: 0,
listPageSize: 10, listPageSize: 20,
noDataText: "", noDataText: "",
username: '', username: '',
@ -97,7 +97,7 @@ export default {
this.getLists(); this.getLists();
}, },
computed: { computed: {
...mapState(['userId']) ...mapState(['userId', 'windowMax768'])
}, },
methods: { methods: {
initLanguage() { initLanguage() {
@ -124,7 +124,6 @@ export default {
h('span', row.title) h('span', row.title)
) )
} }
return h('div', arr) return h('div', arr)
} }
}, { }, {
@ -132,31 +131,35 @@ export default {
key: 'type', key: 'type',
align: 'center', align: 'center',
sortable: true, sortable: true,
maxWidth: 80, width: 80,
}, { }, {
title: this.$L("接收时间"), title: this.$L("接收时间"),
key: 'receive_time', key: 'receive_time',
align: 'center', align: 'center',
sortable: true, sortable: true,
maxWidth: 180, width: 180,
}, { }, {
title: this.$L("操作"), title: this.$L("操作"),
align: 'center', align: 'center',
width: 100, width: 90,
minWidth: 100, minWidth: 90,
render: (h, {column, row}) => { render: (h, {column, row}) => {
if (!row.id) { if (!row.id) {
return null; return null;
} }
const vNodes = [ return h('TableAction', {
h('ETooltip', { props: {
props: {content: this.$L('查看'), transfer: true, delay: 600}, column,
style: {position: 'relative'}, menu: [
}, [h('Icon', { {
props: {type: 'md-eye', size: 16}, icon: "md-eye",
style: {margin: '0 3px', cursor: 'pointer'}, action: "view",
}
]
},
on: { on: {
click: () => { action: (name) => {
if (name === 'view') {
this.$emit("on-view", row) this.$emit("on-view", row)
const myUser = row.receives_user.find(({userid}) => userid == this.userId) const myUser = row.receives_user.find(({userid}) => userid == this.userId)
if (myUser) { if (myUser) {
@ -164,13 +167,8 @@ export default {
} }
} }
} }
})])
];
return h('TableAction', {
props: {
column: column
} }
}, vNodes); });
}, },
}]; }];
this.reportTypeList = [ this.reportTypeList = [

32
resources/assets/js/pages/manage/components/TaskArchived.vue
View File

@ -30,18 +30,27 @@
</li> </li>
</ul> </ul>
</div> </div>
<Table :columns="columns" :data="list" :loading="loadIng > 0" :no-data-text="$L(noText)"></Table> <div class="table-page-box">
<Table
:columns="columns"
:data="list"
:loading="loadIng > 0"
:no-data-text="$L(noText)"
stripe/>
<Page <Page
class="page-container"
:total="total" :total="total"
:current="page" :current="page"
:pageSize="pageSize" :page-size="pageSize"
:disabled="loadIng > 0" :disabled="loadIng > 0"
:simple="windowMax768" :simple="windowMax768"
showTotal :page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer
show-total
@on-change="setPage" @on-change="setPage"
@on-page-size-change="setPageSize"/> @on-page-size-change="setPageSize"/>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -88,10 +97,19 @@ export default {
initLanguage() { initLanguage() {
this.columns = [ this.columns = [
{ {
title: this.$L('ID'), title: 'ID',
minWidth: 50,
maxWidth: 70,
key: 'id', key: 'id',
width: 80,
render: (h, {row, column}) => {
return h('TableAction', {
props: {
column: column,
align: 'left'
}
}, [
h("div", row.id),
]);
}
}, },
{ {
title: this.$L('任务名称'), title: this.$L('任务名称'),

32
resources/assets/js/pages/manage/components/TeamManagement.vue
View File

@ -60,18 +60,27 @@
</li> </li>
</ul> </ul>
</div> </div>
<Table :columns="columns" :data="list" :no-data-text="$L(noText)"></Table> <div class="table-page-box">
<Table
:columns="columns"
:data="list"
:loading="loadIng > 0"
:no-data-text="$L(noText)"
stripe/>
<Page <Page
class="page-container"
:total="total" :total="total"
:current="page" :current="page"
:pageSize="pageSize" :page-size="pageSize"
:disabled="loadIng > 0" :disabled="loadIng > 0"
:simple="windowMax768" :simple="windowMax768"
showTotal :page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer
show-total
@on-change="setPage" @on-change="setPage"
@on-page-size-change="setPageSize"/> @on-page-size-change="setPageSize"/>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -104,10 +113,19 @@ export default {
initLanguage() { initLanguage() {
this.columns = [ this.columns = [
{ {
title: this.$L('ID'), title: 'ID',
minWidth: 50,
maxWidth: 70,
key: 'userid', key: 'userid',
width: 80,
render: (h, {row, column}) => {
return h('TableAction', {
props: {
column: column,
align: 'left'
}
}, [
h("div", row.userid),
]);
}
}, },
{ {
title: this.$L('邮箱'), title: this.$L('邮箱'),

36
resources/assets/sass/components/report.scss vendored
View File

@ -1,44 +1,28 @@
.report { .report {
height: 100%; height: 100%;
padding: 10px 20px; padding: 20px;
.report-list-wrap { .report-list-wrap {
position: absolute;
top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
top: 0;
padding-top: 53px; padding-top: 53px;
display: flex;
flex-direction: column; flex-direction: column;
position: absolute;
.report-row-foot { .table-page-box {
flex: 0 0 auto; flex: 1;
height: 0;
}
} }
.report-row-content { .manage-box-report {
flex: 1 1 auto;
overflow-y: auto;
.ivu-table {
.ivu-table-body {
height: 100%;
overflow-y: auto;
padding-bottom: 50px;
}
}
}
}
.manage-box-report{
margin-left: 4px; margin-left: 4px;
transform: scale(0.8); transform: scale(0.8);
vertical-align: top; vertical-align: top;
} }
.page-box {
text-align: center;
margin-top: 15px;
}
.ivu-tabs { .ivu-tabs {
height: 100%; height: 100%;
position: relative; position: relative;
@ -172,6 +156,7 @@
.ivu-form-item-content { .ivu-form-item-content {
height: 100%; height: 100%;
display: flex; display: flex;
.teditor-wrapper { .teditor-wrapper {
flex: 1; flex: 1;
display: flex; display: flex;
@ -248,6 +233,7 @@
} }
} }
.report-buttongroup { .report-buttongroup {
margin-left: 20px; margin-left: 20px;
background: #F4F5F7 !important; background: #F4F5F7 !important;

150
resources/assets/sass/pages/common.scss vendored
View File

@ -1,24 +1,30 @@
body { body {
overflow: hidden; overflow: hidden;
.form-tip { .form-tip {
color: #999999; color: #999999;
line-height: 22px; line-height: 22px;
padding: 5px 0; padding: 5px 0;
} }
.ivu-input, .ivu-input,
.ivu-select-selection { .ivu-select-selection {
border-color: #e8e8e8; border-color: #e8e8e8;
} }
.ivu-select-dropdown { .ivu-select-dropdown {
max-height: 360px; max-height: 360px;
&.select-node { &.select-node {
.ivu-select-item { .ivu-select-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.option-title { .option-title {
flex: 1; flex: 1;
} }
.ivu-tag { .ivu-tag {
flex-shrink: 0; flex-shrink: 0;
margin-left: 18px; margin-left: 18px;
@ -28,23 +34,28 @@ body {
} }
} }
} }
&.ivu-date-picker-transfer { &.ivu-date-picker-transfer {
max-width: 98%; max-width: 98%;
overflow: auto; overflow: auto;
} }
} }
.ivu-tooltip-popper { .ivu-tooltip-popper {
.ivu-tooltip-inner { .ivu-tooltip-inner {
white-space: normal; white-space: normal;
} }
} }
.ivu-table { .ivu-table {
table { table {
width: 100% !important; width: 100% !important;
.ivu-table-cell { .ivu-table-cell {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
thead { thead {
.ivu-table-cell { .ivu-table-cell {
display: block; display: block;
@ -53,11 +64,13 @@ body {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
tbody { tbody {
.tree-icon-loading { .tree-icon-loading {
.ivu-table-cell { .ivu-table-cell {
display: flex; display: flex;
align-items: center; align-items: center;
.ivu-table-cell-tree { .ivu-table-cell-tree {
margin-right: 6px; margin-right: 6px;
} }
@ -65,10 +78,12 @@ body {
} }
} }
} }
.td-ellipsis { .td-ellipsis {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 100%; max-width: 100%;
.remark-text { .remark-text {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -78,11 +93,13 @@ body {
line-height: 20px; line-height: 20px;
margin-right: 6px; margin-right: 6px;
} }
.remark-icon { .remark-icon {
display: none; display: none;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
} }
.remark-tag { .remark-tag {
display: inline-block; display: inline-block;
height: 22px; height: 22px;
@ -98,6 +115,7 @@ body {
padding: 0 4px; padding: 0 4px;
white-space: nowrap; white-space: nowrap;
overflow: visible; overflow: visible;
&.pointer-tag { &.pointer-tag {
cursor: pointer; cursor: pointer;
color: #1890ff; color: #1890ff;
@ -105,6 +123,7 @@ body {
border-color: #91d5ff; border-color: #91d5ff;
} }
} }
.icon-tooltip { .icon-tooltip {
.ivu-tooltip-rel { .ivu-tooltip-rel {
display: flex; display: flex;
@ -112,27 +131,34 @@ body {
} }
} }
} }
.td-action { .td-action {
max-width: 100%; max-width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.td-action-container { .td-action-container {
flex-shrink: 0; flex-shrink: 0;
a { a {
font-size: 12px; font-size: 12px;
padding: 0 5px; padding: 0 5px;
} }
&.td-action-menu { &.td-action-menu {
display: flex; display: flex;
align-items: center; align-items: center;
.menu-dropdown { .menu-dropdown {
display: flex; display: flex;
} }
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
font-size: 21px; font-size: 21px;
padding: 0 6px; padding: 0 6px;
&.ivu-icon { &.ivu-icon {
font-size: 16px; font-size: 16px;
} }
@ -140,6 +166,7 @@ body {
} }
} }
} }
.ivu-table-row-hover { .ivu-table-row-hover {
&:hover { &:hover {
.td-ellipsis { .td-ellipsis {
@ -149,12 +176,15 @@ body {
} }
} }
} }
&:before { &:before {
background-color: #efefef; background-color: #efefef;
} }
} }
.ivu-modal-wrap { .ivu-modal-wrap {
overflow: overlay; overflow: overlay;
.ivu-modal { .ivu-modal {
top: 100px; top: 100px;
padding-bottom: 100px; padding-bottom: 100px;
@ -162,56 +192,71 @@ body {
top: 35px; top: 35px;
padding-bottom: 35px; padding-bottom: 35px;
} }
&.ivu-modal-fullscreen { &.ivu-modal-fullscreen {
top: 0; top: 0;
} }
.ivu-modal-header, .ivu-modal-header,
.ivu-modal-footer { .ivu-modal-footer {
border-color: transparent; border-color: transparent;
} }
.ivu-modal-header { .ivu-modal-header {
padding: 22px 24px 20px; padding: 22px 24px 20px;
.ivu-modal-header-inner { .ivu-modal-header-inner {
font-size: 18px; font-size: 18px;
} }
} }
.ivu-modal-body { .ivu-modal-body {
padding: 16px 32px 2px; padding: 16px 32px 2px;
} }
.ivu-modal-footer { .ivu-modal-footer {
padding: 20px 30px 22px; padding: 20px 30px 22px;
.ivu-btn { .ivu-btn {
height: 34px; height: 34px;
line-height: 32px; line-height: 32px;
min-width: 94px; min-width: 94px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.adaption { .adaption {
display: flex; display: flex;
align-items: center; align-items: center;
> .ivu-btn { > .ivu-btn {
padding: 0; padding: 0;
> span { > span {
padding: 0 15px; padding: 0 15px;
} }
} }
.ivu-btn { .ivu-btn {
height: 38px; height: 38px;
line-height: 36px; line-height: 36px;
min-width: auto; min-width: auto;
} }
.ivu-btn, .ivu-btn,
.ivu-btn-group, .ivu-btn-group,
.ivu-poptip { .ivu-poptip {
flex: 1; flex: 1;
} }
.ivu-btn-group { .ivu-btn-group {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.ivu-poptip { .ivu-poptip {
display: flex; display: flex;
align-items: center; align-items: center;
.ivu-poptip-rel { .ivu-poptip-rel {
flex: 1; flex: 1;
display: flex; display: flex;
@ -221,8 +266,10 @@ body {
} }
} }
} }
.ivu-modal-content { .ivu-modal-content {
border-radius: 18px; border-radius: 18px;
.ivu-modal-close { .ivu-modal-close {
.ivu-icon-ios-close { .ivu-icon-ios-close {
font-size: 38px; font-size: 38px;
@ -230,6 +277,7 @@ body {
right: 2px; right: 2px;
transition: all 0.2s; transition: all 0.2s;
} }
&:hover { &:hover {
.ivu-icon-ios-close { .ivu-icon-ios-close {
transform: rotate(-90deg); transform: rotate(-90deg);
@ -238,29 +286,36 @@ body {
} }
} }
} }
.ivu-modal-confirm { .ivu-modal-confirm {
padding: 6px 0 20px; padding: 6px 0 20px;
.ivu-modal-confirm-body { .ivu-modal-confirm-body {
> div { > div {
word-break: break-all; word-break: break-all;
} }
} }
} }
.form-network-add-tabs { .form-network-add-tabs {
.ivu-tabs-tabpane { .ivu-tabs-tabpane {
padding: 10px 6px 0; padding: 10px 6px 0;
} }
} }
.form-network-add-in-out { .form-network-add-in-out {
padding: 0 6px; padding: 0 6px;
.select-in-type { .select-in-type {
span.ivu-radio { span.ivu-radio {
display: none; display: none;
} }
.select-in-type-item-checked { .select-in-type-item-checked {
color: $primary-color; color: $primary-color;
border: 1px solid $primary-color !important; border: 1px solid $primary-color !important;
} }
.select-in-type-item { .select-in-type-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -269,34 +324,42 @@ body {
border-radius: 4px; border-radius: 4px;
padding: 0 12px; padding: 0 12px;
margin: 0 8px 0 0; margin: 0 8px 0 0;
> span { > span {
flex: 1; flex: 1;
} }
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
.select-in-type-icon { .select-in-type-icon {
margin-left: 12px; margin-left: 12px;
} }
} }
} }
.select-in-node { .select-in-node {
margin-top: 18px; margin-top: 18px;
} }
} }
} }
.ivu-progress { .ivu-progress {
display: flex; display: flex;
align-items: center; align-items: center;
.ivu-progress-outer { .ivu-progress-outer {
display: flex; display: flex;
align-items: center; align-items: center;
} }
&.ivu-progress-show-info { &.ivu-progress-show-info {
.ivu-progress-outer { .ivu-progress-outer {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.ivu-progress-text { .ivu-progress-text {
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
@ -305,13 +368,16 @@ body {
} }
} }
} }
.ivu-drawer-right { .ivu-drawer-right {
.ivu-drawer-content { .ivu-drawer-content {
border-radius: 18px 0 0 18px; border-radius: 18px 0 0 18px;
.ivu-drawer-header { .ivu-drawer-header {
padding-top: 16px; padding-top: 16px;
padding-bottom: 6px; padding-bottom: 6px;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
.ivu-drawer-header-inner { .ivu-drawer-header-inner {
font-size: 18px; font-size: 18px;
padding: 0 4px; padding: 0 4px;
@ -319,16 +385,20 @@ body {
line-height: 32px; line-height: 32px;
} }
} }
.ivu-drawer-body { .ivu-drawer-body {
padding: 10px 20px; padding: 10px 20px;
} }
} }
} }
.ivu-drawer-bottom { .ivu-drawer-bottom {
.ivu-drawer-content { .ivu-drawer-content {
border-radius: 18px 18px 0 0; border-radius: 18px 18px 0 0;
.ivu-drawer-close { .ivu-drawer-close {
top: -40px; top: -40px;
.ivu-icon { .ivu-icon {
font-size: 40px; font-size: 40px;
color: #ffffff; color: #ffffff;
@ -350,11 +420,72 @@ body {
display: table; display: table;
content: "" content: ""
} }
&:after { &:after {
clear: both 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 { .page-container {
text-align: center; text-align: center;
@ -363,10 +494,12 @@ body {
.search-container { .search-container {
margin-bottom: 12px; margin-bottom: 12px;
> ul { > ul {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
> li { > li {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
@ -375,26 +508,32 @@ body {
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
.search-label { .search-label {
font-weight: 600; font-weight: 600;
} }
.search-content { .search-content {
margin-top: 6px; margin-top: 6px;
} }
&.search-button { &.search-button {
flex: none; flex: none;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
> button + button { > button + button {
margin-left: 8px; margin-left: 8px;
} }
} }
} }
} }
&.lr { &.lr {
> ul { > ul {
> li:not(.search-button) { > li:not(.search-button) {
@ -402,12 +541,15 @@ body {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-right: 18px; margin-right: 18px;
.search-label { .search-label {
flex-shrink: 0; flex-shrink: 0;
} }
.search-content { .search-content {
margin-top: 0; margin-top: 0;
margin-left: 6px; margin-left: 6px;
.ivu-input-wrapper, .ivu-input-wrapper,
.ivu-select { .ivu-select {
width: 168px; width: 168px;
@ -417,13 +559,16 @@ body {
} }
} }
} }
&.auto { &.auto {
> ul { > ul {
> li:not(.search-button) { > li:not(.search-button) {
flex: none; flex: none;
.search-content { .search-content {
margin-top: 0; margin-top: 0;
margin-left: 6px; margin-left: 6px;
.ivu-input-wrapper, .ivu-input-wrapper,
.ivu-select { .ivu-select {
width: 150px; width: 150px;
@ -434,23 +579,28 @@ body {
} }
} }
} }
.search-expand { .search-expand {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.search-container { .search-container {
flex: 1; flex: 1;
} }
.expand-button-group { .expand-button-group {
flex-shrink: 0; flex-shrink: 0;
margin-left: 24px; margin-left: 24px;
margin-bottom: 24px; margin-bottom: 24px;
} }
} }
.search-button-clear { .search-button-clear {
.ivu-tooltip-inner { .ivu-tooltip-inner {
padding: 0; padding: 0;
display: flex; display: flex;
align-items: center; align-items: center;
.ivu-btn { .ivu-btn {
min-width: 80px; min-width: 80px;
font-size: 13px; font-size: 13px;

11
resources/assets/sass/pages/components/project-archived.scss vendored
View File

@ -5,7 +5,9 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 20px; padding: 20px;
overflow: auto; display: flex;
flex-direction: column;
.archived-title { .archived-title {
color: #333333; color: #333333;
font-size: 20px; font-size: 20px;
@ -14,6 +16,7 @@
margin-bottom: 24px; margin-bottom: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
.title-icon { .title-icon {
display: flex; display: flex;
align-items: center; align-items: center;
@ -21,9 +24,15 @@
height: 14px; height: 14px;
margin-left: 4px; margin-left: 4px;
margin-top: 2px; margin-top: 2px;
> i { > i {
cursor: pointer; cursor: pointer;
} }
} }
} }
.table-page-box {
flex: 1;
height: 0;
}
} }

15
resources/assets/sass/pages/components/project-management.scss vendored
View File

@ -5,7 +5,9 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 20px; padding: 20px;
overflow: auto; display: flex;
flex-direction: column;
.management-title { .management-title {
color: #333333; color: #333333;
font-size: 20px; font-size: 20px;
@ -14,6 +16,7 @@
margin-bottom: 24px; margin-bottom: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
.title-icon { .title-icon {
display: flex; display: flex;
align-items: center; align-items: center;
@ -21,14 +24,17 @@
height: 14px; height: 14px;
margin-left: 4px; margin-left: 4px;
margin-top: 2px; margin-top: 2px;
> i { > i {
cursor: pointer; cursor: pointer;
} }
} }
} }
.project-name { .project-name {
display: flex; display: flex;
align-items: center; align-items: center;
.ivu-tag { .ivu-tag {
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
@ -41,10 +47,17 @@
white-space: nowrap white-space: nowrap
} }
} }
.project-percent { .project-percent {
line-height: 1; line-height: 1;
.ivu-progress { .ivu-progress {
margin-top: 2px; margin-top: 2px;
} }
} }
.table-page-box {
flex: 1;
height: 0;
}
} }

11
resources/assets/sass/pages/components/task-archived.scss vendored
View File

@ -5,7 +5,9 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 20px; padding: 20px;
overflow: auto; display: flex;
flex-direction: column;
.archived-title { .archived-title {
color: #333333; color: #333333;
font-size: 20px; font-size: 20px;
@ -14,6 +16,7 @@
margin-bottom: 24px; margin-bottom: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
.title-icon { .title-icon {
display: flex; display: flex;
align-items: center; align-items: center;
@ -21,9 +24,15 @@
height: 14px; height: 14px;
margin-left: 4px; margin-left: 4px;
margin-top: 2px; margin-top: 2px;
> i { > i {
cursor: pointer; cursor: pointer;
} }
} }
} }
.table-page-box {
flex: 1;
height: 0;
}
} }

13
resources/assets/sass/pages/components/team-management.scss vendored
View File

@ -5,7 +5,9 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 20px; padding: 20px;
overflow: auto; display: flex;
flex-direction: column;
.management-title { .management-title {
color: #333333; color: #333333;
font-size: 20px; font-size: 20px;
@ -14,6 +16,7 @@
margin-bottom: 24px; margin-bottom: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
.title-icon { .title-icon {
display: flex; display: flex;
align-items: center; align-items: center;
@ -21,14 +24,17 @@
height: 14px; height: 14px;
margin-left: 4px; margin-left: 4px;
margin-top: 2px; margin-top: 2px;
> i { > i {
cursor: pointer; cursor: pointer;
} }
} }
} }
.team-email { .team-email {
display: flex; display: flex;
align-items: center; align-items: center;
.ivu-tag { .ivu-tag {
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
@ -41,4 +47,9 @@
white-space: nowrap white-space: nowrap
} }
} }
.table-page-box {
flex: 1;
height: 0;
}
} }