update

src/views/indexSun/oneL.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="one-l-box">
-        <div class="title"> 服务详情数据 </div>
+        <div class="title"> 服务详情数据</div>
         <div class="content">
             <div class="type-time">
                 <div @click="clickChooseType('4')" :class="[chooseType === '4' ? 'selected' : 'no-selected']">
@@ -31,14 +31,14 @@
                     @click="handleClick(item)"
                 >
                     <span>{{ item?.name }}</span>
-                    <span>{{ item?.value }}</span>
+                    <span :style="{ color: index > 1 ? '' : '#22e8ff' }">{{ item?.value || 0 }}</span>
                 </div>
             </div>
         </div>
     </div>
-</template>
+</template>6+
 <script setup lang="ts">
-    import { computed, ref, watch } from 'vue';
+    import { ref, watch } from 'vue';
     import { useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
     import { statisticsNewApi } from '/@/views/indexSun/indexSun.api.ts';
     import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
@@ -67,6 +67,7 @@
             getOneLeftInfo();
         }
     );
+
     async function getOneLeftInfo() {
         const params = {
             condition: chooseType.value,
@@ -81,6 +82,7 @@
             setValue(res.result);
         });
     }
+
     function setValue(result) {
         let { alerdyreceive = '', totalacceptance = '' } = result;
         setStatistics(result);
@@ -89,10 +91,12 @@
             useDetail.setTotalacceptance(totalacceptance);
         }
     }
+
     function clickChooseType(index) {
         if (chooseType.value === index) return;
         chooseType.value = index;
     }
+
     function handleClick(item) {
         emit('handleClick', item);
     }
@@ -100,6 +104,7 @@
 <style lang="less" scoped>
     .one-l-box {
         background: rgba(8, 75, 100, 0.2);
+
         .title {
             height: 40px;
             border-radius: 14px 14px 0 0;
@@ -111,14 +116,17 @@
             padding: 0 20px;
             background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
         }
+
         .content {
             height: calc(100% - 40px);
             display: flex;
             flex-direction: column;
+
             .type-time {
                 padding-top: 10px;
                 margin-right: 10px;
                 font-size: 14px;
+
                 > div {
                     cursor: pointer;
                     padding: 3px 15px;
@@ -126,10 +134,12 @@
                     display: flex;
                     align-items: center;
                 }
+
                 .selected {
                     color: #00ccff;
                     background: rgba(0, 204, 255, 0.2);
                     position: relative;
+
                     &:before {
                         content: '';
                         position: absolute;
@@ -151,6 +161,7 @@
                         border-bottom: 3px solid #00ccff; /* 顶部线条 */
                         border-right: 3px solid #00ccff; /* 左侧线条 */
                     }
+
                     > div {
                         position: absolute;
                         width: 100%;
@@ -181,10 +192,12 @@
                         }
                     }
                 }
+
                 .no-selected {
                     color: #b6b6b6;
                     background: rgba(26, 69, 126, 0.2);
                     position: relative;
+
                     &:before {
                         content: '';
                         position: absolute;
@@ -206,6 +219,7 @@
                         border-bottom: 3px solid #1a457e; /* 顶部线条 */
                         border-right: 3px solid #1a457e; /* 左侧线条 */
                     }
+
                     > div {
                         position: absolute;
                         width: 100%;
@@ -236,6 +250,7 @@
                         }
                     }
                 }
+
                 .triangle {
                     position: absolute;
                     left: 50%;
@@ -248,6 +263,7 @@
                     border-bottom: 6px solid #00ccff; /* 底部为黑色，形成三角形 */
                 }
             }
+
             .server-container {
                 color: #fff;
                 flex: 1;
@@ -261,18 +277,22 @@
                 letter-spacing: 2px;
                 margin-top: 10px;
                 padding-bottom: 10px;
+
                 .spin {
                     position: absolute;
                     left: 50%;
                     top: 50%;
                 }
             }
+
             .server-item {
                 //    font-size: 16px;
                 padding: 3px 3% 3px 5%;
+
                 &.hasCursor {
                     cursor: pointer;
                 }
+
                 display: flex;
                 justify-content: space-between;
             }