Skip to content

phsl / client

Go to a project
Commit b76d4879 by 赵月辉
Options

完成计算资源静态页面

parent 97bdbc4d
Showing with 682 additions and 10 deletions
src/layout/components/Settings/index.vue
...@@ -96,7 +96,7 @@ const showSettings = ref(false); ...@@ -96,7 +96,7 @@ const showSettings = ref(false);
const theme = ref(settingsStore.theme); const theme = ref(settingsStore.theme);
const sideTheme = ref(settingsStore.sideTheme); const sideTheme = ref(settingsStore.sideTheme);
const storeSettings = computed(() => settingsStore); const storeSettings = computed(() => settingsStore);
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]); const predefineColors = ref(["#2E77E3", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
/** 是否需要topnav */ /** 是否需要topnav */
function topNavChange(val) { function topNavChange(val) {
......
src/layout/user-layout.vue
<template> <template>
<div class="app-wrapper"> <div class="app-wrapper">
<div class="nav-bar"> <div class="nav-bar">
<div class="nav-bar-content">
<div class="logo flex-align-center"> <div class="logo flex-align-center">
<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="">
...@@ -33,6 +34,7 @@ ...@@ -33,6 +34,7 @@
<el-button type="primary">登录/注册</el-button> <el-button type="primary">登录/注册</el-button>
</div> </div>
</div> </div>
</div>
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>--> <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>-->
<app-main/> <app-main/>
</div> </div>
...@@ -56,18 +58,22 @@ const activeIndex = ref('1') ...@@ -56,18 +58,22 @@ const activeIndex = ref('1')
} }
.nav-bar { .nav-bar {
height: 64px; border-bottom: 2px solid #ECECEB;
display: flex;
align-items: center;
border-bottom: 1px solid #ECECEB;
background-color: #ffffff; background-color: #ffffff;
padding: 0 80px;
position: fixed; position: fixed;
z-index: 1; z-index: 999;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
.nav-bar-content {
width: 1280px;
margin: 0 auto;
height: 64px;
display: flex;
align-items: center;
}
.logo { .logo {
.nscc { .nscc {
height: 46px; height: 46px;
...@@ -110,7 +116,6 @@ const activeIndex = ref('1') ...@@ -110,7 +116,6 @@ const activeIndex = ref('1')
} }
.el-button { .el-button {
background-color: #2E77E3;
height: 38px; height: 38px;
border-radius: 2px; border-radius: 2px;
font-size: 14px; font-size: 14px;
......
src/main.js
import { createApp } from 'vue' import { createApp } from 'vue'
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import locale from 'element-plus/es/locale/lang/zh-cn' import locale from 'element-plus/es/locale/lang/zh-cn'
......
src/router/index.js
...@@ -73,6 +73,18 @@ export const constantRoutes = [ ...@@ -73,6 +73,18 @@ export const constantRoutes = [
] ]
}, },
{ {
path: '/computingResource',
component: UserLayout,
children: [
{
path: 'index',
component: () => import('@/views/computingResource/index.vue'),
name: 'ComputingResource',
meta: { title: '计算资源' }
}
]
},
{
path: '/user', path: '/user',
component: Layout, component: Layout,
hidden: true, hidden: true,
......
src/views/computingResource/index.vue 0 → 100644
<template>
<div class="app-container computing-resource">
<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>
</div>
</div>
<div class="top-banner-list flex-justify-center">
<div class="banner-item flex-align-center">
<img src="@/assets/images/superior-performance.png" alt="">
<div>
<h3>性能优越</h3>
<p>
提供多种产品配置
<br>
满足个性化需求</p>
</div>
</div>
<div class="banner-item flex-align-center">
<img src="@/assets/images/intelligent-computing.png" alt="">
<div>
<h3>智能计算</h3>
<p>
提供多种产品配置
<br>
满足个性化需求</p>
</div>
</div>
<div class="banner-item flex-align-center">
<img src="@/assets/images/innovative-design.png" alt="">
<div>
<h3>创新设计</h3>
<p>
提供多种产品配置
<br>
满足个性化需求</p>
</div>
</div>
</div>
<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>
</div>
<el-tabs v-model="tabActive">
<el-tab-pane
v-for="productType in productTypes"
:key="productType.value"
:label="productType.name"
:name="productType.value">
<div v-if="showVersion === 1" class="version-1">
<el-table :data="tableData" :max-height="490" style="width: 100%">
<el-table-column prop="img" label="图片" width="80px">
<template #default="{row}">
<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 label="操作" width="204px">
<template #default="{row}">
<el-button class="action-button">加入购物车</el-button>
<el-button type="primary" class="action-button" @click="showDrawer = true">立即申请</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="showVersion === 2" class="version-2">
<el-row :gutter="24">
<el-col v-for="(item,index) in tableData" :key="index" :span="6">
<div class="product-card">
<div class="top-info">
<div class="title">{{ item.name }}</div>
<div class="tag">
<el-tag type="warning" effect="dark">性价比</el-tag>
<el-tag type="info" effect="plain">专家推荐</el-tag>
</div>
<div class="desc">提供通用计算性能和网络流量，适合小型网站、小程序和Web开发场景</div>
</div>
<div class="bottom-info">
<div class="label">型号</div>
<div class="value">{{ item.model }}</div>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div>
<div class="parameter-item">
<div class="label">CPU</div>
<div class="value">{{ item.cpu }}</div>
</div>
<div class="parameter-item">
<div class="label">GPU</div>
<div class="value">{{ item.gpu }}</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div>
<div class="parameter-item">
<div class="label">内存</div>
<div class="value">{{ item.memory }}</div>
</div>
<div class="parameter-item">
<div class="label">存储</div>
<div class="value">{{ item.storage }}</div>
</div>
</div>
</el-col>
</el-row>
<el-divider></el-divider>
<div class="flex-justify-end price">￥1546.00</div>
<div class="flex-justify-end month-expenses">约￥15/月</div>
<el-divider></el-divider>
<div class="footer-action flex">
<el-button class="action-button">加入购物车</el-button>
<el-button type="primary" class="action-button" @click="showDrawer = true">立即申请</el-button>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<pagination
v-show="total > 0"
:total="total"
v-model:page="pageNum"
v-model:limit="pageSize"
@pagination="getList"/>
</el-tab-pane>
</el-tabs>
</div>
<el-drawer v-model="showDrawer" class="drawer" direction="rtl" :size="694" title="资源申请详情">
<template #default>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">名称</div>
<div class="value">天河超级计算机</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">型号</div>
<div class="value">天河一号纯机 (无CPU)</div>
</div>
</div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">CPU</div>
<div class="value">I7-13900</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">GPU</div>
<div class="value">4070TI</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">内存</div>
<div class="value">DDR5 16GB</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">存储</div>
<div class="value">1TB SSD</div>
</div>
</div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">网络</div>
<div class="value">
<el-radio-group v-model="form.radio1" size="">
<el-radio-button label="2M(默认)" value="2"/>
<el-radio-button label="10M" value="10"/>
<el-radio-button label="50M" value="50"/>
<el-radio-button label="100M" value="100"/>
</el-radio-group>
</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">公网IP（个）</div>
<div class="value">
<el-input-number v-model="form.num1" :min="1" :max="10" style="width: 110px"/>
</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">虚拟机内存（TB）</div>
<div class="value">
<el-input-number v-model="form.num2" :min="1" :max="10" style="width: 110px"/>
</div>
</div>
</div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">使用数量（个）</div>
<div class="value">
<el-input-number v-model="form.num3" :min="1" :max="10" style="width: 110px"/>
</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">使用时长（年）</div>
<div class="value">
<el-radio-group v-model="form.radio2" size="">
<el-radio-button label="半年" value="0.5"/>
<el-radio-button label="1年" value="1"/>
<el-radio-button label="2年" value="2"/>
<el-radio-button label="3年" value="3"/>
<el-radio-button label="5年" value="5"/>
</el-radio-group>
</div>
</div>
</div>
</template>
<template #footer>
<div class="drawer-footer 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">立即购买</el-button>
</div>
</div>
</template>
</el-drawer>
<div class="shopping-trolley">
<el-icon size="24px">
<ShoppingTrolley/>
</el-icon>
<div>购</div>
<div>物</div>
<div>车</div>
</div>
</div>
</template>
<script name="ComputingResource" setup>
import { ref } from 'vue'
import pcDefaultImg from '@/assets/images/pc-default.png'
const showVersion = ref(1)
const tabActive = ref(1)
const productTypes = [
{name: '天河超级计算机', value: 1},
{name: 'CPU裸金属服务器', value: 2},
{name: '存储', value: 3},
{name: '云计算资源', value: 4}
]
const total = ref(1)
const pageNum = ref(1)
const pageSize = ref(10)
const tableData = [
{
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核/小时'
}, {
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核/小时'
}
]
function getList () {
}
const showDrawer = ref(false)
const form = ref({
radio1: '',
num1: '',
num2: '',
num3: '',
radio2: ''
})
</script>
<style scoped lang="scss">
.app-container {
padding-left: 0;
padding-right: 0;
}
.breadcrumb {
margin-bottom: 24px;
border-bottom: 1px solid #EBEDED;
padding-bottom: 12px;
> div {
width: 1280px;
margin: 0 auto;
}
}
.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;
&:nth-child(2) {
margin: 0 24px;
}
img {
margin-right: 24px;
width: 96px;
height: 96px;
object-fit: contain;
}
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;
}
}
.info-content {
width: 1280px;
margin: 40px auto 0 auto;
position: relative;
.switch-display {
position: absolute;
cursor: pointer;
right: 0;
top: 12px;
z-index: 99;
}
.el-tabs {
--el-border-color-light: #2E77E3;
--el-tabs-header-height: 48px;
:deep(.el-tabs__content) {
overflow: visible
}
:deep(.el-tabs__active-bar) {
display: none;
}
:deep(.el-tabs__item) {
--el-font-size-base: 16px;
padding-left: 24px !important;
padding-right: 24px !important;
&.is-active {
color: #ffffff;
background-color: #2E77E3;
}
}
}
.version-2 {
height: 490px;
margin: 0 -12px;
overflow-x: auto;
.el-row {
margin: 0 !important;
}
}
}
.el-table {
font-size: 14px;
:deep(.el-table__header-wrapper th) {
font-size: 14px;
}
.action-button {
padding-left: 8px;
padding-right: 8px;
height: 24px;
}
}
.product-card {
margin-bottom: 24px;
border: 1px solid rgba(0, 0, 0, 0.08);
&:hover {
border: 1px solid #2E77E3;
box-sizing: border-box;
}
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
border-radius: 0px 0px 0px 0px;
.top-info {
padding: 18px 20px 12px 20px;
background: linear-gradient(153deg, rgba(255, 175, 175, 0) 0%, #FDE7E7 100%), linear-gradient(145deg, #EDFCFF 0%, rgba(97, 227, 255, 0) 100%), #F0F6FF;
.title {
font-weight: bold;
font-size: 20px;
color: #303233;
margin-bottom: 6px;
}
.tag {
margin-bottom: 8px;
.el-tag {
margin-right: 5px;
}
}
.desc {
font-weight: 400;
font-size: 14px;
color: #949899;
}
}
.bottom-info {
padding: 12px 24px 10px 24px;
.el-divider {
margin: 12px 0;
}
}
.el-col {
&:nth-child(even) {
display: flex;
flex-direction: column;
align-items: flex-end;
}
}
.parameter-item:first-child {
margin-bottom: 15px;
}
.label {
font-weight: 500;
font-size: 14px;
color: #626566;
margin-bottom: 2px;
}
.value {
font-weight: bold;
font-size: 16px;
color: #303233;
}
.price {
font-weight: bold;
font-size: 24px;
color: #FF9811;
}
.month-expenses {
font-weight: 400;
font-size: 14px;
color: #949899;
}
.footer-action {
.el-button {
flex: 1
}
}
}
.shopping-trolley {
cursor: pointer;
color: #FFFFFF;
position: absolute;
right: 20px;
bottom: 270px;
padding: 16px 8px;
background-color: #2E77E3;
font-size: 16px;
text-align: center;
}
:deep(.drawer) {
.el-drawer__header {
margin: 0;
padding-bottom: 20px;
}
.el-drawer__title {
font-weight: bold;
font-size: 32px;
color: #303233;
}
.el-drawer__body {
padding-top: 12px;
background-color: #F7F8F9;
}
}
.info-block {
background-color: #ffffff;
padding: 4px 0;
margin-bottom: 14px;
}
.info-item {
padding: 12px 48px;
.label {
font-weight: 400;
font-size: 14px;
color: #626566;
}
.value {
font-weight: bold;
font-size: 14px;
color: #303233;
}
}
.drawer-footer {
padding: 20px 48px 10px 48px;
.price {
font-weight: bold;
font-size: 24px;
color: #FF9811;
& + div {
font-weight: 400;
font-size: 14px;
color: #949899;
}
}
.el-button {
width: 180px;
height: 46px;
font-size: 20px;
border-radius: 2px 2px 2px 2px;
}
}
</style>
src/views/index.vue
...@@ -366,7 +366,6 @@ ...@@ -366,7 +366,6 @@
.view-more-btn { .view-more-btn {
border: none; border: none;
background-color: #2E77E3;
color: #ffffff; color: #ffffff;
} }
} }
......
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