<!--
  功能：广播滚动条，往左循环播放
    (两套样式 一个是从右往左，一个是从下往上（从下往上也可以用在多条数据展示）
    marqueebox1是左右 marqueebox2是上下)
  作者：zyp
  时间：2022年3月11日 16:04:37
  版本：v1.0
-->
<template>
  <!-- 左右 -->
  <div :class="['marqueebox',miniLB?'minilbbox':'']">
    <div class="marqueinbox ">
      <img v-if="yjscrollList.length !== 0" src="@/assets/logo.png" class="lbboxico"
            @click="miniLB=!miniLB"/>
      <img v-else src="@/assets/logo.png" class="lbboxico" @click="miniLB=!miniLB"/>
      <div class="maroutb" @mouseenter="pausemarquee" @mouseleave="resumemarquee"> //必要行
        <div :class="['marquee']" :style="yjscrollList.length>0?margueeStyleByTime:''"> //必要行
          <div class="marqueeItem" v-for="(item,index) in yjscrollList" :key="item.title+index"
                @click="jumptoDetail(item)"><span
            class="attentionColor">{{item.title}}</span><span>{{item.content}}</span></div>
          <div v-if="yjscrollList.length==0">暂无数据</div>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 上下 -->
  <div :class="['marqueebox2',miniLB?'minilbbox':'']">
    <div class="marqueinbox ">
      <img v-if="yjscrollList.length !== 0" src="@/assets/logo.png" class="lbboxico"
            @click="miniLB=!miniLB"/>
      <img v-else src="@/assets/logo.png" class="lbboxico" @click="miniLB=!miniLB"/>
      <div class="maroutb" @mouseenter="pausemarquee" @mouseleave="resumemarquee">
        <div :class="['marquee']" :style="yjscrollList.length>0?margueeStyleByTime:''">
          <div class="marqueeItem" v-for="(item,index) in yjscrollList" :key="item.title+index"
                @click="jumptoDetail(item)"><span
            class="attentionColor">{{item.title}}</span><span>{{item.content}}</span></div>
          <div v-if="yjscrollList.length==0">暂无数据</div>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'marquee',
  data () {
    return {
      yjscrollList: [],
      margueeStyleByTime: {},//必要行
      miniLB: false

    }
  },
  mounted () {
    this.getScrollBraodList()//必要行
  },
  methods: {
    getScrollBraodList () {
      this.yjscrollList = [{ title: '1111', content: '33333333' }, { title: '1111', content: '33333333' }, { title: '1111', content: '33333333' }]
      // 动态样式
      this.margueeStyleByTime = {
        animationDuration: this.yjscrollList.length * 6 + 's', // 控制速度的
        animationPlayState: 'running'
      }
    },
    pausemarquee () {
      this.margueeStyleByTime.animationPlayState = 'paused'
    },
    resumemarquee () {
      this.margueeStyleByTime.animationPlayState = 'running'
    }
  }
}
</script>
<style lang="scss" scoped>
.minilbbox {
  width: 43px !important;
  transition: width .3s;
}
.marqueebox {
  position: absolute;
  top: 81px;
  right: 16px;
  z-index: 22;
  transition: width .3s;
  width: 500px;
  padding: 0px 10px 0px 10px;
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  border-radius: 20px;
  overflow: hidden;
  background: #042141;
  color: #fff;
  font-size: 14px;
  .marqueinbox {
    position: relative;
    padding: 0px 0px 0px 30px;
    height: 100%;
    img{
      width: 20px;
      height: 20px;
      position: absolute;
      left: 0;
      top: 5px;
      cursor: pointer;
    }
    .maroutb {
      overflow: hidden;
      width: 100%;
      height: 100%;
      white-space: nowrap;
    }
    .marquee {
        width: fit-content;
        height: 100%;
        padding-left: 100%;
        animation: marqueeTransForm 8s linear infinite;
      }

      .marqueeItem {
        display: inline-block;
        margin-right: 10px;
        height: 100%;
        white-space: nowrap;

      }
  }

}
.marqueebox2 {
  position: absolute;
  top: 121px;
  right: 16px;
  z-index: 22;
  transition: width .3s;
  width: 500px;
  padding: 0px 10px 0px 10px;
  box-sizing: border-box;
  height: 100px;
  line-height: 30px;
  border-radius: 20px;
  overflow: hidden;
  background: #042141;
  color: #fff;
  font-size: 14px;
  .marqueinbox {
    position: relative;
    padding: 0px 0px 0px 30px;
    height: 100%;
    img{
      width: 20px;
      height: 20px;
      position: absolute;
      left: 0;
      top: 5px;
      cursor: pointer;
    }
    .maroutb {
      overflow: hidden;
      width: 100%;
      height: 100%;
      white-space: nowrap;
    }
    .marquee {
        width: fit-content;
        height: fit-content;
        // padding-top: 100%;
        animation: marqueeTransForm2 3s linear infinite;
      }
      .marqueeItem {
        display: block;
        margin-right: 10px;
        height: 100%;
        white-space: nowrap;

      }
  }

}
@keyframes marqueeTransForm {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
  }
@keyframes marqueeTransForm2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0%, -100%);
  }
}
</style>