<template>
  <div :data="noticeList" class="seamless-warp"  :class-option="optionCustomer">
    <ul class="item">
      <li v-for="item in noticeList">
        <span class="date">{{item.date}}</span>
        <span class="duration" >{{item.duration}}</span>
        <span class="name">{{item.name}}</span>
        <span class="orderType">{{item.orderType}}</span>
        <span class="address">{{item.address}}</span>
        <span class="receptionist">{{item.receptionist}}</span>
        <span class="state">{{item.state}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ScrollContent",
  // name: "ScrollTest",
  components:{
    // ScrollBase
  },
  props:{
    noticeList:{
      type:Array,
      default:[
        {
          date: "2022-09-01 10:25:06",
          duration:'2min',
          name:'赵王莉',
          orderType:'报修',
          address:'建设小区21号112室',
          receptionist:'候倩楠',
          state:'接听'
        },
        {
          date: "2022-09-01 10:25:06",
          duration:'2.5min',
          name:'林妹妹',
          orderType:'抢险',
          address:'伊水花园21-1-1254',
          receptionist:'马静静',
          state:'待处理'
        },
        {
          date: "2022-09-01 10:25:06",
          duration:'2min',
          name:'林妹妹',
          orderType:'抢险',
          address:'伊水花园21-1-1254',
          receptionist:'马静静',
          state:'待处理'
        },
        {
          date: "2022-09-01 10:25:06",
          duration:'2.5min',
          name:'林妹妹',
          orderType:'抢险',
          address:'伊水花园21-1-1254',
          receptionist:'马静静',
          state:'待处理'
        },
        {
          date: "2022-09-01 10:25:06",
          duration:'2.5min',
          name:'林妹妹',
          orderType:'抢险',
          address:'伊水花园21-1-1254',
          receptionist:'马静静',
          state:'待处理'
        },





      ]
    }
  },
  data() {
    return {
      optionCustomer: {
        step: 0.2,
        limitMoveNum: 3, //限制开始滚动的条数
        openTouch: false,
        waitTime: 5, //滚动的速度
        direction: 1, //方向 0 往下 1 往上 2向左 3向右
      }
    }
  }
};
</script>

<style scoped>
li{
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
span{
  color: #ffffff;
  font-size: 2.037vh;
  line-height: 3.611vh;
}
.date{
  margin-left: 2.083vw;
}
.duration{
  margin-left: 5.99vw;
}
.name{
  position: absolute;
  left: 27.396vw;
  width: 9.259vh;
}
.orderType{
  position: absolute;
  left: 35.677vw;
  width: 3.125vw;
}
.address{
  position: absolute;
  left: 43.021vw;
  width: 26.042vw;
}
.receptionist{
  position: absolute;
  left: 56.771vw;
  width: 4.6875vw;
}
.state{
  position: absolute;
  left: 64.6875vw;
  width: 5.208vw;
  color: #F7DB35;
}



</style>
