客户统计样式调整

src/views/customer/file/index.vue

@@ -36,7 +36,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -48,7 +57,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -60,7 +78,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -1242,4 +1269,11 @@ const update = (row) => {
   overflow-y: auto;
   line-height: 1;
 }
+.statistics-text {
+  padding-left: 8px;
+  width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

src/views/customer/highseas/index.vue

@@ -36,7 +36,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -48,7 +57,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -60,7 +78,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -1164,4 +1191,11 @@ const getNum = (val) => {
   overflow-y: auto;
   line-height: 1;
 }
+.statistics-text {
+  padding-left: 8px;
+  width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

src/views/customer/privatesea/index.vue

@@ -36,7 +36,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -48,7 +57,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -60,7 +78,16 @@
             :key="index">
             <div style="margin-bottom: 10px; display: flex">
               <div style="width: 8px; height: 8px; background-color: #5bacff; border-radius: 50px; margin-top: 6px"></div>
-              <span style="padding-left: 8px">{{ item.label }}</span>
+              <div class="statistics-text">
+                <el-tooltip class="box-item" effect="light" placement="bottom">
+                  <template #content>
+                    <div style="max-width: 400px; max-height: 50vh; word-break: break-all">
+                      {{ item.label }}
+                    </div>
+                  </template>
+                  <span style="cursor: pointer">{{ item.label }}</span>
+                </el-tooltip>
+              </div>
             </div>
             <div style="color: black; font-size: 20px; font-weight: 700">{{ getNum(item.value) }}</div>
           </div>
@@ -1165,4 +1192,11 @@ const getNum = (val) => {
   overflow-y: auto;
   line-height: 1;
 }
+.statistics-text {
+  padding-left: 8px;
+  width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>