1619 lines
34 KiB
Vue
1619 lines
34 KiB
Vue
<template>
|
||
<div class="instance-create-container">
|
||
<div class="header">
|
||
<h1>算力中心</h1>
|
||
<h2>聚焦高效算力服务，为数字产业、智能应用提供强支撑</h2>
|
||
</div>
|
||
|
||
<div class="instance-create-body">
|
||
<!-- 筛选区域（保持不变） -->
|
||
<a-card class="card select-server">
|
||
<div class="list-filter">
|
||
<div class="filter-item"> <span class="filter-label">计费方式:</span>
|
||
<div class="filter-content"> <a-radio-group v-model:value="billingType" button-style="solid"
|
||
@change="handleBillingTypeChange"> <a-radio-button v-for="type in billingTypeOptions" :key="type.value"
|
||
:value="type.value"> {{ type.label }} </a-radio-button> </a-radio-group> </div>
|
||
</div> <!-- 选择地区 -->
|
||
<div class="filter-item"> <span class="filter-label">选择地区:</span>
|
||
<div class="filter-content"> <a-radio-group v-model:value="selectedRegion" button-style="solid"
|
||
@change="handleRegionChange"> <a-radio-button v-for="region in regions" :key="region.value"
|
||
:value="region.value"> {{ region.label }} <a-tag v-if="region.tag" :color="region.tag.color"
|
||
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-content"> <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-select :size="'large'" default-value="1" style="width: 200px"
|
||
@change="handleGpuCountChange"> <a-select-option v-for="count in gpuCountOptions" :key="count"
|
||
:value="count"> {{ count }} </a-select-option> </a-select> </div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
|
||
<!-- 机器列表 -->
|
||
<a-card class="card machine-list" >
|
||
<div class="image-card-container">
|
||
<div v-for="record in paginatedMachineList" :key="record.id" class="image-card"
|
||
:class="{ selected: selectedMachineId === record.id }" @click="handleSelectMachine(record.id)">
|
||
<!-- 顶部 -->
|
||
<div class="image-card-header">
|
||
<div class="gpu-title">
|
||
{{ record.gpuModel }} {{ record.gpuMemory }}
|
||
</div>
|
||
<div class="gpu-availability">
|
||
空闲 / 总量
|
||
<strong style="font-size: 18px;">{{ record.freeGpu }}</strong> / {{ record.totalGpu }}
|
||
</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 class="info-item">
|
||
<span class="info-item-name">内存</span>
|
||
<span class="info-item-account">{{ record.memory }} GB</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">显存</span>
|
||
<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 class="image-card-footer">
|
||
<div class="price">
|
||
<span class="price-num">{{ getPrice(record) }}</span>
|
||
<span class="price-unit">元/卡/小时</span>
|
||
</div>
|
||
<a-button type="primary" class="buy-btn" :disabled="record.freeGpu === 0"
|
||
@click.stop="handleRentMachine(record.id)">
|
||
立即购买
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="pagination-container">
|
||
<a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" :total="filteredMachineList.length"
|
||
show-size-changer show-quick-jumper />
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, reactive, watch } from 'vue'
|
||
import { message } from 'ant-design-vue'
|
||
import type { TableColumnsType } from 'ant-design-vue'
|
||
import { useRouter } from 'vue-router'
|
||
const router = useRouter();
|
||
// 类型定义
|
||
interface Machine {
|
||
id: string
|
||
machineName: string
|
||
gpuModel: string
|
||
gpuMemory: string
|
||
freeGpu: number
|
||
totalGpu: number
|
||
cpuCores: number
|
||
memory: number
|
||
cpuModel: string
|
||
dataDisk: number
|
||
expandableDisk: number
|
||
driver: string
|
||
cuda: string
|
||
basePrice: number
|
||
originalPrice?: number
|
||
region: string
|
||
zone: string
|
||
availableGpuCount: number
|
||
}
|
||
|
||
interface GpuModelOption {
|
||
value: string
|
||
label: string
|
||
available: number
|
||
total: number
|
||
regions: string[]
|
||
}
|
||
|
||
interface RegionOption {
|
||
value: string
|
||
label: string
|
||
tag?: { color: string; text: string }
|
||
}
|
||
|
||
interface ZoneOption {
|
||
value: string
|
||
label: string
|
||
regions: string[]
|
||
}
|
||
|
||
interface Coupon {
|
||
id: string
|
||
name: string
|
||
amount: number
|
||
type: string
|
||
}
|
||
|
||
// 响应式数据
|
||
const billingType = ref('weekly')
|
||
const selectedRegion = ref('beijingDC2')
|
||
const selectedZone = ref('')
|
||
const selectedGpuModels = ref<string[]>(['RTX 5090'])
|
||
const gpuCount = ref(1)
|
||
const selectedMachineId = ref('')
|
||
const needExpand = ref(false)
|
||
const expandSize = ref(100)
|
||
const imageType = ref('platformImage')
|
||
const selectedImage = ref<string[]>([])
|
||
const selectedCoupon = ref('')
|
||
const tableLoading = ref(false)
|
||
const creating = ref(false)
|
||
|
||
// 分页相关
|
||
const currentPage = ref(1)
|
||
const pageSize = ref(10)
|
||
|
||
// 所有机器数据
|
||
const allMachineList = ref<Machine[]>([
|
||
{
|
||
id: '5fb545beac',
|
||
machineName: '336机',
|
||
gpuModel: 'vGPU-48GB',
|
||
gpuMemory: '48 GB',
|
||
freeGpu: 1,
|
||
totalGpu: 10,
|
||
cpuCores: 20,
|
||
memory: 90,
|
||
cpuModel: 'Xeon(R) Platinum 8470Q',
|
||
dataDisk: 50,
|
||
expandableDisk: 110,
|
||
driver: '580.76.05',
|
||
cuda: '≤ 13.0',
|
||
basePrice: 2.98,
|
||
originalPrice: 3.14,
|
||
region: 'beijingDC2',
|
||
zone: 'beijingB',
|
||
availableGpuCount: 10
|
||
},
|
||
{
|
||
id: '1b0d49b68a',
|
||
machineName: '494机',
|
||
gpuModel: 'RTX 5090',
|
||
gpuMemory: '32GB',
|
||
freeGpu: 6,
|
||
totalGpu: 8,
|
||
cpuCores: 25,
|
||
memory: 90,
|
||
cpuModel: 'Xeon(R) Platinum 8470Q',
|
||
dataDisk: 50,
|
||
expandableDisk: 7500,
|
||
driver: '580.76.05',
|
||
cuda: '13.0',
|
||
basePrice: 437.00,
|
||
originalPrice: 460.00,
|
||
region: 'beijingDC2',
|
||
zone: 'beijingDC3',
|
||
availableGpuCount: 8
|
||
},
|
||
{
|
||
id: '63af4ab7db',
|
||
machineName: '518机',
|
||
gpuModel: 'RTX 5090',
|
||
gpuMemory: '32GB',
|
||
freeGpu: 6,
|
||
totalGpu: 8,
|
||
cpuCores: 25,
|
||
memory: 90,
|
||
cpuModel: 'Xeon(R) Platinum 8470Q',
|
||
dataDisk: 50,
|
||
expandableDisk: 7105,
|
||
driver: '580.76.05',
|
||
cuda: '13.0',
|
||
basePrice: 437.00,
|
||
originalPrice: 460.00,
|
||
region: 'beijingDC2',
|
||
zone: 'beijingDC4',
|
||
availableGpuCount: 8
|
||
},
|
||
{
|
||
id: 'ff5d489b4f',
|
||
machineName: '495机',
|
||
gpuModel: 'RTX 5090',
|
||
gpuMemory: '32GB',
|
||
freeGpu: 6,
|
||
totalGpu: 8,
|
||
cpuCores: 25,
|
||
memory: 90,
|
||
cpuModel: 'Xeon(R) Platinum 8470Q',
|
||
dataDisk: 50,
|
||
expandableDisk: 6700,
|
||
driver: '580.76.05',
|
||
cuda: '13.0',
|
||
basePrice: 437.00,
|
||
originalPrice: 460.00,
|
||
region: 'beijingDC2',
|
||
zone: 'beijingDC3',
|
||
availableGpuCount: 8
|
||
},
|
||
{
|
||
id: 'a1b2c3d4e5',
|
||
machineName: '600机',
|
||
gpuModel: 'RTX PRO 6000',
|
||
gpuMemory: '48GB',
|
||
freeGpu: 4,
|
||
totalGpu: 8,
|
||
cpuCores: 32,
|
||
memory: 128,
|
||
cpuModel: 'Xeon(R) Platinum 8470Q',
|
||
dataDisk: 100,
|
||
expandableDisk: 8000,
|
||
driver: '580.76.05',
|
||
cuda: '13.0',
|
||
basePrice: 589.00,
|
||
region: 'westDC3',
|
||
zone: 'beijingDC4',
|
||
availableGpuCount: 8
|
||
},
|
||
{
|
||
id: 'f6g7h8i9j0',
|
||
machineName: '601机',
|
||
gpuModel: 'vGPU-48GB',
|
||
gpuMemory: '48GB',
|
||
freeGpu: 8,
|
||
totalGpu: 12,
|
||
cpuCores: 48,
|
||
memory: 192,
|
||
cpuModel: 'Xeon(R) Platinum 8470Q',
|
||
dataDisk: 150,
|
||
expandableDisk: 10000,
|
||
driver: '580.76.05',
|
||
cuda: '13.0',
|
||
basePrice: 689.00,
|
||
region: 'chongqingDC1',
|
||
zone: 'neimengDC2',
|
||
availableGpuCount: 12
|
||
},
|
||
{
|
||
id: 'k1l2m3n4o5',
|
||
machineName: '602机',
|
||
gpuModel: 'RTX 4090',
|
||
gpuMemory: '24GB',
|
||
freeGpu: 3,
|
||
totalGpu: 8,
|
||
cpuCores: 20,
|
||
memory: 80,
|
||
cpuModel: 'Xeon(R) Platinum 8470Q',
|
||
dataDisk: 50,
|
||
expandableDisk: 5000,
|
||
driver: '580.76.05',
|
||
cuda: '13.0',
|
||
basePrice: 389.00,
|
||
originalPrice: 410.00,
|
||
region: 'beijingDC1',
|
||
zone: 'shanghaiDC1',
|
||
availableGpuCount: 8
|
||
}
|
||
])
|
||
|
||
// GPU型号配置
|
||
const gpuModelConfig = ref<GpuModelOption[]>([
|
||
{ value: 'RTX 5090', label: 'RTX 5090', available: 685, total: 3280, regions: ['beijingDC2', 'beijingDC1', 'chongqingDC1'] },
|
||
{ value: 'RTX PRO 6000', label: 'RTX PRO 6000', available: 0, total: 8, regions: ['westDC3'] },
|
||
{ value: 'vGPU-48GB', label: 'vGPU-48GB', available: 31, total: 250, regions: ['chongqingDC1', 'neimengDC3'] },
|
||
{ value: 'vGPU-48GB-425W', label: 'vGPU-48GB-425W', available: 58, total: 160, regions: ['neimengDC3'] },
|
||
{ value: 'RTX 5090 D', label: 'RTX 5090 D', available: 1, total: 11, regions: ['beijingDC2'] },
|
||
{ value: 'RTX 4090', label: 'RTX 4090', available: 3, total: 1000, regions: ['beijingDC1', 'foshanDC1'] },
|
||
{ value: 'CPU', label: 'CPU', available: 0, total: 44, regions: ['beijingDC2', 'beijingDC1'] }
|
||
])
|
||
|
||
// 配置数据
|
||
const billingTypeOptions = ref([
|
||
{ value: 'payg', label: '按量计费' },
|
||
{ value: 'daily', label: '包日' },
|
||
{ value: 'weekly', label: '包周' },
|
||
{ value: 'monthly', label: '包月' },
|
||
{ value: 'year', label: '包年' }
|
||
])
|
||
|
||
const regions = ref<RegionOption[]>([
|
||
{ value: 'beijingDC2', label: '北京B区' },
|
||
{ value: 'westDC3', label: '西北B区' },
|
||
{ value: 'chongqingDC1', label: '重庆A区' },
|
||
{ value: 'neimengDC3', label: '内蒙B区' },
|
||
{ value: 'beijingDC1', label: '北京A区' },
|
||
{ value: 'foshanDC1', label: '佛山区' }
|
||
])
|
||
|
||
const zones = ref<ZoneOption[]>([
|
||
{ value: 'beijingB', label: '北京B区', regions: ['beijingDC2'] },
|
||
{ value: 'beijingDC4', label: 'L20专区', regions: ['beijingDC2'] },
|
||
{ value: 'beijingDC3', label: 'V100专区', regions: ['beijingDC2'] },
|
||
{ value: 'neimengDC2', label: 'A800专区', regions: ['neimengDC3'] },
|
||
{ value: 'shanghaiDC1', label: '摩尔线程专区', regions: ['beijingDC1'] },
|
||
{ value: 'guangdongDC1', label: '华为昇腾专区', regions: ['foshanDC1'] }
|
||
])
|
||
|
||
const gpuCountOptions = [1, 2, 3, 4, 5, 6, 7, 8, 10, 12]
|
||
|
||
// 优惠券数据
|
||
const availableCoupons = ref<Coupon[]>([
|
||
{ id: 'coupon1', name: '新用户优惠券', amount: 50, type: 'discount' },
|
||
{ id: 'coupon2', name: '周年庆优惠', amount: 100, type: 'discount' }
|
||
])
|
||
|
||
// 镜像选项
|
||
const imageOptions = ref([
|
||
{
|
||
value: 'pytorch',
|
||
label: 'PyTorch',
|
||
children: [
|
||
{
|
||
value: '1.12.0',
|
||
label: '1.12.0',
|
||
children: [
|
||
{
|
||
value: 'python3.8',
|
||
label: 'Python 3.8',
|
||
children: [
|
||
{ value: 'cuda11.6', label: 'CUDA 11.6' },
|
||
{ value: 'cuda11.7', label: 'CUDA 11.7' }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
])
|
||
|
||
// 表格列定义
|
||
const columns: TableColumnsType = [
|
||
{
|
||
title: '',
|
||
key: 'action',
|
||
width: 50
|
||
},
|
||
{
|
||
title: '主机ID',
|
||
dataIndex: 'id',
|
||
key: 'id',
|
||
width: 120
|
||
},
|
||
{
|
||
title: '算力型号/显存',
|
||
key: 'gpuModel',
|
||
width: 150
|
||
},
|
||
{
|
||
title: '空闲GPU',
|
||
key: 'gpuInfo',
|
||
width: 100,
|
||
sorter: (a: Machine, b: Machine) => a.freeGpu - b.freeGpu
|
||
},
|
||
{
|
||
title: '每GPU分配',
|
||
key: 'cpuInfo',
|
||
width: 120
|
||
},
|
||
{
|
||
title: 'CPU型号',
|
||
dataIndex: 'cpuModel',
|
||
key: 'cpuModel',
|
||
width: 180
|
||
},
|
||
{
|
||
title: '硬盘',
|
||
key: 'disk',
|
||
width: 140,
|
||
sorter: (a: Machine, b: Machine) => a.dataDisk - b.dataDisk
|
||
},
|
||
{
|
||
title: '驱动/CUDA',
|
||
key: 'driver',
|
||
width: 140
|
||
},
|
||
{
|
||
title: '价格(单卡)',
|
||
key: 'price',
|
||
width: 160
|
||
}
|
||
]
|
||
|
||
// 计算属性
|
||
const cpuCores = computed(() => {
|
||
const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
|
||
return machine ? machine.cpuCores * gpuCount.value : 20 * gpuCount.value
|
||
})
|
||
|
||
const memory = computed(() => {
|
||
const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
|
||
return machine ? machine.memory * gpuCount.value : 90 * gpuCount.value
|
||
})
|
||
|
||
// 计费单位
|
||
const billingUnit = computed(() => {
|
||
switch (billingType.value) {
|
||
case 'payg': return '小时'
|
||
case 'daily': return '天'
|
||
case 'weekly': return '周'
|
||
case 'monthly': return '月'
|
||
default: return '周'
|
||
}
|
||
})
|
||
|
||
// 可用的GPU型号（根据地区筛选）
|
||
const availableGpuModels = computed(() => {
|
||
return gpuModelConfig.value.filter(model =>
|
||
model.regions.includes(selectedRegion.value)
|
||
)
|
||
})
|
||
|
||
// 选中的GPU型号标签
|
||
const selectedGpuModelLabel = computed(() => {
|
||
if (selectedGpuModels.value.length === 0) return '未选择'
|
||
const model = gpuModelConfig.value.find(m => m.value === selectedGpuModels.value[0])
|
||
return model ? model.label : selectedGpuModels.value[0]
|
||
})
|
||
|
||
// 过滤后的机器列表
|
||
const filteredMachineList = computed(() => {
|
||
let filtered = allMachineList.value.filter(machine => {
|
||
// 按地区筛选
|
||
if (machine.region !== selectedRegion.value) return false
|
||
|
||
// 按专区筛选（如果有选择专区）
|
||
if (selectedZone.value && machine.zone !== selectedZone.value) return false
|
||
|
||
// 按GPU型号筛选
|
||
if (selectedGpuModels.value.length > 0 && !selectedGpuModels.value.includes('all')) {
|
||
if (!selectedGpuModels.value.includes(machine.gpuModel)) return false
|
||
}
|
||
|
||
// 按GPU数量筛选：机器的可用GPU数量要大于等于选择的GPU数量
|
||
if (machine.availableGpuCount < gpuCount.value) return false
|
||
|
||
// 确保有足够的空闲GPU
|
||
if (machine.freeGpu < gpuCount.value) return false
|
||
|
||
return true
|
||
})
|
||
|
||
return filtered
|
||
})
|
||
|
||
// 分页后的机器列表
|
||
const paginatedMachineList = computed(() => {
|
||
const start = (currentPage.value - 1) * pageSize.value
|
||
const end = start + pageSize.value
|
||
return filteredMachineList.value.slice(start, end)
|
||
})
|
||
|
||
const showZones = computed(() => {
|
||
return availableZones.value.length > 0
|
||
})
|
||
|
||
const availableZones = computed(() => {
|
||
return zones.value.filter(zone => zone.regions.includes(selectedRegion.value))
|
||
})
|
||
|
||
const totalDiskSize = computed(() => {
|
||
return needExpand.value ? 50 + expandSize.value : 50
|
||
})
|
||
|
||
const maxExpandSize = computed(() => {
|
||
const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
|
||
return machine ? machine.expandableDisk : 0
|
||
})
|
||
|
||
const totalPrice = computed(() => {
|
||
const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
|
||
if (!machine) return '0.00'
|
||
|
||
let price = machine.basePrice * gpuCount.value
|
||
|
||
// 硬盘扩容费用
|
||
if (needExpand.value && expandSize.value > 0) {
|
||
const diskPricePerGB = 0.1 // 假设每GB 0.1元/周
|
||
price += diskPricePerGB * expandSize.value
|
||
}
|
||
|
||
// 优惠券折扣
|
||
if (selectedCoupon.value) {
|
||
const coupon = availableCoupons.value.find(c => c.id === selectedCoupon.value)
|
||
if (coupon) {
|
||
price = Math.max(0, price - coupon.amount)
|
||
}
|
||
}
|
||
|
||
// 计费方式转换
|
||
if (billingType.value === 'payg') price = price / (7 * 24)
|
||
else if (billingType.value === 'daily') price = price / 7
|
||
else if (billingType.value === 'monthly') price = price * 4
|
||
|
||
return price.toFixed(2)
|
||
})
|
||
|
||
const originalTotalPrice = computed(() => {
|
||
const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
|
||
if (!machine || !machine.originalPrice) return ''
|
||
|
||
let price = machine.originalPrice * gpuCount.value
|
||
if (billingType.value === 'payg') price = price / (7 * 24)
|
||
else if (billingType.value === 'daily') price = price / 7
|
||
else if (billingType.value === 'monthly') price = price * 4
|
||
|
||
return price.toFixed(2)
|
||
})
|
||
|
||
const canCreate = computed(() => {
|
||
return selectedMachineId.value && selectedImage.value.length > 0
|
||
})
|
||
|
||
// 价格计算方法
|
||
const getPrice = (record: Machine) => {
|
||
const basePrice = record.basePrice
|
||
switch (billingType.value) {
|
||
case 'payg': return (basePrice / (7 * 24)).toFixed(2)
|
||
case 'daily': return (basePrice / 7).toFixed(2)
|
||
case 'weekly': return basePrice.toFixed(2)
|
||
case 'monthly': return (basePrice * 4).toFixed(2)
|
||
default: return basePrice.toFixed(2)
|
||
}
|
||
}
|
||
|
||
const getOriginalPrice = (record: Machine) => {
|
||
if (!record.originalPrice) return ''
|
||
const originalPrice = record.originalPrice
|
||
switch (billingType.value) {
|
||
case 'payg': return (originalPrice / (7 * 24)).toFixed(2)
|
||
case 'daily': return (originalPrice / 7).toFixed(2)
|
||
case 'weekly': return originalPrice.toFixed(2)
|
||
case 'monthly': return (originalPrice * 4).toFixed(2)
|
||
default: return originalPrice.toFixed(2)
|
||
}
|
||
}
|
||
|
||
// 价格明细计算
|
||
const gpuPrice = computed(() => {
|
||
const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
|
||
if (!machine) return '0.00'
|
||
|
||
let price = machine.basePrice * gpuCount.value
|
||
if (billingType.value === 'payg') price = price / (7 * 24)
|
||
else if (billingType.value === 'daily') price = price / 7
|
||
else if (billingType.value === 'monthly') price = price * 4
|
||
|
||
return price.toFixed(2)
|
||
})
|
||
|
||
const diskPrice = computed(() => {
|
||
if (!needExpand.value || expandSize.value <= 0) return '0.00'
|
||
// 假设每GB硬盘费用为0.1元/周
|
||
const pricePerGB = 0.1
|
||
let price = pricePerGB * expandSize.value
|
||
if (billingType.value === 'payg') price = price / (7 * 24)
|
||
else if (billingType.value === 'daily') price = price / 7
|
||
else if (billingType.value === 'monthly') price = price * 4
|
||
|
||
return price.toFixed(2)
|
||
})
|
||
|
||
const couponDiscount = computed(() => {
|
||
if (!selectedCoupon.value) return '0.00'
|
||
const coupon = availableCoupons.value.find(c => c.id === selectedCoupon.value)
|
||
if (!coupon) return '0.00'
|
||
|
||
let discount = coupon.amount
|
||
if (billingType.value === 'payg') discount = discount / (7 * 24)
|
||
else if (billingType.value === 'daily') discount = discount / 7
|
||
else if (billingType.value === 'monthly') discount = discount * 4
|
||
|
||
return discount.toFixed(2)
|
||
})
|
||
|
||
const showPriceBreakdown = computed(() => {
|
||
return diskPrice.value !== '0.00' || couponDiscount.value !== '0.00'
|
||
})
|
||
|
||
// 方法
|
||
const handleRowClick = (record: Machine) => {
|
||
selectedMachineId.value = record.id
|
||
}
|
||
|
||
const handleSelectMachine = (id: string) => {
|
||
selectedMachineId.value = id
|
||
}
|
||
|
||
const getRowClassName = (record: Machine) => {
|
||
return selectedMachineId.value === record.id ? 'selected-row' : ''
|
||
}
|
||
|
||
// 一卡可租
|
||
const handleRentMachine = (id: string) => {
|
||
router.push("/layout/create")
|
||
|
||
}
|
||
|
||
const handleBillingTypeChange = () => {
|
||
console.log('计费方式改变:', billingType.value)
|
||
}
|
||
|
||
const handleRegionChange = () => {
|
||
console.log('地区改变:', selectedRegion.value)
|
||
if (availableGpuModels.value.length > 0) {
|
||
selectedGpuModels.value = [availableGpuModels.value[0].value]
|
||
} else {
|
||
selectedGpuModels.value = []
|
||
}
|
||
selectedZone.value = ''
|
||
selectedMachineId.value = ''
|
||
currentPage.value = 1
|
||
}
|
||
|
||
const handleZoneChange = () => {
|
||
console.log('专区改变:', selectedZone.value)
|
||
selectedMachineId.value = ''
|
||
currentPage.value = 1
|
||
}
|
||
|
||
const handleGpuModelChange = () => {
|
||
console.log('GPU型号改变:', selectedGpuModels.value)
|
||
selectedMachineId.value = ''
|
||
currentPage.value = 1
|
||
}
|
||
|
||
const handleGpuCountChange = () => {
|
||
console.log('GPU数量改变:', gpuCount.value)
|
||
selectedMachineId.value = ''
|
||
currentPage.value = 1
|
||
}
|
||
|
||
const handleImageTypeChange = () => {
|
||
console.log('镜像类型改变:', imageType.value)
|
||
selectedImage.value = []
|
||
}
|
||
|
||
// 分页处理方法
|
||
const handlePageChange = (page: number, pageSize?: number) => {
|
||
currentPage.value = page
|
||
if (pageSize) {
|
||
pageSize.value = pageSize
|
||
}
|
||
}
|
||
|
||
const handlePageSizeChange = (current: number, size: number) => {
|
||
currentPage.value = 1
|
||
pageSize.value = size
|
||
}
|
||
|
||
const isGpuCountDisabled = (count: number) => {
|
||
const machine = filteredMachineList.value.find(m => m.id === selectedMachineId.value)
|
||
return machine ? count > machine.availableGpuCount : false
|
||
}
|
||
|
||
const filter = (inputValue: string, path: any[]) => {
|
||
return path.some(option =>
|
||
option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
|
||
)
|
||
}
|
||
|
||
const handleCreate = async () => {
|
||
creating.value = true
|
||
try {
|
||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||
message.success('实例创建成功！')
|
||
} catch (error) {
|
||
message.error('创建失败，请重试')
|
||
} finally {
|
||
creating.value = false
|
||
}
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
window.history.back()
|
||
}
|
||
|
||
// 监听选中的机器列表，自动选择第一个可用的机器
|
||
watch(filteredMachineList, (newList) => {
|
||
if (newList.length > 0 && !selectedMachineId.value) {
|
||
selectedMachineId.value = newList[0].id
|
||
} else if (newList.length === 0) {
|
||
selectedMachineId.value = ''
|
||
}
|
||
// 重置到第一页
|
||
currentPage.value = 1
|
||
}, { immediate: true })
|
||
|
||
// 监听器
|
||
watch(needExpand, (newVal) => {
|
||
if (!newVal) {
|
||
expandSize.value = 100
|
||
}
|
||
})
|
||
|
||
watch(selectedMachineId, (newId) => {
|
||
if (newId && needExpand.value) {
|
||
const machine = allMachineList.value.find(m => m.id === newId)
|
||
if (machine && expandSize.value > machine.expandableDisk) {
|
||
expandSize.value = machine.expandableDisk
|
||
}
|
||
}
|
||
})
|
||
|
||
// 初始化时设置默认的GPU型号
|
||
if (availableGpuModels.value.length > 0) {
|
||
selectedGpuModels.value = [availableGpuModels.value[0].value]
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 强制让容器参与文档流并允许增长 */
|
||
.instance-create-container {
|
||
display: block;
|
||
width: 100%;
|
||
// max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 24px;
|
||
/* background: #fff; */
|
||
box-sizing: border-box;
|
||
/* 关键：确保它能自然撑高 */
|
||
min-height: fit-content;
|
||
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 {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.autodl-tip {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.card {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.select-server {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.machine-list {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.list-filter {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.filter-item {
|
||
display: flex;
|
||
margin-bottom: 24px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.filter-label {
|
||
width: 80px;
|
||
margin-right: 16px;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
line-height: 32px;
|
||
|
||
color: rgba(128, 128, 128, 1);
|
||
}
|
||
|
||
.filter-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.region-tag {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.machine-table {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.table-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.table-header .label {
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.table-header .total-count {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.machine-id-info .machine-id {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.machine-id-info .machine-name {
|
||
color: #666;
|
||
font-size: 12px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.gpu-info .gpu-name {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.gpu-info .gpu-memory {
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.gpu-availability .free-count {
|
||
font-weight: bold;
|
||
color: #52c41a;
|
||
}
|
||
|
||
.gpu-availability .separator {
|
||
margin: 0 4px;
|
||
color: #666;
|
||
}
|
||
|
||
.gpu-availability .total-count {
|
||
color: #666;
|
||
}
|
||
|
||
.cpu-memory-info,
|
||
.disk-info,
|
||
.driver-info {
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.disk-info .expandable-note {
|
||
color: #1890ff;
|
||
font-size: 11px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.price-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.price-info .current-price {
|
||
color: #f7412d;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.price-info .original-price {
|
||
text-decoration: line-through;
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.price-info .billing-unit {
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.price-info .rentable-tag {
|
||
background-color: #f6ffed;
|
||
border: 1px solid #b7eb8f;
|
||
color: #52c41a;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.empty-state {
|
||
padding: 40px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.pagination-container {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.data-disk-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.disk-base {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.free-disk {
|
||
color: #52c41a;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.disk-expand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.expand-label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.expand-note {
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.instance-spec .spec-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
|
||
.spec-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.spec-label {
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.spec-value {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.image-type {
|
||
margin-bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.config-link {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.image-tip {
|
||
color: #666;
|
||
font-size: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.image-tag {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.coupon-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.coupon-balance {
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer-actions {
|
||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||
padding: 20px 0;
|
||
border-top: 1px solid #e8e8e8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-top: 40px;
|
||
width: 100%;
|
||
}
|
||
|
||
.price-summary {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 32px;
|
||
}
|
||
|
||
.price-main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.total-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.price-display {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4px;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #f7412d;
|
||
line-height: 1;
|
||
}
|
||
|
||
.price-unit {
|
||
font-size: 14px;
|
||
color: #999;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.original-price-container {
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.original-total-price {
|
||
text-decoration: line-through;
|
||
color: #999;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.price-breakdown {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 12px 16px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
border: 1px solid #e9ecef;
|
||
}
|
||
|
||
.breakdown-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 16px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.breakdown-label {
|
||
color: #666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.breakdown-value {
|
||
color: #333;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.breakdown-value.discount {
|
||
color: #52c41a;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center;
|
||
}
|
||
|
||
.cancel-btn {
|
||
padding: 0 24px;
|
||
height: 48px;
|
||
font-weight: 500;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.cancel-btn:hover {
|
||
border-color: #1890ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.create-btn {
|
||
padding: 0 32px;
|
||
height: 48px;
|
||
font-weight: 600;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||
border: none;
|
||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.create-btn:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
|
||
}
|
||
|
||
.create-btn:disabled {
|
||
background: #f5f5f5;
|
||
color: #d9d9d9;
|
||
transform: none;
|
||
box-shadow: none;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.selected-row {
|
||
background-color: #f0f7ff !important;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.instance-create-container {
|
||
width: 100%;
|
||
padding: 16px;
|
||
}
|
||
|
||
.footer-actions {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.price-summary {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.price-breakdown {
|
||
display: none;
|
||
}
|
||
|
||
.action-buttons {
|
||
width: 100%;
|
||
}
|
||
|
||
.cancel-btn,
|
||
.create-btn {
|
||
flex: 1;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.filter-item {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.filter-label {
|
||
width: 100%;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-radio-button-wrapper) {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
:deep(.ant-table-thead > tr > th) {
|
||
background-color: #fafafa;
|
||
font-weight: 500;
|
||
}
|
||
|
||
:deep(.ant-table-row) {
|
||
cursor: pointer;
|
||
}
|
||
|
||
:deep(.ant-table-row:hover) {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
:deep(.ant-pagination) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
:deep(.ant-pagination-total-text) {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.machine-card-container.two-columns {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
/* 两列布局 */
|
||
gap: 16px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
/* 新增的卡片式布局样式 */
|
||
.machine-card-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.machine-card {
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 8px;
|
||
background: white;
|
||
transition: all 0.2s ease;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
/* 确保卡片高度一致 */
|
||
}
|
||
|
||
.machine-card:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.selected-card {
|
||
border-color: #1890ff;
|
||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
}
|
||
|
||
.card-header {
|
||
padding: 16px 20px;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
border-radius: 8px 8px 0 0;
|
||
}
|
||
|
||
.location-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.location-info .separator {
|
||
color: #ccc;
|
||
}
|
||
|
||
.id-code {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.available-info {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.card-body {
|
||
padding: 20px;
|
||
flex: 1;
|
||
/* 让card-body填满剩余空间 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.gpu-spec {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.gpu-model {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.gpu-memory {
|
||
font-size: 18px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.availability {
|
||
font-size: 12px;
|
||
color: #999;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.specs-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
/* 内部也使用两列 */
|
||
gap: 16px;
|
||
margin-top: 16px;
|
||
flex: 1;
|
||
/* 让规格网格填满空间 */
|
||
}
|
||
|
||
.spec-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.spec-title {
|
||
font-size: 12px;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.spec-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.spec-label {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.spec-value {
|
||
font-size: 14px;
|
||
color: #333;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.price-column {
|
||
grid-column: span 2;
|
||
/* 价格信息占据两列的宽度 */
|
||
margin-top: 12px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.price-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.current-price {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #f7412d;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.original-price {
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.discount-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
background: #fff5e6;
|
||
border: 1px solid #ffe4b5;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.discount-icon {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.discount-text {
|
||
color: #f7412d;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.member-note {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.rent-button {
|
||
width: 120px;
|
||
height: 36px;
|
||
font-size: 14px;
|
||
border-radius: 6px;
|
||
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) {
|
||
.image-card-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.specs-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.price-column {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.card-header {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.location-info {
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.available-info {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
</style> |