<template>
  <ContainerBorder title="建筑信息">
    <!-- 建筑基本信息 -->
    <div class="build-info">
      <div class="info-icon">
        <img src="@/assets/images/icon/build-bli-icon.png" alt="建筑图标">
      </div>
      <div class="info-data">
        <div class="item">小区楼宇：<span>首创洪恩寺</span></div>
        <div class="item">建筑地址：<span>江北区大石坝xx号</span></div>
        <div class="item">建筑年代：<span>2008年</span></div>
        <div class="item">建筑面具：<span>2300平方米</span></div>
        <div class="item">建筑用途：<span>商品房住宅</span></div>
      </div>
    </div>
    <!-- 建筑使用信息 -->
    <div class="build-use">
      <table cellspacing="0" class="useing-data">
        <tr class="header">
          <td>重点单位</td>
          <td>使用性质</td>
          <td>容器率</td>
          <td>绿化率</td>
        </tr>
        <tr class="body">
          <td>否</td>
          <td>住宅</td>
          <td>2.5</td>
          <td>30%</td>
        </tr>
      </table>
    </div>
    <!-- 建筑统计信息 -->
    <div class="build-total">
      <div class="total-data">
        <table cellspacing="0" class="total-data-table">
          <tr class="number">
            <td>2</td>
            <td>24</td>
            <td>192</td>
            <td>100</td>
          </tr>
          <tr class="label">
            <td>电梯数量</td>
            <td>楼层数</td>
            <td>户数</td>
            <td>出租房</td>
          </tr>
        </table>
      </div>
      <div class="total-info">
        <div class="tag"><img src="@/assets/images/icon/user-icon.png"/>物业负责人</div>
        <div class="name">王宝强</div>
        <div class="phone">13999999999</div>
      </div>
    </div>
  </ContainerBorder>
</template>

<script>
import { ContainerBorder } from '@/components'

export default {
  components: {
    ContainerBorder
  }
}
</script>

<style lang="less" scoped>
@import url("@/assets/styles/common.less");

@font-color: #75faf6;
@font-default-color: #fff;


.build-info {
  width: 100%;
  font-size: 17px;
  color: #fff;
  .flex(flex-start);
  padding: 2vh 0vw;

  .info-icon {
    flex: 1;
    img {
      width: 139px;
      height: 100px;
    }
  } 
  .info-data {
    flex: 2;
    .item {
      padding: .3vh 0vw;
      span {
        color: @font-color;
      }
    }
  }
}

.build-use {
  width: 100%;
  font-size: 17px;
  color: #fff;
  .useing-data {
    width: 100%;
    td {
      text-align: center;
      padding: 1.2vh 0vw;
    }
    .header {
      background: #213b4d;
      td {
        color: @font-default-color;
      }
    }
    .body td {
      color: @font-color;
    }

  }
}

.build-total {
  width: 20.7vw;
  height: 12.8vh;
  font-size: 17px;
  color: #fff;
  background: url("@/assets/images/build-border-bg.png") no-repeat;
  background-size: 100% 100%;
  margin: 2vh 0vw;
  .flex(space-around, flex-start);
  flex-direction: column;
  .total-data {
    width: 100%;
    .total-data-table {
      width: 100%;
      td {
        text-align: center;
      }
      .number td{
        position: relative;
        font-size: 1.5vw;
        font-weight: 900;
        background-image: -webkit-linear-gradient(bottom,rgb(234, 163, 82),#ddc663); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          width: 40%;
          height: 80%;
          display: inline-block;
          background-image: -webkit-linear-gradient(bottom,rgba(234, 163, 82, .6),rgba(221, 198, 99, .6)); 
          top: 10%;
          filter: blur(1.1vh) brightness(100%) opacity(0.8);
          transform: scale(0.95) translate(-50%);
        }
      }
      .label td{
        padding: 1vh 0vw;
        font-size: .7vw;
      }
    }
  }

  .total-info {
    .flex(space-around);
    width: 100%;
    .tag {
      .flex(flex-start);
      img {
        margin-right: .5vw;
        width: 22px;
        height: 22px;
      }
    }
    .name {
      font-size: .8vw;
      color:#98e3ff;
    }
    .phone {
      font-size: .8vw;
      color:#98e3ff;
    }
  }
}
</style>
