394 lines
11 KiB
Vue
394 lines
11 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%" @click="router.push(item.link_url)" style="cursor: pointer;">
|
||
</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.link_url)">
|
||
<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.price }}</span>
|
||
<span style="font-size: 12px;">/小时</span>
|
||
</div>
|
||
<div style="line-height: 40px;padding-bottom: 20px;">
|
||
<!-- 修改这里：添加单位 -->
|
||
<div>内存：{{ value.memory }}GB</div>
|
||
<div>显存：{{ value.vram }}GB</div>
|
||
<div>GPU：{{ value.gpu_num }}个</div>
|
||
</div>
|
||
<div style="padding-bottom: 30px;">
|
||
<a-button type="primary" @click="router.push('/layout/market')" block>立即购买</a-button>
|
||
</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 v-for="(item, index) in advantageList" :key="index">
|
||
<div>
|
||
<div class="title" style="font-size: 28px;">{{ item.title }}</div>
|
||
<div class="subtitle" style="text-align: left;font-size: 18px;line-height:30px;">{{ item.description }}</div>
|
||
</div>
|
||
<img :src="item.image_url" alt="" srcset="" width="300" height="300">
|
||
</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,onBeforeMount } from 'vue'
|
||
import { useRouter } from 'vue-router';
|
||
import { getBannerList, getGpuList, getAdvantage, getHotProduct,getApiOneList } 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';
|
||
import { get } from 'http';
|
||
import { on } from 'events';
|
||
const router = useRouter();
|
||
const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
|
||
const source = ref<any[]>([])
|
||
const oneList = ref<any[]>([])
|
||
const advantageList = ref<any[]>([])
|
||
const bannerList = ref<any[]>([
|
||
{ id: 0, image_url: defaultBanner3 },
|
||
{ id: 1, image_url: defaultBanner4 }
|
||
]);
|
||
import { useLoading } from '@/utils/useLoading'
|
||
const $loading = useLoading()
|
||
onBeforeMount(async () => {
|
||
const loading = $loading.show({ tip: '拼命加载中...' })
|
||
await fetchBannerList();
|
||
await getOneList();
|
||
await getGPUList();
|
||
await getAdvantageList();
|
||
loading.hide()
|
||
})
|
||
const onChange = (current: number) => {
|
||
console.log(current);
|
||
};
|
||
|
||
|
||
// 请求轮播
|
||
const fetchBannerList = async () => {
|
||
try {
|
||
const res: any = await getBannerList();
|
||
// 处理返回的数据
|
||
if (res && Array.isArray(res) && res.length > 0) {
|
||
bannerList.value = res.map(item=>({image_url: 'http://36.133.78.46:8040'+item.image_url, link_url: item.link_url}));
|
||
console.log('轮播图数据:', bannerList.value);
|
||
} else {
|
||
// API返回空数据或无效数据，使用默认图片
|
||
bannerList.value = [{ id: 0, image_url: defaultBanner }];
|
||
}
|
||
} catch (error: any) {
|
||
console.error('轮播图请求失败:', error);
|
||
// 请求失败时使用默认图片
|
||
bannerList.value = [{ id: 0, image_url: defaultBanner }];
|
||
}
|
||
};
|
||
// 请求轮播
|
||
const getOneList = async () => {
|
||
// try {
|
||
// const res: any = await getApiOneList();
|
||
// // 处理返回的数据
|
||
// if (res && Array.isArray(res) && res.length > 0) {
|
||
// oneList.value = res;
|
||
// } else {
|
||
// // API返回空数据或无效数据，使用默认图片
|
||
// oneList.value = [{ id: 0, image_url: defaultBanner }];
|
||
// }
|
||
// } catch (error: any) {
|
||
// console.error('轮播图请求失败:', error);
|
||
// 请求失败时使用默认图片
|
||
oneList.value = [
|
||
{
|
||
img: youhuiquan,
|
||
title: '算力免费领',
|
||
description: '完成认证/问卷获得算力券',
|
||
link_url: '/active/newUser'
|
||
},
|
||
{
|
||
img: yaoqinghaoyou,
|
||
title: '邀约优算友',
|
||
description: '邀请好友可获得算力券',
|
||
link_url: '/active/invite'
|
||
},
|
||
{
|
||
img: goumaijilu,
|
||
title: '开业重磅福利',
|
||
description: '购算力，享豪礼',
|
||
link_url: '/active/newUser'
|
||
}
|
||
]
|
||
// }
|
||
};
|
||
// 请求GPU列表
|
||
const getGPUList = async () => {
|
||
try {
|
||
const res: any = await getGpuList();
|
||
source.value = res
|
||
|
||
|
||
} catch (error: any) {
|
||
console.error('GPU列表请求失败:', error);
|
||
}
|
||
}
|
||
|
||
// 请求产品优势
|
||
const getAdvantageList = async () => {
|
||
try {
|
||
const res: any = await getAdvantage();
|
||
const list = res.map((item:any)=>({title: item.title, description: item.description,image_url: 'http://36.133.78.46:8040'+item.image_url})) || [];
|
||
advantageList.value = list;
|
||
} catch (error: any) {
|
||
console.error('产品优势请求失败:', error);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
</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:not(:nth-child(2n)) {
|
||
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;
|
||
}
|
||
}
|
||
&>div:not(:nth-child(2n+1)) {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
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>
|