style(统计业务): 统一统计页面样式和布局
- 引入公共样式文件，简化各统计页面的样式管理 - 优化统计页面的容器布局，采用flex布局以提升响应式表现 - 统一表单项的样式，确保一致性和可读性 - 移除冗余的样式定义，提升代码整洁度
This commit is contained in:
@@ -217,22 +217,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.course-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.sb-form-item-ten();
|
||||
|
||||
/deep/ .el-dialog__wrapper .el-dialog__body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.sb-dialog-body-no-top-padding();
|
||||
</style>
|
||||
|
||||
@@ -414,15 +414,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.course-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.course-statistics-container {
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
@@ -438,11 +433,7 @@ export default {
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.sb-form-item-ten();
|
||||
|
||||
/deep/ .el-dialog__wrapper .el-dialog__body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.sb-dialog-body-no-top-padding();
|
||||
</style>
|
||||
|
||||
@@ -31,8 +31,8 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
|
||||
@@ -177,18 +177,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.course-label-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
.sb-form-item-zero() {
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-form-item-ten() {
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-table-compact() {
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-statistics-table-min() {
|
||||
/deep/ .statistics-table {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
/deep/ .statistics-table .el-table__body-wrapper,
|
||||
/deep/ .statistics-table .el-table__empty-block {
|
||||
min-height: 452px;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-page-height-with-table() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-dialog-body-no-top-padding() {
|
||||
/deep/ .el-dialog__wrapper .el-dialog__body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-white-panel(@padding: 8px) {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: @padding;
|
||||
}
|
||||
|
||||
.sb-flex-column-fill() {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sb-detail-header(@mb: 16px) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: @mb;
|
||||
}
|
||||
|
||||
.sb-title-16() {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.sb-summary-card-text() {
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-summary-section-flex(@gap: 12px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: @gap;
|
||||
}
|
||||
|
||||
.sb-summary-card-shell(
|
||||
@basis: 180px,
|
||||
@width: 180px,
|
||||
@minHeight: 180px,
|
||||
@padding: 16px,
|
||||
@bg: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
|
||||
) {
|
||||
display: flex;
|
||||
flex: 1 1 @basis;
|
||||
width: @width;
|
||||
flex-direction: column;
|
||||
min-height: @minHeight;
|
||||
padding: @padding;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: @bg;
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
}
|
||||
|
||||
.sb-summary-card-two-columns(@basis: 280px, @width: 280px) {
|
||||
flex-basis: @basis;
|
||||
width: @width;
|
||||
}
|
||||
|
||||
.sb-summary-card-title(@mb: 14px) {
|
||||
margin-bottom: @mb;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-body(@gap: 10px) {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: @gap;
|
||||
}
|
||||
|
||||
.sb-summary-card-body-two-columns(@rowGap: 10px, @colGap: 30px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: @rowGap @colGap;
|
||||
}
|
||||
|
||||
.sb-summary-line(@gap: 12px) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: @gap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sb-summary-line-label() {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.sb-summary-line-value() {
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -33,9 +33,8 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
|
||||
@@ -197,6 +197,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.retain-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -206,8 +208,7 @@ export default {
|
||||
|
||||
.query-section,
|
||||
.table-section {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.table-section {
|
||||
@@ -217,9 +218,7 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.sb-form-item-zero();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
@@ -227,10 +226,5 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.sb-table-compact();
|
||||
</style>
|
||||
|
||||
@@ -300,16 +300,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
|
||||
.user-statistics-page {
|
||||
display: flex;
|
||||
@@ -320,10 +314,8 @@ export default {
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.table-section {
|
||||
padding: 8px;
|
||||
.sb-white-panel(8px);
|
||||
padding-bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.query-section {
|
||||
@@ -337,25 +329,12 @@ export default {
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
flex: 1 1 180px;
|
||||
.sb-summary-card-shell(180px, auto, auto);
|
||||
min-width: 180px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
}
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@@ -366,11 +345,11 @@ export default {
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.summary-section {
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -235,25 +235,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/deep/ .statistics-table {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
/deep/ .statistics-table .el-table__body-wrapper,
|
||||
/deep/ .statistics-table .el-table__empty-block {
|
||||
min-height: 452px;
|
||||
}
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.all-vip-statistics {
|
||||
display: flex;
|
||||
@@ -263,9 +249,7 @@ export default {
|
||||
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
@@ -276,25 +260,16 @@ export default {
|
||||
|
||||
.summary-block__title {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
flex: 1 1 120px;
|
||||
width: 120px;
|
||||
.sb-summary-card-shell(120px, 120px, auto);
|
||||
min-width: 120px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
}
|
||||
|
||||
.summary-card--expired {
|
||||
@@ -307,35 +282,22 @@ export default {
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -203,21 +203,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
/deep/ .statistics-table {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
/deep/ .statistics-table .el-table__body-wrapper,
|
||||
/deep/ .statistics-table .el-table__empty-block {
|
||||
min-height: 452px;
|
||||
}
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.vip-expires-statistics {
|
||||
display: flex;
|
||||
@@ -227,66 +216,47 @@ export default {
|
||||
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
flex: 1 1 120px;
|
||||
width: 120px;
|
||||
.sb-summary-card-shell(
|
||||
120px,
|
||||
120px,
|
||||
auto,
|
||||
16px,
|
||||
linear-gradient(180deg, #f7fbff 0%, #ffffff 100%)
|
||||
);
|
||||
min-width: 120px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
}
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -41,8 +41,8 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
|
||||
@@ -215,25 +215,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/deep/ .statistics-table {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
/deep/ .statistics-table .el-table__body-wrapper,
|
||||
/deep/ .statistics-table .el-table__empty-block {
|
||||
min-height: 452px;
|
||||
}
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.month-vip-statistics {
|
||||
display: flex;
|
||||
@@ -244,90 +230,60 @@ export default {
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.query-section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 180px;
|
||||
width: 180px;
|
||||
min-height: 190px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
.sb-summary-card-shell(180px, 180px, 190px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns {
|
||||
flex-basis: 280px;
|
||||
width: 280px;
|
||||
.sb-summary-card-two-columns(280px, 280px);
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-summary-card-title(14px);
|
||||
}
|
||||
|
||||
.summary-card__body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
.sb-summary-card-body(10px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns .summary-card__body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 30px;
|
||||
.sb-summary-card-body-two-columns(10px, 30px);
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
line-height: 1.5;
|
||||
.sb-summary-line(12px);
|
||||
}
|
||||
|
||||
.summary-line__label {
|
||||
color: #606266;
|
||||
.sb-summary-line-label();
|
||||
}
|
||||
|
||||
.summary-line__value {
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
text-align: right;
|
||||
.sb-summary-line-value();
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.table-container {
|
||||
|
||||
@@ -232,16 +232,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
|
||||
.year-vip-statistics {
|
||||
display: flex;
|
||||
@@ -252,78 +246,53 @@ export default {
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.table-section {
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.query-section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex: 1 1 180px;
|
||||
width: 180px;
|
||||
flex-direction: column;
|
||||
min-height: 180px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
.sb-summary-card-shell(180px, 180px, 180px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns {
|
||||
flex-basis: 280px;
|
||||
width: 280px;
|
||||
.sb-summary-card-two-columns(280px, 280px);
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-summary-card-title(14px);
|
||||
}
|
||||
|
||||
.summary-card__body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
.sb-summary-card-body(10px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns .summary-card__body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 30px;
|
||||
.sb-summary-card-body-two-columns(10px, 30px);
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
line-height: 1.5;
|
||||
.sb-summary-line(12px);
|
||||
}
|
||||
|
||||
.summary-line__label {
|
||||
color: #606266;
|
||||
.sb-summary-line-label();
|
||||
}
|
||||
|
||||
.summary-line__value {
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
text-align: right;
|
||||
.sb-summary-line-value();
|
||||
}
|
||||
|
||||
.table-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
Reference in New Issue
Block a user