Skip to content

phsl / client

Go to a project
Commit bd1edd00 by 赵月辉
Options

完成确认订单；购物车；申请成功 三个页面的静态内容

parent b76d4879
Showing with 672 additions and 128 deletions
src/assets/icons/svg/list-1.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1713836143982" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4284"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<path d="M903.873 0H120.127A120.127 120.127 0 0 0 0 120.127v783.746A120.127 120.127 0 0 0 120.127 1024h783.746A120.127 120.127 0 0 0 1024 903.873V120.127A120.127 120.127 0 0 0 903.873 0zM198.126 822.954a61.732 61.732 0 1 1 61.732-61.732 61.732 61.732 0 0 1-61.732 61.732z m0-250.265a61.732 61.732 0 1 1 61.732-61.732 61.732 61.732 0 0 1-61.732 62.566z m0-250.265a61.732 61.732 0 1 1 61.732-60.063 61.732 61.732 0 0 1-61.732 61.732z m654.026 467.578H365.387a35.454 35.454 0 1 1 0-70.49h486.765a35.454 35.454 0 1 1 0 70.49z m0-250.264H365.387a35.454 35.454 0 0 1 0-70.492h486.765a35.454 35.454 0 1 1 0 70.492z m0-250.265H365.387a35.454 35.454 0 1 1 0-70.491h486.765a35.454 35.454 0 1 1 0 70.49z"
p-id="4285"></path>
</svg>
src/layout/user-layout.vue
......@@ -2,7 +2,7 @@
<div class="app-wrapper">
<div class="nav-bar">
<div class="nav-bar-content">
<div class="logo flex-align-center">
<div class="logo flex-align-center" @click="$router.push('/index')">
<img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
<img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
<span class="logo-text">先进公共服务平台</span>
......@@ -75,6 +75,7 @@ const activeIndex = ref('1')
}
.logo {
cursor: pointer;
.nscc {
height: 46px;
}
......@@ -124,7 +125,8 @@ const activeIndex = ref('1')
.app-main {
padding-top: 64px;
height: 100%;
//height: calc(100vh - 64px);
//overflow-y: auto;
overflow-y: auto;
}
</style>
src/router/index.js
......@@ -49,7 +49,7 @@ export const constantRoutes = [
hidden: true
},
{
path: "/:pathMatch(.*)*",
path: '/:pathMatch(.*)*',
component: () => import('@/views/error/404'),
hidden: true
},
......@@ -68,7 +68,7 @@ export const constantRoutes = [
path: '/index',
component: () => import('@/views/index'),
name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true }
meta: {title: '首页', icon: 'dashboard', affix: true}
}
]
},
......@@ -77,10 +77,28 @@ export const constantRoutes = [
component: UserLayout,
children: [
{
path: 'index',
component: () => import('@/views/computingResource/index.vue'),
name: 'ComputingResource',
meta: { title: '计算资源' }
path: 'resourceList',
component: () => import('@/views/computingResource/resourceList.vue'),
name: 'ResourceList',
meta: {title: '计算资源'}
},
{
path: 'confirmOrder',
component: () => import('@/views/computingResource/confirmOrder.vue'),
name: 'ConfirmOrder',
meta: {title: '确认订单'}
},
{
path: 'shoppingCart',
component: () => import('@/views/computingResource/shoppingCart.vue'),
name: 'ShoppingCart',
meta: {title: '购物车'}
},
{
path: 'orderResult',
component: () => import('@/views/computingResource/orderResult.vue'),
name: 'OrderResult',
meta: {title: '订单状态'}
}
]
},
......@@ -94,7 +112,7 @@ export const constantRoutes = [
path: 'profile',
component: () => import('@/views/system/user/profile/index'),
name: 'Profile',
meta: { title: '个人中心', icon: 'user' }
meta: {title: '个人中心', icon: 'user'}
}
]
}
......@@ -112,7 +130,7 @@ export const dynamicRoutes = [
path: 'role/:userId(\\d+)',
component: () => import('@/views/system/user/authRole'),
name: 'AuthRole',
meta: { title: '分配角色', activeMenu: '/system/user' }
meta: {title: '分配角色', activeMenu: '/system/user'}
}
]
},
......@@ -126,7 +144,7 @@ export const dynamicRoutes = [
path: 'user/:roleId(\\d+)',
component: () => import('@/views/system/role/authUser'),
name: 'AuthUser',
meta: { title: '分配用户', activeMenu: '/system/role' }
meta: {title: '分配用户', activeMenu: '/system/role'}
}
]
},
......@@ -140,7 +158,7 @@ export const dynamicRoutes = [
path: 'index/:dictId(\\d+)',
component: () => import('@/views/system/dict/data'),
name: 'Data',
meta: { title: '字典数据', activeMenu: '/system/dict' }
meta: {title: '字典数据', activeMenu: '/system/dict'}
}
]
},
......@@ -154,7 +172,7 @@ export const dynamicRoutes = [
path: 'index/:jobId(\\d+)',
component: () => import('@/views/monitor/job/log'),
name: 'JobLog',
meta: { title: '调度日志', activeMenu: '/monitor/job' }
meta: {title: '调度日志', activeMenu: '/monitor/job'}
}
]
},
......@@ -168,7 +186,7 @@ export const dynamicRoutes = [
path: 'index/:tableId(\\d+)',
component: () => import('@/views/tool/gen/editTable'),
name: 'GenEdit',
meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
meta: {title: '修改生成配置', activeMenu: '/tool/gen'}
}
]
}
......@@ -177,13 +195,13 @@ export const dynamicRoutes = [
const router = createRouter({
history: createWebHistory(),
routes: constantRoutes,
scrollBehavior(to, from, savedPosition) {
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
return {top: 0}
}
},
});
}
})
export default router;
export default router
src/views/computingResource/confirmOrder.vue 0 → 100644
<template>
<div class="app-container confirm-order">
<div class="breadcrumb">
<div class="flex-justify-end">
<el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>计算资源</el-breadcrumb-item>
<el-breadcrumb-item>确认订单</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="page-title">
<div>确认订单</div>
</div>
<div class="page-main">
<div class="detail-info">
<!-- <table style="width: 100%;">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th style="width: 180px">资源类别</th>-->
<!-- <th style="width: 130px">资源型号</th>-->
<!-- <th>配置详情</th>-->
<!-- <th style="width: 120px">虚拟器存储</th>-->
<!-- <th style="width: 120px">网络带宽</th>-->
<!-- <th style="width: 120px">公网IP</th>-->
<!-- <th style="width: 120px">申请时长</th>-->
<!-- <th style="width: 120px">申请数量</th>-->
<!-- <th style="width: 120px">配置费用</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <td>CPU裸金属服务器</td>-->
<!-- <td>型号1</td>-->
<!-- <td>-->
<!-- <p>CPU：I7-13900</p>-->
<!-- <p>GPU：4070TI</p>-->
<!-- <p>内存：DDR5 16GB</p>-->
<!-- <p>存储：6*4T,2*0.48T SSD</p>-->
<!-- </td>-->
<!-- <td>1T</td>-->
<!-- <td>2M</td>-->
<!-- <td>0个</td>-->
<!-- <td>半年</td>-->
<!-- <td>3</td>-->
<!-- <td>-->
<!-- <span style="color: #FF9811">￥1234.00</span>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>CPU裸金属服务器</td>-->
<!-- <td>型号1</td>-->
<!-- <td>-->
<!-- <p>CPU：I7-13900</p>-->
<!-- <p>GPU：4070TI</p>-->
<!-- <p>内存：DDR5 16GB</p>-->
<!-- <p>存储：6*4T,2*0.48T SSD</p>-->
<!-- </td>-->
<!-- <td>1T</td>-->
<!-- <td>2M</td>-->
<!-- <td>0个</td>-->
<!-- <td>半年</td>-->
<!-- <td>3</td>-->
<!-- <td>-->
<!-- <span style="color: #FF9811">￥1234.00</span>-->
<!-- </td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<el-table :data="tableData">
<el-table-column label="资源类别/型号">
<template #default="{row}">
<p>{{ row.typeName }}</p>
<p>{{ row.model }}</p>
</template>
</el-table-column>
<el-table-column label="配置详情" width="200px">
<template #default="{row}">
<p>CPU：I7-13900</p>
<p>GPU：4070TI</p>
<p>内存：DDR5 16GB</p>
<p>存储：6*4T,2*0.48T SSD</p>
</template>
</el-table-column>
<el-table-column label="虚拟器存储" prop="virtualStorage"/>
<el-table-column label="网络带宽" prop="bandwidth"/>
<el-table-column label="公网IP" prop="ip"/>
<el-table-column label="申请时长" prop="duration"/>
<el-table-column label="申请数量" prop="number"/>
<el-table-column label="配置费用" prop=""/>
</el-table>
</div>
</div>
<div class="footer-bar">
<div class="content flex-space-between flex-align-center">
<div>应付配置费用</div>
<div class="flex-align-center">
<div class="mr20">
<div class="price">￥1546.00</div>
<!-- <div>约￥15/月</div>-->
</div>
<el-button type="primary" @click="$router.push('/computingResource/orderResult')">提交</el-button>
</div>
</div>
</div>
</div>
</template>
<script name="ConfirmOrder" setup>
const tableData = [
{
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时',
virtualStorage: '',
bandwidth: '',
ip: '',
duration: '',
number: ''
},
{
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时',
virtualStorage: '',
bandwidth: '',
ip: '',
duration: '',
number: ''
}
]
</script>
<style scoped lang="scss">
.app-container {
background-color: #F7F8F9;
padding: 0 0 90px;
min-height: 100%;
}
.breadcrumb {
background-color: #FFFFFF;
border-bottom: 1px solid #EBEDED;
padding-top: 12px;
padding-bottom: 12px;
> div {
width: 1280px;
margin: 0 auto;
}
:deep(.el-breadcrumb__item) {
&:last-child .el-breadcrumb__inner {
color: #222222;
}
}
}
.page-title {
font-weight: bold;
font-size: 24px;
color: #303233;
padding: 12px 80px;
background-color: #FFFFFF;
> div {
width: 1280px;
margin: 0 auto;
}
}
.page-main {
padding: 30px 80px;
}
.detail-info {
width: 1280px;
margin: 0 auto;
padding: 0 24px 24px 24px;
background-color: #FFFFFF;
.el-table {
:deep(.el-table__header-wrapper ) th {
background-color: #FFFFFF !important;
font-size: 14px;
}
:deep(td.el-table__cell) {
background-color: #F7F8F9 !important;
}
}
//table {
// border-collapse: collapse;
//}
//
//tbody tr:not(:last-child) td {
// border-bottom: 1px solid #d7d7d7;
//}
//
//th {
// font-weight: 500;
// font-size: 14px;
// color: #303233;
// text-align: left;
// padding: 16px 20px;
//}
//
//td {
// font-weight: 400;
// font-size: 14px;
// color: #303233;
// text-align: left;
// padding: 16px 20px;
// background-color: #F7F8F9;
//}
}
.footer-bar {
padding: 18px;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
width: 100%;
.content {
margin: 0 auto;
width: 1280px;
}
.price {
font-weight: bold;
font-size: 24px;
color: #FF9811;
& + div {
font-weight: 400;
font-size: 14px;
color: #949899;
text-align: right;
}
}
.el-button {
width: 180px;
height: 46px;
font-size: 20px;
border-radius: 2px 2px 2px 2px;
}
}
</style>
src/views/computingResource/orderResult.vue 0 → 100644
<template>
<div class="app-container order-result">
<img src="@/assets/images/order-success.png" alt="">
<div class="text">申请成功</div>
<div class="sub-text">如有需要可返回产品页继续选购</div>
<div>
<el-button type="primary">继续选购</el-button>
</div>
<div>
<el-button type="default">返回首页</el-button>
</div>
</div>
</template>
<script setup name="OrderResult">
</script>
<style scoped lang="scss">
.order-result {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
.text {
font-weight: bold;
font-size: 24px;
color: #303233;
margin-bottom: 10px;
}
.sub-text {
font-weight: 400;
font-size: 14px;
color: #626566;
margin-bottom: 10px;
}
.el-button {
width: 368px;
height: 46px;
margin-top: 16px;
font-weight: 400;
font-size: 20px;
}
}
</style>
src/views/computingResource/index.vue → src/views/computingResource/resourceList.vue
......@@ -46,12 +46,8 @@
<div class="info-content">
<div class="switch-display" @click="showVersion = (showVersion === 1 ? 2 : 1)">
<el-icon :size="26" color="#555555" v-show="showVersion === 2">
<Tickets/>
</el-icon>
<el-icon :size="26" color="#555555" v-show="showVersion === 1">
<Grid/>
</el-icon>
<svg-icon v-show="showVersion === 2" color="#2E77E3" icon-class="list-1"/>
<svg-icon v-show="showVersion === 1" color="#2E77E3" icon-class="table"/>
</div>
<el-tabs v-model="tabActive">
<el-tab-pane
......@@ -66,12 +62,12 @@
<img :src="row.img" style="width: 50px;height: 50px;display: block" alt="">
</template>
</el-table-column>
<el-table-column prop="name" label="名称" sortable/>
<el-table-column prop="model" label="型号" width="190px" sortable/>
<el-table-column prop="cpu" label="CPU" sortable/>
<el-table-column prop="gpu" label="GPU" sortable/>
<el-table-column prop="memory" label="内存" sortable/>
<el-table-column prop="storage" label="存储" sortable/>
<el-table-column prop="quotation" label="报价" sortable/>
<el-table-column label="操作" width="204px">
<template #default="{row}">
<el-button class="action-button">加入购物车</el-button>
......@@ -152,7 +148,7 @@
<template #default>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">名称</div>
<div class="label">类别</div>
<div class="value">天河超级计算机</div>
</div>
......@@ -241,15 +237,15 @@
<div class="flex-align-center">
<div class="mr20">
<div class="price">￥1546.00</div>
<div>约￥15/月</div>
<!-- <div>约￥15/月</div>-->
</div>
<el-button type="primary">立即购买</el-button>
<el-button type="primary" @click="$router.push('/computingResource/confirmOrder')">确认配置</el-button>
</div>
</div>
</template>
</el-drawer>
<div class="shopping-trolley">
<div class="shopping-trolley" @click="$router.push('/computingResource/shoppingCart')">
<el-icon size="24px">
<ShoppingTrolley/>
</el-icon>
......@@ -260,11 +256,12 @@
</div>
</template>
<script name="ComputingResource" setup>
<script name="ResourceList" setup>
import { ref } from 'vue'
import pcDefaultImg from '@/assets/images/pc-default.png'
import SvgIcon from '@/components/SvgIcon/index.vue'
const showVersion = ref(1)
const showVersion = ref(2)
const tabActive = ref(1)
......@@ -282,84 +279,30 @@ const pageSize = ref(10)
const tableData = [
{
img: pcDefaultImg,
name: '天河超级计算机',
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
img: pcDefaultImg,
name: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
img: pcDefaultImg,
name: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
img: pcDefaultImg,
name: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
img: pcDefaultImg,
name: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
img: pcDefaultImg,
name: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
img: pcDefaultImg,
name: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
img: pcDefaultImg,
name: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
memory: '-',
storage: '-'
},
{
img: pcDefaultImg,
name: '天河超级计算机',
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
}, {
memory: '-',
storage: '-'
},
{
img: pcDefaultImg,
name: '天河超级计算机',
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时'
memory: '-',
storage: '-'
}
]
......@@ -378,53 +321,64 @@ const form = ref({
<style scoped lang="scss">
.app-container {
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
.breadcrumb {
margin-bottom: 24px;
border-bottom: 1px solid #EBEDED;
padding-top: 12px;
padding-bottom: 12px;
> div {
width: 1280px;
margin: 0 auto;
}
:deep(.el-breadcrumb__item) {
&:last-child .el-breadcrumb__inner {
color: #222222;
}
}
}
.banner-item {
width: 360px;
height: 144px;
background: linear-gradient(180deg, #DEEBFF 0%, rgba(222, 235, 255, 0) 100%), #FFFFFF;
box-shadow: 0px 9px 28px 8px rgba(46, 119, 227, 0.02), 0px 6px 16px 0px rgba(46, 119, 227, 0.04), 0px 3px 6px -4px rgba(46, 119, 227, 0.06);
border-radius: 0px 0px 0px 0px;
border: 2px solid #FFFFFF;
.top-banner-list {
margin-top: 24px;
&:nth-child(2) {
margin: 0 24px;
}
.banner-item {
width: 360px;
height: 144px;
background: linear-gradient(180deg, #DEEBFF 0%, rgba(222, 235, 255, 0) 100%), #FFFFFF;
box-shadow: 0px 9px 28px 8px rgba(46, 119, 227, 0.02), 0px 6px 16px 0px rgba(46, 119, 227, 0.04), 0px 3px 6px -4px rgba(46, 119, 227, 0.06);
border-radius: 0px 0px 0px 0px;
border: 2px solid #FFFFFF;
img {
margin-right: 24px;
width: 96px;
height: 96px;
object-fit: contain;
}
&:nth-child(2) {
margin: 0 24px;
}
h3 {
margin: 0 0 6px;
font-weight: bold;
font-size: 16px;
color: #303233;
}
img {
margin-right: 24px;
width: 96px;
height: 96px;
object-fit: contain;
}
p {
margin: 0;
font-weight: 400;
font-size: 14px;
color: #626566;
line-height: 22px;
h3 {
margin: 0 0 6px;
font-weight: bold;
font-size: 16px;
color: #303233;
}
p {
margin: 0;
font-weight: 400;
font-size: 14px;
color: #626566;
line-height: 22px;
}
}
}
......@@ -439,6 +393,7 @@ const form = ref({
right: 0;
top: 12px;
z-index: 99;
font-size: 24px;
}
.el-tabs {
......@@ -644,6 +599,7 @@ const form = ref({
font-weight: 400;
font-size: 14px;
color: #949899;
text-align: right;
}
}
......
src/views/computingResource/shoppingCart.vue 0 → 100644
<template>
<div class="app-container shopping-cart">
<div class="breadcrumb">
<div class="flex-justify-end">
<el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>计算资源</el-breadcrumb-item>
<el-breadcrumb-item>购物车</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="page-title">
<div>购物车 (总共{{tableData.length}})</div>
</div>
<div class="page-main">
<div class="detail-info">
<el-table :data="tableData">
<el-table-column type="selection"/>
<el-table-column label="资源类别/型号">
<template #default="{row}">
<p>{{ row.typeName }}</p>
<p>{{ row.model }}</p>
</template>
</el-table-column>
<el-table-column label="配置详情" width="200px">
<template #default="{row}">
<p>CPU：I7-13900</p>
<p>GPU：4070TI</p>
<p>内存：DDR5 16GB</p>
<p>存储：6*4T,2*0.48T SSD</p>
</template>
</el-table-column>
<el-table-column label="虚拟器存储(TB)" prop="virtualStorage">
<template #default="{row}">
<el-input-number
v-model="row.virtualStorage"
:min="1"
:max="10"
controls-position="right"
style="width: 80px"/>
</template>
</el-table-column>
<el-table-column label="网络带宽(MB)" prop="bandwidth">
<template #default="{row}">
<el-input-number
v-model="row.bandwidth"
:min="1"
:max="10"
controls-position="right"
style="width: 80px"/>
</template>
</el-table-column>
<el-table-column label="申请时长" prop="duration">
<template #default="{row}">
<el-select v-model="row.duration" style="width: 90px">
<el-option label="半年" value="1"></el-option>
<el-option label="一年" value="2"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="申请数量" prop="number">
<template #default="{row}">
<el-input-number
v-model="row.number"
:min="1"
:max="10"
controls-position="right"
style="width: 80px"/>
</template>
</el-table-column>
<el-table-column label="配置费用" prop=""/>
<el-table-column align="center" label="操作">
<el-button text>删除</el-button>
</el-table-column>
</el-table>
</div>
</div>
<div class="footer-bar">
<div class="content flex-space-between flex-align-center">
<div>
<span>已选 (3)</span>
<span style="margin-left: 40px;cursor: pointer">删除</span>
</div>
<div class="flex-align-center">
<div class="mr20">
<div class="price">￥1546.00</div>
</div>
<el-button type="primary" @click="$router.push('/computingResource/orderResult')">提交</el-button>
</div>
</div>
</div>
</div>
</template>
<script name="ConfirmOrder" setup>
const tableData = [
{
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时',
virtualStorage: '',
bandwidth: '',
ip: '',
duration: '',
number: ''
},
{
typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）',
cpu: 'I7-13900',
gpu: '4070TI',
memory: '1TB SSD',
storage: '0.044元/CPU核/小时',
virtualStorage: '',
bandwidth: '',
ip: '',
duration: '',
number: ''
}
]
</script>
<style scoped lang="scss">
.app-container {
background-color: #F7F8F9;
padding: 0 0 90px;
min-height: 100%;
}
.breadcrumb {
background-color: #FFFFFF;
border-bottom: 1px solid #EBEDED;
padding-top: 12px;
padding-bottom: 12px;
> div {
width: 1280px;
margin: 0 auto;
}
:deep(.el-breadcrumb__item) {
&:last-child .el-breadcrumb__inner {
color: #222222;
}
}
}
.page-title {
font-weight: bold;
font-size: 24px;
color: #303233;
padding: 12px 80px;
background-color: #FFFFFF;
> div {
width: 1280px;
margin: 0 auto;
}
}
.page-main {
padding: 30px 80px;
}
.detail-info {
width: 1280px;
margin: 0 auto;
padding: 0 24px 24px 24px;
background-color: #FFFFFF;
.el-table {
:deep(.el-table__header-wrapper ) th {
background-color: #FFFFFF !important;
font-size: 14px;
}
:deep(td.el-table__cell) {
background-color: #F7F8F9 !important;
}
}
//table {
// border-collapse: collapse;
//}
//
//tbody tr:not(:last-child) td {
// border-bottom: 1px solid #d7d7d7;
//}
//
//th {
// font-weight: 500;
// font-size: 14px;
// color: #303233;
// text-align: left;
// padding: 16px 20px;
//}
//
//td {
// font-weight: 400;
// font-size: 14px;
// color: #303233;
// text-align: left;
// padding: 16px 20px;
// background-color: #F7F8F9;
//}
}
.footer-bar {
padding: 18px;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
width: 100%;
.content {
margin: 0 auto;
width: 1280px;
}
.price {
font-weight: bold;
font-size: 24px;
color: #FF9811;
& + div {
font-weight: 400;
font-size: 14px;
color: #949899;
text-align: right;
}
}
.el-button {
width: 180px;
height: 46px;
font-size: 20px;
border-radius: 2px 2px 2px 2px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment