<template>
|
<div class="index">
|
<!-- 表头 -->
|
<IndexHeader></IndexHeader>
|
<!-- 轮播图 -->
|
<Banner ref="Banner" :bannerList="bannerList"></Banner>
|
|
<div class="bannerLink" @click="jump"></div>
|
|
<!-- 轮播图控制器 -->
|
<div class="bannerControl">
|
<ul>
|
<li
|
v-for="(item, index) in bannerList"
|
:key="index"
|
@click="toggleBanner(index)"
|
>
|
<button
|
class="inner"
|
:class="{ active: activeBanner == index }"
|
></button>
|
</li>
|
</ul>
|
</div>
|
|
<div class="overCard">
|
<div class="heart">
|
<!-- 推荐卡片 -->
|
<commendCard :commendCardData="commendCardData"></commendCard>
|
<!-- 用户card -->
|
<userCard :userCardArr="userCardArr"></userCard>
|
</div>
|
</div>
|
|
<!-- 推荐tabs -->
|
<div class="commendTabs">
|
<div class="title">为您推荐</div>
|
<div class="tabs">
|
<div
|
class="tabItem"
|
:class="{ active: activeCommend === 3 }"
|
@click="selecTab(3)"
|
>
|
<img src="/images/index/sdk.png" alt="" />
|
<div class="label">算法</div>
|
</div>
|
|
<div
|
class="tabItem"
|
:class="{ active: activeCommend === 4 }"
|
@click="selecTab(4)"
|
>
|
<img src="/images/index/app.png" alt="" />
|
<div class="label">应用</div>
|
</div>
|
</div>
|
</div>
|
<!-- tab内容 -->
|
<div class="commendTabsContent">
|
<commendContent
|
:commendData="commendData"
|
@refresh="getRecommend"
|
></commendContent>
|
</div>
|
|
<!-- 热门产品 -->
|
<div class="product">
|
<div class="title">热门产品</div>
|
<div
|
class="productItem"
|
v-for="(item, index) in productData"
|
:key="index"
|
:class="{ short: item.typeId == 4 || item.typeId == 1 }"
|
>
|
<productLeft :data="item"></productLeft>
|
<rightRrid v-if="item.typeId == 3" :data="item"></rightRrid>
|
<rightColumn v-if="item.typeId == 4" :data="item"></rightColumn>
|
<rightForm v-if="item.typeId == 1" :data="item"></rightForm>
|
<rightTabs v-if="item.typeId == 2" :data="item"></rightTabs>
|
</div>
|
|
<div
|
class="productItem"
|
v-for="(item, index) in productData1"
|
:key="index + '1'"
|
:class="{ short: item.typeId == 4 || item.typeId == 1 }"
|
>
|
<productLeft :data="item"></productLeft>
|
<rightForm v-if="item.typeId == 1" :data="item"></rightForm>
|
<rightTabs v-if="item.typeId == 2" :data="item"></rightTabs>
|
</div>
|
</div>
|
|
<Connect></Connect>
|
|
<!-- 页尾 -->
|
<Footer></Footer>
|
</div>
|
</template>
|
|
<script>
|
import Banner from "@/views/index/components/banner";
|
import IndexHeader from "@/components/IndexHeader";
|
import commendCard from "@/views/index/components/commendCard";
|
import userCard from "@/views/index/components/userCard";
|
import commendContent from "@/views/index/components/commendContent";
|
import productLeft from "@/views/index/components/productLeft";
|
import rightRrid from "@/views/index/components/rightRrid";
|
import rightColumn from "@/views/index/components/rightColumn";
|
import rightForm from "@/views/index/components/rightForm";
|
import rightTabs from "@/views/index/components/rightTabs";
|
import Connect from "@/components/Connect";
|
import Footer from "@/components/Footer";
|
|
import {
|
getIndexPics,
|
getIndexModelRecommend,
|
getModelList,
|
} from "@/api/product";
|
import { getUserOrderInfo } from "@/api/order";
|
|
export default {
|
name: "Index",
|
components: {
|
Banner,
|
IndexHeader,
|
commendCard,
|
userCard,
|
commendContent,
|
productLeft,
|
rightRrid,
|
rightColumn,
|
rightForm,
|
rightTabs,
|
Connect,
|
Footer,
|
},
|
created() {
|
this.getBanner();
|
this.getRecommend();
|
this.getModule();
|
this.getUserBuyInfo();
|
},
|
data() {
|
return {
|
commendCardData: [
|
{
|
img: "/images/index/compute.png",
|
title: "全民云计算",
|
des: "云服务特惠，限时3折起",
|
router: "/",
|
},
|
{
|
img: "/images/index/beforeSell.png",
|
title: "售前咨询",
|
des: "致电010-84155885，领取您的专属权益",
|
router: "/",
|
},
|
{
|
img: "/images/index/trialCenter.png",
|
title: "试用中心",
|
des: "算法免费试用，为您提供 0 门槛实践机会",
|
router: "/trialCenter",
|
},
|
], //推荐卡片数据
|
activeBanner: 0, //选中的banner
|
activeCommend: 3, //选中的推荐tabs
|
commendData: [], //推荐tab的数据
|
productData: [],
|
userCardArr: [],
|
productData1: [
|
{
|
router: "/",
|
typeId: 1,
|
pic: "/images/index/modelbgc2.png",
|
name: "云服务",
|
desc: "一键购买，开启AI应用之旅",
|
product: {
|
title: "AI-0",
|
menu: [
|
"几十种算法免费使用",
|
"不限流量",
|
"录像云端存储，砸不坏，偷不走",
|
"金融级加密技术，保障数据安全",
|
"告警数据实时提醒",
|
"支持循环存储最近 30 天的活动录像",
|
"弹性可伸缩的计算服务",
|
],
|
price: [
|
{
|
year: 1,
|
priceNew: "540.00",
|
priceOld: "900.00",
|
discount: "",
|
},
|
{
|
year: 2,
|
priceNew: "1000.00",
|
priceOld: "1800.00",
|
discount: "8",
|
},
|
{
|
year: 3,
|
priceNew: "1400.00",
|
priceOld: "2700.00",
|
discount: "7",
|
},
|
],
|
},
|
},
|
|
{
|
router: "/",
|
typeId: 2,
|
pic: "/images/index/modelbgc.png",
|
name: "边缘计算设备",
|
desc: "一种部署在近场侧的高可用的软硬一体产品，提升应用程序的快速响应能力、节省带宽流量成本",
|
product: [
|
{
|
name: "高性能边缘计算设备",
|
title: "NVIDIA Jetson Xavier NX AI边缘计算盒子",
|
des: "系统尺寸小巧，安装灵活，接口丰富，具备灵活的扩展能力。可广泛应用于制造、铁路、督察、环保、智慧城市、医疗保健和生命科学、智能机器等领域。",
|
content: [
|
{
|
key: "特点",
|
value: [
|
"软硬一体，预装了贝思科自研的爽灵企业级AI操作系统",
|
"开箱即用，助力企业快速开启AI应用的构建",
|
"开放兼容，适配当前主流硬件平台x86、ARM、AI芯片等",
|
"工业级设计，高抗震，适应严酷工业环境",
|
],
|
},
|
|
{
|
key: "配置",
|
value: [
|
"CPU:6-core NVIDIA Carmel ARM®v8.2 64-bit CPU 6MB L2 + 4MB L3",
|
"GPU:384-core NVIDIA VoltaTM GPU with 48 Tensor Cores",
|
],
|
},
|
],
|
img: "/images/index/equipment.png",
|
},
|
{
|
name: "低功耗边缘计算设备",
|
title: "Jetson AGX Xavier AI边缘计算盒子",
|
des: "此产品搭载Jetson AGX Xavier核心模块，预装了贝思科自研的—爽灵企业级AI操作系统，能以30W的低功耗提供高达321Tops的实时推理能力。",
|
content: [
|
{
|
key: "特点",
|
value: [
|
"软硬一体，预装了贝思科自研的爽灵企业级AI操作系统",
|
"开箱即用，助力企业快速开启AI应用的构建",
|
"开放兼容，适配当前主流硬件平台x86、ARM、AI芯片等",
|
"工业级设计，高抗震，适应严酷工业环境",
|
],
|
},
|
|
{
|
key: "配置",
|
value: [
|
"CPU:Volta 512 CUDA Cores + 64 Tensor Cores + 2 NVDLA10TFLOPs(FP16) 32TOPs(INT8)",
|
"GPU:8x Carmel ARM V8.2",
|
],
|
},
|
],
|
img: "/images/index/equipment.png",
|
},
|
],
|
},
|
], // 热门产品数据
|
timer: null, //向上回滚动画
|
ConnectTimer: null, // 控制弹层的定时器
|
bannerList: [],
|
};
|
},
|
methods: {
|
getUserBuyInfo() {
|
getUserOrderInfo({}).then((res) => {
|
this.userCardArr = [
|
{
|
num: res.data.needPay,
|
label: "待付款",
|
},
|
/* {
|
num: res.data.needRenewal,
|
label: "待续费",
|
},
|
{
|
num: "_",
|
label: "消息中心",
|
}, */
|
];
|
});
|
},
|
// 切换banner
|
toggleBanner(i) {
|
this.activeBanner = i;
|
this.$refs["Banner"].toggleBanner(i);
|
},
|
//获取轮播图
|
async getBanner() {
|
const res = await getIndexPics();
|
if (res.success) {
|
this.bannerList = res.data.lists;
|
}
|
},
|
//轮播图跳转连接
|
jump() {
|
if (this.bannerList[this.activeBanner].url) {
|
window.open(this.bannerList[this.activeBanner].url);
|
}
|
},
|
//获取推荐列表
|
async getRecommend() {
|
const res = await getIndexModelRecommend({ typeId: this.activeCommend });
|
this.commendData = res.data.productList;
|
},
|
// 获取产品列表
|
async getModule() {
|
const res = await getModelList();
|
if (res && res.success) {
|
this.productData = res.data.modelList;
|
}
|
},
|
//选择推荐tab
|
selecTab(id) {
|
this.activeCommend = id;
|
this.getRecommend();
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
let userInfo = sessionStorage.getItem("userInfo");
|
if (
|
!userInfo &&
|
to.path !== "/login" &&
|
to.path !== "/register" &&
|
to.path !== "/connectUs"
|
) {
|
next({ path: "/login" });
|
} else {
|
next();
|
}
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.index {
|
position: relative;
|
|
.bannerControl {
|
position: absolute;
|
width: 1280px;
|
height: calc(28.18vw - 92px);
|
min-height: 278px;
|
bottom: 80px;
|
top: 62px;
|
left: 0;
|
right: 0;
|
transform: none;
|
margin: 0 auto;
|
z-index: 2;
|
|
ul {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
left: 0;
|
}
|
|
li {
|
display: inline-block;
|
padding: 12px 4px;
|
background-color: transparent;
|
cursor: pointer;
|
|
.inner {
|
display: block;
|
opacity: 0.48;
|
width: 30px;
|
height: 2px;
|
background-color: #fff;
|
border: none;
|
outline: none;
|
padding: 0;
|
margin: 0;
|
cursor: pointer;
|
transition: 0.3s;
|
|
&.active {
|
background-color: #0065ff;
|
opacity: 1;
|
}
|
}
|
}
|
}
|
|
.bannerLink {
|
top: 60px;
|
position: absolute;
|
width: 100%;
|
height: calc(28.18vw - 132px);
|
min-height: 236px;
|
cursor: pointer;
|
z-index: 3;
|
}
|
|
.overCard {
|
position: absolute;
|
height: calc(28.18vw + 38px);
|
min-height: 408px;
|
width: 100%;
|
top: 62px;
|
|
.heart {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
display: flex;
|
width: 1280px;
|
margin: 0 auto;
|
justify-content: space-between;
|
}
|
}
|
|
.commendTabs {
|
overflow: hidden;
|
height: 258px;
|
min-width: 1280px;
|
background: #ffffff;
|
box-shadow: 0px 4px 4px rgba(0, 43, 106, 0.12);
|
|
.title {
|
margin-top: 82px;
|
font-size: 28px;
|
text-align: center;
|
}
|
|
.tabs {
|
width: 320px;
|
margin: 0 auto;
|
margin-top: 20px;
|
display: flex;
|
justify-content: space-between;
|
|
.tabItem {
|
text-align: center;
|
cursor: pointer;
|
|
img {
|
width: 60px;
|
margin-bottom: 6px;
|
}
|
|
.label {
|
margin-bottom: 27px;
|
font-size: 16px;
|
}
|
|
&.active {
|
border-bottom: 2px solid #0065ff;
|
.label {
|
color: #0065ff;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
}
|
|
.commendTabsContent {
|
padding: 80px 0;
|
background-color: rgb(243, 245, 248);
|
min-width: 1280px;
|
}
|
|
.product {
|
background: url("/images/index/background.png");
|
overflow: hidden;
|
min-width: 1280px;
|
|
.title {
|
margin: 80px 0 60px 0;
|
padding-top: 20px;
|
min-width: 1280px;
|
text-align: center;
|
font-size: 28px;
|
}
|
|
.productItem {
|
margin: 0 auto;
|
margin-bottom: 60px;
|
height: 462px;
|
width: 1280px;
|
display: flex;
|
|
&.short {
|
height: 400px;
|
}
|
}
|
}
|
}
|
</style>
|
