Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/GPU_Web
This commit is contained in:
Leo_Ding
commit
031e967f74
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,74 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="container">
|
||||||
<div class="instance-create-container">
|
<div class="instance-create-container">
|
||||||
<!-- 面包屑导航 -->
|
<!-- 服务器选择 -->
|
||||||
<a-breadcrumb class="breadcrumb">
|
<a-card class="card select-server" title="服务器选择">
|
||||||
<a-breadcrumb-item>
|
<div class="list-filter">
|
||||||
<a href="/layout/market">算力中心</a>
|
<div class="filter-item">
|
||||||
</a-breadcrumb-item>
|
<span class="filter-label">计费方式:</span>
|
||||||
<a-breadcrumb-item>创建实例</a-breadcrumb-item>
|
<div class="filter-content">
|
||||||
</a-breadcrumb>
|
<a-radio-group v-model:value="billingType" button-style="solid"
|
||||||
|
@change="handleBillingTypeChange">
|
||||||
<!-- 警告提示 -->
|
|
||||||
<a-alert class="autodl-tip" message="严禁使用WebUI等算法生成违禁图片、严禁挖矿，一经发现立即封号！" type="warning" show-icon closable />
|
|
||||||
|
|
||||||
<!-- 计费方式 -->
|
|
||||||
<a-card class="card" title="计费方式">
|
|
||||||
<div class="billing-content">
|
|
||||||
<a-radio-group v-model:value="billingType" button-style="solid" @change="handleBillingTypeChange">
|
|
||||||
<a-radio-button value="payg">按量计费</a-radio-button>
|
<a-radio-button value="payg">按量计费</a-radio-button>
|
||||||
<a-radio-button value="daily">包日</a-radio-button>
|
<a-radio-button value="daily">包日</a-radio-button>
|
||||||
<a-radio-button value="weekly">包周</a-radio-button>
|
<a-radio-button value="weekly">包周</a-radio-button>
|
||||||
<a-radio-button value="monthly">包月</a-radio-button>
|
<a-radio-button value="monthly">包月</a-radio-button>
|
||||||
|
<a-radio-button value="year">包年</a-radio-button>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
<a href="/docs/price/" target="_blank" class="billing-link">计费规则</a>
|
|
||||||
</div>
|
|
||||||
<div class="note">
|
|
||||||
创建完主机后仍然可以转换计费方式。如选择按量计费，价格发生变动以实例开机时的价格为准
|
|
||||||
</div>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<!-- 服务器选择 -->
|
|
||||||
<a-card class="card select-server" title="服务器选择">
|
|
||||||
<div class="list-filter">
|
|
||||||
<!-- 选择地区 -->
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -84,6 +30,30 @@
|
|||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-item">
|
||||||
|
<span class="filter-label">镜像:</span>
|
||||||
|
<a-form layout="vertical">
|
||||||
|
<a-form-item class="image-type">
|
||||||
|
<a-radio-group v-model:value="imageType" button-style="solid">
|
||||||
|
<a-radio-button value="platformImage">基础镜像</a-radio-button>
|
||||||
|
|
||||||
|
<a-radio-button value="customImage">我的镜像</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item v-if="imageType === 'platformImage'">
|
||||||
|
<div class="basic-image" style="margin-top: 15px;">
|
||||||
|
|
||||||
|
<a-cascader v-model:value="selectedImage" :options="imageOptions"
|
||||||
|
placeholder="请选择框架名称/框架版本/Python版本/CUDA版本" style="width: 400px"
|
||||||
|
:show-search="{ filter }" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 主机表格 -->
|
<!-- 主机表格 -->
|
||||||
@ -93,8 +63,9 @@
|
|||||||
<span class="total-count">共 {{ filteredMachineList.length }} 台可用主机</span>
|
<span class="total-count">共 {{ filteredMachineList.length }} 台可用主机</span>
|
||||||
</div>
|
</div>
|
||||||
<a-table :columns="columns" :data-source="filteredMachineList" :pagination="false"
|
<a-table :columns="columns" :data-source="filteredMachineList" :pagination="false"
|
||||||
:row-selection="{ type: 'radio', selectedRowKeys: [selectedMachineId] }" @row-click="handleRowClick"
|
:row-selection="{ type: 'radio', selectedRowKeys: [selectedMachineId] }"
|
||||||
:row-class-name="getRowClassName" :loading="tableLoading" size="middle">
|
@row-click="handleRowClick" :row-class-name="getRowClassName" :loading="tableLoading"
|
||||||
|
size="middle">
|
||||||
<template #bodyCell="{ column, record }">
|
<template #bodyCell="{ column, record }">
|
||||||
<template v-if="column.key === 'action'">
|
<template v-if="column.key === 'action'">
|
||||||
<a-radio :checked="selectedMachineId === record.id"
|
<a-radio :checked="selectedMachineId === record.id"
|
||||||
@ -151,118 +122,85 @@
|
|||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
||||||
<!-- 数据盘 -->
|
|
||||||
<a-card class="card data-disk" title="数据盘配置">
|
|
||||||
<div class="data-disk-content">
|
|
||||||
<div class="disk-base">
|
|
||||||
<span class="free-disk">免费50GB SSD</span>
|
|
||||||
<a-checkbox v-model:checked="needExpand">需要扩容</a-checkbox>
|
|
||||||
</div>
|
|
||||||
<div v-if="needExpand" class="disk-expand">
|
|
||||||
<span class="expand-label">扩容大小:</span>
|
|
||||||
<a-input-number v-model:value="expandSize" :min="1" :max="maxExpandSize" addon-after="GB"
|
|
||||||
placeholder="请输入扩容大小" />
|
|
||||||
<span class="expand-note">最大可扩容 {{ maxExpandSize }}GB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<!-- 实例规格描述 -->
|
|
||||||
<a-card class="card instance-spec" title="实例规格">
|
|
||||||
<div class="spec-content">
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">GPU型号</span>
|
|
||||||
<span class="spec-value">{{ selectedGpuModelLabel }} * {{ gpuCount }}卡</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">CPU</span>
|
|
||||||
<span class="spec-value">{{ cpuCores }}核心</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">内存</span>
|
|
||||||
<span class="spec-value">{{ memory }}GB</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">系统盘</span>
|
|
||||||
<span class="spec-value">30GB</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">数据盘</span>
|
|
||||||
<span class="spec-value">{{ totalDiskSize }}GB SSD</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<!-- 镜像选择 -->
|
|
||||||
<a-card class="card image-selection" title="镜像选择">
|
|
||||||
<a-form layout="vertical">
|
|
||||||
<a-form-item class="image-type">
|
|
||||||
<a-radio-group v-model:value="imageType" button-style="solid">
|
|
||||||
<a-radio-button value="platformImage">基础镜像</a-radio-button>
|
|
||||||
<a-radio-button value="CodeWithGPU">
|
|
||||||
社区镜像
|
|
||||||
<a-tag color="red" class="image-tag">hot</a-tag>
|
|
||||||
</a-radio-button>
|
|
||||||
<a-radio-button value="customImage">我的镜像</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
<a href="/docs/base_config/" target="_blank" class="config-link">没有我要的环境？</a>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item v-if="imageType === 'platformImage'">
|
|
||||||
<div class="basic-image">
|
|
||||||
<div class="image-tip">
|
|
||||||
基础镜像包含常用基本软件，如：深度学习框架、Miniconda等。如需其他软件可创建后安装
|
|
||||||
</div>
|
|
||||||
<a-cascader v-model:value="selectedImage" :options="imageOptions"
|
|
||||||
placeholder="请选择框架名称/框架版本/Python版本/CUDA版本" style="width: 400px" :show-search="{ filter }" />
|
|
||||||
</div>
|
|
||||||
<div class="note">创建完成后仍然可以更换其他镜像</div>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<!-- 优惠券 -->
|
<!-- 优惠券 -->
|
||||||
<a-card class="card coupon-selection" title="优惠券">
|
<a-card class="card coupon-selection" title="算力券">
|
||||||
<div class="coupon-content">
|
<div class="coupon-content">
|
||||||
<a-select v-model:value="selectedCoupon" placeholder="请选择优惠券" style="width: 200px" allow-clear>
|
<a-select v-model:value="selectedCoupon" placeholder="请选择算力券" style="width: 200px" allow-clear>
|
||||||
<a-select-option value="">不使用优惠券</a-select-option>
|
<a-select-option value="">不使用算力券</a-select-option>
|
||||||
<a-select-option v-for="coupon in availableCoupons" :key="coupon.id" :value="coupon.id">
|
<a-select-option v-for="coupon in availableCoupons" :key="coupon.id" :value="coupon.id">
|
||||||
{{ coupon.name }} - ￥{{ coupon.amount }}
|
{{ coupon.name }} - ￥{{ coupon.amount }}
|
||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
<div class="coupon-balance">
|
<div class="coupon-balance">
|
||||||
可用优惠券：{{ availableCoupons.length }} 张
|
可用算力券：{{ availableCoupons.length }} 张
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
||||||
<!-- 底部操作栏 -->
|
<!-- 底部操作栏 -->
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="footer-actions">
|
<div class="footer-actions">
|
||||||
<div class="price-summary">
|
<div class="price-summary">
|
||||||
<div class="price-main">
|
<!-- 账户余额信息 -->
|
||||||
<span class="total-label">总计：</span>
|
<div class="account-info">
|
||||||
<div class="price-display">
|
<div class="balance-label">账户余额</div>
|
||||||
<span class="total-price">￥{{ totalPrice }}</span>
|
<div class="balance-amount">
|
||||||
<span class="price-unit">/{{ billingUnit }}</span>
|
<span class="amount">¥11</span>
|
||||||
</div>
|
<a href="#" class="recharge-link">算力点不足去充值</a>
|
||||||
<div v-if="originalTotalPrice" class="original-price-container">
|
|
||||||
<span class="original-total-price">￥{{ originalTotalPrice }}/{{ billingUnit }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 费用明细 -->
|
||||||
|
<div class="price-details">
|
||||||
|
<div class="price-item">
|
||||||
|
<span class="price-label">日常费用：</span>
|
||||||
|
<span class="price-value">¥{{ totalPrice }}</span>
|
||||||
|
<span class="price-unit">/{{ billingUnit }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="price-item">
|
||||||
|
<span class="price-label">配置费用：</span>
|
||||||
|
<span class="price-value">¥{{ totalPrice }}</span>
|
||||||
|
<span class="price-unit">/{{ billingUnit }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 原价显示（如果有优惠） -->
|
||||||
|
<div v-if="originalTotalPrice" class="original-price-item">
|
||||||
|
<span class="original-price-label">原价：</span>
|
||||||
|
<span class="original-price-value">¥{{ originalTotalPrice }}/{{ billingUnit }}</span>
|
||||||
|
<span class="discount-badge">-{{ calculateDiscount() }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<a-button size="large" @click="handleCancel" class="cancel-btn">取消</a-button>
|
<!-- 费用预估提示 -->
|
||||||
<a-button type="primary" size="large" @click="handleCreate" :loading="creating" :disabled="!canCreate"
|
<div class="price-tips">
|
||||||
class="create-btn">
|
<span class="tip-icon">💡</span>
|
||||||
|
<span class="tip-text">费用为预估，按实际使用结算</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="button-group">
|
||||||
|
<a-button size="large" @click="handleCancel" class="cancel-btn">
|
||||||
|
取消
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary" size="large" @click="handleCreate" :loading="creating"
|
||||||
|
:disabled="!canCreate" class="create-btn">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<PlusOutlined />
|
<PlusOutlined />
|
||||||
</template>
|
</template>
|
||||||
立即创建
|
立即创建
|
||||||
|
<span v-if="totalPrice !== '0.00'" class="create-price">
|
||||||
|
¥{{ totalPrice }}/{{ billingUnit }}
|
||||||
|
</span>
|
||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -828,16 +766,33 @@ const couponDiscount = computed(() => {
|
|||||||
const showPriceBreakdown = computed(() => {
|
const showPriceBreakdown = computed(() => {
|
||||||
return diskPrice !== '0.00' || couponDiscount !== '0.00'
|
return diskPrice !== '0.00' || couponDiscount !== '0.00'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const calculateDiscount = () => {
|
||||||
|
if (!originalTotalPrice.value || totalPrice.value === '0.00') return 0
|
||||||
|
const original = parseFloat(originalTotalPrice.value)
|
||||||
|
const current = parseFloat(totalPrice.value)
|
||||||
|
return Math.round((original - current) / original * 100)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: url('@/assets/bgImg.png') no-repeat center / 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.instance-create-container {
|
.instance-create-container {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
/* max-width: 1400px;
|
max-width: 1200px;
|
||||||
margin: 0 auto; */
|
|
||||||
width: 90%;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
/* 添加这个来确保容器有相对定位 */
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
@ -1043,208 +998,343 @@ const showPriceBreakdown = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer-actions {
|
.footer-actions {
|
||||||
position: sticky;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||||
padding: 20px 32px;
|
padding: 24px 32px;
|
||||||
border-top: 1px solid #e8e8e8;
|
border-top: 1px solid #e8e8e8;
|
||||||
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin: 0 -24px -24px;
|
backdrop-filter: blur(10px);
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
gap: 40px;
|
||||||
|
|
||||||
|
/* 关键：让它占满整个 container 宽度 */
|
||||||
|
/* width: 100%; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
/* 如果 container 有 padding，需要抵消 */
|
||||||
|
margin: 0 -24px;
|
||||||
|
/* 因为 .container 有 padding: 24px */
|
||||||
|
padding: 24px 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 左侧：费用汇总 */
|
||||||
.price-summary {
|
.price-summary {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
gap: 40px;
|
||||||
gap: 32px;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-main {
|
/* 账户余额信息 */
|
||||||
display: flex;
|
.account-info {
|
||||||
flex-direction: column;
|
min-width: 160px;
|
||||||
gap: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-label {
|
.balance-label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
margin-bottom: 8px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-display {
|
.balance-amount {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-price {
|
.balance-amount .amount {
|
||||||
font-size: 32px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #f7412d;
|
color: #1890ff;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-unit {
|
.recharge-link {
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
color: #999;
|
color: #1890ff;
|
||||||
font-weight: 500;
|
text-decoration: none;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.original-price-container {
|
.recharge-link:hover {
|
||||||
margin-top: 2px;
|
background-color: rgba(24, 144, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.original-total-price {
|
/* 费用明细 */
|
||||||
text-decoration: line-through;
|
.price-details {
|
||||||
color: #999;
|
flex: 1;
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-breakdown {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 12px;
|
||||||
padding: 12px 16px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e9ecef;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.breakdown-item {
|
.price-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
align-items: baseline;
|
||||||
align-items: center;
|
gap: 8px;
|
||||||
gap: 16px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.breakdown-label {
|
.price-label {
|
||||||
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
white-space: nowrap;
|
min-width: 80px;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breakdown-value {
|
.price-value {
|
||||||
color: #333;
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f7412d;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-unit {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.breakdown-value.discount {
|
/* 原价显示 */
|
||||||
color: #52c41a;
|
.original-price-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: linear-gradient(135deg, #fff2f0 0%, #fff7f6 100%);
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #ffccc7;
|
||||||
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.original-price-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.original-price-value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
text-decoration: line-through;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discount-badge {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ff4d4f;
|
||||||
|
background: rgba(255, 77, 79, 0.1);
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧：操作按钮区域 */
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
min-width: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 费用提示 */
|
||||||
|
.price-tips {
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-icon {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮组 */
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel-btn {
|
.cancel-btn {
|
||||||
padding: 0 24px;
|
padding: 0 32px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border: 1px solid #d9d9d9;
|
border: 1px solid #d9d9d9;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
background: white;
|
||||||
|
transition: all 0.3s;
|
||||||
|
min-width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel-btn:hover {
|
.cancel-btn:hover {
|
||||||
border-color: #1890ff;
|
border-color: #1890ff;
|
||||||
color: #1890ff;
|
color: #1890ff;
|
||||||
|
background: rgba(24, 144, 255, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-btn {
|
.create-btn {
|
||||||
padding: 0 32px;
|
padding: 0 24px 0 16px;
|
||||||
|
/* 调整padding给图标空间 */
|
||||||
height: 48px;
|
height: 48px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
|
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s;
|
||||||
|
min-width: 180px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-btn::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||||
|
transition: left 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-btn:hover::before {
|
||||||
|
left: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-btn:hover {
|
.create-btn:hover {
|
||||||
transform: translateY(-1px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
|
box-shadow: 0 6px 16px rgba(24, 144, 255, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-btn:disabled {
|
.create-btn:disabled {
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
color: #d9d9d9;
|
color: #bfbfbf;
|
||||||
transform: none;
|
transform: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.create-btn:disabled::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-price {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0.9;
|
||||||
|
letter-spacing: -0.2px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 1200px) {
|
||||||
.footer-actions {
|
.footer-actions {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 24px;
|
||||||
padding: 16px 20px;
|
padding: 20px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-summary {
|
.price-summary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-between;
|
gap: 24px;
|
||||||
}
|
|
||||||
|
|
||||||
.price-breakdown {
|
|
||||||
display: none; /* 移动端隐藏价格明细 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.cancel-btn,
|
.cancel-btn,
|
||||||
.create-btn {
|
.create-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-price {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-unit {
|
@media (max-width: 768px) {
|
||||||
color: #666;
|
.footer-actions {
|
||||||
|
padding: 16px 20px;
|
||||||
|
margin: 0 -20px -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.original-total-price {
|
.price-summary {
|
||||||
text-decoration: line-through;
|
flex-direction: column;
|
||||||
color: #999;
|
gap: 16px;
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-buttons {
|
.account-info {
|
||||||
display: flex;
|
min-width: auto;
|
||||||
gap: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-row {
|
.balance-amount {
|
||||||
background-color: #f0f7ff !important;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-radio-button-wrapper) {
|
.price-details {
|
||||||
margin-right: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-table-thead > tr > th) {
|
.price-item {
|
||||||
background-color: #fafafa;
|
justify-content: space-between;
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-table-row) {
|
.price-label {
|
||||||
cursor: pointer;
|
min-width: auto;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-table-row:hover) {
|
.original-price-item {
|
||||||
background-color: #f5f5f5;
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discount-badge {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-price {
|
||||||
|
display: block;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-tips {
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -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区' },
|
||||||
@ -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;
|
||||||
@ -1348,6 +1293,10 @@ if (availableGpuModels.value.length > 0) {
|
|||||||
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 {
|
||||||
@ -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