bug修复

ZZJ

2022-07-14 2b99047683332624832c1dfcae596e957a710b7d

 src/views/index/index.vue

@@ -8,25 +8,27 @@
    <div class="bannerLink" @click="jump"></div>

    <!-- 轮播图控制器 -->
    <ul class="bannerControl">
      <li
        v-for="(item, index) in bannerList"
        :key="index"
        @click="toggleBanner(index + 1)"
      >
        <button
          class="inner"
          :class="{ active: activeBanner == index + 1 }"
        ></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">
        <!-- 推荐卡片 -->
        <commendCard :commendCardData="commendCardData"></commendCard>
        <!-- 用户card -->
        <userCard></userCard>
        <userCard :userCardArr="userCardArr"></userCard>
      </div>
    </div>

@@ -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>
@@ -89,7 +91,7 @@
      </div>
    </div>

    <Connect v-if="showConnect"></Connect>
    <Connect></Connect>

    <!-- 页尾 -->
    <Footer></Footer>
@@ -115,6 +117,7 @@
  getIndexModelRecommend,
  getModelList,
} from "@/api/product";
import { getUserOrderInfo } from "@/api/order";

export default {
  name: "Index",
@@ -136,42 +139,40 @@
    this.getBanner();
    this.getRecommend();
    this.getModule();
    window.addEventListener("scroll", this.scrollListener);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollListener);
    this.getUserBuyInfo();
  },
  data() {
    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，领取您的专属权益",
          des: "致电010-84155885，领取您的专属权益",
          router: "/",
        },
        {
          img: "/images/index/试用中心.png",
          img: "/images/index/trialCenter.png",
          title: "试用中心",
          des: "算法免费试用，为您提供 0 门槛实践机会",
          router: "/trialCenter",
        },
      ], //推荐卡片数据
      activeBanner: 1, //选中的banner
      activeBanner: 0, //选中的banner
      activeCommend: 3, //选中的推荐tabs
      commendData: [], //推荐tab的数据
      productData: [],
      userCardArr: [],
      productData1: [
        {
          router: "/",
          typeId: 1,
          pic: "/images/index/云服务.png",
          pic: "/images/index/modelbgc2.png",
          name: "云服务",
          desc: "一键购买，开启AI应用之旅",
          product: {
@@ -211,153 +212,59 @@
        {
          router: "/",
          typeId: 2,
          pic: "/images/index/边缘计算设备.png",
          pic: "/images/index/modelbgc.png",
          name: "边缘计算设备",
          desc: "一种部署在近场侧的高可用的软硬一体产品，提升应用程序的快速响应能力、节省带宽流量成本",
          product: [
            {
              name: "边缘计算设备1",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              name: "高性能边缘计算设备",
              title: "NVIDIA Jetson Xavier NX AI边缘计算盒子",
              des: "系统尺寸小巧，安装灵活，接口丰富，具备灵活的扩展能力。可广泛应用于制造、铁路、督察、环保、智慧城市、医疗保健和生命科学、智能机器等领域。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                    "软硬一体，预装了贝思科自研的爽灵企业级AI操作系统",
                    "开箱即用，助力企业快速开启AI应用的构建",
                    "开放兼容，适配当前主流硬件平台x86、ARM、AI芯片等",
                    "工业级设计，高抗震，适应严酷工业环境",
                  ],
                },

                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                    "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/设备图.png",
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备2",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              name: "低功耗边缘计算设备",
              title: "Jetson AGX Xavier AI边缘计算盒子",
              des: "此产品搭载Jetson AGX Xavier核心模块，预装了贝思科自研的—爽灵企业级AI操作系统，能以30W的低功耗提供高达321Tops的实时推理能力。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                    "软硬一体，预装了贝思科自研的爽灵企业级AI操作系统",
                    "开箱即用，助力企业快速开启AI应用的构建",
                    "开放兼容，适配当前主流硬件平台x86、ARM、AI芯片等",
                    "工业级设计，高抗震，适应严酷工业环境",
                  ],
                },

                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                    "CPU:Volta 512 CUDA Cores + 64 Tensor Cores + 2 NVDLA10TFLOPs(FP16) 32TOPs(INT8)",
                    "GPU:8x Carmel ARM V8.2",
                  ],
                },
              ],
              img: "/images/index/设备图.png",
            },
            {
              name: "边缘计算设备3",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },

                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/设备图.png",
            },
            {
              name: "边缘计算设备4",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },

                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/设备图.png",
            },
            {
              name: "边缘计算设备5",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },

                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/设备图.png",
            },
            {
              name: "边缘计算设备6",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },

                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/设备图.png",
              img: "/images/index/equipment.png",
            },
          ],
        },
@@ -365,10 +272,27 @@
      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;
@@ -383,7 +307,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() {
@@ -402,18 +328,19 @@
      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>
@@ -425,14 +352,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;
@@ -465,16 +400,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;
@@ -534,7 +477,7 @@
  }

  .product {
    background: url("/images/index/背景.png");
    background: url("/images/index/background.png");
    overflow: hidden;
    min-width: 1280px;