diff --git a/src/App.vue b/src/App.vue
index dd78d7f..3b9fc4c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -599,8 +599,8 @@ const addTop2Animation = () => {
 
 .top2-scale {
   position: relative;
-  width: calc(1296px * var(--top2-scale));
-  height: calc(692px * var(--top2-scale));
+  width: calc(1438px * var(--top2-scale));
+  height: calc(832px * var(--top2-scale));
   flex-shrink: 0;
 }
 
@@ -608,72 +608,71 @@ const addTop2Animation = () => {
   position: absolute;
   left: 0;
   top: 0;
-  width: 1296px;
-  height: 692px;
+  width: 1438px;
+  height: 832px;
   background: #2543a5;
   border-radius: 0;
   overflow: hidden;
   transform: scale(var(--top2-scale));
   transform-origin: top left;
-}
-
-.top2-header {
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  width: 1264px;
-  height: 50px;
-  border-radius: 16px;
-  background: #e5e5e5;
-  border: 0.297px solid #9fbaff;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
   box-sizing: border-box;
 }
 
+.top2-header {
+  height: 50px;
+  border-radius: 16px;
+  background: rgba(229, 229, 229, 0);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .top2-title {
-  position: absolute;
-  left: 516.1px;
-  top: 7.78px;
   font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-  font-size: 28.491px;
+  font-size: 32px;
   font-weight: 700;
-  color: #2543a5;
-  letter-spacing: 0.3px;
+  color: #f9d1b0;
+  letter-spacing: 0.5px;
+  text-align: center;
 }
 
 .top2-content {
-  position: absolute;
-  left: 16px;
-  top: 82px;
-  width: 1264px;
-  height: 594px;
+  flex: 1;
+  display: flex;
+  gap: 16px;
 }
 
 .top2-left-col {
-  position: absolute;
-  left: 0;
-  top: 26.055px;
-  width: 232.377px;
-  height: 541.889px;
+  width: 314.937px;
+  height: 734px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .top2-center-col {
-  position: absolute;
-  left: 248.377px;
-  top: 25.15px;
   width: 744.126px;
-  height: 543.699px;
+  height: 734px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .top2-right-col {
-  position: absolute;
-  left: 1008.503px;
-  top: 25.907px;
-  width: 232.377px;
-  height: 542.186px;
+  width: 314.937px;
+  height: 734px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .panel-outline {
-  position: absolute;
+  position: relative;
   border: 0.297px solid #f0e2e2;
   border-radius: 10.684px;
   background: rgba(217, 217, 217, 0);
@@ -681,61 +680,126 @@ const addTop2Animation = () => {
 }
 
 .panel-left-top {
-  left: 0;
-  top: 0;
-  width: 232.377px;
-  height: 259.977px;
+  width: 314.937px;
+  height: 234px;
+}
+
+.panel-left-middle {
+  width: 314.937px;
+  height: 234px;
 }
 
 .panel-left-bottom {
-  left: 0;
-  top: 275.977px;
-  width: 232.377px;
-  height: 265.912px;
+  width: 314.937px;
+  height: 234px;
 }
 
 .panel-right-top {
-  left: 0;
-  top: 0;
-  width: 232.377px;
-  height: 259.977px;
+  width: 314.937px;
+  height: 359px;
 }
 
 .panel-right-bottom {
-  left: 0;
-  top: 275.977px;
-  width: 232.377px;
-  height: 266.209px;
+  width: 314.937px;
+  height: 359px;
 }
 
 .panel-center-bottom-left {
-  left: 0;
-  top: 0;
-  width: 360.668px;
-  height: 175.692px;
+  width: 364.063px;
+  height: 187.992px;
 }
 
 .panel-center-bottom-right {
-  left: 386.668px;
-  top: 0;
-  width: 357.216px;
-  height: 175.692px;
+  width: 364.063px;
+  height: 187.992px;
 }
 
 .top2-center {
-  position: absolute;
-  left: 0;
-  top: 0;
   width: 743.928px;
-  height: 352.007px;
+  height: 333.004px;
+  position: relative;
 }
 
 .top2-bottom-row {
-  position: absolute;
-  left: 0;
-  top: 368.007px;
   width: 744.126px;
-  height: 175.692px;
+  height: 187.992px;
+  display: flex;
+  gap: 16px;
+}
+
+.top2-cards {
+  height: 114px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 0;
+  box-sizing: border-box;
+}
+
+.top2-card {
+  width: 180.032px;
+  height: 98px;
+  border-radius: 16px;
+  background: rgba(37, 67, 165, 0.51);
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.top2-card-icon {
+  width: 51px;
+  height: 49px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.top2-card-icon img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.top2-card-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.top2-card-label {
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.top2-card-value {
+  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 1;
+}
+
+.top2-card-sub {
+  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  color: rgba(191, 191, 191, 0.61);
+}
+
+.top2-subheader {
+  height: 51px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  color: #ffffff;
 }
 
 .svg-wrapper.is-top2 {
@@ -752,45 +816,22 @@ const addTop2Animation = () => {
 
 .panel-label {
   position: absolute;
+  left: 50%;
+  top: 20px;
+  transform: translate(-50%, -50%);
   font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-  font-size: 18.994px;
+  font-size: 24px;
   font-weight: 700;
   color: #ffffff;
   letter-spacing: 0.2px;
-}
-
-.label-metric-11 {
-  left: 61.73px;
-  top: 91.7px;
-}
-
-.label-metric-21 {
-  left: 61.73px;
-  top: 121.68px;
-}
-
-.label-metric-22 {
-  left: 132.11px;
-  top: 76.27px;
-}
-
-.label-metric-23 {
-  left: 126.11px;
-  top: 76.27px;
+  text-align: center;
+  width: 220px;
 }
 
 .label-alarm {
-  left: 78.35px;
-  top: 18.7px;
   color: #f02525;
 }
 
-.label-fault {
-  left: 78.35px;
-  top: 22.85px;
-  color: #ffffff;
-}
-
 .svg-wrapper :deep(svg) {
   width: 100%;
   height: auto;