<script>
import FirstHight from "./FirstHight.vue";
import BasicTotal from "@/components/BasicTotal.vue";

export default {
  name: "BasicInfo",
  components: {
    FirstHight,
    BasicTotal,
  },
};
</script>

<template>
  <div class="basic-info">
    <div class="__left">
      <FirstHight />
    </div>
    <div class="__right">
      <linear-text
        startColor="#00FFE0"
        endColor="#00D1FF"
        text="治理重点"
        fontSize="16px"
      />
      <div class="basic-total">
        <BasicTotal
          style="width: 187px"
          number="1326"
          label="超高层建筑"
          unit="栋"
        />
        <BasicTotal style="width: 187px" number="926" label="" unit="栋">
          <template #label>
            <span class="label">
              <span class="sub-label">2000年前底</span>
              老旧住宅建筑
            </span>
          </template>
        </BasicTotal>
        <BasicTotal
          style="width: 187px"
          number="1273"
          label="老旧商业混合体"
          unit="栋"
        >
          <template #label>
            <span class="label">
              <span class="sub-label">2000年前底</span>
              老旧住宅建筑
            </span>
          </template>
        </BasicTotal>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.basic-info {
  padding: 4px;
  display: flex;
  .__left {
    display: flex;
    justify-content: space-around;
  }
  .__right {
    margin-top: 20px;
    margin-left: 5px;
    font-size: 14px;
    .basic-total {
      margin-top: 17px;
      display: flex;
      flex-direction: column;
      gap: 17px;
      .label {
        font-size: 12px;
        display: flex;
        line-height: 12px;
        flex-direction: column;
        justify-content: center;
        .sub-label {
          font-size: 10px;
        }
      }
    }
  }
}
</style>
