mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-28 10:03:54 +08:00
style: 表格底部按钮边距统一调整
This commit is contained in:
@@ -587,7 +587,7 @@ export default {
|
|||||||
justify-content: space-between !important;
|
justify-content: space-between !important;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding: 0 20px 15px !important;
|
padding: 0 20px !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
<el-table ref="dictDataTable" :data="dictDataList" style="width: 100%"
|
<el-table ref="dictDataTable" :data="dictDataList" style="width: 100%"
|
||||||
v-loading="dictDataLoading" element-loading-text="拼命加载中"
|
v-loading="dictDataLoading" element-loading-text="拼命加载中"
|
||||||
element-loading-spinner="el-icon-loading"
|
element-loading-spinner="el-icon-loading"
|
||||||
element-loading-background="rgba(255, 255, 255, 0.7)" class="data-table"
|
element-loading-background="rgba(255, 255, 255, 0.7)" class="transparent-table"
|
||||||
header-row-class-name="table-header">
|
header-row-class-name="table-header">
|
||||||
<el-table-column :label="$t('modelConfig.select')" align="center" width="70">
|
<el-table-column :label="$t('modelConfig.select')" align="center" width="70">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@@ -463,9 +463,7 @@ export default {
|
|||||||
.main-wrapper {
|
.main-wrapper {
|
||||||
margin: 5px 22px;
|
margin: 5px 22px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
min-height: calc(100vh - 24vh);
|
height: 80vh;
|
||||||
height: auto;
|
|
||||||
max-height: 80vh;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||||
position: relative;
|
position: relative;
|
||||||
background: rgba(237, 242, 255, 0.5);
|
background: rgba(237, 242, 255, 0.5);
|
||||||
@@ -555,13 +553,14 @@ export default {
|
|||||||
|
|
||||||
.content-area {
|
.content-area {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 24px;
|
padding: 24px 24px 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: 600px;
|
min-width: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dict-data-card {
|
.dict-data-card {
|
||||||
@@ -574,31 +573,51 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table {
|
:deep(.transparent-table) {
|
||||||
border-radius: 6px;
|
background: white;
|
||||||
overflow-y: hidden;
|
flex: 1;
|
||||||
background-color: transparent !important;
|
width: 100%;
|
||||||
--table-max-height: calc(100vh - 40vh);
|
display: flex;
|
||||||
max-height: var(--table-max-height);
|
flex-direction: column;
|
||||||
|
|
||||||
:deep(.el-table__body-wrapper) {
|
.el-table__body-wrapper {
|
||||||
max-height: calc(var(--table-max-height) - 40px);
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
max-height: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-table__body) {
|
.el-table__header-wrapper {
|
||||||
tr:last-child td {
|
flex-shrink: 0;
|
||||||
border-bottom: none;
|
}
|
||||||
|
|
||||||
|
.el-table__header th {
|
||||||
|
background: white !important;
|
||||||
|
color: black;
|
||||||
|
font-weight: 600;
|
||||||
|
height: 40px;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__body tr {
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
|
padding: 8px 0;
|
||||||
|
height: 40px;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table) {
|
.el-table__row:hover>td {
|
||||||
&::before {
|
background-color: #f5f7fa !important;
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -607,7 +626,6 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16px 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
@@ -889,7 +907,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-card__body) {
|
:deep(.el-card__body) {
|
||||||
padding: 15px;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@@ -555,7 +555,6 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding-bottom: 10px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -69,7 +69,7 @@
|
|||||||
element-loading-background="rgba(255, 255, 255, 0.7)"
|
element-loading-background="rgba(255, 255, 255, 0.7)"
|
||||||
:header-cell-style="{ background: 'transparent' }"
|
:header-cell-style="{ background: 'transparent' }"
|
||||||
:data="modelList"
|
:data="modelList"
|
||||||
class="data-table"
|
class="transparent-table"
|
||||||
header-row-class-name="table-header"
|
header-row-class-name="table-header"
|
||||||
:header-cell-class-name="headerCellClassName"
|
:header-cell-class-name="headerCellClassName"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
@@ -637,7 +637,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.el-switch {
|
.el-switch {
|
||||||
height: 23px;
|
height: 23px;
|
||||||
}
|
}
|
||||||
@@ -662,9 +662,7 @@ export default {
|
|||||||
.main-wrapper {
|
.main-wrapper {
|
||||||
margin: 5px 22px;
|
margin: 5px 22px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
min-height: calc(100vh - 26vh);
|
height: 80vh;
|
||||||
height: auto;
|
|
||||||
max-height: 80vh;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||||
position: relative;
|
position: relative;
|
||||||
background: rgba(237, 242, 255, 0.5);
|
background: rgba(237, 242, 255, 0.5);
|
||||||
@@ -752,13 +750,14 @@ export default {
|
|||||||
|
|
||||||
.content-area {
|
.content-area {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 24px;
|
padding: 24px 24px 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: 600px;
|
min-width: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-group {
|
.action-group {
|
||||||
@@ -843,15 +842,15 @@ export default {
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table {
|
// .data-table {
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.data-table /deep/ .el-table__row {
|
// .data-table ::v-deep .el-table__row {
|
||||||
background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.table-header th {
|
.table-header th {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
@@ -863,7 +862,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16px 0;
|
// padding: 16px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
@@ -918,7 +917,7 @@ export default {
|
|||||||
background: linear-gradient(135deg, #3a8ee6, #5a7cff);
|
background: linear-gradient(135deg, #3a8ee6, #5a7cff);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table th /deep/ .el-table__cell {
|
.el-table th ::v-deep .el-table__cell {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
@@ -966,21 +965,6 @@ export default {
|
|||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .data-table {
|
|
||||||
&.el-table::before,
|
|
||||||
&.el-table::after,
|
|
||||||
&.el-table__inner-wrapper::before {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .data-table .el-table__header-wrapper {
|
|
||||||
border-bottom: 1px solid rgb(224, 227, 237);
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .data-table .el-table__body td {
|
|
||||||
border-bottom: 1px solid rgb(224, 227, 237) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button img {
|
.el-button img {
|
||||||
height: 1em;
|
height: 1em;
|
||||||
@@ -1118,16 +1102,55 @@ export default {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
:deep(.transparent-table) {
|
||||||
|
background: white;
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.data-table {
|
.el-table__body-wrapper {
|
||||||
--table-max-height: calc(100vh - 45vh);
|
flex: 1;
|
||||||
max-height: var(--table-max-height);
|
overflow-y: auto;
|
||||||
|
max-height: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__header-wrapper {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__header th {
|
||||||
|
background: white !important;
|
||||||
|
color: black;
|
||||||
|
font-weight: 600;
|
||||||
|
height: 40px;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__body tr {
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
|
padding: 8px 0;
|
||||||
|
height: 40px;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__row:hover>td {
|
||||||
|
background-color: #f5f7fa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table ::v-deep .el-table__body-wrapper {
|
|
||||||
max-height: calc(var(--table-max-height) - 80px);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-loading-mask {
|
::v-deep .el-loading-mask {
|
||||||
background-color: rgba(255, 255, 255, 0.6) !important;
|
background-color: rgba(255, 255, 255, 0.6) !important;
|
||||||
|
|||||||
@@ -505,7 +505,6 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ctrl_btn {
|
.ctrl_btn {
|
||||||
@@ -735,7 +734,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-table {
|
.el-table {
|
||||||
--table-max-height: calc(100vh - 40vh);
|
// --table-max-height: calc(100vh - 40vh);
|
||||||
max-height: var(--table-max-height);
|
max-height: var(--table-max-height);
|
||||||
|
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
|
|||||||
@@ -464,7 +464,7 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-bottom: 10px;
|
// padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ctrl_btn {
|
.ctrl_btn {
|
||||||
@@ -712,7 +712,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-table {
|
.el-table {
|
||||||
--table-max-height: calc(100vh - 40vh);
|
// --table-max-height: calc(100vh - 40vh);
|
||||||
max-height: var(--table-max-height);
|
max-height: var(--table-max-height);
|
||||||
|
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
|
|||||||
@@ -721,7 +721,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-table {
|
.el-table {
|
||||||
--table-max-height: calc(100vh - 40vh);
|
// --table-max-height: calc(100vh - 40vh);
|
||||||
max-height: var(--table-max-height);
|
max-height: var(--table-max-height);
|
||||||
|
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
|
|||||||
@@ -594,7 +594,6 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ctrl_btn {
|
.ctrl_btn {
|
||||||
@@ -852,7 +851,7 @@ export default {
|
|||||||
|
|
||||||
.el-table {
|
.el-table {
|
||||||
--table-max-height: calc(100vh - 40vh);
|
--table-max-height: calc(100vh - 40vh);
|
||||||
max-height: var(--table-max-height);
|
// max-height: var(--table-max-height);
|
||||||
|
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
max-height: calc(var(--table-max-height) - 40px);
|
max-height: calc(var(--table-max-height) - 40px);
|
||||||
@@ -864,7 +863,6 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.transparent-table) {
|
:deep(.transparent-table) {
|
||||||
|
|||||||
@@ -433,7 +433,7 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
::v-deep .el-card__body {
|
::v-deep .el-card__body {
|
||||||
padding: 15px;
|
padding: 15px 15px 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -676,7 +676,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-table {
|
.el-table {
|
||||||
--table-max-height: calc(100vh - 40vh);
|
// --table-max-height: calc(100vh - 40vh);
|
||||||
max-height: var(--table-max-height);
|
max-height: var(--table-max-height);
|
||||||
|
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
|
|||||||
Reference in New Issue
Block a user