多租户首页添加smsc-cdr

src/views/index.vue

@@ -8,40 +8,20 @@ import { getConfigKey } from '@/api/system/config';
 import { defineAsyncComponent, onMounted, shallowRef } from 'vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useUserStore from '@/store/modules/user';
+import useLayoutStore from '@/store/modules/layout';
 
 const currentComponent = shallowRef(
   defineAsyncComponent(() => import('@/views/index/defaultIndex.vue'))
 );
 
-// function loadComponent(sysValue: String) {
-//   //PS:import不允许变量形式 也有人说左右都穿插字符串即可---经测试不行
-
-//   // currentComponent.value = defineAsyncComponent(
-//   //   () => import(`@/views/${selectedComponent.value}.vue`)
-//   // );
-
-//   switch (sysValue) {
-//     case 'Index':
-//       currentComponent.value = Index;
-//       break;
-//     case 'Gold':
-//       currentComponent.value = Gold;
-//       break;
-//     case 'Dash':
-//       currentComponent.value = Dash;
-//       break;
-//   }
-// }
-
 onMounted(() => {
-  // getConfigKey('sys.indexModule').then(res => {
-  //   if (res.code === RESULT_CODE_SUCCESS && res.data) {
-  //     loadComponent(res.data);
-  //   }
-  // });
-
   if (useUserStore().roles.includes('tenant')) {
     currentComponent.value = Index;
+    useLayoutStore().changeConf('layout', 'top');
+    useLayoutStore().changeConf('menuTheme', 'light');
+    useLayoutStore().changeConf('tabRender', false);
+  } else {
+    useLayoutStore().changeConf('layout', 'mix');
   }
 });
 </script>

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>