smsb-web-develop/src/views/visualization/v1/NewNotice.vue

<template>
  <div class="c-newNoctice l-flex--col">
    <div class="c-newNoctice--header l-flex--row">
      <div class="l-flex__fill">消息通知</div>
      <div class="l-flex__none c-count">{{ count }}s</div>
    </div>
    <div class="c-block l-flex--col jcenter center l-flex__auto has-padding">
      <div class="c-block--time u-bold">{{ notice.happenTime }}</div>
      <div class="c-block--info u-bold u-text--center">{{ notice.deviceName }}{{ notice.type }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewNotice',
  props: {
    notice: {
      type: Object,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.c-newNoctice {
  font-size: 32px;
  &--header {
    padding: 0 1rem;
    height: 56px;
    background: #2956f0;
    color: #fff;
    font-size: 28px;
  }
}
.c-block {
  background: #fff;
  &--time {
    color: #6a6565;
    margin-bottom:30px ;
  }
  &--info {
    color: #000000;
  }
}
</style>