<template>
    <div class="park-item">
        <div class="park-row1">
            <img src="../assets/img/xiaz.png" alt="">
            <div class="long_hidden">{{data.name}}</div>
        </div>
        <div class="park-line"></div>
        <div class="park-row2">
            <div>面积：</div>
            <div>{{data.acreage}}</div>
        </div>
        <div class="park-row2">
            <div>地址：{{data.address}}</div>
            <div>{{data.acreage}}</div>
        </div>
        <img src="../assets/img/xiaz1.png" class="park-img2" alt="">
        <div class="person-bottom" v-if="data.siteId">{{data.address}} / {{data.name}}</div>
        <div class="person-bottom" v-else>未入住</div>
    </div>
</template>

<script>
export default {
  name: "roomLi1",
  props: ['data'],
  methods:{
  }
};
</script>

<style scoped>
.park-item{
    cursor: pointer;
    width: 250px;
    overflow: hidden;
    height: 150px;
    margin-left: 20px;
    margin-bottom: 29px;
    position: relative;
    border: 1px solid #6eb0eb;
    border-left: 5px solid #59adf7;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.park-row1{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.park-row1 img{
    width: 32px;
    height: 32px;
    margin: 9px 10px 9px 23px;
}
.park-row1 .long_hidden{
    height: 24px;
    background: rgba(0, 90, 163, 0.1);
    border-radius: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 14px;
    line-height: 24px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #59adf7;
    margin-right: 10px;
}
.park-line{
    width: 230px;
    height: 1px;
    background: #eee;
    margin: 0 10px 15px;
}
.park-row2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #444;
    line-height: 26px;
    padding: 0 15px 0 25px;
}
.park-img2{
    width: 54px;
    height: 57px;
    position: absolute;
    right: 0;
    bottom: 0;
    border-bottom-right-radius: 10px;
}
.button-list{
    position: absolute;
    width: 300px;
    height: 180px;
    background: rgba(0,0,0,.5);
    top: -1px;
    left: -5px;
    border-radius: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: none;
}
.button-list div{
    width: 55px;
    height: 25px;
    background: rgba(0,0,0,.4);
    border-radius: 13px;
    margin: 0 5px 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 700;
    color: #dedede;
    cursor: pointer;
    text-align: center;
    line-height: 25px;
}
.park-item:hover .button-list{display: flex;}
.person-bottom{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 33px;
    background: #f0fbfa;
    border-radius: 0 0 10px 10px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #00a397;
    text-align: center;
    line-height: 33px;
}
</style>