feat: 看板排版调整，多语言翻译

src/assets/svg/base.svg

@@ -0,0 +1 @@
+<?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="1706690434521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4424" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M343.467 430.933c12.8-12.8 12.8-34.133 0-49.066-34.134-34.134-34.134-89.6 0-123.734 12.8-12.8 12.8-34.133 0-49.066-6.4-6.4-14.934-10.667-23.467-10.667s-17.067 4.267-23.467 10.667c-27.733 29.866-44.8 68.266-44.8 110.933 0 40.533 14.934 81.067 44.8 110.933 6.4 6.4 14.934 10.667 23.467 10.667s17.067-4.267 23.467-10.667z m-128-292.266C209.067 132.267 200.533 128 192 128s-17.067 4.267-23.467 10.667c-98.133 102.4-98.133 262.4 0 364.8C172.8 507.733 183.467 512 192 512s17.067-4.267 23.467-10.667c12.8-12.8 12.8-36.266 0-49.066-70.4-74.667-70.4-192 0-266.667 12.8-12.8 12.8-34.133 0-46.933zM512 405.333c34.133 0 66.133-21.333 78.933-51.2s6.4-68.266-19.2-91.733C548.267 238.933 512 230.4 480 243.2s-53.333 44.8-53.333 78.933c2.133 44.8 38.4 83.2 85.333 83.2z m343.467-266.666c-6.4-6.4-12.8-10.667-23.467-10.667-8.533 0-17.067 2.133-23.467 8.533l-2.133 2.134c-12.8 12.8-12.8 36.266 0 49.066 70.4 74.667 70.4 192 0 266.667-12.8 12.8-12.8 36.267 0 49.067 6.4 6.4 14.933 10.666 23.467 10.666s17.066-4.266 23.466-10.666c46.934-49.067 72.534-115.2 72.534-181.334 4.266-70.4-23.467-134.4-70.4-183.466zM512 473.6c-21.333 0-42.667-6.4-61.867-14.933L285.867 896h76.8l44.8-53.333h209.066l44.8 53.333h76.8L573.867 456.533C556.8 467.2 535.467 473.6 512 473.6z m0 25.6l53.333 187.733H460.8L512 499.2zM407.467 791.467l51.2-53.334H563.2l51.2 53.334H407.467z m270.933-582.4c-12.8 12.8-12.8 34.133 0 49.066 34.133 34.134 34.133 89.6 0 123.734-12.8 12.8-12.8 34.133 0 49.066 6.4 6.4 14.933 10.667 23.467 10.667 8.533 0 17.066-4.267 23.466-8.533 59.734-61.867 59.734-160 0-221.867-6.4-6.4-14.933-10.667-23.466-10.667-8.534 0-17.067 2.134-23.467 8.534z" fill="#4096ff" p-id="4425"></path><path d="M343.467 430.933c12.8-12.8 12.8-34.133 0-49.066-34.134-34.134-34.134-89.6 0-123.734 12.8-12.8 12.8-34.133 0-49.066-6.4-6.4-14.934-10.667-23.467-10.667s-17.067 4.267-23.467 10.667c-27.733 29.866-44.8 68.266-44.8 110.933 0 40.533 14.934 81.067 44.8 110.933 6.4 6.4 14.934 10.667 23.467 10.667s17.067-4.267 23.467-10.667z m-128-292.266C209.067 132.267 200.533 128 192 128s-17.067 4.267-23.467 10.667c-98.133 102.4-98.133 262.4 0 364.8C172.8 507.733 183.467 512 192 512s17.067-4.267 23.467-10.667c12.8-12.8 12.8-36.266 0-49.066-70.4-74.667-70.4-192 0-266.667 12.8-12.8 12.8-34.133 0-46.933zM512 405.333c34.133 0 66.133-21.333 78.933-51.2s6.4-68.266-19.2-91.733C548.267 238.933 512 230.4 480 243.2s-53.333 44.8-53.333 78.933c2.133 44.8 38.4 83.2 85.333 83.2z m343.467-266.666c-6.4-6.4-12.8-10.667-23.467-10.667-8.533 0-17.067 2.133-23.467 8.533l-2.133 2.134c-12.8 12.8-12.8 36.266 0 49.066 70.4 74.667 70.4 192 0 266.667-12.8 12.8-12.8 36.267 0 49.067 6.4 6.4 14.933 10.666 23.467 10.666s17.066-4.266 23.466-10.666c46.934-49.067 72.534-115.2 72.534-181.334 4.266-70.4-23.467-134.4-70.4-183.466zM512 473.6c-21.333 0-42.667-6.4-61.867-14.933L285.867 896h76.8l44.8-53.333h209.066l44.8 53.333h76.8L573.867 456.533C556.8 467.2 535.467 473.6 512 473.6z m0 25.6l53.333 187.733H460.8L512 499.2zM407.467 791.467l51.2-53.334H563.2l51.2 53.334H407.467z m270.933-582.4c-12.8 12.8-12.8 34.133 0 49.066 34.133 34.134 34.133 89.6 0 123.734-12.8 12.8-12.8 34.133 0 49.066 6.4 6.4 14.933 10.667 23.467 10.667 8.533 0 17.066-4.267 23.466-8.533 59.734-61.867 59.734-160 0-221.867-6.4-6.4-14.933-10.667-23.466-10.667-8.534 0-17.067 2.134-23.467 8.534z" fill="#4096ff" p-id="4426"></path></svg>

src/assets/svg/userIMS.svg

@@ -0,0 +1 @@
+<?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="1706691279549" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5990" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M504.685714 519.314286H307.2c-14.628571 0-29.257143 7.314286-36.571429 21.942857-7.314286 14.628571-7.314286 29.257143 0 36.571428 7.314286 14.628571 21.942857 21.942857 36.571429 21.942858h190.171429c21.942857 0 36.571429-14.628571 43.885714-36.571429 0-21.942857-14.628571-43.885714-36.571429-43.885714zM716.8 358.4H307.2c-21.942857 0-36.571429 14.628571-36.571429 36.571429s14.628571 36.571429 36.571429 36.571428h402.285714c21.942857 0 36.571429-14.628571 36.571429-36.571428 7.314286-21.942857-7.314286-36.571429-29.257143-36.571429z" fill="#4096ff" p-id="5991"></path><path d="M512 14.628571C226.742857 14.628571 0 219.428571 0 460.8c0 117.028571 51.2 226.742857 138.971429 314.514286v197.485714c0 14.628571 7.314286 21.942857 14.628571 29.257143 7.314286 7.314286 14.628571 14.628571 29.257143 14.628571 7.314286 0 14.628571-7.314286 21.942857-7.314285l153.6-109.714286c51.2 14.628571 102.4 21.942857 153.6 21.942857 285.257143 0 512-204.8 512-453.485714C1024 219.428571 797.257143 14.628571 512 14.628571z m0 819.2c-51.2 0-102.4-7.314286-146.285714-21.942857-14.628571-7.314286-29.257143 0-36.571429 7.314286l-109.714286 73.142857v-131.657143c0-7.314286 0-21.942857-14.628571-29.257143-80.457143-73.142857-124.342857-168.228571-124.342857-263.314285 0-204.8 190.171429-373.028571 431.542857-373.028572 241.371429 0 431.542857 168.228571 431.542857 373.028572s-190.171429 365.714286-431.542857 365.714285z" fill="#4096ff" p-id="5992"></path></svg>

src/assets/svg/userSMF.svg

@@ -0,0 +1 @@
+<?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="1706691291048" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6285" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M964.348424 509.865574L556.935274 692.602355c-38.943904 16.476267-53.922329 16.476267-89.870548 0L59.651576 509.865574C38.681782 499.380677 32.690412 455.943246 32.690412 433.475609a652.834638 652.834638 0 0 0 64.407226 31.454692L512 656.654136l414.902362-191.723835s37.446062-19.471952 64.407226-31.454692c0 23.965479-7.489212 67.402911-26.961164 76.389965z m0-191.723835L556.935274 500.87852c-38.943904 16.476267-53.922329 16.476267-89.870548 0L59.651576 318.141739c-31.454692-16.476267-31.454692-70.398596 0-89.870548L467.064726 14.079719c35.948219-17.97411 58.415856-19.471952 89.870548 0l407.41315 214.191472c29.956849 16.476267 29.956849 76.389966 0 89.870548zM512 50.027938L97.097638 273.206465 512 448.454033l414.902362-175.247568z m0 774.983691l414.902362-191.723836s37.446062-19.471952 64.407226-31.454691c0 23.965479-7.489212 67.402911-26.961164 76.389965L556.935274 861.259416c-38.943904 16.476267-53.922329 16.476267-89.870548 0L59.651576 678.223067C38.681782 666.539896 32.690412 624.300739 32.690412 601.833102a652.834638 652.834638 0 0 0 64.407226 31.454691z m0 150.682952l414.902362-191.723836s37.446062-19.471952 64.407226-31.454691c0 23.965479-7.489212 67.402911-26.961164 76.389965L556.935274 1011.6428c-38.943904 16.476267-53.922329 16.476267-89.870548 0l-407.41315-182.736781c-20.969794-11.98274-26.961164-53.922329-26.961164-76.389965a652.834638 652.834638 0 0 0 64.407226 31.454691z" p-id="6286" fill="#4096ff"></path></svg>

src/i18n/locales/en-US.ts

@@ -494,8 +494,10 @@ export default {
         fullscreen: "Click on the full-screen display",
         skim: {
           users: "Users",
+          userTitle:'User Information',
           session: "Sessions",
           base: "Base Stations",
+          baseTitle:'Radios Information',
         },
         upfFlow:{
           title: "User Plane Throughput",
@@ -503,13 +505,14 @@ export default {
           down:'Downlink'
         },
         upfFlowTotal:{ 
+          title:'Traffic Information',
           up:'Uplink',
           down:'Downlink'
         },
         alarmTypeBar:{
           alarmSum:'Alarm Summary',
           topTitle:"TOP 3",
-      },
+        },
         resources: {
           title: "Resource Summary",
           sysMem: "Memory",
@@ -519,7 +522,7 @@ export default {
         topology: {
           title: "Network Topology",
           normal: "Normal",
-          abnormal: "AbNormal",
+          abnormal: "Abnormal",
         },
         userActivity: {
           title: "User Activity",

src/i18n/locales/zh-CN.ts

@@ -494,8 +494,10 @@ export default {
         fullscreen: "点击全屏显示",
         skim: {
           users: "用户数",
+          userTitle:'用户信息',
           session: "会话数",
           base: "基站数",
+          baseTitle:'基站信息',
         },
         upfFlow:{
           title: "用户面吞吐量",
@@ -503,6 +505,7 @@ export default {
           down:'下行'
         },
         upfFlowTotal:{
+          title:'流量信息',
           up:'上行',
           down:'下行'
         },

src/views/dashboard/overview/css/index.css

@@ -110,35 +110,53 @@
 
 /* 概览区域 */
 .skim {
-  min-height: 6.167rem;
+  min-height: 7.78rem;
-  height: 14%;
+  height: 14.4%;
 }
-.skim .inner {
+.skim .inner .data {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: row;
   align-items: center;
+  height: 90%;
 }
-.skim .inner .item {
+.skim .inner .data .item {
-  width: 50%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  align-items: baseline;
+  width: 33%;
 }
-.skim .inner .item h4 {
+.skim .inner .data .item div {
-  font-size: 1.167rem;
+  font-size: 1.467rem;
-  padding-left: 0.2rem;
   color: #fff;
-  margin-bottom: 0.333rem;
+  margin-bottom: 0;
+  display: flex;
+  align-items: baseline;
+  line-height: 2rem;
 }
-.skim .inner .item span {
+.skim .inner .data .item span {
-  font-size: 0.667rem;
   color: #4c9bfd;
+  font-size: 0.833rem;
+  width: 100%;
+  position: relative;
+  line-height: 2rem;
+}
+.skim .inner .data .item span::before {
+  content: ' ';
+  position: absolute;
+  top: 2px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+  background-image: linear-gradient(to right, #fff, #fff0);
+  height: 1px;
+  border-radius: 4px;
 }
 
 /* 用户行为 */
 .userActivity {
-  min-height: 22rem;
+  min-height: 35.8rem;
-  height: 82%;
+  height: 66.3%;
 }
 .userActivity .inner .chart {
   width: 100%;
@@ -146,15 +164,19 @@
   margin-top: 1rem;
 }
 
-/* 总流量 */
+/* 流量统计 */
 .upfFlowTotal {
-  min-height: 6.167rem;
+  min-height: 7.5rem;
-  height: 14%;
+  height: 14.6%;
 }
-.upfFlowTotal .inner .filter {
+.upfFlowTotal .inner h3 {
+  display: flex;
+  justify-content: space-between;
+}
+.upfFlowTotal .inner h3 .filter {
   display: flex;
 }
-.upfFlowTotal .inner .filter span {
+.upfFlowTotal .inner h3 .filter span {
   display: block;
   height: 0.75rem;
   line-height: 1;
@@ -164,37 +186,46 @@
   border-right: 0.083rem solid #00f2f1;
   cursor: pointer;
 }
-.upfFlowTotal .inner .filter span:first-child {
+.upfFlowTotal .inner h3 .filter span:first-child {
   padding-left: 0;
 }
-.upfFlowTotal .inner .filter span:last-child {
+.upfFlowTotal .inner h3 .filter span:last-child {
   border-right: none;
 }
-.upfFlowTotal .inner .filter span.active {
+.upfFlowTotal .inner h3 .filter span.active {
   color: #fff;
   font-size: 0.833rem;
 }
-.upfFlowTotal .data {
+.upfFlowTotal .inner .chart {
+  width: 100%;
+  height: 100%;
+  margin-top: 1rem;
+}
+.upfFlowTotal .inner .chart .data {
   display: flex;
-  margin-top: 1.833rem;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 72%;
 }
-.upfFlowTotal .item {
+.upfFlowTotal .inner .chart .data .item {
-  width: 50%;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
 }
-.upfFlowTotal h4 {
+.upfFlowTotal .inner .chart .data .item h4 {
-  font-size: 1.167rem;
+  font-size: 1.467rem;
   color: #fff;
-  margin-bottom: 0.417rem;
+  margin-bottom: 0;
 }
-.upfFlowTotal span {
+.upfFlowTotal .inner .chart .data .item span {
   color: #4c9bfd;
-  font-size: 0.667rem;
+  font-size: 0.867rem;
 }
 
 /* 资源情况 */
 .resources {
-  min-height: 14rem;
+  min-height: 13.6rem;
-  height: 26%;
+  height: 25.5%;
 }
 .resources .inner .chart {
   width: 100%;
@@ -212,480 +243,3 @@
   height: 100%;
   margin-top: 1rem;
 }
-
-/* 监控 */
-.monitor {
-  height: 20rem;
-}
-.monitor .inner {
-  padding: 1rem 0;
-  display: flex;
-  flex-direction: column;
-}
-.monitor .tabs {
-  padding: 0 1.5rem;
-  margin-bottom: 0.75rem;
-}
-.monitor .tabs a {
-  color: #1950c4;
-  font-size: 0.75rem;
-  padding: 0 1.125rem;
-}
-
-.monitor .tabs a:first-child {
-  border-right: 0.083rem solid #00f2f1;
-  padding-left: 0;
-}
-
-.monitor .tabs a.active {
-  color: #fff;
-}
-.monitor .content {
-  flex: 1;
-  display: none;
-  position: relative;
-}
-.monitor .head {
-  background: rgba(255, 255, 255, 0.1);
-  font-size: 0.583rem;
-  padding: 0.5rem 1.5rem;
-  color: #68d8fe;
-  display: flex;
-  justify-content: space-between;
-  line-height: 1.05;
-}
-.monitor .col:nth-child(1) {
-  width: 3.2rem;
-}
-.monitor .col:nth-child(2) {
-  width: 8.4rem;
-  /* 不换行  一行省略*/
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.monitor .col:nth-child(3) {
-  width: 3.2rem;
-}
-.monitor .marquee-view {
-  position: absolute;
-  top: 1.6rem;
-  bottom: 0;
-  width: 100%;
-  overflow: hidden;
-}
-
-.monitor .row {
-  line-height: 1.05;
-  padding: 0.5rem 1.5rem;
-  color: #61a8ff;
-  font-size: 0.5rem;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-}
-.monitor .row:hover {
-  color: #68d8ff;
-  background: rgba(255, 255, 255, 0.1);
-}
-.monitor .row:hover .icon-dot {
-  opacity: 1;
-}
-
-.monitor .icon-dot {
-  position: absolute;
-  left: 0.64rem;
-  opacity: 0;
-}
-.monitor .marquee-view {
-  position: absolute;
-  top: 1.6rem;
-  bottom: 0;
-  width: 100%;
-  overflow: hidden;
-}
-
-.monitor .row {
-  line-height: 1.05;
-  padding: 0.5rem 1.5rem;
-  color: #61a8ff;
-  font-size: 0.5rem;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-}
-.monitor .row:hover {
-  color: #68d8ff;
-  background: rgba(255, 255, 255, 0.1);
-}
-.monitor .row:hover .icon-dot {
-  opacity: 1;
-}
-
-.monitor .icon-dot {
-  position: absolute;
-  left: 0.64rem;
-  opacity: 0;
-}
-/* ------------------------------------------------------------动画 */
-@keyframes row {
-  0% {
-  }
-  100% {
-    transform: translateY(-50%);
-  }
-}
-/* 调用动画 */
-.monitor .marquee {
-  /* //infinite永久调用动画 */
-  animation: row 10s linear infinite;
-}
-/*鼠标划入 停止动画  */
-.monitor .marquee:hover {
-  animation-play-state: paused;
-}
-/* 点位 */
-.point {
-  height: 14.167rem;
-}
-.point .chart {
-  display: flex;
-  margin-top: 1rem;
-  justify-content: space-between;
-}
-.point .pie {
-  width: 13rem;
-  height: 10rem;
-  margin-left: -0.4rem;
-}
-.point .data {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 7rem;
-  padding: 1.5rem 1.25rem;
-  box-sizing: border-box;
-  background-image: url(../images/rect.png);
-  background-size: cover;
-}
-.point h4 {
-  margin-bottom: 0.5rem;
-  font-size: 1.167rem;
-  color: #fff;
-}
-.point span {
-  display: block;
-  color: #4c9bfd;
-  font-size: 0.667rem;
-}
-/* 地图  */
-.map {
-  height: 24.1rem;
-  margin-bottom: 0.833rem;
-  display: flex;
-  flex-direction: column;
-}
-.map h3 {
-  line-height: 1;
-  padding: 0.667rem 0;
-  margin: 0;
-  font-size: 0.833rem;
-  color: #fff;
-}
-.map .icon-cube {
-  color: #68d8fe;
-}
-.map .chart {
-  flex: 1;
-  background-color: rgba(255, 255, 255, 0.05);
-}
-.map .geo {
-  width: 100%;
-  height: 100%;
-}
-/* 用户模块 */
-.users {
-  height: 14.167rem;
-  display: flex;
-}
-.users .chart {
-  display: flex;
-  margin-top: 1rem;
-}
-.users .bar {
-  width: 24.5rem;
-  height: 10rem;
-}
-.users .data {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 7rem;
-  padding: 1.5rem 1.25rem;
-  box-sizing: border-box;
-  background-image: url(../images/rect.png);
-  background-size: cover;
-}
-.users h4 {
-  margin-bottom: 0.5rem;
-  font-size: 1.167rem;
-  color: #fff;
-}
-.users span {
-  display: block;
-  color: #4c9bfd;
-  font-size: 0.667rem;
-}
-
-/* 销售区域 */
-.sales {
-  height: 10.333rem;
-}
-.sales .caption {
-  display: flex;
-  line-height: 1;
-}
-.sales h3 {
-  height: 0.75rem;
-  padding-right: 0.75rem;
-  border-right: 0.083rem solid #00f2f1;
-}
-.sales a {
-  padding: 0.167rem;
-  font-size: 0.667rem;
-  margin: -0.125rem 0 0 0.875rem;
-  border-radius: 0.125rem;
-  color: #0bace6;
-}
-.sales a.active {
-  background-color: #4c9bfd;
-  color: #fff;
-}
-.sales .inner {
-  display: flex;
-  flex-direction: column;
-}
-.sales .chart {
-  flex: 1;
-  padding-top: 0.6rem;
-  position: relative;
-}
-.sales .label {
-  position: absolute;
-  left: 1.75rem;
-  top: 0.75rem;
-  color: #4996f5;
-  font-size: 0.583rem;
-}
-.sales .line {
-  width: 100%;
-  height: 100%;
-}
-/* 渠道区块 */
-.wrap {
-  display: flex;
-}
-.channel,
-.quarter {
-  flex: 1;
-  height: 9.667rem;
-}
-.channel {
-  margin-right: 0.833rem;
-}
-.channel .data {
-  overflow: hidden;
-}
-.channel .item {
-  margin-top: 0.85rem;
-}
-.channel .item:first-child {
-  float: left;
-}
-.channel .item:last-child {
-  float: right;
-}
-.channel h4 {
-  color: #fff;
-  font-size: 1.333rem;
-  margin-bottom: 0.2rem;
-}
-.channel small {
-  font-size: 50%;
-}
-.channel span {
-  display: block;
-  color: #4c9bfd;
-  font-size: 0.583rem;
-}
-/* 季度区块 */
-.quarter .inner {
-  display: flex;
-  flex-direction: column;
-  margin: 0 -0.25rem;
-}
-.quarter .chart {
-  flex: 1;
-  padding-top: 0.75rem;
-}
-.quarter .box {
-  position: relative;
-}
-.quarter .label {
-  transform: translate(-50%, -30%);
-  color: #fff;
-  font-size: 1.25rem;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-}
-.quarter .label small {
-  font-size: 50%;
-}
-.quarter .gauge {
-  height: 3.5rem;
-}
-.quarter .data {
-  display: flex;
-  justify-content: space-between;
-}
-.quarter .item {
-  width: 50%;
-}
-.quarter h4 {
-  color: #fff;
-  font-size: 1rem;
-  margin-bottom: 0.4rem;
-}
-.quarter span {
-  display: block;
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  color: #4c9bfd;
-  font-size: 0.583rem;
-}
-/* 排行榜 */
-.top {
-  height: 11.8rem;
-}
-.top .inner {
-  display: flex;
-}
-.top .all {
-  display: flex;
-  flex-direction: column;
-  width: 7rem;
-  color: #4c9bfd;
-  font-size: 0.6rem;
-  vertical-align: middle;
-}
-.top .all ul {
-  padding-left: 0.5rem;
-  margin-top: 0.5rem;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-.top .all li {
-  overflow: hidden;
-}
-.top .all [class^='icon-'] {
-  font-size: 1.5rem;
-  vertical-align: middle;
-  margin-right: 0.5rem;
-}
-.top .province {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  color: #fff;
-}
-.top .province i {
-  padding: 0 0.5rem;
-  margin-top: 0.208rem;
-  float: right;
-  font-style: normal;
-  font-size: 0.583rem;
-  color: #0bace6;
-}
-.top .province s {
-  display: inline-block;
-  transform: scale(0.8);
-  text-decoration: none;
-}
-.top .province .icon-up {
-  color: #dc3c33;
-}
-.top .province .icon-down {
-  color: #36be90;
-}
-.top .province .data {
-  flex: 1;
-  display: flex;
-  margin-top: 0.6rem;
-}
-.top .province ul {
-  flex: 1;
-  line-height: 1;
-  margin-bottom: 0.25rem;
-}
-.top .province ul li {
-  display: flex;
-  justify-content: space-between;
-}
-.top .province ul span {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.top .province ul.sup {
-  font-size: 0.583rem;
-}
-.top .province ul.sup li {
-  color: #4995f4;
-  padding: 0.5rem;
-}
-.top .province ul.sup li.active {
-  color: #a3c6f2;
-  background-color: rgba(10, 67, 188, 0.2);
-}
-.top .province ul.sub {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  font-size: 0.5rem;
-  background-color: rgba(10, 67, 188, 0.2);
-}
-.top .province ul.sub li {
-  color: #52ffff;
-  padding: 0.417rem 0.6rem;
-}
-.clock {
-  position: absolute;
-  top: -1.5rem;
-  right: 1.667rem;
-  font-size: 0.833rem;
-  color: #0bace6;
-}
-.clock i {
-  margin-right: 5px;
-  font-size: 0.833rem;
-}
-@media screen and (max-width: 1600px) {
-  .top span {
-    transform: scale(0.9);
-  }
-  .top .province ul.sup li {
-    padding: 0.4rem 0.5rem;
-  }
-  .top .province ul.sub li {
-    padding: 0.23rem 0.5rem;
-  }
-  .quarter span {
-    transform: scale(0.9);
-  }
-}

src/views/dashboard/overview/index.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import svgBase from '@/assets/svg/base.svg';
+import svgUserIMS from '@/assets/svg/userIMS.svg';
+import svgUserSMF from '@/assets/svg/userSMF.svg';
 import useI18n from '@/hooks/useI18n';
 import Topology from './components/Topology/index.vue';
 import NeResources from './components/NeResources/index.vue';
@@ -112,7 +115,6 @@ onMounted(() => {
       pageSize: 1,
     }),
     listBase5G({
-      //
       neType: 'AMF',
       neId: '001',
       id: '',
@@ -183,33 +185,62 @@ onBeforeUnmount(() => {
       <!--概览-->
       <div class="skim panel">
         <div class="inner">
-          <div class="item">
+          <h3>
-            <h4>{{ skimState.udmSubNum }}</h4>
+            <IdcardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            <span>
+            {{ t('views.dashboard.overview.skim.userTitle') }}
-              <UserOutlined style="color: #006cff" />
+          </h3>
-              {{ t('views.dashboard.overview.skim.users') }}
+          <div class="data">
-            </span>
+            <div class="item">
+              <div>
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
+                {{ skimState.udmSubNum }}
+              </div>
+              <span>
+                {{ t('views.dashboard.overview.skim.users') }}
+              </span>
+            </div>
+            <div class="item" style="margin: 0 12px">
+              <div>
+                <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
+                {{ skimState.imsUeNum }}
+              </div>
+              <span>
+                IMS {{ t('views.dashboard.overview.skim.session') }}
+              </span>
+            </div>
+            <div class="item">
+              <div>
+                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
+                {{ skimState.smfUeNum }}
+              </div>
+              <span>
+                Data {{ t('views.dashboard.overview.skim.session') }}
+              </span>
+            </div>
           </div>
-          <div class="item">
+        </div>
-            <h4>{{ skimState.nbNum }}</h4>
+      </div>
-            <span>
+      <div class="skim panel">
-              <GlobalOutlined style="color: #edcb35" />
+        <div class="inner">
-              {{ t('views.dashboard.overview.skim.base') }}
+          <h3>
-            </span>
+            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 
-          </div>
+            {{ t('views.dashboard.overview.skim.baseTitle') }}
-          <div class="item">
+          </h3>
-            <h4>{{ skimState.imsUeNum }}</h4>
+          <div class="data">
-            <span>
+            <div class="item">
-              <UserSwitchOutlined style="color: #6acca3" />
+              <div style="align-items: flex-start">
-              IMS {{ t('views.dashboard.overview.skim.session') }}
+                <img
-            </span>
+                  :src="svgBase"
-          </div>
+                  style="width: 18px; margin-right: 8px; height: 2rem"
-          <div class="item">
+                />
-            <h4>{{ skimState.smfUeNum }}</h4>
+                {{ skimState.nbNum }}
-            <span>
+              </div>
-              <UserSwitchOutlined style="color: #6acca3" />
+              <span>
-              Data {{ t('views.dashboard.overview.skim.session') }}
+                {{ t('views.dashboard.overview.skim.base') }}
-            </span>
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -262,48 +293,58 @@ onBeforeUnmount(() => {
       </div>
     </div>
     <div class="column">
-      <!-- UPF总流量 -->
+      <!-- 流量统计 -->
       <div class="upfFlowTotal panel">
         <div class="inner">
-          <!-- 筛选 -->
+          <h3>
-          <div class="filter">
+            <span>
-            <span
+              <SwapOutlined style="color: #68d8fe" />&nbsp;&nbsp; 
-              :data-key="v"
+              {{ t('views.dashboard.overview.upfFlowTotal.title') }}
-              :class="{ active: upfTFActive === i }"
-              v-for="(v, i) in ['0', '7', '30']"
-              :key="v"
-              @click="
-                () => {
-                  upfTFActive = i;
-                }
-              "
-            >
-              {{
-                v === '0'
-                  ? '24' + t('common.units.hour')
-                  : v + t('common.units.day')
-              }}
             </span>
-          </div>
+
-          <!-- 数据 -->
+            <!-- 筛选 -->
-          <div class="data">
+            <div class="filter">
-            <div class="item">
+              <span
-              <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
+                :data-key="v"
-              <span>
+                :class="{ active: upfTFActive === i }"
-                <ArrowUpOutlined style="color: #597ef7" />
+                v-for="(v, i) in ['0', '7', '30']"
-                {{ t('views.dashboard.overview.upfFlowTotal.up') }}
+                :key="v"
+                @click="
+                  () => {
+                    upfTFActive = i;
+                  }
+                "
+              >
+                {{
+                  v === '0'
+                    ? '24' + t('common.units.hour')
+                    : v + t('common.units.day')
+                }}
               </span>
             </div>
-            <div class="item">
+          </h3>
-              <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
+          <div class="chart">
-              <span>
+            <!-- 数据 -->
-                <ArrowDownOutlined style="color: #52c41a" />
+            <div class="data">
-                {{ t('views.dashboard.overview.upfFlowTotal.down') }}
+              <div class="item">
-              </span>
+                <span>
+                  <ArrowUpOutlined style="color: #597ef7" />
+                  {{ t('views.dashboard.overview.upfFlowTotal.up') }}
+                </span>
+                <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
+              </div>
+              <div class="item">
+                <span>
+                  <ArrowDownOutlined style="color: #52c41a" />
+                  {{ t('views.dashboard.overview.upfFlowTotal.down') }}
+                </span>
+                <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
       <!-- 资源情况 -->
       <div class="resources panel">
         <div class="inner">
@@ -317,6 +358,7 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </div>
+
       <!-- 告警统计 -->
       <div class="alarmType panel">
         <div class="inner">