修改租户界面排版

src/assets/svg/basefff.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720074329868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4280" width="64" height="64"><path d="M616.5 151.3l-28.3 28.3c19.7 19.6 31.8 46.6 31.8 76.5 0 29.8-12.2 56.9-31.8 76.5l28.3 28.3c26.8-27 43.5-64 43.5-104.9s-16.7-77.9-43.5-104.7zM435.8 179.5l-28.3-28.3C380.7 178.1 364 215.1 364 256s16.7 77.9 43.5 104.7l28.3-28.3C416.2 312.9 404 285.8 404 256c0-29.9 12.2-56.9 31.8-76.5zM346.6 134.3L318.3 106c-38.5 38.4-62.3 91.5-62.3 150s23.8 111.6 62.3 150l28.3-28.3C315.3 346.6 296 303.5 296 256s19.3-90.6 50.6-121.7zM705.7 106l-28.3 28.3C708.7 165.4 728 208.5 728 256s-19.3 90.6-50.6 121.7l28.3 28.3c38.5-38.4 62.3-91.5 62.3-150s-23.8-111.6-62.3-150zM815.2 60.8l-0.1-0.1L786.7 89c0.1 0 0.1 0.1 0.2 0.1C831.5 133.7 856 193 856 256s-24.5 122.3-69.1 166.9c0 0-0.1 0.1-0.2 0.1l28.3 28.3 0.1-0.1C867.3 399 896 329.7 896 256s-28.7-143-80.8-195.2zM237.3 89L209 60.7l-0.1 0.1C156.7 113 128 182.3 128 256s28.7 143 80.8 195.2l0.1 0.1 28.3-28.3c-0.1 0-0.1-0.1-0.2-0.1-44.5-44.6-69-103.9-69-166.9s24.5-122.3 69.1-166.9c0.1 0 0.1-0.1 0.2-0.1zM511.712 256.002l0.283-0.283 0.283 0.283-0.283 0.283z" p-id="4281" fill="#ffffff"></path><path d="M511.719 256.021l0.282-0.282 0.283 0.282-0.283 0.283z" p-id="4282" fill="#ffffff"></path><path d="M708.4 616l-14.2-26.1-7.6-13.9-11.6-21.2L512 256 337.5 576l-21.8 40L128 960h74l33.8-64 28.9-53h494.6l28.9 53 33.8 64h74L708.4 616zM512 389.6L613.7 576H410.3L512 389.6zM388.5 616H569L305.6 768.1 388.5 616z m-63.4 187l313.6-181.1L737.5 803H325.1z" p-id="4283" fill="#ffffff"></path></svg>
+
+

src/views/index/css/module.css

@@ -1,6 +1,6 @@
 .cardClass {
     width: 100%;
-    height: 100%;
+    height:170px;
     border-radius: 10px;
 }
 
@@ -43,6 +43,13 @@
     position: absolute;
     right: 15px;
     padding-right: 15px;
+    top: 50%;
+}
+.detailsLeft {
+    position: absolute;
+    left: 15px;
+    padding-left: 15px;
+    top: 50%;
 }
 /* 
 .details {

src/views/index/moduleInfo.vue

@@ -4,6 +4,7 @@ import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listUDMSub } from '@/api/neData/udm_sub';
 import { listUENumBySMF, listUEInfoBySMF } from '@/api/neUser/smf';
+import svgBasefff from '@/assets/svg/basefff.svg';
 import { listBase5G } from '@/api/neUser/base5G';
 import { useRouter } from 'vue-router';
 const router = useRouter();
@@ -112,6 +113,12 @@ onMounted(() => {
         :hoverable="true"
         class="cardClass"
       >
+        <div style="text-align: center">
+          <span style="font-size: 24px; font-weight: bold; color: #fff">
+            {{ t('views.dashboard.overview.skim.users') }}
+          </span>
+        </div>
+
         <div class="visual">
           <rise-outlined />
         </div>
@@ -120,11 +127,6 @@ onMounted(() => {
             <UserOutlined class="spaceButton" />
             {{ skimState.udmSubNum }}
           </div>
-          <div class="desc">
-            <span class="flexibleSpan gNodeBSpan">
-              {{ t('views.dashboard.overview.skim.users') }}
-            </span>
-          </div>
         </div>
       </a-card>
     </a-col>
@@ -136,6 +138,11 @@ onMounted(() => {
         :hoverable="true"
         class="cardClass"
       >
+        <div style="text-align: center">
+          <span style="font-size: 24px; font-weight: bold; color: #fff">
+            {{ t('views.dashboard.overview.skim.smfUeNum') }}
+          </span>
+        </div>
         <div class="visual">
           <bar-chart-outlined />
         </div>
@@ -144,11 +151,6 @@ onMounted(() => {
             <database-outlined class="spaceButton" />
             {{ skimState.smfUeNum }}
           </div>
-          <div class="desc">
-            <span class="flexibleSpan dataSpan">
-              {{ t('views.dashboard.overview.skim.smfUeNum') }}
-            </span>
-          </div>
         </div>
       </a-card>
     </a-col>
@@ -160,29 +162,24 @@ onMounted(() => {
         :hoverable="true"
         class="cardClass"
       >
-        <a-row :gutter="16">
+        <div style="text-align: center">
-          <a-col :lg="12" :md="12" :xs="24">
+          <span style="font-size: 24px; font-weight: bold; color: #fff">
-            <div class="visual45G">
+            5G
-              <bar-chart-outlined />
+          </span>
         </div>
-            <div class="details">
+
+        <div class="detailsLeft">
           <div
             class="number"
             @click="fnToRouter('Base5G_2160', { neType: 'AMF' })"
           >
-                <wifi-outlined class="spaceButton" />
+            <img
+              :src="svgBasefff"
+              style="height: 2rem; color: #fff; margin-top: -9px"
+              class="spaceButton"
+            />
             {{ skimState.gnbNum }}
           </div>
-              <div class="desc">
-                <span class="flexibleSpan gNodeBSpan">{{
-                  t('views.dashboard.overview.skim.gnbBase')
-                }}</span>
-              </div>
-            </div>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <div class="visual45G">
-              <bar-chart-outlined />
         </div>
         <div class="details">
           <div
@@ -192,14 +189,7 @@ onMounted(() => {
             <UserOutlined class="spaceButton" />
             {{ skimState.gnbUeNum }}
           </div>
-              <div class="desc">
-                <span class="flexibleSpan gUserSpan">{{
-                  t('views.dashboard.overview.skim.gnbUeNum')
-                }}</span>
         </div>
-            </div>
-          </a-col>
-        </a-row>
       </a-card>
     </a-col>
 
@@ -210,29 +200,24 @@ onMounted(() => {
         :hoverable="true"
         class="cardClass"
       >
-        <a-row :gutter="16">
+        <div style="text-align: center">
-          <a-col :lg="12" :md="12" :xs="24">
+          <span style="font-size: 24px; font-weight: bold; color: #fff">
-            <div class="visual45G">
+            4G
-              <bar-chart-outlined />
+          </span>
         </div>
-            <div class="details">
+
+        <div class="detailsLeft">
           <div
             class="number"
             @click="fnToRouter('Base5G_2160', { neType: 'MME' })"
           >
-                <wifi-outlined class="spaceButton" />
+            <img
+              :src="svgBasefff"
+              style="height: 2rem; color: #fff; margin-top: -9px"
+              class="spaceButton"
+            />
             {{ skimState.enbNum }}
           </div>
-              <div class="desc">
-                <span class="flexibleSpan eNodeBSpan">{{
-                  t('views.dashboard.overview.skim.enbBase')
-                }}</span>
-              </div>
-            </div>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <div class="visual45G">
-              <bar-chart-outlined />
         </div>
         <div class="details">
           <div
@@ -241,14 +226,7 @@ onMounted(() => {
           >
             <UserOutlined class="spaceButton" /> {{ skimState.enbUeNum }}
           </div>
-              <div class="desc">
-                <span class="flexibleSpan eUserSpan">{{
-                  t('views.dashboard.overview.skim.enbUeNum')
-                }}</span>
         </div>
-            </div>
-          </a-col>
-        </a-row>
       </a-card>
     </a-col>
   </a-row>