| | |
| | | <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> |
| | | |
| | |
| | | <div |
| | | class="productItem" |
| | | v-for="(item, index) in productData1" |
| | | :key="index" |
| | | :key="index + '1'" |
| | | :class="{ short: item.typeId == 4 || item.typeId == 1 }" |
| | | > |
| | | <productLeft :data="item"></productLeft> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <Connect v-if="showConnect"></Connect> |
| | | <Connect></Connect> |
| | | |
| | | <!-- 页尾 --> |
| | | <Footer></Footer> |
| | |
| | | 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; |
| | |
| | | this.activeCommend = id; |
| | | this.getRecommend(); |
| | | }, |
| | | //添加滚动监听 |
| | | scrollListener() { |
| | | //页面滑动触发事件 (滚动条移动则调用是否显示返回顶部按钮事件) |
| | | |
| | | if (document.documentElement.scrollTop < 1100) { |
| | | this.showConnect = false; |
| | | } else { |
| | | this.showConnect = true; |
| | | } |
| | | |
| | | //检查滚动条是否在顶部,控制返回顶部按钮的隐藏和显示 |
| | | }, |
| | | }, |
| | | 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> |