From 5b1a54beeb7ee2c22d0420ebf370cce367735cea Mon Sep 17 00:00:00 2001 From: hi2hi Date: Wed, 4 Dec 2024 05:42:17 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=8F=98=E9=87=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E6=9C=8D?= =?UTF-8?q?=E5=8A=A1=E5=99=A8=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=EF=BC=8C?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A5=97=E9=A4=90=E4=BF=A1=E6=81=AF=E5=92=8C?= =?UTF-8?q?=E8=B4=AD=E4=B9=B0=E9=93=BE=E6=8E=A5=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/scss/variables.scss | 12 +- src/layout/components/header.vue | 88 ++++++++----- .../server-detail/server-info-box.vue | 123 ++++++++++++------ .../server-list/server-list-item-bill.vue | 13 +- .../components/server/server-real-time.vue | 8 +- 5 files changed, 160 insertions(+), 84 deletions(-) diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index b92725b..d9e809f 100644 --- a/src/assets/scss/variables.scss +++ b/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) { diff --git a/src/layout/components/header.vue b/src/layout/components/header.vue index c074449..157b3fb 100644 --- a/src/layout/components/header.vue +++ b/src/layout/components/header.vue @@ -20,20 +20,20 @@ {{ serverCount.total }} 台服务器 - - 在线 - {{ serverCount.online }} - - - 离线 - {{ serverCount.offline }} - +
{ .server-count-group { display: flex; gap: 10px; - line-height: 30px; - } - .server-count { - display: flex; - align-items: center; - gap: 3px; - color: #ddd; + .server-count { + display: flex; + align-items: center; + gap: 3px; + color: #ddd; + line-height: 30px; - &.server-count--total { - .value { - color: #70f3ff; + &.server-count--total { + .value { + color: #70f3ff; + } } - } - &.server-count--online { - .value { - color: #0f0; + &.server-count--online { + .value { + color: #0f0; + } } - } - &.server-count--offline { - .value { - color: #f00; + &.server-count--offline { + .value { + 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); } } } diff --git a/src/views/components/server-detail/server-info-box.vue b/src/views/components/server-detail/server-info-box.vue index 06f9455..9c4c159 100644 --- a/src/views/components/server-detail/server-info-box.vue +++ b/src/views/components/server-detail/server-info-box.vue @@ -72,11 +72,17 @@ 入网 - {{ transfer?.in?.value }}{{ transfer?.in?.unit }} + + {{ transfer?.in?.value }} + {{ transfer?.in?.unit }} + 出网 - {{ transfer?.out?.value }}{{ transfer?.out?.unit }} + + {{ transfer?.out?.value }} + {{ transfer?.out?.unit }} +
@@ -118,25 +124,6 @@ -
-
- 标签 -
-
-
- - {{ tag }} - -
-
-
{{ item.label }} {{ item.value }} -
- - - - {{ buyBtnText }} -
+
+
+ 标签 +
+
+
+ + {{ tag }} + +
+
+
+
+
+
+ + + + {{ buyBtnText }} +
+
+
@@ -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; - line-height: 18px; + height: 36px; + 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; - line-height: 18px; + padding: 0 5px 0 6px; + line-height: 20px; font-size: 12px; - color: #ddd; - background-color: #294a66; + color: var(--public-note-tag-color); + background-color: var(--public-note-tag-bg); border-radius: 4px; } } diff --git a/src/views/components/server-list/server-list-item-bill.vue b/src/views/components/server-list/server-list-item-bill.vue index d7acc40..4c6ab0f 100644 --- a/src/views/components/server-list/server-list-item-bill.vue +++ b/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; }); @@ -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; - background-color: #294a66; + color: var(--public-note-tag-color); + background-color: var(--public-note-tag-bg); border-radius: 4px; } } diff --git a/src/views/components/server/server-real-time.vue b/src/views/components/server/server-real-time.vue index 3612d04..821d1a5 100644 --- a/src/views/components/server/server-real-time.vue +++ b/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); } } }