<template>
  <div class="widthCommon" style="margin-bottom: 20px;">
    <ul class="caseList">
      <li v-for="item in 10" :key="item">
        <img src="../../../assets/images/case/case.png" alt="">
        <p class="caseName">项目名称：黄石智慧停车项目</p>
        <p class="caseAddress">项目地址：  湖北· 黄石</p>
        <ul class="mark-wrapper">
          <li>
            <span>车位：10000</span>
          </li>
          <li>
            <span>规划、</span>
            <span>建设、</span>
            <span>运营</span>
          </li>
        </ul>

        <div class="pointer toDetail">查看详情 》</div>
      </li>
    </ul>

    <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
    </v-page>
  </div>
</template>

<script>
export default {
  name: 'selectTab1'
}
</script>

<style scoped lang="scss">
  .caseList{
    overflow: hidden;
  }
  .caseList>li{
    width: 400px;
    height: 529px;
    float: left;
    margin-right:90px ;
    margin-bottom: 92px;
    background:rgba(228,228,228,1);
    img{
      width: 400px;
      height: 354px;
    }
  }
  .caseList>li:nth-of-type(3n+0){
    margin-right: 0;
  }
  .caseName,.caseAddress{
    padding-left: 20px;
    font-size: 14px;
    color: #333;
  }
  .caseName{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .mark-wrapper{
    margin: 20px 0;
    padding-left: 20px;
    overflow: hidden;
  }
  .mark-wrapper li{
    padding: 5px 10px;
    float: left;
    margin-right: 17px;
    background:rgba(54,114,248,.4);
    border-radius:4px;
    font-size: 14px;
    color: #333;
  }
  .toDetail{
    text-align: center;
    font-size: 14px;
    color: #3366CC;
  }
</style>
