Scound.vue

<!--
 * @Author: your name
 * @Date: 2022-04-19 10:17:05
 * @LastEditTime: 2022-05-05 10:40:44
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/Scound.vue
-->
<template>
  <div class="scound-wrapper">
    <div class="scound-title">{{ title }}</div>
    <div class="contant flex">
      <div class="left ">
        <div class="top ">{{ left.text }}</div>
        <div class="bottom">
          <div class="number" v-for="item in left.numArr" :key="item.text">
            {{ item }}
          </div>
          <div class="unit">{{ left.unit }}</div>
        </div>
      </div>
      <div class="right">
        <div class="top">{{ right.text }}</div>
        <div class="bottom">
          <div class="number" v-for="item in right.numArr" :key="item.text">
            {{ item }}
          </div>
          <div class="unit">{{ right.unit }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "title",
    },
    left: {
      type: Object,
      default: () => ({
        text: "驻村安全员",
        numArr: "224",
        unit: "名",
      }),
    },
    right: {
      type: Object,
      default: () => ({
        text: "燃气协管员",
        numArr: "214",
        unit: "名",
      }),
    },
  },
  name: "",
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.scound-wrapper {
  box-sizing: border-box;
  padding-top: 10px;
  .scound-title {
    font-size: 16px;
    padding-left: 19px;
    margin-bottom: 10px;
    font-weight: 600;
  }
  .contant {
    > div {
      font-size: 14px;
      width: 100px;
      &.left{
        margin-left:20%;
      }
      &.right{
        margin-right: 20%;
      }
      > div {
        &.top {
          margin-bottom: 10px;
        }
        &.bottom {
          display: flex;
          .number {
            font-size: 18px;
            color: #1a91ff;
            padding: 0px 4px;
            border: 1px solid #ededed;
            border-radius: 2px;
            margin-right: 2px;
          }
          .unit {
            font-size: 12px;
            padding-top: 6px;
          }
        }
      }
    }
  }
}
</style>