🎨 更新服务器列表样式并为购买链接添加悬停效果

- 为样式中的购买链接添加了新的悬停颜色。
- 调整了服务器列表组件中各列的宽度。
- 从首页视图布局中移除了不必要的内边距。
- 修复了服务器列表项宽度属性中的拼写错误。
- 引入了字段宽度映射，以更好地控制实时项目的布局。

src/assets/scss/variables.scss

@@ -25,6 +25,7 @@
 
   --list-item-price-color: #eee;
   --list-item-buy-link-color: #ffc300;
+  --list-item-buy-link-color-hover: #ff9900;
   --public-note-tag-color: #ddd;
   --public-note-tag-bg: linear-gradient(125deg, #8f94fb, #4e54c8);
 

src/views/components/server-list/row/server-list-column.vue

@@ -79,7 +79,7 @@ const columnStyle = computed(() => {
 
 <style lang="scss" scoped>
 .list-column {
-  width: 50px;
+  width: 60px;
 
   .list-column-content {
     --list-column-label-height: 16px;
@@ -115,7 +115,6 @@ const columnStyle = computed(() => {
   }
 
   &--transfer {
-    width: 80px;
     .item-value {
       color: var(--transfer-color);
     }
@@ -146,14 +145,12 @@ const columnStyle = computed(() => {
   }
 
   &--remaining-time {
-    width: 60px;
     .value-text {
       color: #74dbef;
     }
   }
 
   &--billing {
-    width: 60px;
     .value-text {
       color: var(--list-item-price-color);
     }

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

@@ -3,6 +3,7 @@
     v-if="extraFields?.remainingTime"
     prop="remaining-time"
     label="剩余"
+    :width="50"
     :value="billAndPlan?.remainingTime?.value || '-'"
   />
   <server-list-column
@@ -15,7 +16,7 @@
     v-if="extraFields?.orderLink"
     prop="order-link"
     label="链接"
-    wdith="80"
+    :wdith="80"
     :slot-content="true"
   >
     <span
@@ -76,5 +77,9 @@ function toBuy() {
 .order-link {
   color: var(--list-item-buy-link-color);
   cursor: pointer;
+
+  &:hover {
+    color: var(--list-item-buy-link-color-hover);
+  }
 }
 </style>

src/views/components/server-list/row/server-list-item-real-time.vue

@@ -6,6 +6,7 @@
     :label="item.label"
     :value="item.show ? item?.value : '-'"
     :unit="item.show ? item?.unit : ''"
+    :width="fieldWidth[item.key]"
   />
 </template>
 
@@ -42,4 +43,12 @@ const {
   currentTime,
   serverRealTimeListTpls: props.serverRealTimeListTpls,
 });
+
+const fieldWidth = {
+  transfer: 80,
+  load: 40,
+  inSpeed: 40,
+  outSpeed: 40,
+};
+
 </script>

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

@@ -31,6 +31,7 @@
         prop="server-flag"
         label="地区"
         :value="info?.Host?.CountryCode?.toUpperCase() || 'UN'"
+        :width="40"
       />
       <server-list-column
         prop="server-system"
@@ -165,7 +166,7 @@ function openDetail() {
     }
   }
   &--server-name {
-    width: 200px;
+    width: 220px;
 
     .server-name {
       height: 32px;

src/views/home.vue

@@ -331,7 +331,6 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: var(--list-gap-size);
-  // padding: 0 var(--list-padding);
   width: var(--list-container-width);
   margin: auto;
 }