<template>
  <div class="container">
    <div class="image"><img src="@/assets/image/agreement.png" alt="" /></div>
    <div class="text">为您查询到{{ this.result }}条结果</div>
    <div v-for="(item, index) in info" :key="index">
      <el-card>
        <div>
          <img src="@/assets/image/bianhao.png" alt="" />
          评估报告编号：<b>{{ item.number }}</b>
        </div>
        <div>
          <img src="@/assets/image/name.png" alt="" />
          被征收人姓名：<b>{{ item.name }}</b>
        </div>
        <div>
          <img src="@/assets/image/address.png" alt="" />
          被征收人房屋地址：<b>{{ item.address }}</b>
        </div>
        <div>
          <img src="@/assets/image/money.png" alt="" />
          评估总金额：<b style="color:red">{{ item.money }}</b>
        </div>
        <div>
          <img src="@/assets/image/money.png" alt="" />
          合计补偿金额：<b style="color:red">{{ item.money }}</b>
        </div>
        <div>
          <img src="@/assets/image/hengxian.png" alt="" />
        </div>
        <div class="date">
          <div class="flex backgroundColor">
            <img src="@/assets/image/shijian.png" alt="" />
            签订日期：{{ item.time }}
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import TABLE from '@/components/table'
export default {
  components: {
    TABLE,
  },
  data() {
    return {
      result: '2',
      info: [
        {
          number: '044',
          name: '胡守钧',
          address: '宁波市江北区四洲街16号404',
          money: '180234元',
          person: '王勇',
          time: '2021-9-1',
        },
        {
          number: '044',
          name: '胡守钧',
          address: '宁波市江北区四洲街16号404',
          money: '180234元',
          person: '王勇',
          time: '2021-9-1',
        },
      ],
    }
  },
  created() {
    console.log(1234)
  },
}
</script>

<style lang="less" scoped>
.container {
  .image {
    text-align: center;
    margin-top: 20px;
  }
  .text {
    text-align: center;
    margin: 10px 0;
    color: #2d6df2;
    font-weight: bolder;
  }
  .el-card {
    margin: 0 10px 10px;
    ::v-deep.el-card__body {
      padding: 0 10px;
      > div {
        margin: 10px 0;
      }
      .date {
        display: flex;
        justify-content: center;
        .backgroundColor {
          background-color: #e3ebfd;
          img {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
