<template>
  <el-container class="cim-s-sp">
    <!-- <img class="bgimg" src="/public/images/common/bg1.png" /> -->
    <div class="info-box">
      <div class="info-close" @click="close">X</div>
      <div class="title">小区名称</div>
      <div class="table-box" v-for="(item,index) in houseData" :key="index">
        <div class="tbtitle">{{item.name}}</div>
        <div v-for="val in item.children" class="table-li">
          <span>{{val.name}}：</span>
          <span class="value">{{val.value}}</span>
        </div>
      </div>
    </div>
  </el-container>
</template>
<script>
import {defineComponent, reactive} from "vue";
/**
 * 小区房屋信息
 * **/
export default defineComponent({
  name: 'houseinfo',
  props:{
    propsData:{}
  },  
  setup(props,context) {
    let data = reactive({
      houseData:[{
        name: '基本信息',
        children:[
          { name: '小区名称' , value: '金升社区' },
          { name: '小区地址' , value: '南京路' },
          { name: '小区性质' , value: '还建房' }
        ]
      },{
        name: '小区设施情况',
        children:[
          { name: '大门' , value: '2' },
          { name: '门卫室' , value: '2' },
          { name: '消防栓总数' , value: '20' },
          { name: '产权车位' , value: '206' },
          { name: '电梯个数' , value: '12' }
        ]
      },{
        name: '物业情况',
        children:[
          { name: '物业名称' , value: '物业名称' },
          { name: '法律代表人' , value: '人' }
        ]
      },{
        name: '自治力量',
        children:[
          { name: '居委会人数' , value: '98' },
          { name: '物业人数' , value: '54' }
        ]
      }]
    })
    let methods = {
      close(){
        context.emit('close')
      }
    };
    return {
      ...methods,
      ...data,
    };
  },
});
</script>

<style lang="scss" scoped>
.cim-s-sp{
  position: absolute;
  top: 50px;
  right: 10px;
  width: 400px;
  height: 600px;
  z-index: 9;
  background: url(/public/images/common/bg1.png);
  background-size: 100% 100%;
}
.bgimg{
  width: 100%;
  height: 100%;
  float: left;
}
.info-box{
  width: 100%;
  height: 100%;
  position: relative;
}
.info-box .title{
  display: inline-block;
  padding: 10px 20px;
  margin: 20px auto ;
  background: url(/public/images/common/bgtitle.png);
  background-size: 100% 100%;
  color: #fff;

}
.table-box{
  color: #fff;
  width: 90%;
  margin-left: 5%;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #2997BA;
  margin-top: 10px;
  padding-bottom: 10px;
}
.table-box .tbtitle{
  width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
}
.table-li{
  width: 50%;
  font-size:14px;
  line-height: 22px;
}
.table-li .value{
  color: #fff;
}
.info-close{
  color: #fff;
  position: absolute;
  right: 10px;
  top: 15px;
  font-size: 14px;
  cursor: pointer;
}
</style>