zhgkpt-datav/app/src/views/Basic/components/Regional.vue

<template>
  <div>
    <div class="row header">
        <span class="type">序号</span>
        <span class="count">区域</span>
        <span class="time">总数(栋)</span>
        <span class="unit">有无物联网</span>
        <span class="is_notice" >占比%</span>
      </div>
      <VueSeamlessScroll
        :data="list"
        :class-option="classOption"
        class="warp"
      >
        <ul class="item">
        <li class="row" v-for="(item, index) in list" :key="index">
            <span class="type">{{ index+1 }}</span>
            <span class="count">{{ item[0] }}</span>
            <span class="time">{{ item[1] }}</span>
            <span class="unit">{{ item[2] }}</span>
            <span class="is_notice">{{ item[3] }}</span>
          </li>
        </ul>
      </VueSeamlessScroll>
  </div>
  </template>
  
  <script>
  import VueSeamlessScroll from "vue-seamless-scroll";
  export default {
    name: "RegionalComp",
    components: {
      VueSeamlessScroll,
    },
    data() {
      return {
        list: [
          [
            "万州区",
            "1200",
            "有",
            "23%",
          ],
          [
          "九龙坡起",
            "1598",
            "有",
            "35%",
          ],
          [
          "南川区",
            "1290",
            "有",
            "12%",
          ],
          [
          "璧山区",
            "1198",
            "有",
            "8%",
          ],
          [
          "渝北区",
            "6573",
            "有",
            "48%",
          ],
          [
          "渝北区",
            "6573",
            "有",
            "48%",
          ],
          [
          "渝北区",
            "6573",
            "有",
            "48%",
          ],
          [
          "渝北区",
            "6573",
            "有",
            "48%",
          ],
          [
          "渝北区",
            "6573",
            "有",
            "48%",
          ],
        ],
      };
    },
    computed: {
      classOption() {
        return {
          singleHeight: 51,
        };
      },
    },
  };
  </script>
  <style scoped lang='less'>
  .warp {
  height: 521px;
  margin: 0 auto;
  overflow: hidden;
    .item {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      cursor: pointer;
    }
  }

.header {
  color: #fff !important;
  height: 38px !important;
  background-color: rgba(0, 163, 255, 0.3) !important;
  margin-top: 2px;
  letter-spacing: 1px;
  .is_notice {
    line-height: 19px;
    font-size: 10px;
  }
}

li.row > span {
  text-align: center;
  font-size: 14x;
  position: relative;
  display: inline-block;
}

li.row {
//   border-bottom: 1px dotted #1d525f;
  box-sizing: border-box;
}

.row,
li,
a {
  display: block;
  height: 46px;
  line-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #44F1FF;
  margin-top: 5px;
  .time,
  .type,
  .count,
  .unit,
  .is_notice {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .time {
    flex: 0.2;
  }
  .type {
    flex: 0.12;
  }
  .count {
    flex: 0.2;
  }
  .unit {
    flex: 0.35;
  }
  .is_notice {
    flex: 0.15;
  }

}
  </style>