kboss/f/web-kboss/src/views/beforeLogin/index.vue

<template>
  <div>
    <!--  <h1>滚动广告界面</h1>-->
    <div class="parent">
      <div class="container-wrapper">
        <div class="container" id="container" :style="{ '--animation-duration': result.length*5 + 's' }">
          <div class="child" v-for="item in result" :key="item.id">
            <span style="color: #78787e">{{ item.name }}</span><br/>
            <span class="price-title">{{ Decimal.mul(item.discount, 10) }}折</span>
            <span class="title-tag">{{ item.nameofactivity }}</span>
          </div>

        </div>
        <div class="container" id="clone-container"></div>
      </div>
    </div>
  </div>
</template>

<script>
import promotionalInvitationCode from "@/views/customer/promotionalInvitationCode"
import {mapState} from "vuex";
import Decimal from "decimal.js";

export default {
  name: "beforeLogin",
  components: {
    promotionalInvitationCode
  },
  data() {
    return {
      result: []
    }
  },
  mounted() {
    this.initPage()
    this.pauseFn()
    this.initData()
  },
  methods: {
    goLoginPage() {
      window.dispatchEvent(new Event('kboss-open-login-dialog'))
    },
    goRegisterPage() {
      this.$router.push('/register')
    },
    initPage() {
      document.addEventListener("DOMContentLoaded", function () {
        let container = document.getElementById("container");
        let cloneContainer = document.getElementById("clone-container");

        container.innerHTML += container.innerHTML; // 复制一份内容放到尾部

        container.addEventListener("animationiteration", function () {
          // 在每次动画迭代开始时，将 transform 设置回初始状态
          container.style.transform = "translateX(0)";
        });

        container.addEventListener("animationend", function () {
          // 在动画结束时，重置滚动位置
          container.style.transform = "translateX(0)";
        });

        // 每隔一段时间更新 clone-container 的内容，保持内容的连续性
        setInterval(function () {
          cloneContainer.innerHTML = container.innerHTML;
        }, 5000);
      });
    },
    pauseScrollAnimation() {
      let container = document.getElementById("container");
      container.style.animationPlayState = "paused"; // 暂停滚动动画
    },
    resumeScrollAnimation() {
      let container = document.getElementById("container");
      container.style.animationPlayState = "running"; // 恢复滚动动画
    },
    pauseFn() {
      const self = this;
      // container.querySelectorAll(".child").forEach(function (child) {
      //   child.addEventListener("mouseover", self.pauseScrollAnimation);
      //   child.addEventListener("mouseleave", self.resumeScrollAnimation);
      // });

      container.addEventListener("mouseover", self.pauseScrollAnimation);
      container.addEventListener("mouseleave", self.resumeScrollAnimation);
    },
    //初始化Data数据
    initData() {

      for (let i = 0; i < this.saleProduct.data.length; i++) {
        // console.log("此时的数据试试", Object.prototype.toString.call(this.saleProduct.data[i].discount))
        // console.log(this.saleProduct.data[i].discount)
        this.result = this.result.concat(this.saleProduct.data[i].discount)
        // for (let j = 0; j < this.saleProduct.data[i].discount.length; j++) {
        //   this.result.push(this.saleProduct.data[i].discount[j])
        // }

      }
    }

  },
  computed: {
    Decimal() {
      return Decimal
    },
    ...mapState({
      saleProduct: state => state.login.saleProduct
    }),
    itemLength() {
      let result = []
      for (let i = 0; i < this.saleProduct.data.length; i++) {
        result.concat(this.saleProduct.data[i].discount)
      }
      return result
      // "--flgs": this.productList.length
    }
  }
}
</script>

<style scoped lang="scss">
html,
body {
  background: #f3f6fe;
}

.parent {
  width: 100%;
  height: 70px;
  white-space: nowrap;
  overflow: hidden;
}

.container-wrapper {
  position: relative;
}

.container {
  display: inline-block;
  white-space: nowrap;
  animation: scrollAnimation var(--animation-duration) linear infinite;
  //animation: scrollAnimation 15s linear infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.child {
  position: relative;
  padding: 5px;
  display: inline-block;
  width: 168px;
  height: 65px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 2px 8px 8px 2px #eaeef5;
  margin-right: 20px;
  overflow: hidden;
  //border: 1px solid red;
  font-size: 18px;
  cursor: default;
  //&:hover {
  //  font-size: 24px;
  //}
}

.child > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.price-title {
  display: inline-block;
  margin-top: 8px;
  font-size: 22px;
  color: red;
  font-weight: bold;
}

.title-tag {
  position: absolute;
  right: 5px;
  top: 43px;
  font-size: 14px;
  color: #9b8e8e;
}
</style>