uk_front/pages/index.vue

<template>
  <div class="com-main">
    <carousel v-if="indexBanner.length" :banner="indexBanner" :height="'538px'" ></carousel>
    <sub-nav :secondaryBanner="secondaryBanner"></sub-nav>
    <section class="com-width-1200 com-margin-auto">
      <pc-title :title="'Trending Products'"></pc-title>
      <div class="card-wrap com-margin-auto">
        <card 
          v-for="(item, k) in indexGoodsRankLists"
          :key="k"
          :cardData="item"
          ref="card"
          @addCompare="addCompareList"
        ></card>
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter"
        >
          <div
            class="ball"
            v-show="shopCarBall"
            ref="ball"
          >
            <div class="linner_ball"></div>
          </div>
        </transition>
      </div>
    </section>
    <a :href="midBanner[0]?.link" target="_target" v-if="midBanner.length">
      <el-image 
        lazy 
        :src="midBanner[0]?.image"
        alt="why choose us"
        class="middle_banner" fit="cover"></el-image>
    </a>
    <section class="com-width-1400 com-margin-auto row-card">
      <row-card
        v-for="(item, k) in articleList"
        :key="k"
        :data="item"
      ></row-card>
      <!-- <subscription></subscription> -->
    </section>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  layout: "default",
  
  async asyncData({ $axios,req }) {
    // type:1、首页顶部banner，2、首页小图推荐，3、中部banner，4、，5、推荐文章栏目，6、底部banner，7、社交链接
    const indexBanner = await $axios.post("home/indexBanner", {
      site: 1,
      type: 1,
    });
    const secondaryBanner = await $axios.post("home/indexBanner", {
      site: 1,
      type: 2,
    });
    const indexGoodsRankLists = await $axios.post("home/indexGoodsRankLists", {
      site: 1,
    });
    const midBanner = await $axios.post("home/indexBanner", {
      site: 1,
      type: 3,
    });
    const articleList = await $axios.post("home/indexBanner", {
      site: 1,
      type: 5,
    });

    return { 
      indexBanner: indexBanner.result.data,
      secondaryBanner: secondaryBanner.result.data,
      indexGoodsRankLists: indexGoodsRankLists.result,
      midBanner: midBanner.result.data,
      articleList: articleList.result.data };
  },
  data() {
    return {
      indexBanner: [],
      secondaryBanner: [],
      indexGoodsRankLists: [],
      midBanner: [],
      articleList: [],
      shopCarBall: false,
      shopCarBallEl: null,
      ss: null,
    };
  },
  created() {
  },
  methods: {
    addCompareList(target) {
      this.shopCarBallEl = target;
      this.shopCarBall = true;
    },

    // 动画开始
    beforeEnter(el) {
      // 获取元素的大小及其相对于视口的位置
      if (process.client) {
          const dom = this.shopCarBallEl.getBoundingClientRect();
          const comparePosition = document
            .querySelector(".compare-list")
            .getBoundingClientRect();
          const offsetX = comparePosition.left - dom.left;
          const offsetY = dom.top - comparePosition.top-20;
          el.style.display = "";
          // y轴是曲直向上的，x轴是蜿蜒的向右的
          el.style.transform = `translate3D( -${offsetX}px,${offsetY}px,0)`;
      }
    },
    enter(el, done) {
      // 触发重绘，来实现动画的移动过程
      if (process.client) {
        this.ss = document.body.offsetHeight;
        el.style.transform = `translate3D( 0,0,0)`;
        el.addEventListener("transitionend", done);
      }
    },
    afterEnter(el) {
      this.shopCarBall = false;
      el.style.display = "none";
    },
  },
};
</script>

<style lang="scss" scoped>
.card-wrap {
  display: grid;
  justify-items: center;
  justify-content: space-evenly;
  // grid-template-columns: repeat(5,1fr);
}
.middle_banner {
  width: 100%;
  height: 580px;
  margin: 0 0 30px;
}
.ball {
  position: fixed;
  top: 86px;
  right: 19%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e90000;
  transition: all .5s linear;
  z-index: 9999;
  .linner_ball {
    transition: all .5s linear;
  }
}


</style>