更新服务器信息框,调整CPU和GPU显示逻辑,优化套餐信息展示

This commit is contained in:
hi2hi 2024-12-04 01:54:14 +00:00
parent 10d0b0e8ee
commit 747df55ba9

View File

@ -1,41 +1,8 @@
<template>
<div class="server-info-box">
<div
v-if="billPlanData.length"
class="server-info-group server-info--biil-plan"
>
<div class="server-info-label">
套餐
</div>
<div class="server-info-content">
<span class="server-info-item-group">
<span
v-for="item in billPlanData"
:key="item.label"
class="server-info-item"
>
<span
v-if="item.label"
class="server-info-item-label"
>{{ 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 class="server-info-group server-info--cpu">
<div class="server-info-label">
平台
CPU
</div>
<div class="server-info-content">
<span
@ -46,6 +13,22 @@
</span>
</div>
</div>
<div
v-if="info?.Host?.GPU?.[0]"
class="server-info-group server-info--gpu"
>
<div class="server-info-label">
GPU
</div>
<div class="server-info-content">
<span
class="cpu-info"
:title="info?.Host?.GPU?.[0]"
>
<span>{{ info?.Host?.GPU?.[0] }}</span>
</span>
</div>
</div>
<div class="server-info-group server-info--system-os">
<div class="server-info-label">
系统
@ -154,6 +137,39 @@
</div>
</div>
</div>
<div
v-if="billPlanData.length"
class="server-info-group server-info--biil-plan"
>
<div class="server-info-label">
套餐
</div>
<div class="server-info-content">
<span class="server-info-item-group">
<span
v-for="item in billPlanData"
:key="item.label"
class="server-info-item"
>
<span
v-if="item.label"
class="server-info-item-label"
>{{ 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>
</template>
@ -293,6 +309,8 @@ const processCount = computed(() => props.info?.State?.ProcessCount);
font-size: 14px;
.server-info-label {
width: 2.4em;
text-align: center;
line-height: var(--server-info-item-size);
color: #ccc;
}