Skip to content

phsl / client

Go to a project
Commit bd1edd00 by 赵月辉
Options

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

parent b76d4879
Showing with 645 additions and 101 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 @@ ...@@ -2,7 +2,7 @@
<div class="app-wrapper"> <div class="app-wrapper">
<div class="nav-bar"> <div class="nav-bar">
<div class="nav-bar-content"> <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="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
<img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt=""> <img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
<span class="logo-text">先进公共服务平台</span> <span class="logo-text">先进公共服务平台</span>
...@@ -75,6 +75,7 @@ const activeIndex = ref('1') ...@@ -75,6 +75,7 @@ const activeIndex = ref('1')
} }
.logo { .logo {
cursor: pointer;
.nscc { .nscc {
height: 46px; height: 46px;
} }
...@@ -124,7 +125,8 @@ const activeIndex = ref('1') ...@@ -124,7 +125,8 @@ const activeIndex = ref('1')
.app-main { .app-main {
padding-top: 64px; padding-top: 64px;
height: 100%;
//height: calc(100vh - 64px); //height: calc(100vh - 64px);
//overflow-y: auto; overflow-y: auto;
} }
</style> </style>
src/router/index.js
...@@ -49,7 +49,7 @@ export const constantRoutes = [ ...@@ -49,7 +49,7 @@ export const constantRoutes = [
hidden: true hidden: true
}, },
{ {
path: "/:pathMatch(.*)*", path: '/:pathMatch(.*)*',
component: () => import('@/views/error/404'), component: () => import('@/views/error/404'),
hidden: true hidden: true
}, },
...@@ -68,7 +68,7 @@ export const constantRoutes = [ ...@@ -68,7 +68,7 @@ export const constantRoutes = [
path: '/index', path: '/index',
component: () => import('@/views/index'), component: () => import('@/views/index'),
name: 'Index', name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true } meta: {title: '首页', icon: 'dashboard', affix: true}
} }
] ]
}, },
...@@ -77,10 +77,28 @@ export const constantRoutes = [ ...@@ -77,10 +77,28 @@ export const constantRoutes = [
component: UserLayout, component: UserLayout,
children: [ children: [
{ {
path: 'index', path: 'resourceList',
component: () => import('@/views/computingResource/index.vue'), component: () => import('@/views/computingResource/resourceList.vue'),
name: 'ComputingResource', name: 'ResourceList',
meta: { title: '计算资源' } 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 = [ ...@@ -94,7 +112,7 @@ export const constantRoutes = [
path: 'profile', path: 'profile',
component: () => import('@/views/system/user/profile/index'), component: () => import('@/views/system/user/profile/index'),
name: 'Profile', name: 'Profile',
meta: { title: '个人中心', icon: 'user' } meta: {title: '个人中心', icon: 'user'}
} }
] ]
} }
...@@ -112,7 +130,7 @@ export const dynamicRoutes = [ ...@@ -112,7 +130,7 @@ export const dynamicRoutes = [
path: 'role/:userId(\\d+)', path: 'role/:userId(\\d+)',
component: () => import('@/views/system/user/authRole'), component: () => import('@/views/system/user/authRole'),
name: 'AuthRole', name: 'AuthRole',
meta: { title: '分配角色', activeMenu: '/system/user' } meta: {title: '分配角色', activeMenu: '/system/user'}
} }
] ]
}, },
...@@ -126,7 +144,7 @@ export const dynamicRoutes = [ ...@@ -126,7 +144,7 @@ export const dynamicRoutes = [
path: 'user/:roleId(\\d+)', path: 'user/:roleId(\\d+)',
component: () => import('@/views/system/role/authUser'), component: () => import('@/views/system/role/authUser'),
name: 'AuthUser', name: 'AuthUser',
meta: { title: '分配用户', activeMenu: '/system/role' } meta: {title: '分配用户', activeMenu: '/system/role'}
} }
] ]
}, },
...@@ -140,7 +158,7 @@ export const dynamicRoutes = [ ...@@ -140,7 +158,7 @@ export const dynamicRoutes = [
path: 'index/:dictId(\\d+)', path: 'index/:dictId(\\d+)',
component: () => import('@/views/system/dict/data'), component: () => import('@/views/system/dict/data'),
name: 'Data', name: 'Data',
meta: { title: '字典数据', activeMenu: '/system/dict' } meta: {title: '字典数据', activeMenu: '/system/dict'}
} }
] ]
}, },
...@@ -154,7 +172,7 @@ export const dynamicRoutes = [ ...@@ -154,7 +172,7 @@ export const dynamicRoutes = [
path: 'index/:jobId(\\d+)', path: 'index/:jobId(\\d+)',
component: () => import('@/views/monitor/job/log'), component: () => import('@/views/monitor/job/log'),
name: 'JobLog', name: 'JobLog',
meta: { title: '调度日志', activeMenu: '/monitor/job' } meta: {title: '调度日志', activeMenu: '/monitor/job'}
} }
] ]
}, },
...@@ -168,7 +186,7 @@ export const dynamicRoutes = [ ...@@ -168,7 +186,7 @@ export const dynamicRoutes = [
path: 'index/:tableId(\\d+)', path: 'index/:tableId(\\d+)',
component: () => import('@/views/tool/gen/editTable'), component: () => import('@/views/tool/gen/editTable'),
name: 'GenEdit', name: 'GenEdit',
meta: { title: '修改生成配置', activeMenu: '/tool/gen' } meta: {title: '修改生成配置', activeMenu: '/tool/gen'}
} }
] ]
} }
...@@ -177,13 +195,13 @@ export const dynamicRoutes = [ ...@@ -177,13 +195,13 @@ export const dynamicRoutes = [
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: constantRoutes, routes: constantRoutes,
scrollBehavior(to, from, savedPosition) { scrollBehavior (to, from, savedPosition) {
if (savedPosition) { if (savedPosition) {
return savedPosition return savedPosition
} else { } 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 @@ ...@@ -46,12 +46,8 @@
<div class="info-content"> <div class="info-content">
<div class="switch-display" @click="showVersion = (showVersion === 1 ? 2 : 1)"> <div class="switch-display" @click="showVersion = (showVersion === 1 ? 2 : 1)">
<el-icon :size="26" color="#555555" v-show="showVersion === 2"> <svg-icon v-show="showVersion === 2" color="#2E77E3" icon-class="list-1"/>
<Tickets/> <svg-icon v-show="showVersion === 1" color="#2E77E3" icon-class="table"/>
</el-icon>
<el-icon :size="26" color="#555555" v-show="showVersion === 1">
<Grid/>
</el-icon>
</div> </div>
<el-tabs v-model="tabActive"> <el-tabs v-model="tabActive">
<el-tab-pane <el-tab-pane
...@@ -66,12 +62,12 @@ ...@@ -66,12 +62,12 @@
<img :src="row.img" style="width: 50px;height: 50px;display: block" alt=""> <img :src="row.img" style="width: 50px;height: 50px;display: block" alt="">
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="名称" sortable/>
<el-table-column prop="model" label="型号" width="190px" sortable/> <el-table-column prop="model" label="型号" width="190px" sortable/>
<el-table-column prop="cpu" label="CPU" sortable/> <el-table-column prop="cpu" label="CPU" sortable/>
<el-table-column prop="gpu" label="GPU" sortable/> <el-table-column prop="gpu" label="GPU" sortable/>
<el-table-column prop="memory" label="内存" sortable/> <el-table-column prop="memory" label="内存" sortable/>
<el-table-column prop="storage" label="存储" sortable/> <el-table-column prop="storage" label="存储" sortable/>
<el-table-column prop="quotation" label="报价" sortable/>
<el-table-column label="操作" width="204px"> <el-table-column label="操作" width="204px">
<template #default="{row}"> <template #default="{row}">
<el-button class="action-button">加入购物车</el-button> <el-button class="action-button">加入购物车</el-button>
...@@ -152,7 +148,7 @@ ...@@ -152,7 +148,7 @@
<template #default> <template #default>
<div class="info-block"> <div class="info-block">
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">名称</div> <div class="label">类别</div>
<div class="value">天河超级计算机</div> <div class="value">天河超级计算机</div>
</div> </div>
...@@ -241,15 +237,15 @@ ...@@ -241,15 +237,15 @@
<div class="flex-align-center"> <div class="flex-align-center">
<div class="mr20"> <div class="mr20">
<div class="price">￥1546.00</div> <div class="price">￥1546.00</div>
<div>约￥15/月</div> <!-- <div>约￥15/月</div>-->
</div> </div>
<el-button type="primary">立即购买</el-button> <el-button type="primary" @click="$router.push('/computingResource/confirmOrder')">确认配置</el-button>
</div> </div>
</div> </div>
</template> </template>
</el-drawer> </el-drawer>
<div class="shopping-trolley"> <div class="shopping-trolley" @click="$router.push('/computingResource/shoppingCart')">
<el-icon size="24px"> <el-icon size="24px">
<ShoppingTrolley/> <ShoppingTrolley/>
</el-icon> </el-icon>
...@@ -260,11 +256,12 @@ ...@@ -260,11 +256,12 @@
</div> </div>
</template> </template>
<script name="ComputingResource" setup> <script name="ResourceList" setup>
import { ref } from 'vue' import { ref } from 'vue'
import pcDefaultImg from '@/assets/images/pc-default.png' 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) const tabActive = ref(1)
...@@ -282,84 +279,30 @@ const pageSize = ref(10) ...@@ -282,84 +279,30 @@ const pageSize = ref(10)
const tableData = [ const tableData = [
{ {
img: pcDefaultImg, 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）', model: '天河一号纯机（无CPU）',
cpu: 'I7-13900', cpu: 'I7-13900',
gpu: '4070TI', gpu: '4070TI',
memory: '1TB SSD', memory: '-',
storage: '0.044元/CPU核/小时' storage: '-'
}, { },
{
img: pcDefaultImg, img: pcDefaultImg,
name: '天河超级计算机', typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）', model: '天河一号纯机（无CPU）',
cpu: 'I7-13900', cpu: 'I7-13900',
gpu: '4070TI', gpu: '4070TI',
memory: '1TB SSD', memory: '-',
storage: '0.044元/CPU核/小时' storage: '-'
}, { },
{
img: pcDefaultImg, img: pcDefaultImg,
name: '天河超级计算机', typeName: '天河超级计算机',
model: '天河一号纯机（无CPU）', model: '天河一号纯机（无CPU）',
cpu: 'I7-13900', cpu: 'I7-13900',
gpu: '4070TI', gpu: '4070TI',
memory: '1TB SSD', memory: '-',
storage: '0.044元/CPU核/小时' storage: '-'
} }
] ]
...@@ -378,22 +321,32 @@ const form = ref({ ...@@ -378,22 +321,32 @@ const form = ref({
<style scoped lang="scss"> <style scoped lang="scss">
.app-container { .app-container {
padding-top: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.breadcrumb { .breadcrumb {
margin-bottom: 24px;
border-bottom: 1px solid #EBEDED; border-bottom: 1px solid #EBEDED;
padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
> div { > div {
width: 1280px; width: 1280px;
margin: 0 auto; margin: 0 auto;
} }
:deep(.el-breadcrumb__item) {
&:last-child .el-breadcrumb__inner {
color: #222222;
}
}
} }
.banner-item { .top-banner-list {
margin-top: 24px;
.banner-item {
width: 360px; width: 360px;
height: 144px; height: 144px;
background: linear-gradient(180deg, #DEEBFF 0%, rgba(222, 235, 255, 0) 100%), #FFFFFF; background: linear-gradient(180deg, #DEEBFF 0%, rgba(222, 235, 255, 0) 100%), #FFFFFF;
...@@ -426,6 +379,7 @@ const form = ref({ ...@@ -426,6 +379,7 @@ const form = ref({
color: #626566; color: #626566;
line-height: 22px; line-height: 22px;
} }
}
} }
.info-content { .info-content {
...@@ -439,6 +393,7 @@ const form = ref({ ...@@ -439,6 +393,7 @@ const form = ref({
right: 0; right: 0;
top: 12px; top: 12px;
z-index: 99; z-index: 99;
font-size: 24px;
} }
.el-tabs { .el-tabs {
...@@ -644,6 +599,7 @@ const form = ref({ ...@@ -644,6 +599,7 @@ const form = ref({
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #949899; 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