style(统计业务): 统一统计页面样式和布局

- 引入公共样式文件，简化各统计页面的样式管理
- 优化统计页面的容器布局，采用flex布局以提升响应式表现
- 统一表单项的样式，确保一致性和可读性
- 移除冗余的样式定义，提升代码整洁度

src/views/modules/statisticsBusiness/courseStatistics/amountStatistics.vue

@@ -217,22 +217,13 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import '../styles/statistics-common.less';
+
 .course-statistics-container {
-  display: flex;
+  .sb-page-height-with-table();
-  flex-direction: column;
-  height: calc(100vh - 220px);
-
-  .table-container {
-    flex: 1;
-    overflow: hidden;
-  }
 }
 
-.el-form .el-form-item {
+.sb-form-item-ten();
-  margin-bottom: 10px !important;
-}
 
-/deep/ .el-dialog__wrapper .el-dialog__body {
+.sb-dialog-body-no-top-padding();
-  padding-top: 0 !important;
-}
 </style>

src/views/modules/statisticsBusiness/courseStatistics/courseStatistics.vue

@@ -414,15 +414,10 @@ export default {
 </script>
 
 <style scoped lang="less">
-.course-statistics-container {
+@import '../styles/statistics-common.less';
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 220px);
 
-  .table-container {
+.course-statistics-container {
-    flex: 1;
+  .sb-page-height-with-table();
-    overflow: hidden;
-  }
 }
 
 .dialog-header {
@@ -438,11 +433,7 @@ export default {
   color: #303133;
 }
 
-.el-form .el-form-item {
+.sb-form-item-ten();
-  margin-bottom: 10px !important;
-}
 
-/deep/ .el-dialog__wrapper .el-dialog__body {
+.sb-dialog-body-no-top-padding();
-  padding-top: 0 !important;
-}
 </style>

src/views/modules/statisticsBusiness/courseStatistics/index.vue

@@ -31,8 +31,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
-.el-form .el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 10px !important;
+
-}
+.sb-form-item-ten();
 </style>

src/views/modules/statisticsBusiness/courseStatistics/labelStatistics.vue

@@ -177,18 +177,11 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import '../styles/statistics-common.less';
+
 .course-label-statistics-container {
-  display: flex;
+  .sb-page-height-with-table();
-  flex-direction: column;
-  height: calc(100vh - 220px);
-
-  .table-container {
-    flex: 1;
-    overflow: hidden;
-  }
 }
 
-.el-form .el-form-item {
+.sb-form-item-ten();
-  margin-bottom: 10px !important;
-}
 </style>

src/views/modules/statisticsBusiness/styles/statistics-common.less

@@ -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;
+}

src/views/modules/statisticsBusiness/userStatistics/index.vue

@@ -33,9 +33,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
-.el-form .el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 10px !important;
-}
-</style>
 
+.sb-form-item-ten();
+</style>

src/views/modules/statisticsBusiness/userStatistics/retainUser.vue

@@ -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;
+  .sb-white-panel(8px);
-  border-radius: 4px;
 }
 
 .table-section {
@@ -217,9 +218,7 @@ export default {
   flex-direction: column;
 }
 
-.el-form-item {
+.sb-form-item-zero();
-  margin-bottom: 0 !important;
-}
 
 .table-container {
   flex: 1;
@@ -227,10 +226,5 @@ export default {
   overflow: hidden;
 }
 
-/deep/ .el-table .cell,
+.sb-table-compact();
-/deep/ .el-table th > .cell {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  line-height: 20px;
-}
 </style>

src/views/modules/statisticsBusiness/userStatistics/userStatisticsBase.vue

@@ -300,16 +300,10 @@ export default {
 </script>
 
 <style scoped lang="less">
-.el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 0 !important;
-}
 
-/deep/ .el-table .cell,
+.sb-form-item-zero();
-/deep/ .el-table th > .cell {
+.sb-table-compact();
-  padding-top: 4px;
-  padding-bottom: 4px;
-  line-height: 20px;
-}
 
 .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;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
+.sb-summary-card-text();
+
 @media (max-width: 1200px) {
   .summary-section {
     flex-wrap: wrap;

src/views/modules/statisticsBusiness/vipStatistics/allVip.vue

@@ -235,25 +235,11 @@ export default {
 </script>
 
 <style scoped lang="less">
-.el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 0 !important;
-}
 
-/deep/ .el-table .cell,
+.sb-form-item-zero();
-/deep/ .el-table th > .cell {
+.sb-table-compact();
-  padding-top: 4px;
+.sb-statistics-table-min();
-  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;
-}
 
 .all-vip-statistics {
   display: flex;
@@ -263,9 +249,7 @@ export default {
 
 .summary-section,
 .detail-section {
-  background: #fff;
+  .sb-white-panel(8px);
-  border-radius: 4px;
-  padding: 8px;
 }
 
 .summary-section {
@@ -276,25 +260,16 @@ export default {
 
 .summary-block__title {
   margin-bottom: 16px;
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
 .summary-grid {
-  display: flex;
+  .sb-summary-section-flex(12px);
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .summary-card {
-  flex: 1 1 120px;
+  .sb-summary-card-shell(120px, 120px, auto);
-  width: 120px;
   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;
+  .sb-flex-column-fill();
-  flex: 1;
-  flex-direction: column;
 }
 
 .detail-header {
-  display: flex;
+  .sb-detail-header(16px);
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
 }
 
 .detail-title {
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
+.sb-summary-card-text();
+
 .table-container {
   flex: 1;
 }

src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue

@@ -203,21 +203,10 @@ export default {
 </script>
 
 <style scoped lang="less">
-/deep/ .el-table .cell,
+@import '../styles/statistics-common.less';
-/deep/ .el-table th > .cell {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  line-height: 20px;
-}
 
-/deep/ .statistics-table {
+.sb-table-compact();
-  min-height: 500px;
+.sb-statistics-table-min();
-}
-
-/deep/ .statistics-table .el-table__body-wrapper,
-/deep/ .statistics-table .el-table__empty-block {
-  min-height: 452px;
-}
 
 .vip-expires-statistics {
   display: flex;
@@ -227,66 +216,47 @@ export default {
 
 .summary-section,
 .detail-section {
-  background: #fff;
+  .sb-white-panel(8px);
-  border-radius: 4px;
-  padding: 8px;
 }
 
 .detail-section {
-  display: flex;
+  .sb-flex-column-fill();
-  flex: 1;
-  flex-direction: column;
 }
 
 .section-title {
   margin-bottom: 16px;
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
 .summary-grid {
-  display: flex;
+  .sb-summary-section-flex(12px);
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .summary-card {
-  flex: 1 1 120px;
+  .sb-summary-card-shell(
-  width: 120px;
+    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;
+  .sb-detail-header(16px);
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
 }
 
 .detail-title {
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
+.sb-summary-card-text();
+
 .table-container {
   flex: 1;
 }

src/views/modules/statisticsBusiness/vipStatistics/index.vue

@@ -41,8 +41,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
-.el-form .el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 10px !important;
+
-}
+.sb-form-item-ten();
 </style>

src/views/modules/statisticsBusiness/vipStatistics/monthVip.vue

@@ -215,25 +215,11 @@ export default {
 </script>
 
 <style scoped lang="less">
-.el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 0 !important;
-}
 
-/deep/ .el-table .cell,
+.sb-form-item-zero();
-/deep/ .el-table th > .cell {
+.sb-table-compact();
-  padding-top: 4px;
+.sb-statistics-table-min();
-  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;
-}
 
 .month-vip-statistics {
   display: flex;
@@ -244,90 +230,60 @@ export default {
 .query-section,
 .summary-section,
 .detail-section {
-  background: #fff;
+  .sb-white-panel(8px);
-  border-radius: 4px;
+}
-  padding: 8px;
+
+.query-section {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .summary-section {
-  display: flex;
+  .sb-summary-section-flex(12px);
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .summary-card {
-  display: flex;
+  .sb-summary-card-shell(180px, 180px, 190px);
-  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);
 }
 
 .summary-card--two-columns {
-  flex-basis: 280px;
+  .sb-summary-card-two-columns(280px, 280px);
-  width: 280px;
 }
 
 .summary-card__title {
-  margin-bottom: 14px;
+  .sb-summary-card-title(14px);
-  font-size: 16px;
-  font-weight: 700;
-  color: #303133;
 }
 
 .summary-card__body {
-  display: flex;
+  .sb-summary-card-body(10px);
-  flex: 1;
-  flex-direction: column;
-  gap: 10px;
 }
 
 .summary-card--two-columns .summary-card__body {
-  display: grid;
+  .sb-summary-card-body-two-columns(10px, 30px);
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 30px;
 }
 
 .summary-line {
-  display: flex;
+  .sb-summary-line(12px);
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  line-height: 1.5;
 }
 
 .summary-line__label {
-  color: #606266;
+  .sb-summary-line-label();
 }
 
 .summary-line__value {
-  font-weight: 700;
+  .sb-summary-line-value();
-  color: #1f2d3d;
-  text-align: right;
 }
 
 .detail-section {
-  display: flex;
+  .sb-flex-column-fill();
-  flex: 1;
-  flex-direction: column;
 }
 
 .detail-header {
-  display: flex;
+  .sb-detail-header(16px);
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
 }
 
 .detail-title {
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
 .table-container {

src/views/modules/statisticsBusiness/vipStatistics/yearVip.vue

@@ -232,16 +232,10 @@ export default {
 </script>
 
 <style scoped lang="less">
-.el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 0 !important;
-}
 
-/deep/ .el-table .cell,
+.sb-form-item-zero();
-/deep/ .el-table th > .cell {
+.sb-table-compact();
-  padding-top: 4px;
-  padding-bottom: 4px;
-  line-height: 20px;
-}
 
 .year-vip-statistics {
   display: flex;
@@ -252,78 +246,53 @@ export default {
 .query-section,
 .summary-section,
 .table-section {
-  padding: 8px;
+  .sb-white-panel(8px);
-  background: #fff;
+}
-  border-radius: 4px;
+
+.query-section {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .summary-section {
-  display: flex;
+  .sb-summary-section-flex(12px);
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .summary-card {
-  display: flex;
+  .sb-summary-card-shell(180px, 180px, 180px);
-  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);
 }
 
 .summary-card--two-columns {
-  flex-basis: 280px;
+  .sb-summary-card-two-columns(280px, 280px);
-  width: 280px;
 }
 
 .summary-card__title {
-  margin-bottom: 14px;
+  .sb-summary-card-title(14px);
-  font-size: 16px;
-  font-weight: 700;
-  color: #303133;
 }
 
 .summary-card__body {
-  display: flex;
+  .sb-summary-card-body(10px);
-  flex: 1;
-  flex-direction: column;
-  gap: 10px;
 }
 
 .summary-card--two-columns .summary-card__body {
-  display: grid;
+  .sb-summary-card-body-two-columns(10px, 30px);
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 30px;
 }
 
 .summary-line {
-  display: flex;
+  .sb-summary-line(12px);
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  line-height: 1.5;
 }
 
 .summary-line__label {
-  color: #606266;
+  .sb-summary-line-label();
 }
 
 .summary-line__value {
-  font-weight: 700;
+  .sb-summary-line-value();
-  color: #1f2d3d;
-  text-align: right;
 }
 
 .table-title {
   margin-bottom: 12px;
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
 @media (max-width: 1200px) {