✨ feat: 紧凑布局

rtsp-vue/src/assets/styles/element-ui.scss

@@ -1,4 +1,5 @@
 // cover some element-ui styles
+@import './element/layout-compact.scss';
 
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
@@ -54,6 +55,10 @@
   margin: 0 auto;
 }
 
+.el-select {
+  width: 180px;
+}
+
 // refine element ui upload
 .upload-container {
   .el-upload {
@@ -93,4 +98,5 @@
 
 .el-dropdown .el-dropdown-link{
   color: var(--el-color-primary) !important;
-}
+}
+

rtsp-vue/src/assets/styles/element/layout-compact.scss

@@ -0,0 +1,77 @@
+// 定制element-ui组件的尺寸, 紧凑布局
+:root {
+  --el-component-size: 25px !important;
+  --el-pagination-button-width: 25px !important;
+  --el-pagination-button-height: 25px !important;
+}
+
+.el-table {
+  .el-table__cell {
+		padding: 0 !important;
+	}
+
+  .el-table__header-wrapper th.el-table__cell {
+    padding: 0 !important;
+    height: 30px !important;
+  }
+}
+
+.el-button {
+  height: 25px !important;
+  font-size: 12px !important;
+  border-radius: 0;
+
+  &.is-circle {
+    width: 25px !important;
+    border-radius: 8px;
+  }
+}
+
+.el-form {
+  &--inline {
+    .el-form-item {
+      margin-right: 10px !important;
+    }
+  }
+
+  .el-form-item {
+    margin-bottom: 10px !important;
+    font-size: 12px !important;
+  }
+}
+
+.el-select {
+  .el-select__wrapper {
+    min-height: 25px !important;
+  }
+}
+
+.el-menu {
+  .el-menu-item {
+    height: 40px !important;
+  }
+
+  .el-sub-menu__title {
+    height: 40px !important;
+  }
+}
+
+.el-pagination {
+  .el-pager {
+    li {
+      height: 25px !important;
+      width: 25px !important;
+      min-height: 25px !important;
+      min-width: 25px !important;
+      padding: 0 !important;
+    }
+  }
+
+  .btn-prev, .btn-next {
+    height: 25px !important;
+    width: 25px !important;
+    min-height: 25px !important;
+    min-width: 25px !important;
+    padding: 0 !important;
+  }
+}

rtsp-vue/src/assets/styles/index.scss

@@ -132,7 +132,7 @@ aside {
 }
 
 .pagination-container {
-  margin-top: 30px;
+  margin-top: 10px;
 }
 
 .text-center {

rtsp-vue/src/assets/styles/variables.module.scss

@@ -10,7 +10,7 @@ $panGreen: #30B08F;
 
 // 默认主题变量
 $menuText: #bfcbd9;
-$menuActiveText: #409eff;
+$menuActiveText: #2bf;
 $menuBg: #304156;
 $menuHover: #263445;
 
@@ -18,7 +18,7 @@ $menuHover: #263445;
 $menuLightBg: #ffffff;
 $menuLightHover: #f0f1f5;
 $menuLightText: #303133;
-$menuLightActiveText: #409EFF;
+$menuLightActiveText: #2bf;
 
 // 基础变量
 $base-sidebar-width: 200px;
@@ -32,7 +32,7 @@ $base-sub-menu-background: #1f2d3d;
 $base-sub-menu-hover: #001528;
 
 // 组件变量
-$--color-primary: #409EFF;
+$--color-primary: #2bf;
 $--color-success: #67C23A;
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C;