dvcp_v2_wechat_app/src/mods/AppVideoSurve/AppVideoSurve.vue

<template>
  <div class="videoSurve">
    <div class="top">
      <AiAreaPicker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId" @select="areaSelect">
        <div class="ai-area__wrapper">
          <span class="label" v-if="areaName">{{ areaName }}</span>
          <span v-else>请选择</span>
          <!-- <u-icon name="arrow-right"></u-icon> -->
        </div>
      </AiAreaPicker>

      <div class="msgs">
        <div class="item">
          <span class="tag"></span>
          <span class="hint">设备总数</span>
          <span class="num">50</span>
        </div>

        <div class="item">
          <span class="tag"></span>
          <span class="hint">在线率</span>
          <span class="num">68%</span>
        </div>

        <div class="item">
          <span class="tag"></span>
          <span class="hint">在线设备</span>
          <span class="num">34</span>
        </div>

        <div class="item">
          <span class="tag"></span>
          <span class="hint">离线设备</span>
          <span class="num">16</span>
        </div>
      </div>
    </div>

    <div class="middle">
      <div class="nav">设备列表</div>

      <div class="imgs">
        <div class="items">
          <img src="../../static/img/avatar.png" alt="" />
          <span class="hint">11</span>
        </div>

        <div class="items">
          <img src="../../static/img/avatar.png" alt="" />
          <span class="hint">11</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AppVideoSurve',
  appName: '视频监控',
  components: {},
  props: {},
  data() {
    return {
      areaId: '',
      $areaId: '',
      areaName: '',
    }
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
  onLoad() {
    this.areaId = this.$areaId
    this.areaName = this.$areaName
  },
  onShow() {},
  methods: {
    areaSelect(e) {
      console.log(e)
    },
  },
}
</script>

<style scoped lang="scss">
.videoSurve {
  height: 100%;
  .top {
    padding: 0 32px;
    background: #58657e;
    color: #fff;
    .ai-area {
      .ai-area__wrapper {
        padding: 28px 0;
        .label {
          font-size: 40px;
          font-weight: 600;
        }
      }
    }

    .msgs {
      display: flex;
      flex-wrap: wrap;
      padding: 8px 0 32px 0;
      .item {
        margin-top: 24px;
        .tag {
          display: inline-block;
          width: 8px;
          height: 8px;
          vertical-align: middle;
          margin-right: 8px;
          background: #fff;
          border-radius: 50%;
        }
        .hint {
          font-size: 28px;
        }
        .num {
          font-size: 28px;
          font-weight: 500;
          margin-left: 32px;
        }
      }
      .item:nth-child(2n + 1) {
        width: 45%;
      }
      .item:nth-child(2n) {
        width: 55%;
      }
    }
  }

  .middle {
    padding: 0 32px;
    .nav {
      padding: 48px 0 32px 0;
      font-size: 38px;
      font-weight: 600;
    }

    .imgs {
      display: flex;
      flex-wrap: wrap;
      .items {
        width: 49%;
        margin-top: 24px;
        img {
          width: 100%;
          height: 188px;
        }
        .hint {
          margin-top: 8px;
        }
      }
      .items:nth-child(2n + 1) {
        margin-right: 2%;
      }
      .items:nth-child(-n + 2) {
        margin-top: 0;
      }
    }
  }
}
</style>