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 @@
display: flex;
align-items: center;
justify-content: flex-end;
padding: 39px 62px 25px 0;
padding: 16px 0 20px 0;
color: var(--ey-color-gray-100);
// 选择分页大小
.grid-pagination-size {
......
src/components/app-quick-group/app-quick-group.scss
浏览文件 @ a10b5b6f
.app-quick-group {
width: 100%;
padding: 0;
font-size: 12px;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: transparent;
gap: 49px;
.app-quick-item {
width: 110px;
height: 34px;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
background: var(--app-color-white);
border: 1px solid #FFFFFF;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
&.is-active {
font-weight: bold;
border: 1px solid var(--app-color-black);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
&.is-active >span {
color: var(--app-color-blue-green);
position: relative;
&::after {
content: '';
position: absolute;
left: -5px;
bottom: -3px;
width: calc(100% + 10px);
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 {
width: 100%;
padding: 10px 20px 0px 20px;
background: var(--app-color-white);
display: flex;
flex-direction: column;
gap: 10px;
gap: 20px;
.app-searchbar-group {
width: 100%;
display: flex;
......@@ -12,14 +11,27 @@
gap: 30px;
.app-searchbar-item {
position: relative;
width: 100%;
padding-right: 110px;
}
.app-searchbar-action {
position: absolute;
right: 75px;
top: 5px;
cursor: pointer;
left: 340px;
top: 0;
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>
<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-option
v-for="field in fieldItems"
......@@ -16,8 +16,8 @@
<slot :data="item"></slot>
</div>
<div class="app-searchbar-action">
<img v-if="index === items.length - 1" src="assets/img/ic_add_circle.svg" @click="onAddItem()">
<img v-else src="assets/img/remove_circle.svg" @click="onRemoveItem(index)">
<img src="assets/img/add.svg" @click="onAddItem()">
<img src="assets/img/remove.svg" @click="onRemoveItem(index)">
</div>
</div>
</div>
......@@ -51,17 +51,6 @@ export default class AppSearchbar extends Vue {
*/
@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 {
if(!this.fields) {
return;
}
if (this.items.length === 0) {
this.onAddItem();
}
this.fields.forEach((field: any) => {
let index: number = this.fieldItems.findIndex((item: any) => Object.is(item.value, field.prop));
if(index < 0) {
......@@ -136,7 +128,7 @@ export default class AppSearchbar extends Vue {
* @return {*}
* @memberof AppSearchbar
*/
public onAddItem(data: any) {
public onAddItem() {
this.items.push({
field: null,
mode: null,
......
src/layout/grid-view-layout/grid-view-layout.scss
浏览文件 @ a10b5b6f
......@@ -4,10 +4,12 @@
overflow: auto;
display: flex;
flex-direction: column;
padding: 0 18px;
padding: 0 20px;
.view-header__top {
height: 60px;
padding: 20px 0;
line-height: 17px;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
justify-content: flex-end;
......@@ -20,44 +22,16 @@
.view-header__content {
display: flex;
flex-direction: column;
padding: 16px 4px 20px 7px;
gap: 10px;
background: var(--app-color-white);
box-sizing: border-box;
border: 1px solid var(--app-color-gray-250);
.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;
padding: 20px;
gap: 20px;
border: 1px solid var(--app-color-gray-200);
border-radius: 6px;
.quick-search-container {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
padding-left: 20px;
cursor: pointer;
i {
font-weight: 900;
font-size: 14px;
}
&:hover {
color: var(--app-color-blue);
gap: 20px;
.ivu-btn {
width: 108px;
height: 34px;
}
}
.app-search-form .search-button {
......@@ -65,15 +39,7 @@
}
}
.view-header__bottom {
min-height: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: transparent;
gap: 10px;
.ivu-btn {
margin: 20px 0;
}
padding: 16px 0;
}
>.view-content {
flex: auto;
......
src/styles/element/table.scss
浏览文件 @ a10b5b6f
.el-table {
display: flex;
flex-direction: column;
gap: 10px;
border: 0;
color: var(--app-color-gray-100);
&::before {
......@@ -9,10 +8,11 @@
}
.el-table__header-wrapper {
.cell {
height: 40px;
color: var(--app-color-black);
font-size: 13px;
font-weight: bold;
line-height: 18px;
line-height: 40px;
text-align: center;
.ascending {
border-bottom-color: var(--app-color-black);
......@@ -30,20 +30,20 @@
}
.el-table__body-wrapper,
.el-table__fixed-body-wrapper {
max-height: calc(100% - 60px);
max-height: calc(100% - 40px);
.el-table__body {
height: 100%;
}
.el-table__cell {
border: 0;
border-bottom: 1px solid var(--app-color-gray-250);
padding: 10px 0;
padding: 0;
height: 54px;
>.cell {
display: flex;
justify-content: center;
line-height: 20px;
font-size: 12px;
line-height: 20px;
white-space: pre-line;
a {
color: var(--app-color-blue-green);
......@@ -52,9 +52,18 @@
}
}
.el-table-column--selection {
&.is-center div.cell {
padding: 0 20px;
width: 100%;
line-height: 40px;
.el-checkbox__input {
height: 16px;
}
}
.el-checkbox__inner {
height: 16px;
width: 16px;
border-radius: 2px;
}
.el-checkbox.is-checked {
.el-checkbox__inner {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或