布局问题修改

src/App.vue

@@ -18,5 +18,4 @@ const size = computed(() => SettingStore.themeConfig.globalComSize);
 </script>
 <style lang="scss">
 @import './styles/style';
-@import './assets/fonts/font.css';
 </style>

src/components/custom-scroll-title/index.vue

@@ -119,7 +119,7 @@ function handleTitleClick(val) {
   box-sizing: border-box;
 }
 .header_title {
-  background-color: #f5f5f5;
+  background-color: #000;
   position: relative;
   padding: 0 68px;
   display: flex;

src/styles/style.scss

@@ -1,5 +1,6 @@
 @import 'common/base';
 @import 'common/define';
+@import './assets/fonts/font.css';
 #app {
   position: relative;
   width: 100%;
@@ -7,11 +8,31 @@
   font-family: Avenir, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #ffffff;
+  background-color: #f5f5f5;
+}
+.el-dialog__body {
+  overflow: hidden auto;
+  height: auto;
+  max-height: calc(100vh - 130px);
+}
+.txt-ellipsis {
+  display: -webkit-inline-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: normal;
+}
+.clamp1 {
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  line-height: 1.5;
+  max-height: calc(1.5em * 1);
 }
 
-// .el-dialog__body {
+.clamp2 {
-//   overflow: hidden auto;
+  line-clamp: 2;
-//   height: auto;
+  -webkit-line-clamp: 2;
-//   max-height: calc(100vh - 130px);
+  line-height: 1.5;
-// }
+  max-height: calc(1.5em * 2);
+}

src/views/home/index.vue

@@ -87,7 +87,7 @@ let rollDataList = reactive([
     flex-direction: column;
   }
   .left-charts-item {
-    width: 100%;
+    width: calc(100% - 5px);
     height: calc((100% - 30px) / 3);
   }
 
@@ -98,7 +98,7 @@ let rollDataList = reactive([
     flex-direction: column;
   }
   .right-charts-item {
-    width: 100%;
+    width: calc(100% - 5px);
     height: calc((100% - 30px) / 3);
   }
 }