| | |
| | | <div class="bannerLink" @click="jump"></div> |
| | | |
| | | <!-- 轮播图控制器 --> |
| | | <ul class="bannerControl"> |
| | | <li |
| | | v-for="(item, index) in bannerList" |
| | | :key="index" |
| | | @click="toggleBanner(index)" |
| | | > |
| | | <button |
| | | class="inner" |
| | | :class="{ active: activeBanner == index }" |
| | | ></button> |
| | | </li> |
| | | </ul> |
| | | <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"> |
| | |
| | | :class="{ active: activeCommend === 3 }" |
| | | @click="selecTab(3)" |
| | | > |
| | | <img src="/images/index/算法.png" alt="" /> |
| | | <img src="/images/index/sdk.png" alt="" /> |
| | | <div class="label">算法</div> |
| | | </div> |
| | | |
| | |
| | | :class="{ active: activeCommend === 4 }" |
| | | @click="selecTab(4)" |
| | | > |
| | | <img src="/images/index/应用.png" alt="" /> |
| | | <img src="/images/index/app.png" alt="" /> |
| | | <div class="label">应用</div> |
| | | </div> |
| | | </div> |
| | |
| | | return { |
| | | commendCardData: [ |
| | | { |
| | | img: "/images/index/全民云计算.png", |
| | | img: "/images/index/compute.png", |
| | | title: "全民云计算", |
| | | des: "云服务特惠,限时3折起,低至659元/3年", |
| | | des: "云服务特惠,限时3折起", |
| | | router: "/", |
| | | }, |
| | | { |
| | | img: "/images/index/售前咨询.png", |
| | | img: "/images/index/beforeSell.png", |
| | | title: "售前咨询", |
| | | des: "致电0315-2233066,领取您的专属权益", |
| | | router: "/", |
| | | }, |
| | | { |
| | | img: "/images/index/试用中心.png", |
| | | img: "/images/index/trialCenter.png", |
| | | title: "试用中心", |
| | | des: "算法免费试用,为您提供 0 门槛实践机会", |
| | | router: "/trialCenter", |
| | |
| | | { |
| | | router: "/", |
| | | typeId: 1, |
| | | pic: "/images/index/云服务.png", |
| | | pic: "/images/index/modelbgc2.png", |
| | | name: "云服务", |
| | | desc: "一键购买,开启AI应用之旅", |
| | | product: { |
| | |
| | | { |
| | | router: "/", |
| | | typeId: 2, |
| | | pic: "/images/index/边缘计算设备.png", |
| | | pic: "/images/index/modelbgc.png", |
| | | name: "边缘计算设备", |
| | | desc: |
| | | "一种部署在近场侧的高可用的软硬一体产品,提升应用程序的快速响应能力、节省带宽流量成本", |
| | |
| | | ], |
| | | }, |
| | | ], |
| | | img: "/images/index/设备图.png", |
| | | img: "/images/index/equipment.png", |
| | | }, |
| | | { |
| | | name: "边缘计算设备2", |
| | |
| | | ], |
| | | }, |
| | | ], |
| | | img: "/images/index/设备图.png", |
| | | img: "/images/index/equipment.png", |
| | | }, |
| | | { |
| | | name: "边缘计算设备3", |
| | |
| | | ], |
| | | }, |
| | | ], |
| | | img: "/images/index/设备图.png", |
| | | img: "/images/index/equipment.png", |
| | | }, |
| | | { |
| | | name: "边缘计算设备4", |
| | |
| | | ], |
| | | }, |
| | | ], |
| | | img: "/images/index/设备图.png", |
| | | img: "/images/index/equipment.png", |
| | | }, |
| | | { |
| | | name: "边缘计算设备5", |
| | |
| | | ], |
| | | }, |
| | | ], |
| | | img: "/images/index/设备图.png", |
| | | img: "/images/index/equipment.png", |
| | | }, |
| | | { |
| | | name: "边缘计算设备6", |
| | |
| | | ], |
| | | }, |
| | | ], |
| | | img: "/images/index/设备图.png", |
| | | img: "/images/index/equipment.png", |
| | | }, |
| | | ], |
| | | }, |
| | |
| | | }, |
| | | //轮播图跳转连接 |
| | | jump() { |
| | | window.open(this.bannerList[this.activeBanner - 1].url); |
| | | if (this.bannerList[this.activeBanner].url) { |
| | | window.open(this.bannerList[this.activeBanner].url); |
| | | } |
| | | }, |
| | | //获取推荐列表 |
| | | async getRecommend() { |
| | |
| | | .bannerControl { |
| | | position: absolute; |
| | | width: 1280px; |
| | | height: 24px; |
| | | height: calc(28.18vw - 92px); |
| | | min-height: 278px; |
| | | bottom: 80px; |
| | | top: 462px; |
| | | 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; |
| | |
| | | top: 60px; |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 410px; |
| | | height: calc(28.18vw - 132px); |
| | | min-height: 236px; |
| | | cursor: pointer; |
| | | z-index: 3; |
| | | } |
| | | |
| | | .overCard { |
| | | position: absolute; |
| | | top: 394px; |
| | | 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; |
| | |
| | | } |
| | | |
| | | .product { |
| | | background: url("/images/index/背景.png"); |
| | | background: url("/images/index/background.png"); |
| | | overflow: hidden; |
| | | min-width: 1280px; |
| | | |