修改
This commit is contained in:
qiuyuan
parent
11040b100b
commit
6760b36a66
BIN
src/assets/bgImg.png
Normal file
BIN
src/assets/bgImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
@ -1,204 +1,107 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="instance-create-container">
|
<div class="instance-create-container">
|
||||||
<!-- 警告提示 -->
|
<div class="header">
|
||||||
<a-alert class="autodl-tip" message="严禁使用WebUI等算法生成违禁图片、严禁挖矿，一经发现立即封号！" type="warning" show-icon closable />
|
<h1>算力中心</h1>
|
||||||
|
<h2>聚焦高效算力服务，为数字产业、智能应用提供强支撑</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 服务器选择 -->
|
<div class="instance-create-body">
|
||||||
<a-card class="card select-server" title="服务器选择">
|
<!-- 筛选区域（保持不变） -->
|
||||||
|
<a-card class="card select-server">
|
||||||
<div class="list-filter">
|
<div class="list-filter">
|
||||||
<div class="filter-item">
|
<div class="filter-item"> <span class="filter-label">计费方式:</span>
|
||||||
<span class="filter-label">计费方式:</span>
|
<div class="filter-content"> <a-radio-group v-model:value="billingType" button-style="solid"
|
||||||
<div class="filter-content">
|
@change="handleBillingTypeChange"> <a-radio-button v-for="type in billingTypeOptions" :key="type.value"
|
||||||
<a-radio-group v-model:value="billingType" button-style="solid" @change="handleBillingTypeChange">
|
:value="type.value"> {{ type.label }} </a-radio-button> </a-radio-group> </div>
|
||||||
<a-radio-button v-for="type in billingTypeOptions" :key="type.value" :value="type.value">
|
</div> <!-- 选择地区 -->
|
||||||
{{ type.label }}
|
<div class="filter-item"> <span class="filter-label">选择地区:</span>
|
||||||
</a-radio-button>
|
<div class="filter-content"> <a-radio-group v-model:value="selectedRegion" button-style="solid"
|
||||||
</a-radio-group>
|
@change="handleRegionChange"> <a-radio-button v-for="region in regions" :key="region.value"
|
||||||
</div>
|
:value="region.value"> {{ region.label }} <a-tag v-if="region.tag" :color="region.tag.color"
|
||||||
</div>
|
class="region-tag">{{ region.tag.text }}</a-tag> </a-radio-button> </a-radio-group> </div>
|
||||||
|
</div> <!-- 专区选择 -->
|
||||||
<!-- 选择地区 -->
|
<div class="filter-item" v-if="showZones"> <span class="filter-label">选择专区:</span>
|
||||||
<div class="filter-item">
|
<div class="filter-content"> <a-radio-group v-model:value="selectedZone" button-style="solid"
|
||||||
<span class="filter-label">选择地区:</span>
|
@change="handleZoneChange"> <a-radio-button v-for="zone in availableZones" :key="zone.value"
|
||||||
<div class="filter-content">
|
:value="zone.value"> {{ zone.label }} </a-radio-button> </a-radio-group> </div>
|
||||||
<a-radio-group v-model:value="selectedRegion" button-style="solid" @change="handleRegionChange">
|
</div> <!-- GPU型号 -->
|
||||||
<a-radio-button v-for="region in regions" :key="region.value" :value="region.value">
|
<div class="filter-item"> <span class="filter-label">GPU型号:</span>
|
||||||
{{ region.label }}
|
<div class="filter-content"> <a-checkbox-group v-model:value="selectedGpuModels"
|
||||||
<a-tag v-if="region.tag" :color="region.tag.color" class="region-tag">{{ region.tag.text }}</a-tag>
|
@change="handleGpuModelChange"> <a-checkbox value="all"
|
||||||
</a-radio-button>
|
:disabled="selectedGpuModels.length > 0 && selectedGpuModels[0] !== 'all'">全部</a-checkbox> <a-checkbox
|
||||||
</a-radio-group>
|
v-for="model in availableGpuModels" :key="model.value" :value="model.value"
|
||||||
</div>
|
:disabled="model.available === 0"> {{ model.label }} <span class="note"> ({{ model.available }}/{{
|
||||||
</div>
|
model.total }})</span> </a-checkbox> </a-checkbox-group> </div>
|
||||||
|
</div> <!-- GPU数量 -->
|
||||||
<!-- 专区选择 -->
|
<div class="filter-item"> <span class="filter-label">GPU数量:</span>
|
||||||
<div class="filter-item" v-if="showZones">
|
<div class="filter-content"> <a-select :size="'large'" default-value="1" style="width: 200px"
|
||||||
<span class="filter-label">选择专区:</span>
|
@change="handleGpuCountChange"> <a-select-option v-for="count in gpuCountOptions" :key="count"
|
||||||
<div class="filter-content">
|
:value="count"> {{ count }} </a-select-option> </a-select> </div>
|
||||||
<a-radio-group v-model:value="selectedZone" button-style="solid" @change="handleZoneChange">
|
|
||||||
<a-radio-button v-for="zone in availableZones" :key="zone.value" :value="zone.value">
|
|
||||||
{{ zone.label }}
|
|
||||||
</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- GPU型号 -->
|
|
||||||
<div class="filter-item">
|
|
||||||
<span class="filter-label">GPU型号:</span>
|
|
||||||
<div class="filter-content">
|
|
||||||
<a-checkbox-group v-model:value="selectedGpuModels" @change="handleGpuModelChange">
|
|
||||||
<a-checkbox value="all" :disabled="selectedGpuModels.length > 0 && selectedGpuModels[0] !== 'all'">全部</a-checkbox>
|
|
||||||
<a-checkbox v-for="model in availableGpuModels" :key="model.value" :value="model.value" :disabled="model.available === 0">
|
|
||||||
{{ model.label }}
|
|
||||||
<span class="note"> ({{ model.available }}/{{ model.total }})</span>
|
|
||||||
</a-checkbox>
|
|
||||||
</a-checkbox-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- GPU数量 -->
|
|
||||||
<div class="filter-item">
|
|
||||||
<span class="filter-label">GPU数量:</span>
|
|
||||||
<div class="filter-content">
|
|
||||||
<a-radio-group v-model:value="gpuCount" button-style="solid" @change="handleGpuCountChange">
|
|
||||||
<a-radio-button v-for="count in gpuCountOptions" :key="count" :value="count" :disabled="isGpuCountDisabled(count)">
|
|
||||||
{{ count }}
|
|
||||||
</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
||||||
<!-- 机器列表区域 -->
|
<!-- 机器列表 -->
|
||||||
<a-card class="card machine-list" title="机器列表">
|
<a-card class="card machine-list" >
|
||||||
|
<div class="image-card-container">
|
||||||
<!-- 新的卡片式布局 -->
|
<div v-for="record in paginatedMachineList" :key="record.id" class="image-card"
|
||||||
<div class="machine-card-container">
|
:class="{ selected: selectedMachineId === record.id }" @click="handleSelectMachine(record.id)">
|
||||||
<div
|
<!-- 顶部 -->
|
||||||
v-for="record in paginatedMachineList"
|
<div class="image-card-header">
|
||||||
:key="record.id"
|
<div class="gpu-title">
|
||||||
class="machine-card"
|
{{ record.gpuModel }} {{ record.gpuMemory }}
|
||||||
:class="{ 'selected-card': selectedMachineId === record.id }"
|
|
||||||
@click="handleSelectMachine(record.id)"
|
|
||||||
>
|
|
||||||
<!-- 卡片头部信息 -->
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="location-info">
|
|
||||||
<span>{{ record.region === 'beijingDC2' ? '北京B区' : record.region }}</span>
|
|
||||||
<span class="separator">/</span>
|
|
||||||
<span>{{ record.machineName }}</span>
|
|
||||||
<span class="id-code">
|
|
||||||
｜ {{ record.id }}
|
|
||||||
<span style="margin-left: 20px;">可租用至：2027-01-01</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="gpu-availability">
|
||||||
<div class="gpu-spec">
|
空闲 / 总量
|
||||||
<div class="gpu-model">{{ record.gpuModel }}</div>
|
<strong style="font-size: 18px;">{{ record.freeGpu }}</strong> / {{ record.totalGpu }}
|
||||||
<div class="gpu-memory">/ {{ record.gpuMemory }}</div>
|
|
||||||
<div class="availability">
|
|
||||||
空闲/总量 <span style="font-size: 18px;color: #333;">{{ record.freeGpu }}</span> / {{ record.totalGpu }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 中部信息 -->
|
||||||
|
<div class="image-card-info">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-item-name">CPU</span>
|
||||||
|
<span class="info-item-account">{{ record.cpuCores }} 核</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
<!-- 主要规格信息 -->
|
<span class="info-item-name">内存</span>
|
||||||
<div class="card-body">
|
<span class="info-item-account">{{ record.memory }} GB</span>
|
||||||
|
|
||||||
|
|
||||||
<div class="specs-grid">
|
|
||||||
<!-- 每GPU分配 -->
|
|
||||||
<div class="spec-column">
|
|
||||||
<div class="spec-title">每GPU分配</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<div class="spec-label">CPU:</div>
|
|
||||||
<div class="spec-value">{{ record.cpuCores }} 核, {{ record.cpuModel }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="spec-item">
|
<div class="info-item">
|
||||||
<div class="spec-label">内存:</div>
|
<span class="info-item-name">显存</span>
|
||||||
<div class="spec-value">{{ record.memory }} GB</div>
|
<span class="info-item-account">{{ record.gpuMemory }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-item-name">系统盘</span>
|
||||||
|
<span class="info-item-account">30 GB</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 硬盘 -->
|
<!-- 底部价格 -->
|
||||||
<div class="spec-column">
|
<div class="image-card-footer">
|
||||||
<div class="spec-title">硬盘</div>
|
<div class="price">
|
||||||
<div class="spec-item">
|
<span class="price-num">{{ getPrice(record) }}</span>
|
||||||
<div class="spec-label">系统盘:</div>
|
<span class="price-unit">元/卡/小时</span>
|
||||||
<div class="spec-value">30 GB</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="spec-item">
|
<a-button type="primary" class="buy-btn" :disabled="record.freeGpu === 0"
|
||||||
<div class="spec-label">数据盘:</div>
|
@click.stop="handleRentMachine(record.id)">
|
||||||
<div class="spec-value">{{ record.dataDisk }} GB，可扩容 {{ record.expandableDisk }} GB</div>
|
立即购买
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 其它信息 -->
|
|
||||||
<div class="spec-column">
|
|
||||||
<div class="spec-title">其它</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<div class="spec-label">GPU驱动:</div>
|
|
||||||
<div class="spec-value">{{ record.driver }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<div class="spec-label">CUDA版本:</div>
|
|
||||||
<div class="spec-value">{{ record.cuda }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 价格信息 -->
|
|
||||||
<div class="price-column">
|
|
||||||
<div class="price-info">
|
|
||||||
<div class="current-price">
|
|
||||||
¥<strong>{{ getPrice(record) }}</strong>/时
|
|
||||||
</div>
|
|
||||||
<div class="original-price">
|
|
||||||
¥{{ getOriginalPrice(record) }}/时
|
|
||||||
</div>
|
|
||||||
<div class="discount-badge">
|
|
||||||
<span class="discount-icon">💰</span>
|
|
||||||
<span class="discount-text">9.5折</span>
|
|
||||||
</div>
|
|
||||||
<div class="member-note">
|
|
||||||
会员最低享9.5折 ¥2.98/时
|
|
||||||
</div>
|
|
||||||
<a-button type="primary" class="rent-button" @click="handleRentMachine(record.id)">
|
|
||||||
{{ record.freeGpu > 0 ? '1卡可租' : '暂不可租' }}
|
|
||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div class="pagination-container">
|
<div class="pagination-container">
|
||||||
<a-pagination
|
<a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" :total="filteredMachineList.length"
|
||||||
v-model:current="currentPage"
|
show-size-changer show-quick-jumper />
|
||||||
v-model:pageSize="pageSize"
|
|
||||||
:total="filteredMachineList.length"
|
|
||||||
:show-size-changer="true"
|
|
||||||
:page-size-options="['10', '20', '50', '100']"
|
|
||||||
show-quick-jumper
|
|
||||||
show-total
|
|
||||||
:show-total="total => `共 ${total} 台机器`"
|
|
||||||
@change="handlePageChange"
|
|
||||||
@showSizeChange="handlePageSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 空状态 -->
|
|
||||||
<div v-if="filteredMachineList.length === 0" class="empty-state">
|
|
||||||
<a-empty description="暂无可用机器，请尝试调整筛选条件" />
|
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, reactive, watch } from 'vue'
|
import { ref, computed, reactive, watch } from 'vue'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
@ -431,12 +334,13 @@ const billingTypeOptions = ref([
|
|||||||
{ value: 'payg', label: '按量计费' },
|
{ value: 'payg', label: '按量计费' },
|
||||||
{ value: 'daily', label: '包日' },
|
{ value: 'daily', label: '包日' },
|
||||||
{ value: 'weekly', label: '包周' },
|
{ value: 'weekly', label: '包周' },
|
||||||
{ value: 'monthly', label: '包月' }
|
{ value: 'monthly', label: '包月' },
|
||||||
|
{ value: 'year', label: '包年' }
|
||||||
])
|
])
|
||||||
|
|
||||||
const regions = ref<RegionOption[]>([
|
const regions = ref<RegionOption[]>([
|
||||||
{ value: 'beijingDC2', label: '北京B区' },
|
{ value: 'beijingDC2', label: '北京B区' },
|
||||||
{ value: 'westDC3', label: '西北B区', tag: { color: 'red', text: 'PRO6000' } },
|
{ value: 'westDC3', label: '西北B区' },
|
||||||
{ value: 'chongqingDC1', label: '重庆A区' },
|
{ value: 'chongqingDC1', label: '重庆A区' },
|
||||||
{ value: 'neimengDC3', label: '内蒙B区' },
|
{ value: 'neimengDC3', label: '内蒙B区' },
|
||||||
{ value: 'beijingDC1', label: '北京A区' },
|
{ value: 'beijingDC1', label: '北京A区' },
|
||||||
@ -747,7 +651,7 @@ const getRowClassName = (record: Machine) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 一卡可租
|
// 一卡可租
|
||||||
const handleRentMachine = (id:string) => {
|
const handleRentMachine = (id: string) => {
|
||||||
router.push("/layout/create")
|
router.push("/layout/create")
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -864,19 +768,50 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
/* 强制让容器参与文档流并允许增长 */
|
/* 强制让容器参与文档流并允许增长 */
|
||||||
.instance-create-container {
|
.instance-create-container {
|
||||||
display: block;
|
display: block;
|
||||||
width: 90%;
|
width: 100%;
|
||||||
max-width: 1200px;
|
// max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background: #fff;
|
/* background: #fff; */
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
/* 关键：确保它能自然撑高 */
|
/* 关键：确保它能自然撑高 */
|
||||||
min-height: fit-content;
|
min-height: fit-content;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
background: url('@/assets/bgImg.png') no-repeat center / 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px 0 20px 0;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 50px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 60px;
|
||||||
|
color: rgba(166, 166, 166, 1);
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.instance-create-body {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
@ -915,6 +850,8 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
|
|
||||||
|
color: rgba(128, 128, 128, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-content {
|
.filter-content {
|
||||||
@ -1333,6 +1270,14 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.machine-card-container.two-columns {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
/* 两列布局 */
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
/* 新增的卡片式布局样式 */
|
/* 新增的卡片式布局样式 */
|
||||||
.machine-card-container {
|
.machine-card-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1347,11 +1292,15 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
background: white;
|
background: white;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
/* 确保卡片高度一致 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.machine-card:hover {
|
.machine-card:hover {
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1361,20 +1310,20 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
padding: 16px 24px;
|
padding: 16px 20px;
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
border-bottom: 1px solid #e8e8e8;
|
border-bottom: 1px solid #e8e8e8;
|
||||||
/* display: flex;
|
border-radius: 8px 8px 0 0;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-info {
|
.location-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-info .separator {
|
.location-info .separator {
|
||||||
@ -1392,17 +1341,20 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
padding: 24px;
|
padding: 20px;
|
||||||
|
flex: 1;
|
||||||
|
/* 让card-body填满剩余空间 */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gpu-spec {
|
.gpu-spec {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 15px;
|
margin-top: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gpu-model {
|
.gpu-model {
|
||||||
@ -1428,9 +1380,12 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
|
|
||||||
.specs-grid {
|
.specs-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 24px;
|
/* 内部也使用两列 */
|
||||||
|
gap: 16px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
flex: 1;
|
||||||
|
/* 让规格网格填满空间 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.spec-column {
|
.spec-column {
|
||||||
@ -1463,18 +1418,19 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.price-column {
|
.price-column {
|
||||||
display: flex;
|
grid-column: span 2;
|
||||||
flex-direction: column;
|
/* 价格信息占据两列的宽度 */
|
||||||
align-items: flex-end;
|
margin-top: 12px;
|
||||||
gap: 12px;
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-info {
|
.price-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
width: 100%;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-price {
|
.current-price {
|
||||||
@ -1519,15 +1475,123 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rent-button {
|
.rent-button {
|
||||||
width: 100px;
|
width: 120px;
|
||||||
height: 32px;
|
height: 36px;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-card-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-card:hover {
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-card.selected {
|
||||||
|
border-color: #1890ff;
|
||||||
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部 */
|
||||||
|
.image-card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-availability {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 中部信息 */
|
||||||
|
.image-card-info {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
row-gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.info-item-name{
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item-account{
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部 */
|
||||||
|
.image-card-footer {
|
||||||
|
margin-top: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: #f5222d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-num {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-unit {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 4px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式 */
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.image-card-container {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 响应式设计 - 小屏幕适配 */
|
/* 响应式设计 - 小屏幕适配 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
.image-card-container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
.specs-grid {
|
.specs-grid {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user