check-work/src/components/SettledEnterprise/SettledEnterprise.vue

<template>
  <div class="fast-box">
    <div class="con-box" id="bobaodiv">
      <div :key="0 +`${i}`" class="ent-box-div" v-for="(item, i) in lists">
        <div class="ent-box">
          <p class="ent-index">{{ i + 1 }}</p>
          <span class="ent-name" style="margin-left: 50px">{{ item.company }}</span>
          <span class="ent-mainBusiness" style="margin-left: 50px">{{ item.mainBusiness }}</span>
        </div>
      </div>
      <div :key="j" class="ent-box-div" v-for="(item, j) in lists">
        <div class="ent-box">
          <p class="ent-index">{{ j + 1 }}</p>
          <span class="ent-name" style="margin-left: 50px">{{ item.company }}</span>
          <span class="ent-mainBusiness" style="margin-left: 50px">{{ item.mainBusiness }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SettledEnterprise',
  props: {
    lists: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      height: '',
      width: '',
      liHeight: '',
      dataList: [
        {
          a: '1.面部对侧',
          b: '正常',
          c: '0分',
        },
        {
          a: '2.上肢',
          b: '中度无力',
          c: '1分',
        },
        {
          a: '3.语言运动',
          b: '正常',
          c: '0分',
        },
        {
          a: '4.语言感觉',
          b: '异常',
          c: '1分',
        },
        {
          a: '5.眼球凝视',
          b: '一测活动困难',
          c: '1分',
        },
      ],
      oMarquee: null, //播报的容器
      BBLineH: null,
      BBScrollAmount: 1,
      BBLineCount: 5,
      rollRestTime: 500,
      rollTime: 10,
    };
  },
  mounted() {
    this.BBLineH = document.getElementsByClassName('fast-box')[0].offsetHeight * 0.166;
    this.scrollBox();
  },
  methods: {
    scrollBox() {
      /*
       * 启动播报滚动事件
       */
      const that = this;

      window.onload = function() {
        // BBAllTime = 0;
        that.oMarquee = document.getElementById('bobaodiv'); //滚动对象
        window.setTimeout(function() {
          that.run();
        }, that.rollRestTime);
      };
    },
    /*
     * 播报滚动事件主逻辑
     */
    run() {
      const that = this;
      if (that.BBScrollAmount == 0) {
        //若单次滚动的距离为0，则开始下一次监听，不计数
        window.setTimeout(function() {
          that.run();
        }, that.rollTime);
        return;
      }
      if (that.oMarquee.scrollTop >= that.BBLineCount * that.BBLineH) {
        //滚动完一次数据后，复位
        that.oMarquee.scrollTop = 0;
      }
      that.oMarquee.scrollTop += that.BBScrollAmount;
      if (that.oMarquee.scrollTop % that.BBLineH < 1 && that.oMarquee.scrollTop > 0) {
        window.setTimeout(function() {
          that.run();
        }, that.rollRestTime);
      } else {
        window.setTimeout(function() {
          that.run();
        }, that.rollTime);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.ent-box-div {
  width: 100%;
  margin-right: 11%;
  position: relative;
  height: 76px;
}

.ent-box {
  width: 100%;
  // margin-right: 11%;
  position: relative;
  height: 56px;
  line-height: 56px;
  padding: 0 14px;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  // margin-bottom: 20px;
}

.ent-index {
  width: 28px;
  position: absolute;
  top: 14px;
  line-height: 28px;
  text-align: center;
  font-size: 20px;
  font-family: Segoe UI;
  color: #FFFFFF;
  height: 28px;
  border-radius: 50%;
  background: #13ACC4;
  margin-bottom: 0;
}

.ent-name {
  position: absolute;
  left: 0;
  width: 30%;
  height: 24px;
  top: 50%;
  margin-top: -12px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.65);
  opacity: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.ent-mainBusiness {
  position: absolute;
  left: 35%;
  width: 20%;
  height: 24px;
  top: 50%;
  margin-top: -12px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.65);
  opacity: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.fast-box {
  position: relative;
  height: 456px;
}

.con-box {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;

  div {
    justify-content: center;
    align-items: center;
  }
}
</style>