diff --git a/src/assets/bgImg.png b/src/assets/bgImg.png
new file mode 100644
index 0000000..2e8e46d
Binary files /dev/null and b/src/assets/bgImg.png differ
diff --git a/src/views/instanceCreate/index.vue b/src/views/instanceCreate/index.vue
index e8b2638..7e7800b 100644
--- a/src/views/instanceCreate/index.vue
+++ b/src/views/instanceCreate/index.vue
@@ -1,265 +1,203 @@
 <template>
-    <div class="instance-create-container">
-        <!-- 面包屑导航 -->
-        <a-breadcrumb class="breadcrumb">
-            <a-breadcrumb-item>
-                <a href="/layout/market">算力中心</a>
-            </a-breadcrumb-item>
-            <a-breadcrumb-item>创建实例</a-breadcrumb-item>
-        </a-breadcrumb>
-
-        <!-- 警告提示 -->
-        <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="daily">包日</a-radio-button>
-                    <a-radio-button value="weekly">包周</a-radio-button>
-                    <a-radio-button value="monthly">包月</a-radio-button>
-                </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>
-
-                <!-- 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 class="machine-table">
-                <div class="table-header">
-                    <span class="label">选择主机:</span>
-                    <span class="total-count">共 {{ filteredMachineList.length }} 台可用主机</span>
-                </div>
-                <a-table :columns="columns" :data-source="filteredMachineList" :pagination="false"
-                    :row-selection="{ type: 'radio', selectedRowKeys: [selectedMachineId] }" @row-click="handleRowClick"
-                    :row-class-name="getRowClassName" :loading="tableLoading" size="middle">
-                    <template #bodyCell="{ column, record }">
-                        <template v-if="column.key === 'action'">
-                            <a-radio :checked="selectedMachineId === record.id"
-                                @change="() => handleSelectMachine(record.id)" />
-                        </template>
-                        <template v-else-if="column.key === 'gpuModel'">
-                            <div class="gpu-info">
-                                <div class="gpu-name">{{ record.gpuModel }}</div>
-                                <div class="gpu-memory">{{ record.gpuMemory }}</div>
-                            </div>
-                        </template>
-                        <template v-else-if="column.key === 'gpuInfo'">
-                            <div class="gpu-availability">
-                                <span class="free-count">{{ record.freeGpu }}</span>
-                                <span class="separator">/</span>
-                                <span class="total-count">{{ record.totalGpu }}</span>
-                            </div>
-                        </template>
-                        <template v-else-if="column.key === 'cpuInfo'">
-                            <div class="cpu-memory-info">
-                                <div>CPU：{{ record.cpuCores }}核</div>
-                                <div>内存：{{ record.memory }}GB</div>
-                            </div>
-                        </template>
-                        <template v-else-if="column.key === 'disk'">
-                            <div class="disk-info">
-                                <div>数据盘：{{ record.dataDisk }}GB</div>
-                                <div>可扩容：{{ record.expandableDisk }}GB</div>
-                            </div>
-                        </template>
-                        <template v-else-if="column.key === 'driver'">
-                            <div class="driver-info">
-                                <div>驱动：{{ record.driver }}</div>
-                                <div>CUDA：{{ record.cuda }}</div>
-                            </div>
-                        </template>
-                        <template v-else-if="column.key === 'price'">
-                            <div class="price-info">
-                                <div class="current-price">
-                                    ￥{{ getPrice(record) }}/{{ billingUnit }}
-                                </div>
-                                <div v-if="record.originalPrice" class="original-price">
-                                    ￥{{ getOriginalPrice(record) }}/{{ billingUnit }}
-                                </div>
-                            </div>
-                        </template>
-                    </template>
-                </a-table>
-
-                <!-- 空状态 -->
-                <div v-if="filteredMachineList.length === 0" class="empty-state">
-                    <a-empty description="暂无可用主机，请调整筛选条件" />
-                </div>
-            </div>
-        </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 class="container">
+        <div class="instance-create-container">
+            <!-- 服务器选择 -->
+            <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="billingType" button-style="solid"
+                                @change="handleBillingTypeChange">
+                                <a-radio-button value="payg">按量计费</a-radio-button>
+                                <a-radio-button value="daily">包日</a-radio-button>
+                                <a-radio-button value="weekly">包周</a-radio-button>
+                                <a-radio-button value="monthly">包月</a-radio-button>
+                                <a-radio-button value="year">包年</a-radio-button>
+                            </a-radio-group>
                         </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="优惠券">
-            <div class="coupon-content">
-                <a-select v-model:value="selectedCoupon" placeholder="请选择优惠券" style="width: 200px" allow-clear>
-                    <a-select-option value="">不使用优惠券</a-select-option>
-                    <a-select-option v-for="coupon in availableCoupons" :key="coupon.id" :value="coupon.id">
-                        {{ coupon.name }} - ￥{{ coupon.amount }}
-                    </a-select-option>
-                </a-select>
-                <div class="coupon-balance">
-                    可用优惠券：{{ availableCoupons.length }} 张
+                    <!-- 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 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>
-        </a-card>
 
-        <!-- 底部操作栏 -->
+                <!-- 主机表格 -->
+                <div class="machine-table">
+                    <div class="table-header">
+                        <span class="label">选择主机:</span>
+                        <span class="total-count">共 {{ filteredMachineList.length }} 台可用主机</span>
+                    </div>
+                    <a-table :columns="columns" :data-source="filteredMachineList" :pagination="false"
+                        :row-selection="{ type: 'radio', selectedRowKeys: [selectedMachineId] }"
+                        @row-click="handleRowClick" :row-class-name="getRowClassName" :loading="tableLoading"
+                        size="middle">
+                        <template #bodyCell="{ column, record }">
+                            <template v-if="column.key === 'action'">
+                                <a-radio :checked="selectedMachineId === record.id"
+                                    @change="() => handleSelectMachine(record.id)" />
+                            </template>
+                            <template v-else-if="column.key === 'gpuModel'">
+                                <div class="gpu-info">
+                                    <div class="gpu-name">{{ record.gpuModel }}</div>
+                                    <div class="gpu-memory">{{ record.gpuMemory }}</div>
+                                </div>
+                            </template>
+                            <template v-else-if="column.key === 'gpuInfo'">
+                                <div class="gpu-availability">
+                                    <span class="free-count">{{ record.freeGpu }}</span>
+                                    <span class="separator">/</span>
+                                    <span class="total-count">{{ record.totalGpu }}</span>
+                                </div>
+                            </template>
+                            <template v-else-if="column.key === 'cpuInfo'">
+                                <div class="cpu-memory-info">
+                                    <div>CPU：{{ record.cpuCores }}核</div>
+                                    <div>内存：{{ record.memory }}GB</div>
+                                </div>
+                            </template>
+                            <template v-else-if="column.key === 'disk'">
+                                <div class="disk-info">
+                                    <div>数据盘：{{ record.dataDisk }}GB</div>
+                                    <div>可扩容：{{ record.expandableDisk }}GB</div>
+                                </div>
+                            </template>
+                            <template v-else-if="column.key === 'driver'">
+                                <div class="driver-info">
+                                    <div>驱动：{{ record.driver }}</div>
+                                    <div>CUDA：{{ record.cuda }}</div>
+                                </div>
+                            </template>
+                            <template v-else-if="column.key === 'price'">
+                                <div class="price-info">
+                                    <div class="current-price">
+                                        ￥{{ getPrice(record) }}/{{ billingUnit }}
+                                    </div>
+                                    <div v-if="record.originalPrice" class="original-price">
+                                        ￥{{ getOriginalPrice(record) }}/{{ billingUnit }}
+                                    </div>
+                                </div>
+                            </template>
+                        </template>
+                    </a-table>
+
+                    <!-- 空状态 -->
+                    <div v-if="filteredMachineList.length === 0" class="empty-state">
+                        <a-empty description="暂无可用主机，请调整筛选条件" />
+                    </div>
+                </div>
+            </a-card>
+
+
+            <!-- 优惠券 -->
+            <a-card class="card coupon-selection" title="算力券">
+                <div class="coupon-content">
+                    <a-select v-model:value="selectedCoupon" placeholder="请选择算力券" style="width: 200px" allow-clear>
+                        <a-select-option value="">不使用算力券</a-select-option>
+                        <a-select-option v-for="coupon in availableCoupons" :key="coupon.id" :value="coupon.id">
+                            {{ coupon.name }} - ￥{{ coupon.amount }}
+                        </a-select-option>
+                    </a-select>
+                    <div class="coupon-balance">
+                        可用算力券：{{ availableCoupons.length }} 张
+                    </div>
+                </div>
+            </a-card>
+
+            <!-- 底部操作栏 -->
+
+        </div>
         <div class="footer-actions">
             <div class="price-summary">
-                <div class="price-main">
-                    <span class="total-label">总计：</span>
-                    <div class="price-display">
-                        <span class="total-price">￥{{ totalPrice }}</span>
-                        <span class="price-unit">/{{ billingUnit }}</span>
-                    </div>
-                    <div v-if="originalTotalPrice" class="original-price-container">
-                        <span class="original-total-price">￥{{ originalTotalPrice }}/{{ billingUnit }}</span>
+                <!-- 账户余额信息 -->
+                <div class="account-info">
+                    <div class="balance-label">账户余额</div>
+                    <div class="balance-amount">
+                        <span class="amount">¥11</span>
+                        <a href="#" class="recharge-link">算力点不足去充值</a>
+                    </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 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">
-                <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>
-                        <PlusOutlined />
-                    </template>
-                    立即创建
-                </a-button>
+                <!-- 费用预估提示 -->
+                <div class="price-tips">
+                    <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>
+                            <PlusOutlined />
+                        </template>
+                        立即创建
+                        <span v-if="totalPrice !== '0.00'" class="create-price">
+                            ¥{{ totalPrice }}/{{ billingUnit }}
+                        </span>
+                    </a-button>
+                </div>
             </div>
         </div>
     </div>
@@ -828,16 +766,33 @@ const couponDiscount = computed(() => {
 const showPriceBreakdown = computed(() => {
     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>
 
 <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 {
     padding: 24px;
-    /* max-width: 1400px;
-  margin: 0 auto; */
-    width: 90%;
+    max-width: 1200px;
     margin: 0 auto;
     background-color: #fff;
+    /* 添加这个来确保容器有相对定位 */
+    position: relative;
+    margin-bottom: 150px;
 }
 
 .breadcrumb {
@@ -1043,208 +998,343 @@ const showPriceBreakdown = computed(() => {
 }
 
 .footer-actions {
-  position: sticky;
-  bottom: 0;
-  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-  padding: 20px 32px;
-  border-top: 1px solid #e8e8e8;
-  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin: 0 -24px -24px;
-  backdrop-filter: blur(8px);
-  z-index: 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;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .footer-actions {
-    flex-direction: column;
-    gap: 20px;
-    padding: 16px 20px;
-  }
-  
-  .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;
-  }
-}
-
-.price-unit {
-    color: #666;
-}
-
-.original-total-price {
-    text-decoration: line-through;
-    color: #999;
-    font-size: 14px;
-}
-
-.action-buttons {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+    padding: 24px 32px;
+    border-top: 1px solid #e8e8e8;
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
     display: flex;
-    gap: 12px;
+    justify-content: space-between;
+    align-items: flex-start;
+    backdrop-filter: blur(10px);
+    z-index: 100;
+    gap: 40px;
+
+    /* 关键：让它占满整个 container 宽度 */
+    /* width: 100%; */
+    box-sizing: border-box;
+
+    /* 如果 container 有 padding，需要抵消 */
+    margin: 0 -24px;
+    /* 因为 .container 有 padding: 24px */
+    padding: 24px 32px;
 }
 
-.selected-row {
-    background-color: #f0f7ff !important;
+/* 左侧：费用汇总 */
+.price-summary {
+    display: flex;
+    gap: 40px;
+    flex: 1;
 }
 
-:deep(.ant-radio-button-wrapper) {
-    margin-right: 8px;
+/* 账户余额信息 */
+.account-info {
+    min-width: 160px;
 }
 
-:deep(.ant-table-thead > tr > th) {
-    background-color: #fafafa;
+.balance-label {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 8px;
     font-weight: 500;
 }
 
-:deep(.ant-table-row) {
-    cursor: pointer;
+.balance-amount {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
-:deep(.ant-table-row:hover) {
-    background-color: #f5f5f5;
+.balance-amount .amount {
+    font-size: 24px;
+    font-weight: 700;
+    color: #1890ff;
+    line-height: 1;
+}
+
+.recharge-link {
+    font-size: 13px;
+    color: #1890ff;
+    text-decoration: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.recharge-link:hover {
+    background-color: rgba(24, 144, 255, 0.1);
+}
+
+/* 费用明细 */
+.price-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.price-item {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+}
+
+.price-label {
+    font-size: 14px;
+    color: #666;
+    min-width: 80px;
+    text-align: right;
+}
+
+.price-value {
+    font-size: 20px;
+    font-weight: 600;
+    color: #f7412d;
+    min-width: 100px;
+}
+
+.price-unit {
+    font-size: 13px;
+    color: #999;
+    font-weight: 500;
+}
+
+/* 原价显示 */
+.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 {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 280px;
+}
+
+/* 费用提示 */
+.price-tips {
+    display: flex;
+    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 {
+    padding: 0 32px;
+    height: 48px;
+    font-weight: 500;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    background: white;
+    transition: all 0.3s;
+    min-width: 120px;
+}
+
+.cancel-btn:hover {
+    border-color: #1890ff;
+    color: #1890ff;
+    background: rgba(24, 144, 255, 0.04);
+}
+
+.create-btn {
+    padding: 0 24px 0 16px;
+    /* 调整padding给图标空间 */
+    height: 48px;
+    font-weight: 600;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+    border: none;
+    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);
+    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 {
+    transform: translateY(-2px);
+    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 {
+    background: #f5f5f5;
+    color: #bfbfbf;
+    transform: none;
+    box-shadow: none;
+    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: 1200px) {
+    .footer-actions {
+        flex-direction: column;
+        gap: 24px;
+        padding: 20px 24px;
+    }
+
+    .price-summary {
+        width: 100%;
+        gap: 24px;
+    }
+
+    .action-buttons {
+        width: 100%;
+    }
+
+    .button-group {
+        width: 100%;
+    }
+
+    .cancel-btn,
+    .create-btn {
+        flex: 1;
+    }
+}
+
+@media (max-width: 768px) {
+    .footer-actions {
+        padding: 16px 20px;
+        margin: 0 -20px -20px;
+    }
+
+    .price-summary {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .account-info {
+        min-width: auto;
+    }
+
+    .balance-amount {
+        justify-content: space-between;
+    }
+
+    .price-details {
+        gap: 8px;
+    }
+
+    .price-item {
+        justify-content: space-between;
+    }
+
+    .price-label {
+        min-width: auto;
+        text-align: left;
+    }
+
+    .original-price-item {
+        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>
\ No newline at end of file
diff --git a/src/views/market/index.vue b/src/views/market/index.vue
index 9719274..cf2522c 100644
--- a/src/views/market/index.vue
+++ b/src/views/market/index.vue
@@ -1,204 +1,107 @@
 <template>
   <div class="instance-create-container">
-    <!-- 警告提示 -->
-    <a-alert class="autodl-tip" message="严禁使用WebUI等算法生成违禁图片、严禁挖矿，一经发现立即封号！" type="warning" show-icon closable />
+    <div class="header">
+      <h1>算力中心</h1>
+      <h2>聚焦高效算力服务，为数字产业、智能应用提供强支撑</h2>
+    </div>
 
-    <!-- 服务器选择 -->
-    <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="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 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>
 
-        <!-- 选择地区 -->
-        <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-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>
-    </a-card>
-
-    <!-- 机器列表区域 -->
-    <a-card class="card machine-list" title="机器列表">
-
-      <!-- 新的卡片式布局 -->
-      <div class="machine-card-container">
-        <div 
-          v-for="record in paginatedMachineList" 
-          :key="record.id" 
-          class="machine-card"
-          :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 class="gpu-spec">
-              <div class="gpu-model">{{ record.gpuModel }}</div>
-              <div class="gpu-memory">/ {{ record.gpuMemory }}</div>
-              <div class="availability">
-                空闲/总量 <span style="font-size: 18px;color: #333;">{{ record.freeGpu }}</span> / {{ record.totalGpu }}
+      <!-- 机器列表 -->
+      <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>
-
-          <!-- 主要规格信息 -->
-          <div class="card-body">
-            
-
-            <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 class="spec-item">
-                  <div class="spec-label">内存:</div>
-                  <div class="spec-value">{{ record.memory }} GB</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="spec-column">
-                <div class="spec-title">硬盘</div>
-                <div class="spec-item">
-                  <div class="spec-label">系统盘:</div>
-                  <div class="spec-value">30 GB</div>
-                </div>
-                <div class="spec-item">
-                  <div class="spec-label">数据盘:</div>
-                  <div class="spec-value">{{ record.dataDisk }} GB，可扩容 {{ record.expandableDisk }} GB</div>
-                </div>
+              <div class="info-item">
+                <span class="info-item-name">内存</span>
+                <span class="info-item-account">{{ record.memory }} GB</span>
               </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 class="info-item">
+                <span class="info-item-name">显存</span>
+                <span class="info-item-account">{{ record.gpuMemory }}</span>
               </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>
-                </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>
 
-      <!-- 分页 -->
-      <div class="pagination-container">
-        <a-pagination
-          v-model:current="currentPage"
-          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>
-    </a-card>
+        <!-- 分页 -->
+        <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'
@@ -431,12 +334,13 @@ const billingTypeOptions = ref([
   { value: 'payg', label: '按量计费' },
   { value: 'daily', label: '包日' },
   { value: 'weekly', label: '包周' },
-  { value: 'monthly', label: '包月' }
+  { value: 'monthly', label: '包月' },
+  { value: 'year', label: '包年' }
 ])
 
 const regions = ref<RegionOption[]>([
   { value: 'beijingDC2', label: '北京B区' },
-  { value: 'westDC3', label: '西北B区', tag: { color: 'red', text: 'PRO6000' } },
+  { value: 'westDC3', label: '西北B区' },
   { value: 'chongqingDC1', label: '重庆A区' },
   { value: 'neimengDC3', label: '内蒙B区' },
   { value: 'beijingDC1', label: '北京A区' },
@@ -628,13 +532,13 @@ const totalPrice = computed(() => {
   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)
@@ -720,12 +624,12 @@ 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)
 })
 
@@ -747,8 +651,8 @@ const getRowClassName = (record: Machine) => {
 }
 
 // 一卡可租
-const handleRentMachine = (id:string) => {   
-   router.push("/layout/create")            
+const handleRentMachine = (id: string) => {
+  router.push("/layout/create")
 
 }
 
@@ -864,19 +768,50 @@ if (availableGpuModels.value.length > 0) {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 /* 强制让容器参与文档流并允许增长 */
 .instance-create-container {
   display: block;
-  width: 90%;
-  max-width: 1200px;
+  width: 100%;
+  // max-width: 1200px; 
   margin: 0 auto;
   padding: 24px;
-  background: #fff;
+  /* 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 {
@@ -915,6 +850,8 @@ if (availableGpuModels.value.length > 0) {
   font-weight: 500;
   flex-shrink: 0;
   line-height: 32px;
+
+  color: rgba(128, 128, 128, 1);
 }
 
 .filter-content {
@@ -1333,6 +1270,14 @@ if (availableGpuModels.value.length > 0) {
   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;
@@ -1347,11 +1292,15 @@ if (availableGpuModels.value.length > 0) {
   background: white;
   transition: all 0.2s ease;
   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 {
-  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);
 }
 
@@ -1361,20 +1310,20 @@ if (availableGpuModels.value.length > 0) {
 }
 
 .card-header {
-  padding: 16px 24px;
+  padding: 16px 20px;
   background: #f8f9fa;
   border-bottom: 1px solid #e8e8e8;
-  /* display: flex;
-  justify-content: space-between;
-  align-items: center; */
+  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 {
@@ -1392,17 +1341,20 @@ if (availableGpuModels.value.length > 0) {
 }
 
 .card-body {
-  padding: 24px;
+  padding: 20px;
+  flex: 1;
+  /* 让card-body填满剩余空间 */
   display: flex;
   flex-direction: column;
-  gap: 24px;
 }
 
 .gpu-spec {
   display: flex;
   flex-direction: row;
+  align-items: center;
   gap: 8px;
-  margin-top: 15px;
+  margin-top: 10px;
+  flex-wrap: wrap;
 }
 
 .gpu-model {
@@ -1428,9 +1380,12 @@ if (availableGpuModels.value.length > 0) {
 
 .specs-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  gap: 24px;
+  grid-template-columns: repeat(2, 1fr);
+  /* 内部也使用两列 */
+  gap: 16px;
   margin-top: 16px;
+  flex: 1;
+  /* 让规格网格填满空间 */
 }
 
 .spec-column {
@@ -1463,18 +1418,19 @@ if (availableGpuModels.value.length > 0) {
 }
 
 .price-column {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 12px;
+  grid-column: span 2;
+  /* 价格信息占据两列的宽度 */
+  margin-top: 12px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
 }
 
 .price-info {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: center;
   gap: 8px;
-  width: 100%;
+  text-align: center;
 }
 
 .current-price {
@@ -1519,35 +1475,143 @@ if (availableGpuModels.value.length > 0) {
 }
 
 .rent-button {
-  width: 100px;
-  height: 32px;
-  font-size: 12px;
-  border-radius: 4px;
+  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;
   }