ZZJ
2022-07-11 6ef2ac92c0d3f79b59b8698274918df830b58b29
src/views/index/index.vue
@@ -8,18 +8,20 @@
    <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">
@@ -39,7 +41,7 @@
          :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>
@@ -48,7 +50,7 @@
          :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>
@@ -143,19 +145,19 @@
    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",
@@ -170,7 +172,7 @@
        {
          router: "/",
          typeId: 1,
          pic: "/images/index/云服务.png",
          pic: "/images/index/modelbgc2.png",
          name: "云服务",
          desc: "一键购买,开启AI应用之旅",
          product: {
@@ -210,7 +212,7 @@
        {
          router: "/",
          typeId: 2,
          pic: "/images/index/边缘计算设备.png",
          pic: "/images/index/modelbgc.png",
          name: "边缘计算设备",
          desc:
            "一种部署在近场侧的高可用的软硬一体产品,提升应用程序的快速响应能力、节省带宽流量成本",
@@ -238,7 +240,7 @@
                  ],
                },
              ],
              img: "/images/index/设备图.png",
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备2",
@@ -263,7 +265,7 @@
                  ],
                },
              ],
              img: "/images/index/设备图.png",
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备3",
@@ -288,7 +290,7 @@
                  ],
                },
              ],
              img: "/images/index/设备图.png",
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备4",
@@ -313,7 +315,7 @@
                  ],
                },
              ],
              img: "/images/index/设备图.png",
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备5",
@@ -338,7 +340,7 @@
                  ],
                },
              ],
              img: "/images/index/设备图.png",
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备6",
@@ -363,7 +365,7 @@
                  ],
                },
              ],
              img: "/images/index/设备图.png",
              img: "/images/index/equipment.png",
            },
          ],
        },
@@ -406,7 +408,9 @@
    },
    //轮播图跳转连接
    jump() {
      window.open(this.bannerList[this.activeBanner - 1].url);
      if (this.bannerList[this.activeBanner].url) {
        window.open(this.bannerList[this.activeBanner].url);
      }
    },
    //获取推荐列表
    async getRecommend() {
@@ -449,14 +453,22 @@
  .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;
@@ -489,16 +501,24 @@
    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;
@@ -558,7 +578,7 @@
  }
  .product {
    background: url("/images/index/背景.png");
    background: url("/images/index/background.png");
    overflow: hidden;
    min-width: 1280px;