Two.vue

<!--
 * @Author: your name
 * @Date: 2022-04-20 09:01:12
 * @LastEditTime: 2022-04-21 17:25:36
 * @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/Right/One.vue
-->
<template>
  <div class="one-wrapper all-flex-h">
    <div class="top-title">燃气安全装置加装情况</div>
    <div class="middle">
      <div class="wrapper flex">
        <div class="left">城镇用户/加装率</div>
        <div class="center">农村用户/加装率</div>
        <div class="right">单位用户/加装率</div>
      </div>
    </div>

    <div class="bottom">
      <div class="wrapper flex">
        <div class="left"><span>81</span>个/<span>20%</span></div>
        <div class="center"><span>55</span>个/<span>30%</span></div>
        <div class="right"><span>62</span>个/<span>50%</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.one-wrapper {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: 10px;
  .top-title {
    font-size: 16px;
    padding-left: 19px;
    margin-bottom: 10px;
    font-weight: 600;
  }
  .middle,
  .bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    .wrapper {
      width: 82%;
      background: rgba(24, 144, 255, 0.1);
      border-radius: 3px;
      height: 28px;
      display: flex;
      align-items: center;
      > div {
        flex: 1;
        font-size: 13px;
        text-align: center;
      }
    }
  }
  .middle{
    font-size: 16px;
    margin-bottom:2px
  }
  .bottom {
    flex:1;
    .wrapper {
      background: #fff;
    }
  }
  // .bottom {
  //   display: flex;
  //   align-items: center;
  //   flex: 1;
  //   > div {
  //     .text {
  //       font-size: 18px;
  //     }
  //   }
  // }
}
</style>