<template>
  <span>asgjdgsjhg</span>
  <div style="height:100%;width:100%">
    <div class="body" :style="view">
      <div  >
        <table class="scroll-content" :style="style">
          <tr v-for="item in dutyRateData">
            <td>{{item.group}}</td>
            <td>{{item.bookNum}}</td>
            <td>{{item.sceneNum}}</td>
            <td>{{item.dutyRate}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    title:'tsfsdfs',
    props: {
      viewHeight: {//可视窗口
        type: [Number, String],
        default: "200px"
      },
      // animationTime: {//移动间隔
      //   type: [Number, String],
      //   default: "0.825s"
      // },
      // direction:{//移动方向
      //     type:String,
      //     default:top,
      // },
      moveDistance:{//移动距离
        type:Number,
        default:25
      }
    },
    data() {
      return {
        dutyRateData: [
          { group: "电工班1", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班2", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班3", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班4", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班5", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班6", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班7", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班8", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班9", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班10", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
          { group: "电工班11", bookNum: 3, sceneNum: 0, dutyRate: "88%" }
        ],
        activeIndex: 0,
        style:'',
        view:''
      };
    },
    methods: {

    },

    watch: {
      'activeIndex' (val) {
        this.style= -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
        console.log(this.style,'ewr')
      },

    },
    ready(){
     this.res
    }
  };
</script>
<style   scoped>
  .scroll-content {
    /*//自定义滚动 间隔时间和方向*/
    position: relative;
    transition: top 0.825s;
  }
  .body {
    width: 100%;
    height: 100px;
    overflow-y: hidden;
   /*position: absolute;*/
  }
</style>
