<template>
  <div class="jiudianlist">
    <div class="jiudianlisthead">
      <div class="item">时间</div>
      <div class="item">地区</div>
      <div class="item">动态</div>
    </div>
    <div class="jiudianlistbody">
      <vue-seamless-scroll
        :data="list"
        :class-option="defaultOption"
        class="paiming"
      >
        <div class="jiudianlistbodys" v-for="(item,index) in list" :key="index">
          <div class="item1">{{ item.time }}</div>
          <div class="item1">{{ item.address }}</div>
          <div class="item1">{{ item.desc }}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'jiudianlist',
  components: { vueSeamlessScroll },
  computed: {
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
      list: [{
        time: '2021.10',
        address: '',
        desc: ''
      }]
    }
  },
  watch: {},
  mounted () {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.jiudianlist {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  height: 90%;
}

.jiudianlisthead {
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  background: rgba(14, 25, 121, 0.5);

  .item {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    text-indent: 10px;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    flex: 1;
  }

  .item:nth-child(3) {
    flex: 5;
  }
}

.jiudianlistbody {
  position: relative;
  width: 100%;
  height: calc(100% - 50px);
}

.jiudianlistbodys {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 34px;
  background: rgba(14, 25, 121, 0);

  .item1 {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    text-indent: 10px;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    flex: 1;

    span {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #FFD83C;
    }
  }

  .item1:nth-child(3) {
    flex: 5;
  }
}

.jiudianlistbodys:nth-child(2n) {
  background: rgba(14, 25, 121, 0.5);
}

.paiming {
  width: 100%;
  position: relative;
  height: 100%;
  overflow: hidden;
}
</style>