| | |
| | | <li |
| | | v-for="(item, index) in bannerList" |
| | | :key="index" |
| | | @click="toggleBanner(index + 1)" |
| | | @click="toggleBanner(index)" |
| | | > |
| | | <button |
| | | class="inner" |
| | | :class="{ active: activeBanner == index + 1 }" |
| | | :class="{ active: activeBanner == index }" |
| | | ></button> |
| | | </li> |
| | | </ul> |
| | |
| | | <!-- 推荐卡片 --> |
| | | <commendCard :commendCardData="commendCardData"></commendCard> |
| | | <!-- 用户card --> |
| | | <userCard></userCard> |
| | | <userCard :userCardArr="userCardArr"></userCard> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | getIndexModelRecommend, |
| | | getModelList, |
| | | } from "@/api/product"; |
| | | import { getUserOrderInfo } from "@/api/order"; |
| | | |
| | | export default { |
| | | name: "Index", |
| | |
| | | this.getBanner(); |
| | | this.getRecommend(); |
| | | this.getModule(); |
| | | window.addEventListener("scroll", this.scrollListener); |
| | | }, |
| | | destroyed() { |
| | | window.removeEventListener("scroll", this.scrollListener); |
| | | this.getUserBuyInfo(); |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | router: "/trialCenter", |
| | | }, |
| | | ], //推荐卡片数据 |
| | | activeBanner: 1, //选中的banner |
| | | activeBanner: 0, //选中的banner |
| | | activeCommend: 3, //选中的推荐tabs |
| | | commendData: [], //推荐tab的数据 |
| | | productData: [], |
| | | userCardArr: [], |
| | | productData1: [ |
| | | { |
| | | router: "/", |
| | |
| | | typeId: 2, |
| | | pic: "/images/index/边缘计算设备.png", |
| | | name: "边缘计算设备", |
| | | desc: "一种部署在近场侧的高可用的软硬一体产品,提升应用程序的快速响应能力、节省带宽流量成本", |
| | | desc: |
| | | "一种部署在近场侧的高可用的软硬一体产品,提升应用程序的快速响应能力、节省带宽流量成本", |
| | | product: [ |
| | | { |
| | | name: "边缘计算设备1", |
| | | title: "LE-V-S003 高性能边缘计算主机", |
| | | des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | des: |
| | | "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | content: [ |
| | | { |
| | | key: "特点", |
| | |
| | | { |
| | | name: "边缘计算设备2", |
| | | title: "LE-V-S003 高性能边缘计算主机", |
| | | des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | des: |
| | | "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | content: [ |
| | | { |
| | | key: "特点", |
| | |
| | | { |
| | | name: "边缘计算设备3", |
| | | title: "LE-V-S003 高性能边缘计算主机", |
| | | des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | des: |
| | | "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | content: [ |
| | | { |
| | | key: "特点", |
| | |
| | | { |
| | | name: "边缘计算设备4", |
| | | title: "LE-V-S003 高性能边缘计算主机", |
| | | des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | des: |
| | | "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | content: [ |
| | | { |
| | | key: "特点", |
| | |
| | | { |
| | | name: "边缘计算设备5", |
| | | title: "LE-V-S003 高性能边缘计算主机", |
| | | des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | des: |
| | | "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | content: [ |
| | | { |
| | | key: "特点", |
| | |
| | | { |
| | | name: "边缘计算设备6", |
| | | title: "LE-V-S003 高性能边缘计算主机", |
| | | des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | des: |
| | | "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。", |
| | | content: [ |
| | | { |
| | | key: "特点", |
| | |
| | | timer: null, //向上回滚动画 |
| | | ConnectTimer: null, // 控制弹层的定时器 |
| | | bannerList: [], |
| | | showConnect: false, //显示联系我们与回到顶部 |
| | | }; |
| | | }, |
| | | 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; |
| | |
| | | selecTab(id) { |
| | | this.activeCommend = id; |
| | | this.getRecommend(); |
| | | }, |
| | | //添加滚动监听 |
| | | scrollListener() { |
| | | //页面滑动触发事件 (滚动条移动则调用是否显示返回顶部按钮事件) |
| | | var a = document.documentElement.clientHeight; // 滚动容器的可视高 |
| | | var b = document.documentElement.scrollTop; // 滚动条距离顶部的高度 |
| | | var c = document.documentElement.scrollHeight; // 滚动容器的整个高度 |
| | | |
| | | if (c === a + b) { |
| | | //当滚动容器的可视高+滚动容器滚动了的高度(滚动条顶部距离滚动容器顶部的距离) = 滚动容器的整个高度时,说明滚动条到底了 |
| | | this.showConnect = true; |
| | | } else { |
| | | this.showConnect = false; |
| | | } |
| | | |
| | | //检查滚动条是否在顶部,控制返回顶部按钮的隐藏和显示 |
| | | }, |
| | | }, |
| | | beforeRouteLeave(to, from, next) { |