smsb-web-develop/src/views/dashboard/v2/DeviceStatus.vue

<template>
  <div class="l-flex--col u-text--center has-content-padding o-device-status u-releative">
    <slot />
    <video
      class="video"
      src="@/assets/map_1.mp4"
      muted
      autoplay
      loop
    />
    <div class="u-bold o-device-status__ratio">
      <div class="o-device-status__text">良性运营率</div>
      <div>{{ ratio }}%</div>
    </div>
    <div class="o-device-status__padding">
      <cards
        :items="itemList"
        lg
      />
    </div>
    <div class="date">截止时间： {{ date }}</div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import Cards from './Cards'
export default {
  name: 'DeviceStatus',
  components: {
    Cards
  },
  props: {
    items: {
      type: Array,
      required: true
    },
    ratio: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      date: ''
    }
  },
  computed: {
    itemList () {
      const colors = ['#2956F0', '#04A681', '#C4C4C4', '#F40645']

      return this.items.map((item, index) => {
        return {
          ...item,
          icon: 'menu-four',
          style: { color: colors[index] }
        }
      })
    }
  },
  created () {
    this.getCurrentTime()
  },
  methods: {
    getCurrentTime () {
      const now = parseTime(new Date(), '{y}年{m}月{d}日 {h}:{i}:{s}').split(' ')
      this.date = now[0]
    }
  }
}
</script>
<style lang="scss" scoped>
.video {
  position: absolute;
  left: 0;
  top: 0;
  width: 1840px;
  height: 1237px;
  object-fit: cover;
}
.has-content-padding {
  padding: 0 24px 24px;
}
.o-device-status {
  position: relative;
  font-size: 36px;
  color: #fff;
  &__ratio {
    font-size: 96px;
    line-height: 110px;
    height: 930px;
    z-index: 2;
  }
  &__text {
    margin-top: 350px;
    margin-bottom: 68px;
    word-spacing: 2px;
  }
  &_item {
    width: 33.3333%;
  }
  &__num {
    font-size: 64px;
    line-height: 100px;
    color: #f7d308;
  }
  &__padding {
    padding: 0 160px;
    z-index: 2;
  }
}
.date {
  text-align: center;
  font-size: 32px;
  color: #9ea9cd;
  z-index: 2;
  margin-top: 30px;
}
</style>