Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 a10b5b6f 编写于 作者: Cano1997's avatar Cano1997
浏览文件
操作

update：表格视图样式优化

上级 ea1b2581
隐藏空白字符变更
内嵌 并排
正在显示 包含 71 行增加 和 89 行删除
src/components/app-grid-pagination/app-grid-pagination.scss
浏览文件 @ a10b5b6f
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 39px 62px 25px 0; padding: 16px 0 20px 0;
color: var(--ey-color-gray-100); color: var(--ey-color-gray-100);
// 选择分页大小 // 选择分页大小
.grid-pagination-size { .grid-pagination-size {
......
src/components/app-quick-group/app-quick-group.scss
浏览文件 @ a10b5b6f
.app-quick-group { .app-quick-group {
width: 100%; width: 100%;
padding: 0; padding: 0;
font-size: 12px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
gap: 49px;
.app-quick-item { .app-quick-item {
width: 110px;
height: 34px;
padding: 0;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; &.is-active >span {
justify-content: center; color: var(--app-color-blue-green);
margin-right: 20px; position: relative;
background: var(--app-color-white); &::after {
border: 1px solid #FFFFFF; content: '';
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16); position: absolute;
&.is-active { left: -5px;
font-weight: bold; bottom: -3px;
border: 1px solid var(--app-color-black); width: calc(100% + 10px);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16); height: 3px;
border-radius: 6px;
background: var(--app-color-blue-green);
}
} }
} }
} }
\ No newline at end of file
src/components/app-searchbar/app-searchbar.scss
浏览文件 @ a10b5b6f
.app-searchbar { .app-searchbar {
width: 100%; width: 100%;
padding: 10px 20px 0px 20px;
background: var(--app-color-white); background: var(--app-color-white);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 20px;
.app-searchbar-group { .app-searchbar-group {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -12,14 +11,27 @@ ...@@ -12,14 +11,27 @@
gap: 30px; gap: 30px;
.app-searchbar-item { .app-searchbar-item {
position: relative; position: relative;
width: 100%;
padding-right: 110px;
} }
.app-searchbar-action { .app-searchbar-action {
position: absolute; position: absolute;
right: 75px; left: 340px;
top: 5px; top: 0;
cursor: pointer; height: 34px;
display: flex;
align-items: center;
gap: 16px;
img {
cursor: pointer;
}
}
.app-searchbar-field {
width: 160px;
}
.app-searchbar-mode {
width: 130px;
}
.app-searchbar-value {
width: 320px;
} }
} }
} }
\ No newline at end of file
src/components/app-searchbar/app-searchbar.vue
浏览文件 @ a10b5b6f
<template> <template>
<div class="app-searchbar"> <div class="app-searchbar">
<div class="app-searchbar-group" v-for="(item,index) in items"> <div class="app-searchbar-group" v-for="(item,index) in items" :key="index">
<el-select size="small" class="app-searchbar-field app-searchbar-item" v-model="item.field" clearable :placeholder="$t('components.filterTree.placeholder')"> <el-select size="small" class="app-searchbar-field app-searchbar-item" v-model="item.field" clearable :placeholder="$t('components.filterTree.placeholder')">
<el-option <el-option
v-for="field in fieldItems" v-for="field in fieldItems"
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
<slot :data="item"></slot> <slot :data="item"></slot>
</div> </div>
<div class="app-searchbar-action"> <div class="app-searchbar-action">
<img v-if="index === items.length - 1" src="assets/img/ic_add_circle.svg" @click="onAddItem()"> <img src="assets/img/add.svg" @click="onAddItem()">
<img v-else src="assets/img/remove_circle.svg" @click="onRemoveItem(index)"> <img src="assets/img/remove.svg" @click="onRemoveItem(index)">
</div> </div>
</div> </div>
</div> </div>
...@@ -51,17 +51,6 @@ export default class AppSearchbar extends Vue { ...@@ -51,17 +51,6 @@ export default class AppSearchbar extends Vue {
*/ */
@Prop() fields: any; @Prop() fields: any;
@Watch('items',{immediate: true})
onItemsChange(newItems: any[]) {
if (newItems.length == 0) {
this.items.push({
field: null,
mode: null,
editor: null
})
}
}
/** /**
* 属性项集合 * 属性项集合
* *
...@@ -80,6 +69,9 @@ export default class AppSearchbar extends Vue { ...@@ -80,6 +69,9 @@ export default class AppSearchbar extends Vue {
if(!this.fields) { if(!this.fields) {
return; return;
} }
if (this.items.length === 0) {
this.onAddItem();
}
this.fields.forEach((field: any) => { this.fields.forEach((field: any) => {
let index: number = this.fieldItems.findIndex((item: any) => Object.is(item.value, field.prop)); let index: number = this.fieldItems.findIndex((item: any) => Object.is(item.value, field.prop));
if(index < 0) { if(index < 0) {
...@@ -136,7 +128,7 @@ export default class AppSearchbar extends Vue { ...@@ -136,7 +128,7 @@ export default class AppSearchbar extends Vue {
* @return {*} * @return {*}
* @memberof AppSearchbar * @memberof AppSearchbar
*/ */
public onAddItem(data: any) { public onAddItem() {
this.items.push({ this.items.push({
field: null, field: null,
mode: null, mode: null,
......
src/layout/grid-view-layout/grid-view-layout.scss
浏览文件 @ a10b5b6f
...@@ -4,10 +4,12 @@ ...@@ -4,10 +4,12 @@
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 18px; padding: 0 20px;
.view-header__top { .view-header__top {
height: 60px; padding: 20px 0;
line-height: 17px;
display: flex; display: flex;
flex-direction: column;
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
...@@ -20,44 +22,16 @@ ...@@ -20,44 +22,16 @@
.view-header__content { .view-header__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 16px 4px 20px 7px; padding: 20px;
gap: 10px; gap: 20px;
background: var(--app-color-white); border: 1px solid var(--app-color-gray-200);
box-sizing: border-box; border-radius: 6px;
border: 1px solid var(--app-color-gray-250); .quick-search-container {
.quick-search-input .ivu-input {
width: 100%;
height: 34px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 4px 10px;
background: var(--app-color-white);
box-sizing: border-box;
border: 1px solid var(--app-color-gray-250);
border-radius: 0;
z-index: 0;
&:focus {
box-shadow: none;
border-color: var(--app-color-gray-250);
}
}
.search-form-toggle {
width: 100px;
height: 26px;
display: flex; display: flex;
align-items: center; gap: 20px;
gap: 10px; .ivu-btn {
font-size: 12px; width: 108px;
padding-left: 20px; height: 34px;
cursor: pointer;
i {
font-weight: 900;
font-size: 14px;
}
&:hover {
color: var(--app-color-blue);
} }
} }
.app-search-form .search-button { .app-search-form .search-button {
...@@ -65,15 +39,7 @@ ...@@ -65,15 +39,7 @@
} }
} }
.view-header__bottom { .view-header__bottom {
min-height: 20px; padding: 16px 0;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: transparent;
gap: 10px;
.ivu-btn {
margin: 20px 0;
}
} }
>.view-content { >.view-content {
flex: auto; flex: auto;
......
src/styles/element/table.scss
浏览文件 @ a10b5b6f
.el-table { .el-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px;
border: 0; border: 0;
color: var(--app-color-gray-100); color: var(--app-color-gray-100);
&::before { &::before {
...@@ -9,10 +8,11 @@ ...@@ -9,10 +8,11 @@
} }
.el-table__header-wrapper { .el-table__header-wrapper {
.cell { .cell {
height: 40px;
color: var(--app-color-black); color: var(--app-color-black);
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
line-height: 18px; line-height: 40px;
text-align: center; text-align: center;
.ascending { .ascending {
border-bottom-color: var(--app-color-black); border-bottom-color: var(--app-color-black);
...@@ -30,20 +30,20 @@ ...@@ -30,20 +30,20 @@
} }
.el-table__body-wrapper, .el-table__body-wrapper,
.el-table__fixed-body-wrapper { .el-table__fixed-body-wrapper {
max-height: calc(100% - 60px); max-height: calc(100% - 40px);
.el-table__body { .el-table__body {
height: 100%; height: 100%;
} }
.el-table__cell { .el-table__cell {
border: 0; border: 0;
border-bottom: 1px solid var(--app-color-gray-250); border-bottom: 1px solid var(--app-color-gray-250);
padding: 10px 0; padding: 0;
height: 54px;
>.cell { >.cell {
display: flex; display: flex;
justify-content: center; justify-content: center;
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: 12px;
line-height: 20px;
white-space: pre-line; white-space: pre-line;
a { a {
color: var(--app-color-blue-green); color: var(--app-color-blue-green);
...@@ -52,9 +52,18 @@ ...@@ -52,9 +52,18 @@
} }
} }
.el-table-column--selection { .el-table-column--selection {
&.is-center div.cell {
padding: 0 20px;
width: 100%;
line-height: 40px;
.el-checkbox__input {
height: 16px;
}
}
.el-checkbox__inner { .el-checkbox__inner {
height: 16px; height: 16px;
width: 16px; width: 16px;
border-radius: 2px;
} }
.el-checkbox.is-checked { .el-checkbox.is-checked {
.el-checkbox__inner { .el-checkbox__inner {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或