407 lines
13 KiB
Vue
407 lines
13 KiB
Vue
<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">
|
||
<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;cursor: pointer;" @click="router.push(item.path)">
|
||
<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>
|
||
</div>
|
||
<div class="two">
|
||
<div>
|
||
<div>
|
||
<div style="margin-bottom: 40px;">
|
||
<div class="title">
|
||
<span>高性价比的算力服务</span>
|
||
</div>
|
||
<div class="subtitle">
|
||
高性价比+稳定性能，算力服务适配多场景，热门算力服务如下:
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list_card">
|
||
<div v-for="(value, index) in source" style="padding: 0 10px;text-align: center;font-size: 16px;"
|
||
: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.gpu_type }}
|
||
</div>
|
||
<div class="price" style="margin: 30px 0;">
|
||
<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 }}GB</div>
|
||
<div>显存：{{ value.vram }}GB</div>
|
||
<div>GPU：{{ value.gpu_num }}个</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="margin-bottom: 40px;">
|
||
<div class="title">
|
||
<span>产品优势</span>
|
||
</div>
|
||
<div class="subtitle">
|
||
按需租赁高算力，稳定省心更省成本
|
||
</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;line-height:30px;">搭载 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;line-height:30px;">
|
||
本平台支持按需计费与包周期计费两种正式模式，适配短期突发算力需求与长期稳定部署场景。按需计费按实结算，避免资源浪费；包周期计费性价比更优，保障持续运算。用户可自主择选，兼顾成本与效率，助力业务高效推进。
|
||
</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;line-height:30px;">
|
||
算力性价比之王！花一半钱享翻倍算力，顶级硬件配置 + 灵活计费模式，无隐形消费。中小团队、初创企业无需负担高昂成本，轻松拥抱 AI 时代，高性价比之选。
|
||
</div>
|
||
</div>
|
||
<img src="@/assets/jimeng2.png" alt="" srcset="" width="300" height="300px">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three"></div>
|
||
<div class="footer">
|
||
<div class="footer_contain">
|
||
<div>
|
||
<div style="color: #000000;">服务热线:</div>
|
||
<div style="font-size: 36px;font-weight: bold;padding: 20px 0;">400-110-6993</div>
|
||
<div>邮箱:service@hzzxxd.com</div>
|
||
<div>地址:江苏省南通市崇川区紫琅科技城3号楼</div>
|
||
</div>
|
||
<div>
|
||
<div style="color: #000000;">快速导航</div>
|
||
<div>算力中心</div>
|
||
<div>云主机</div>
|
||
<div>用户文档</div>
|
||
</div>
|
||
<div style="display: flex;align-items: center;gap: 60px;">
|
||
<div style="display: flex;flex-direction: column;align-items: center;">
|
||
<img src="@/assets/qr.jpg" alt="" srcset="" width="100">
|
||
<div>公众号</div>
|
||
</div>
|
||
<div style="display: flex;flex-direction: column;align-items: center;">
|
||
<img src="@/assets/qr.jpg" alt="" srcset="" width="100">
|
||
<div>企业微信</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="border-top: 1px solid #ebe4e4;height: 45px;text-align: center;line-height: 45px;color: #666666;font-size: 14px;">
|
||
苏备案号20251124号</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router';
|
||
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/333.png';
|
||
const router = useRouter();
|
||
const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
|
||
const source = ref([])
|
||
const oneList = ref([
|
||
{
|
||
img: youhuiquan,
|
||
title: '算力免费领',
|
||
description: '完成认证/问卷获得算力券',
|
||
path:'/active/newUser'
|
||
},
|
||
{
|
||
img: yaoqinghaoyou,
|
||
title: '邀约优算友',
|
||
description: '邀请好友可获得算力券',
|
||
path:'/active/invite'
|
||
},
|
||
{
|
||
img: goumaijilu,
|
||
title: '开业重磅福利',
|
||
description: '购算力，享豪礼',
|
||
path:'/active/newUser'
|
||
}
|
||
])
|
||
const advantageList = ref([])
|
||
const bannerList = ref<any[]>([
|
||
{ id: 0, image_url: defaultBanner3 },
|
||
{ id: 1, image_url: defaultBanner4 }
|
||
]);
|
||
|
||
const onChange = (current: number) => {
|
||
console.log(current);
|
||
};
|
||
|
||
|
||
// 请求轮播
|
||
const fetchBannerList = async () => {
|
||
try {
|
||
const res: any = await getBannerList();
|
||
// 处理返回的数据
|
||
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;
|
||
} else {
|
||
// 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();
|
||
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 }
|
||
];
|
||
|
||
} catch (error: any) {
|
||
console.error('GPU列表请求失败:', error);
|
||
}
|
||
}
|
||
|
||
// 请求产品优势
|
||
const getAdvantageList = async () => {
|
||
try {
|
||
// const res: any = await getAdvantage();
|
||
const list = [
|
||
{ title: '高性能算力', description: '采用最新一代GPU，提供强大计算能力，满足各种复杂任务需求。' },
|
||
{ title: '灵活计费模式', description: '支持按需付费和包月套餐，用户可根据实际需求选择最合适的计费方式。' },
|
||
{ title: '全球节点覆盖', description: '在多个地区设有数据中心，确保用户无论身处何地都能享受低延迟的服务体验。' },
|
||
{ title: '专业技术支持', description: '提供7x24小时技术支持，确保用户在使用过程中遇到的问题能够及时得到解决。' }
|
||
];
|
||
|
||
// 给每个 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);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
// fetchBannerList();
|
||
getGPUList();
|
||
getAdvantageList();
|
||
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.banner-slide {
|
||
width: 100%;
|
||
height: 600px;
|
||
// background: url('@/assets/banner2.png') no-repeat center / cover;
|
||
}
|
||
|
||
.one {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
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;
|
||
|
||
align-items: center;
|
||
|
||
& span {
|
||
color: #666666
|
||
}
|
||
}
|
||
}
|
||
|
||
.two {
|
||
// background-image: linear-gradient(to bottom, #eaf7fc, #f4fafc);
|
||
padding-bottom: 80px;
|
||
|
||
&>div {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
|
||
.title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
&>div:first-child {
|
||
padding: 44px 0;
|
||
}
|
||
|
||
.subtitle {
|
||
margin-top: 20px;
|
||
color: rgb(153, 153, 153);
|
||
text-align: center;
|
||
}
|
||
|
||
.list_card {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
|
||
&>div {
|
||
flex: 1;
|
||
background-color: #ffffff;
|
||
line-height: 30px;
|
||
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||
/* 更长的过渡时间和不同的缓动函数 */
|
||
}
|
||
|
||
&>div:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
}
|
||
|
||
.avatary_list {
|
||
// display: grid;
|
||
// grid-template-columns: repeat(2, 1fr);
|
||
// gap: 50px;
|
||
|
||
&>div {
|
||
display: flex;
|
||
// flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 100px;
|
||
&>div{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
color: #59b2f2;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
line-height: 30px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.three {
|
||
height: 180px;
|
||
background: url('@/assets/bottom.png') no-repeat center / 100% 100%;
|
||
}
|
||
|
||
.footer {
|
||
height: 260px;
|
||
background-color: #ffffff;
|
||
width: 100%;
|
||
|
||
.footer_contain {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
height: calc(100% - 45px);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: self-start;
|
||
padding: 20px 0;
|
||
|
||
&>div {
|
||
line-height: 30px;
|
||
color: #3a3939;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* For demo */
|
||
</style>
|