SaaS-DataScreen/src/views/index/components/parking/index.vue

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 10:20:36
 * @LastEditors: MoZhuangRu
 * @LastEditTime: 2019-11-21 15:43:00
 * @Description: 智能停车
 -->
<template>
  <div class="parking">
    <TitleCom>智能停车</TitleCom>
    <div class="tips">
      <img class="tips-logo" src="./images/zhntch@3x.png" alt="">
      <div class="tips-desc">
        <span class="tips-desc-txt">{{parkData.total | numberFormat}}</span>
        <span class="tips-desc-unit"> 车次</span>
      </div>
    </div>
    <div class="list">
      <vueSeamless :data="parkData.list" :class-option="optionScroll" class="list">
        <div class="list-item" v-for="(item, idx) in parkData.list" :key="idx">
        <div class="list-item-lf">
          <TagCom type="time">{{item.createAt}}</TagCom>
          <span class="list-item-txt">{{item.content}}</span>
        </div>
        <div class="list-item-lr">
          <TagCom type="house">{{item.label}}</TagCom>
        </div>
      </div>
      </vueSeamless>
    </div>
  </div>
</template>
<script>
import TitleCom from '@/components/title'
import TagCom from '@/components/tag'
import { api } from '@/api'
import vueSeamless from 'vue-seamless-scroll'

export default {
  computed: {
    optionScroll () {
      return {
        step: 0.5
      }
    }
  },
  data () {
    return {
      parkData: {}
    }
  },
  components: {
    TitleCom,
    TagCom,
    vueSeamless
  },
  mounted () {
    api.getTrafficRecord({
      pageSize: 30,
      pageNum: 1
    }).then(res => {
      this.parkData = res.data.data
    })
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>