usoft-town/components/home/garden.vue

<template>
  <div class="garden">
    <div class="container">
      <div class="title">
        <p><i class="icon-info"/>园区活动</p>
        <a href="/townInfo">更多</a>
      </div>
      <div class="content">
        <div class="info-list" v-for="item in list">
          <div class="img">
            <img :src="item.ac_icon">
          </div>
          <div class="list-right">
            <p v-text="item.ac_title">企业为员工打造全新潼湖小镇，舒服办公环境</p>
            <span v-text="item.ac_desc">2017年，优软科技携手碧桂园创办全新智慧生态园，发扬优软新势力，适应互联网潮流 发展.</span>
          </div>
          <div class="detail">
            <h4 v-text="item.ac_title">12</h4>
            <span v-text="item.ac_desc">3213ffds</span>
            <p v-text="formatDate(item.ac_startdate)">32342</p>
            <p v-text="item.ac_addr">32342</p>
            <p>{{item.ac_enternum}}&nbsp;参加活动</p>
            <a :href="'/townInfo/' + item.ac_id">查看详情</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {formatDate} from '@/utils/date.js'
  export default {
    name: 'Garden',
    computed: {
      list () {
        return this.$store.state.gardens.list.data.list
      }
    },
    methods: {
      // 格式化时间
      formatDate (row) {
        let date = new Date(row)
        return formatDate(date, 'yyyy-MM-dd hh:mm')
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.garden{
  height:610px;
  background: #f4f4f4;
  .title{
    position:relative;
    a{
      position:absolute;
      right:0;
      top:65px;
      display:block;
      width:50px;
      height:26px;
      line-height: 26px;
      text-align: center;
      background: #fff;
      color:#797979;
      &:hover{
        cursor:pointer;
        color:#149ccf;
      }
    }
    p{
      line-height: 130px;
      font-size: 26px;
      color:#149ccf;
      margin:0;
      i{
        margin-right:10px;
      }
    }
  }
  .content{
    .info-list{
      position:relative;
      display:inline-block;
      width:24%;
      height:430px;
      vertical-align: top;
      margin-right:10px;
      background: #fff;
      overflow: hidden;
      &:last-child{
        margin:0;
      }
      &:hover{
        cursor:pointer;
        .detail{
          opacity:1;
          top:0;
        }
      }
      .img{
        width:280px;
        height:250px;
        img{
          width:100%;
          height:100%;
          border:none;
          padding:0;
        }
      }
      .list-right{
        padding:24px 16px 0 16px;
        overflow: hidden;
        p{
          font-size: 20px;
          color:#333;
          margin-bottom:25px;
          width:98%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span{
          font-size: 14px;
          line-height: 20px;
          color:#969696;
        }
      }
      .detail{
        position:absolute;
        top:100%;
        opacity:0;
        transition: all .5s ease;
        background: rgba(0,0,0,.8);
        width:100%;
        height:430px;
        padding:30px 16px;
        h4{
          font-size: 20px;
          color:#fff;
          margin-bottom:25px;
        }
        span{
          display:block;
          font-size: 14px;
          color:#fff;
          line-height: 20px;
          margin-bottom:10px;
        }
        p{
          font-size: 14px;
          color:#b4b4b4;
          margin-bottom:10px;
        }
        a{
          display: block;
          width:200px;
          height:40px;
          line-height: 38px;
          text-align: center;
          margin:0 auto;
          margin-top:30px;
          font-size: 16px;
          color:#fff;
          border:1px solid #fff;
          &:hover{
            cursor:pointer;
            color:#149ccf;
            border: 1px solid #149ccf;
          }
        }
      }
    }
  }
}
</style>