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 0.5s linear;
  z-index: 9999;
  .linner_ball {
    transition: all 0.5s linear;
  }
}
</style>