zhgkpt-datav/app/src/views/Detail/components/BuildingInfo.vue

<template>
  <div class="building">
    <div>
      <div class="building-info">
        <ul>
          <li>
            <span>建筑名称：</span>
            <p>重庆大剧院</p>
          </li>
          <li>
            <span>详细地址：</span>
            <p>江北区文华街东路2号</p>
          </li>
          <li>
            <span>建成年代：</span>
            <p>2009年</p>
          </li>
          <li>
            <span>消防安全管理形式：</span>
            <p>xxx</p>
          </li>
          <li>
            <span>管理主体：</span>
            <p>重庆大剧院管理有限公司</p>
          </li>
        </ul>
        <ul>
          <li>
            <span>建筑楼层：</span>
            <p>地上7层</p>
          </li>
          <li>
            <span>使用功能：</span>
            <p>公共建筑</p>
          </li>
          <li>
            <span>建筑面积：</span>
            <p>103307.10m²</p>
          </li>
          <li>
            <span>管理人联系：</span>
            <p>张三 13999999999</p>
          </li>
          <li>
            <span>是否有维保：</span>
            <p>是</p>
          </li>
        </ul>
      </div>
      <div class="maintenance">
        <span class="unit-info">维保单位：</span>
        <p class="unit">张恒峰建筑消防维保有限公司</p>
      </div>
    </div>
    <div class="unit-img">
      <div>建筑附件：</div>
      <div class="accessory-img">
        <img src="../../../assets/images/Rectangle 3726.png" alt="" />
        <img src="../../../assets/images/Rectangle 3728.png" alt="" />
        <img src="../../../assets/images/Rectangle 3726.png" alt="" />
        <img src="../../../assets/images/Rectangle 3728.png" alt="" />
        <img src="../../../assets/images/Rectangle 3728.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>

<style lang="less" scoped>
.building {
  padding: 20px 12px;
  font-size: 14px;
}
.building-info {
  display: flex;
  // letter-spacing: 1px;
  line-height: 31px;

  ul:first-child {
    flex: 1;
  }
  ul:last-child {
    width: 190px;
  }
  li {
    overflow: hidden;
  }
  p {
    display: inline-block;
  }
  span {
    color: #78c3cd;
    font-size: 12px;
  }
}
.maintenance {
  display: flex;
  margin-top: 10px;
}
.unit {
  font-size: 14px;
  width: 200px;
}
.unit-info {
  color: #78c3cd;
  font-size: 12px;
}
.unit-img {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  font-size: 12px;
  color: #78c3cd;
  img {
    display: inline-block;
    margin: 10px 5px;
    width: 75px;
    height: 57px;
  }
  .accessory-img {
    display: flex;
    overflow-x: scroll;
  }
}
</style>