feat: 建筑信息

src/views/detail/left/BuildInfo/index.vue

@@ -1,6 +1,59 @@
 <template>
   <ContainerBorder title="建筑信息">
-    <div>111</div>
+    <!-- 建筑基本信息 -->
+    <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>
 
@@ -15,4 +68,123 @@ export default {
 </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>