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

11

Browse Source
This commit is contained in:
qiuyuan 2025-12-04 10:35:08 +08:00
parent 45f557c9cb
commit 93e20d62b4
3 changed files with 136 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/apis/home.ts Normal file
View File

@ -0,0 +1,12 @@
// 登陆相关接口
import request from '@/utils/index'
// 轮播接口
export const getBannerList = () => request.get('/v1/home/banner_list')
// GPU说明列表
export const getGpuList = () => request.get('/v1/home/gpu_list')
// 获取产品优势
export const getAdvantage = () => request.get('/v1/home/p_advantages_list')
// 获取热门产品信息
export const getHotProduct = () => request.get('/v1/product/host_info')

5
src/utils/index.ts
View File

@ -32,10 +32,9 @@ request.interceptors.request.use(
// 响应拦截器（统一处理错误、code 等）
request.interceptors.response.use(
(response) => {
console.log('响应数据:', response);
// 假设后端返回格式为 { code: 200, data: ..., message: '' }
const { code, data, message } = response.data;
console.log('请求成功:', data);
if (code === 1) {
return data;
} else {
@ -45,7 +44,7 @@ request.interceptors.response.use(
},
(error) => {
// 网络错误 or 超时等
console.error('请求异常:', error.response.data);
return Promise.reject(error.response.data);
}
);

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

@ -2,8 +2,8 @@
<div>
<div style="height: 550px; overflow: hidden;">
<a-carousel :after-change="onChange" style="height: 100%;">
<div class="banner-slide"></div>
<!-- 如果有多张，可以 v-for -->
<div v-for="item in bannerList" :key="item.id" class="banner-slide" :style="{
background: `url(${item.image_url})`}"></div>
</a-carousel>
</div>
<div class="one">
@ -37,16 +37,17 @@
:style="{ 'border-top': `3px solid ${listColor[index]}` }">
<div class="name"
style="font-size: 24px;font-weight: bold;padding: 20px;border-bottom: 1px solid #c9c9c9;text-align: center;">
{{ value.title
}}</div>
{{ value.gpu_type }}
</div>
<div class="price" style="margin: 30px 0;">
<span style="font-size: 24px;font-weight: bold;color: #5b85fe;">¥{{ value.price }}</span>
<span style="font-size: 24px;font-weight: bold;color: #5b85fe;">¥{{ value.payOnTime }}</span>
<span style="font-size: 12px;">/小时</span>
</div>
<div style="padding-bottom: 40px;line-height: 40px;">
<div>内存：{{ value.memory }}</div>
<div>显存：{{ value.graphicsMemory }}</div>
<div>GPU：{{ value.GPU }}</div>
<!-- 修改这里：添加单位 -->
<div>内存：{{ value.memory }}GB</div>
<div>显存：{{ value.vram }}GB</div>
<div>GPU：{{ value.gpu_num }}个</div>
</div>
</div>
</div>
@ -64,7 +65,7 @@
<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.subtitle }}</div>
<div class="subtitle">{{ item.description }}</div>
</div>
</div>
</div>
@ -103,38 +104,129 @@
</div>
</template>
<script lang="ts" setup>
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 defaultBanner from '@/assets/banner2.png';
const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
const source = ref(
[
{ title: 'NVIDIA A100', price: '3.28', memory: '64GB', graphicsMemory: '40GB', GPU: 1 },
{ title: 'NVIDIA A100', price: '6.56', memory: '128GB', graphicsMemory: '80GB', GPU: 2 },
{ title: 'NVIDIA A100', price: '13.12', memory: '256GB', graphicsMemory: '16GB', GPU: 4 },
]
)
const advantageList = ref(
[
{ img: one, title: '灵活弹性', subtitle: '支持按需、包周期两种计费方式,可以根据使用场景选择。' },
{ img: two, title: '安全保障', subtitle: '提供网络防火墙功能，对公网连接进行严格访问控制' },
{ img: three, title: '方便易用', subtitle: '提供完善的API体系，便捷的将云服务器与您的内部监控、运营系统相结合' },
{ img: firth, title: '服务优势', subtitle: '7*24小时服务支持，60s之内问题相应机制' },
]
)
const source = ref([])
const advantageList = ref([])
const bannerList = ref<any[]>([
{ id: 0, image_url: defaultBanner }
]);
const onChange = (current: number) => {
console.log(current);
};
// 请求轮播
const fetchBannerList = async () => {
try {
console.log('开始请求轮播图数据...');
const res: any = await getBannerList();
console.log('API返回数据:', res);
// 处理返回的数据
if (res && Array.isArray(res) && res.length > 0) {
const processedList = res.map((item: any, index: number) => {
// 确保每个item都有id
const processedItem = {
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;
console.log('处理后的轮播图数据:', bannerList.value);
} else {
// API返回空数据或无效数据，使用默认图片
console.log('API返回无效数据，使用默认图片');
bannerList.value = [{ id: 0, image_url: defaultBanner }];
}
} catch (error: any) {
console.error('轮播图请求失败:', error);
// 请求失败时使用默认图片
bannerList.value = [{ id: 0, image_url: defaultBanner }];
}
};
// 请求GPU列表
const getGPUList = async () => {
try {
const res: any = await getGpuList();
console.log('数据内容:', JSON.stringify(res, null, 2));
source.value = res;
console.log('GPU列表请求成功:', res);
} catch (error: any) {
console.error('GPU列表请求失败:', error);
}
}
// 请求产品优势
const getAdvantageList = async () => {
try {
const res: any = await getAdvantage();
const list = res;
// 给每个 item 添加 img 字段
list.forEach((item: any, index: number) => {
if (index === 0) {
item.img = one;
} else if (index === 1) {
item.img = two;
} else if (index === 2) {
item.img = three;
} else {
item.img = firth;
}
});
advantageList.value = list;
} catch (error: any) {
console.error('产品优势请求失败:', error);
}
}
// 热门产品
const getHotProductList = async () => {
try {
const res = await getHotProduct();
console.log('热门产品请求成功:', res);
} catch (error: any) { // 捕获错误
console.error('热门产品请求失败:', error);
}
}
fetchBannerList();
getGPUList();
getAdvantageList();
// getHotProductList();
</script>
<style scoped lang="scss">
.banner-slide {
width: 100%;
height:550px;
background: url('@/assets/banner2.png') no-repeat center / cover;
height: 550px;
// background: url('@/assets/banner2.png') no-repeat center / cover;
}
.one {
display: flex;
justify-content: space-around;