多租户首页添加smsc-cdr

src/views/index/css/module.css

@@ -45,19 +45,14 @@
     padding-right: 15px;
     top: 60%;
 }
+
+
 .detailsLeft {
     position: absolute;
     left: 15px;
     padding-left: 15px;
     top: 60%;
 }
-/* 
-.details {
-    margin-left: 12px;
-    right: 15px;
-    padding-right: 15px;
-}
-*/
 
 .number {
     padding-top: 25px;
@@ -70,6 +65,72 @@
     font-weight: 300;
 }
   
+.details-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    left: 15px;
+    right: 15px;
+    top: 60%;
+    padding: 0 15px;
+  }
+  
+  .details-item {
+    flex: 0 0 30%; 
+    max-width: 30%; 
+  }
+
+  
+  .cdrLeft {
+    text-align: left;
+}
+  
+  .cdrCenter {
+    text-align: center;
+  }
+  
+  .cdrRight {
+    text-align: right;
+}
+
+.cdrNumber {
+    padding-top: 25px;
+    color: #fff;
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1px;
+    margin-bottom: 0px;
+    font-weight: 300;
+    display: inline-flex; 
+    align-items: center;
+    max-width: 100%;
+  }
+  /* 图标样式 */
+.cdrNumber .anticon {
+    margin-right: 5px;
+    font-size: 34px;
+    flex-shrink: 0;
+  }
+
+  .cdrNumber .value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 1;
+  }
+  /* 响应式调整 */
+@media (max-width: 768px) {
+    .cdrNumber {
+      font-size: 20px;
+      line-height: 22px;
+    }
+    
+    .cdrNumber .anticon {
+      font-size: 18px;
+    }
+  }
 .desc {
     text-align: right;
     font-size: 16px;

src/views/index/moduleInfo.vue

@@ -330,16 +330,40 @@ onMounted(() => {
           </span>
         </div>
 
-        <div class="detailsLeft">
-          <div class="number" @click="fnToRouter('ImsCDR_10013')">
-            <PhoneOutlined />
-            {{ skimState.imsCdrNum }}
+        <div class="details-container">
+          <div class="details-item cdrLeft">
+            <div
+              class="cdrNumber"
+              @click="fnToRouter('ImsCDR_10013')"
+              :title="`${skimState.imsCdrNum}`"
+            >
+              <PhoneOutlined class="spaceButton"/>
+              <!-- <span class="value">{{ skimState.imsCdrNum }}</span> -->
+              <span class="value"> {{ skimState.imsCdrNum }}</span>
+            </div>
           </div>
-        </div>
-        <div class="details">
-          <div class="number" @click="fnToRouter('SmfCDR_10014')">
-            <database-outlined class="spaceButton" />
-            {{ skimState.smfCdrNum }}
+
+          <div class="details-item cdrCenter">
+            <div
+              class="cdrNumber"
+              @click="fnToRouter('SmfCDR_10014')"
+              :title="`${skimState.smfCdrNum}`"
+            >
+              <database-outlined class="spaceButton" />
+              <!-- <span class="value"> {{skimState.smfCdrNum}}</span> -->
+              <span class="value"> {{skimState.smfCdrNum}}</span>
+            </div>
+          </div>
+
+          <div class="details-item cdrRight">
+            <div
+              class="cdrNumber"
+              @click="fnToRouter('SmfCDR_10014')"
+              :title="`${skimState.smfCdrNum}`"
+            >
+              <database-outlined class="spaceButton" />
+              <span class="value"> {{skimState.smfCdrNum}}</span>
+            </div>
           </div>
         </div>
       </a-card>
@@ -377,7 +401,6 @@ onMounted(() => {
               class="spaceButton"
             />
             {{ skimState.gEventNum }}
-
           </div>
         </div>
       </a-card>