Leo_Ding/GPU_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Leo_Ding:031e967f74e85928d24c36870bbd29570f757330
Branches Tags
Leo_Ding:main
..
compare: Leo_Ding:6abff45d13bfaa4488e0ba64ee3bb115dc2c1f67
Branches Tags
Leo_Ding:main

No commits in common. "031e967f74e85928d24c36870bbd29570f757330" and "6abff45d13bfaa4488e0ba64ee3bb115dc2c1f67" have entirely different histories.
031e967f74 ... 6abff45d13

14 changed files with 72 additions and 144 deletions
Show Stats Expand all files Collapse all files

BIN
src/assets/12.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 MiB

BIN
src/assets/333.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
src/assets/banner3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 MiB

BIN
src/assets/banner4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 MiB

BIN
src/assets/goumaijilu.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/gpu.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 MiB

BIN
src/assets/jimeng.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 MiB

BIN
src/assets/jimeng2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 MiB

BIN
src/assets/yaoqinghaoyou-4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/youhuiquan-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 920 B

2
src/router/index.ts
View File

@ -255,7 +255,7 @@ const router = createRouter({
// ====== 添加全局前置守卫 ======
router.beforeEach((to, from, next) => {
console.log("Navigating to:", to.path);
const list = ["/layout/home","/document/introdution","/layout/admin/home"];
const list = ["/layout/home","/document/introdution"];
if (list.indexOf(to.path) != -1) {
next();
return;

144
src/views/home/index.vue
View File

@ -1,29 +1,24 @@
<template>
<div style="background-color: rgba(250, 251, 253,1);">
<div style="height: 600px; overflow: hidden;">
<a-carousel :after-change="onChange" style="height: 100%;" autoplay>
<template #prevArrow>
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
<left-circle-outlined />
</div>
</template>
<template #nextArrow>
<div class="custom-slick-arrow" style="right: 10px">
<right-circle-outlined />
</div>
</template>
<div v-for="item in bannerList" :key="item.id" class="banner-slide">
<div>
<div style="height: 550px; overflow: hidden;">
<a-carousel :after-change="onChange" style="height: 100%;">
<div v-for="item in bannerList" :key="item.id" class="banner-slide" >
<img :src="item.image_url" alt="" srcset="" width="100%" height="100%">
</div>
</a-carousel>
</div>
<div class="one">
<div v-for="item in oneList" style="display: flex;justify-content: center;align-items: center;">
<div style="margin-right: 10px;"><img :src="item.img" alt="" srcset="" width="50" height="50"></div>
<div>
<h3>{{ item.title }}</h3>
<span>{{ item.description }}</span>
</div>
<div>
<h3>GPU选型</h3>
<span>如何选择合适的GPU</span>
</div>
<div>
<h3>开具发票</h3>
<span>简单快速开具发票</span>
</div>
<div>
<h3>新手入门</h3>
<span>简单几步，创建实例</span>
</div>
</div>
<div class="two">
@ -68,31 +63,10 @@
</div>
</div>
<div class="avatary_list">
<div class="avatary_item">
<div>
<div class="title" style="font-size: 28px;">海量高性能 GPU 集群算力</div>
<div class="subtitle" style="text-align: left;font-size: 18px;">搭载 NVIDIA A100/H100/H800 等高性能
GPU，拥有强悍算力与超高显存带宽，精准适配不同精度需求，大幅提升运算效率与资源利用率；同时优化稀疏矩阵运算，有效减少 AI 模型的冗余计算。</div>
</div>
<img src="@/assets/jimeng.png" alt="" srcset="" width="300" height="300">
</div>
<div class="avatary_item" style="margin-bottom: 50px;">
<img src="@/assets/gpu.png" alt="" srcset="" width="300">
<div>
<div class="title" style="font-size: 28px;">算力灵活调度</div>
<div class="subtitle" style="text-align: left;font-size: 18px;">
本平台支持按需计费与包周期计费两种正式模式，适配短期突发算力需求与长期稳定部署场景。按需计费按实结算，避免资源浪费；包周期计费性价比更优，保障持续运算。用户可自主择选，兼顾成本与效率，助力业务高效推进。
</div>
</div>
</div>
<div class="avatary_item">
<div>
<div class="title" style="font-size: 28px;">低价高配 算力性价比超高</div>
<div class="subtitle" style="text-align: left;font-size: 18px;">
更强更全 AI 算力集群，即刻解锁算力租用服务
</div>
</div>
<img src="@/assets/jimeng2.png" alt="" srcset="" width="300">
<div v-for="item in advantageList">
<img :src="item.img" alt="" srcset="" width="200" height="158">
<div class="title">{{ item.title }}</div>
<div class="subtitle">{{ item.description }}</div>
</div>
</div>
</div>
@ -133,41 +107,19 @@
</template>
<script lang="ts" setup>
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue'
import { getBannerList, getGpuList, getAdvantage, getHotProduct } from '@/apis/home';
import one from '@/assets/1.png'
import two from '@/assets/2.png'
import three from '@/assets/3.png'
import firth from '@/assets/4.png'
import youhuiquan from '@/assets/youhuiquan-2.png'
import yaoqinghaoyou from '@/assets/yaoqinghaoyou-4.png'
import goumaijilu from '@/assets/goumaijilu.png'
import defaultBanner3 from '@/assets/12.png';
import defaultBanner4 from '@/assets/333.png';
import defaultBanner from '@/assets/banner2.png';
const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
const source = ref([])
const oneList = ref([
{
img: youhuiquan,
title: '算力免费领',
description: '完成认证/问卷获得算力券'
},
{
img: yaoqinghaoyou,
title: '邀约优算友',
description: '邀请好友可获得算力券'
},
{
img: goumaijilu,
title: '开业重磅福利',
description: '购算力，享豪礼'
}
])
const advantageList = ref([])
const bannerList = ref<any[]>([
{ id: 0, image_url: defaultBanner3 },
{ id: 1, image_url: defaultBanner4 }
{ id: 0, image_url: defaultBanner }
]);
const onChange = (current: number) => {
@ -187,15 +139,15 @@ const fetchBannerList = async () => {
id: item.id || index,
image_url: item.image_url || defaultBanner
};
// 处理http协议问题
if (processedItem.image_url && processedItem.image_url.startsWith('http://')) {
processedItem.image_url = processedItem.image_url.replace('http://', 'https://');
}
return processedItem;
});
bannerList.value = processedList;
} else {
// API返回空数据或无效数据，使用默认图片
@ -211,12 +163,8 @@ const fetchBannerList = async () => {
// 请求GPU列表
const getGPUList = async () => {
try {
// const res: any = await getGpuList();
source.value = [
{ gpu_type: 'NVIDIA RTX 3090', payOnTime: 15.0, memory: 64, vram: 24, gpu_num: 1 },
{ gpu_type: 'NVIDIA A100', payOnTime: 25.0, memory: 128, vram: 40, gpu_num: 1 },
{ gpu_type: 'NVIDIA RTX 4090', payOnTime: 30.0, memory: 96, vram: 24, gpu_num: 1 }
];
const res: any = await getGpuList();
source.value = res;
} catch (error: any) {
console.error('GPU列表请求失败:', error);
@ -226,13 +174,8 @@ const getGPUList = async () => {
// 请求产品优势
const getAdvantageList = async () => {
try {
// const res: any = await getAdvantage();
const list = [
{ title: '高性能算力', description: '采用最新一代GPU，提供强大计算能力，满足各种复杂任务需求。' },
{ title: '灵活计费模式', description: '支持按需付费和包月套餐，用户可根据实际需求选择最合适的计费方式。' },
{ title: '全球节点覆盖', description: '在多个地区设有数据中心，确保用户无论身处何地都能享受低延迟的服务体验。' },
{ title: '专业技术支持', description: '提供7x24小时技术支持，确保用户在使用过程中遇到的问题能够及时得到解决。' }
];
const res: any = await getAdvantage();
const list = res;
// 给每个 item 添加 img 字段
list.forEach((item: any, index: number) => {
@ -264,7 +207,7 @@ getAdvantageList();
<style scoped lang="scss">
.banner-slide {
width: 100%;
height: 600px;
height: 550px;
// background: url('@/assets/banner2.png') no-repeat center / cover;
}
@ -272,18 +215,14 @@ getAdvantageList();
display: flex;
justify-content: space-around;
align-items: center;
background-color: #cfe7fe;
padding: 30px 0;
width: 1200px;
margin: 0 auto;
border-radius: 27px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
&>div {
padding: 10;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
& span {
@ -293,7 +232,7 @@ getAdvantageList();
}
.two {
// background-image: linear-gradient(to bottom, #eaf7fc, #f4fafc);
background-image: linear-gradient(to bottom, #eaf7fc, #f4fafc);
padding-bottom: 80px;
&>div {
@ -336,21 +275,14 @@ getAdvantageList();
}
.avatary_list {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
// gap: 50px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
&>div {
display: flex;
// flex-direction: column;
align-items: spance-between;
gap: 50px;
&>div{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
flex-direction: column;
align-items: center;
}
.title {

68
src/views/layout/index.vue
View File

@ -9,47 +9,43 @@
:items="rightRoutes" @click="({ key }) => handleMenuClick(key)" />
</div>
<div class="user-info">
<template v-if="!isLogin">
<a-button type="primary" @click="router.push('/login')">登录 / 注册</a-button>
</template>
<template v-else>
<a-dropdown>
<div style="display: flex;align-items: center;justify-content: flex-end;">
<a-avatar :size="24" :src="userInfo.avatar">
<!-- <template #icon>
<a-dropdown>
<div style="display: flex;align-items: center;justify-content: flex-end;">
<a-avatar :size="24" :src="userInfo.avatar">
<!-- <template #icon>
<UserOutlined />
</template> -->
</a-avatar>
<span style="font-size: 14px;padding-left:5px;">{{ userInfo.userName }}</span>
</div>
<template #overlay>
<a-card hoverable style="width: 300px">
<template #cover>
<div style="background:#f5f7fa;padding:10px;line-height: 30px">
<div>{{ userInfo.userName }} <a-tag color="blue" style="margin-left: 10px;">{{
userInfo.accountType === 'USER' ? '个人认证' : '企业认证' }}</a-tag></div>
<div>ID:{{ userInfo.id }}</div>
</a-avatar>
<span style="font-size: 14px;padding-left:5px;">{{ userInfo.userName }}</span>
</div>
<template #overlay>
<a-card hoverable style="width: 300px">
<template #cover>
<div style="background:#f5f7fa;padding:10px;line-height: 30px">
<div>{{ userInfo.userName }} <a-tag color="blue" style="margin-left: 10px;">{{
userInfo.accountType==='USER'?'个人认证':'企业认证' }}</a-tag></div>
<div>ID:{{ userInfo.id }}</div>
</div>
<div style="padding: 10px;line-height: 45px;">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div>可用余额：¥{{ userInfo.balace }}</div>
<!-- <a-button type="primary" danger ghost size="small">去充值</a-button> -->
</div>
<div style="padding: 10px;line-height: 45px;">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div>可用余额：¥{{ userInfo.balace }}</div>
<!-- <a-button type="primary" danger ghost size="small">去充值</a-button> -->
</div>
<div>实例数量：¥{{ userInfo.caseNum }}</div>
<div>冻结余额：¥{{ userInfo.freezeBalace }}</div>
<div>未冻结余额：¥{{ userInfo.noFreezeBalace }}</div>
</div>
</template>
<template #actions>
<!-- <setting-outlined key="setting" />
<div>实例数量：¥{{ userInfo.caseNum }}</div>
<div>冻结余额：¥{{ userInfo.freezeBalace }}</div>
<div>未冻结余额：¥{{ userInfo.noFreezeBalace }}</div>
</div>
</template>
<template #actions>
<!-- <setting-outlined key="setting" />
<edit-outlined key="edit" />
<ellipsis-outlined key="ellipsis" /> -->
<a-button block type="text" @click="logout">退出登录</a-button>
</template>
</a-card>
</template>
</a-dropdown>
</template>
<a-button block type="text" @click="logout">退出登录</a-button>
</template>
</a-card>
</template>
</a-dropdown>
</div>
</div>
<div style="height: 60px;width: 100%;"></div>

2
src/views/login/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="login-container">
<div class="login-logo">
<div style="cursor: pointer;">Fast亼算云</div>
<div>Fast亼算云</div>
<a-menu v-model:selectedKeys="current" mode="horizontal" style="border-bottom: none;" :items="rightRoutes"
@click="({ key }) => handleMenuClick(key)" />
</div>