✨ 更新样式变量，优化服务器信息展示，添加套餐信息和购买链接功能

src/assets/scss/variables.scss

@@ -8,11 +8,21 @@
   --detail-container-width: 900px;
 
   --layout-main-bg-color: rgba(20, 30, 40, 0.75);
-  
   --layout-bg-color: #252748;
+  
   --world-map-point-color: #fff143;
+
+  --duration-color: #cbf1f5;
+  --transfer-color: #f9ed69;
+  --transfer-in-color: var(--transfer-color);
+  --transfer-out-color: #90f2ff;
+  --net-speed-in-color: #f5b199;
+  --net-speed-out-color: #89c3eb;
+
   --list-item-price-color: #eee;
   --list-item-buy-link-color: #ffc300;
+  --public-note-tag-color: #ddd;
+  --public-note-tag-bg: #6a7efc;
 
   // 针对1440px以下的屏幕
   @media screen and (max-width: 1440px) {

src/layout/components/header.vue

@@ -20,20 +20,20 @@
             <span class="value">{{ serverCount.total }}</span>
             <span class="text">台服务器</span>
           </span>
-          <span
+          <template v-if="serverCount.online !== serverCount.total">
-            v-if="serverCount.online !== serverCount.total"
+            <span
-            class="server-count server-count--online"
+              class="server-count server-count--online"
-          >
+            >
-            <span class="text">在线</span>
+              <span class="text">在线</span>
-            <span class="value">{{ serverCount.online }}</span>
+              <span class="value">{{ serverCount.online }}</span>
-          </span>
+            </span>
-          <span
+            <span
-            v-if="serverCount.offline"
+              class="server-count server-count--offline"
-            class="server-count server-count--offline"
+            >
-          >
+              <span class="text">离线</span>
-            <span class="text">离线</span>
+              <span class="value">{{ serverCount.offline }}</span>
-            <span class="value">{{ serverCount.offline }}</span>
+            </span>
-          </span>
+          </template>
         </div>
         <div
           v-if="serverStat && showServerStat"
@@ -268,28 +268,28 @@ onMounted(() => {
   .server-count-group {
     display: flex;
     gap: 10px;
-    line-height: 30px;
-  }
 
-  .server-count {
+    .server-count {
-    display: flex;
+      display: flex;
-    align-items: center;
+      align-items: center;
-    gap: 3px;
+      gap: 3px;
-    color: #ddd;
+      color: #ddd;
+      line-height: 30px;
 
-    &.server-count--total {
+      &.server-count--total {
-      .value {
+        .value {
-        color: #70f3ff;
+          color: #70f3ff;
+        }
       }
-    }
+      &.server-count--online {
-    &.server-count--online {
+        .value {
-      .value {
+          color: #0f0;
-        color: #0f0;
+        }
       }
-    }
+      &.server-count--offline {
-    &.server-count--offline {
+        .value {
-      .value {
+          color: #f00;
-        color: #f00;
+        }
       }
     }
   }
@@ -308,8 +308,9 @@ onMounted(() => {
 
   .right-box {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 20px;
+    gap: 0 20px;
     color: #ddd;
   }
 
@@ -331,16 +332,31 @@ onMounted(() => {
     .server-stat-item {
       flex: 1;
     }
-
+  }
+  .server-stat--transfer {
     .server-stat-item--in {
       .text-value {
-        color: #ffc93c;
+        color: var(--transfer-in-color);
       }
     }
 
     .server-stat-item--out {
       .text-value {
-        color: #90f2ff;
+        color: var(--transfer-out-color);
+      }
+    }
+  }
+
+  .server-stat--net-speed {
+    .server-stat-item--in {
+      .text-value {
+        color: var(--net-speed-in-color);
+      }
+    }
+
+    .server-stat-item--out {
+      .text-value {
+        color: var(--net-speed-out-color);
       }
     }
   }

src/views/components/server-detail/server-info-box.vue

@@ -72,11 +72,17 @@
         <span class="server-info-item-group">
           <span class="server-info-item transfer--in">
             <span class="server-info-item-label">入网</span>
-            <span class="server-info-item-value">{{ transfer?.in?.value }}{{ transfer?.in?.unit }}</span>
+            <span class="server-info-item-value">
+              <span class="text-value">{{ transfer?.in?.value }}</span>
+              <span class="text-unit">{{ transfer?.in?.unit }}</span>
+            </span>
           </span>
           <span class="server-info-item transfer--out">
             <span class="server-info-item-label">出网</span>
-            <span class="server-info-item-value">{{ transfer?.out?.value }}{{ transfer?.out?.unit }}</span>
+            <span class="server-info-item-value">
+              <span class="text-value">{{ transfer?.out?.value }}</span>
+              <span class="text-unit">{{ transfer?.out?.unit }}</span>
+            </span>
           </span>
         </span>
       </div>
@@ -118,25 +124,6 @@
         </span>
       </div>
     </div>
-    <div
-      v-if="tagList?.length"
-      class="server-info-group server-info--tag-list"
-    >
-      <div class="server-info-label">
-        标签
-      </div>
-      <div class="server-info-content">
-        <div class="server-info-tag-list">
-          <span
-            v-for="(tag, index) in tagList"
-            :key="`${tag}_${index}`"
-            class="server-info-tag-item"
-          >
-            {{ tag }}
-          </span>
-        </div>
-      </div>
-    </div>
     <div
       v-if="billPlanData.length"
       class="server-info-group server-info--biil-plan"
@@ -157,19 +144,44 @@
             >{{ item.label }}</span>
             <span class="server-info-item-value">{{ item.value }}</span>
           </span>
-          <div
-            v-if="showBuyBtn"
-            class="buy-btn"
-            @click.stop="toBuy"
-          >
-            <span class="icon">
-              <span class="ri-shopping-bag-3-line" />
-            </span>
-            <span class="text">{{ buyBtnText }}</span>
-          </div>
         </span>
       </div>
     </div>
+    <div
+      v-if="tagList?.length"
+      class="server-info-group server-info--tag-list"
+    >
+      <div class="server-info-label">
+        标签
+      </div>
+      <div class="server-info-content">
+        <div class="server-info-tag-list">
+          <span
+            v-for="(tag, index) in tagList"
+            :key="`${tag}_${index}`"
+            class="server-info-tag-item"
+          >
+            {{ tag }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="showBuyBtn"
+      class="server-info-group server-info--order-link"
+    >
+      <div class="server-info-content">
+        <div
+          class="buy-btn"
+          @click.stop="toBuy"
+        >
+          <span class="icon">
+            <span class="ri-shopping-bag-3-line" />
+          </span>
+          <span class="text">{{ buyBtnText }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -340,28 +352,59 @@ const processCount = computed(() => props.info?.State?.ProcessCount);
   }
 
   .server-info-item-value {
-    color: #a1eafb;
+    color: #00fff0;
   }
 
-  .transfer--total {
+  .transfer--in {
     .server-info-item-value {
-      color: #fdfdfd;
+      color: #ddd;
+    }
+    .text-value {
+      color: var(--transfer-in-color);
     }
   }
 
+  .transfer--out {
+    .server-info-item-value {
+      color: #ddd;
+    }
+    .text-value {
+      color: var(--transfer-out-color);
+    }
+  }
+
+  .server-info--order-link {
+    padding: 10px 0 0;
+  }
   .buy-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 4px;
+    height: 36px;
-    line-height: 18px;
+    padding: 0 10px;
+    gap: 5px;
+    line-height: 1;
     font-weight: bold;
     color: var(--list-item-buy-link-color);
+    border: 2px solid var(--list-item-buy-link-color);
+    border-radius: 8px;
+    transition: all 150ms ease;
     cursor: pointer;
 
+    &:hover {
+      color: #111;
+      border-color: var(--list-item-buy-link-color);
+      background-color: var(--list-item-buy-link-color);
+    }
+
     @media screen and (max-width: 768px) {
       cursor: default;
     }
+
+    .icon {
+      font-size: 18px;
+      font-weight: normal;
+    }
   }
 
   .server-info-tag-list {
@@ -370,11 +413,11 @@ const processCount = computed(() => props.info?.State?.ProcessCount);
 
     .server-info-tag-item {
       height: 18px;
-      padding: 0 4px;
+      padding: 0 5px 0 6px;
-      line-height: 18px;
+      line-height: 20px;
       font-size: 12px;
-      color: #ddd;
+      color: var(--public-note-tag-color);
-      background-color: #294a66;
+      background-color: var(--public-note-tag-bg);
       border-radius: 4px;
     }
   }

src/views/components/server-list/server-list-item-bill.vue

@@ -97,6 +97,9 @@ const tagList = computed(() => {
   if (props?.info?.PublicNote?.planDataMod?.networkRoute) {
     list.push(...props.info.PublicNote.planDataMod.networkRoute.split(','));
   }
+  if (props?.info?.PublicNote?.planDataMod?.extra) {
+    list.push(...props.info.PublicNote.planDataMod.extra.split(','));
+  }
   return list;
 });
 </script>
@@ -106,6 +109,7 @@ const tagList = computed(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 20px;
   height: 40px;
   border-bottom-left-radius: var(--list-item-border-radius);
   border-bottom-right-radius: var(--list-item-border-radius);
@@ -143,14 +147,17 @@ const tagList = computed(() => {
   .tag-list {
     display: flex;
     gap: 6px;
+    // 折行隐藏
+    height: 18px;
+    overflow: hidden;
 
     .tag-item {
       height: 18px;
       padding: 0 4px;
-      line-height: 18px;
+      line-height: 20px;
       font-size: 12px;
-      color: #ddd;
+      color: var(--public-note-tag-color);
-      background-color: #294a66;
+      background-color: var(--public-note-tag-bg);
       border-radius: 4px;
     }
   }

src/views/components/server/server-real-time.vue

@@ -81,22 +81,22 @@ const {
 
   .server-real-time--duration {
     .item-value {
-      color: #cbf1f5;
+      color: var(--duration-color);
     }
   }
   .server-real-time--transfer {
     .item-value {
-      color: #ffc300;
+      color: var(--transfer-color);
     }
   }
   .server-real-time--inSpeed {
     .item-value {
-      color: #46cdcf;
+      color: var(--net-speed-in-color);
     }
   }
   .server-real-time--outSpeed {
     .item-value {
-      color: #abedd8;
+      color: var(--net-speed-out-color);
     }
   }
 }