usoft-town/components/news/items.vue

<template>
  <div class="news-item">
    <div class="empty" v-if="listInfo.total == 0">无快讯信息！</div>
    <a class="item" :href="'/news/' + item.nc_id + '?type=' + item.nc_type" v-for="item in listData">
      <div class="date">
        <p v-text="new Date(item.nc_publishdate).getDay()">1</p>
        <p v-text="formatTime(item.nc_publishdate)">Jan</p>
      </div>
      <div class="img" v-if="item.nc_image != null">
        <img :src="item.nc_image">
      </div>
      <div :class="{content_img: item.nc_image != null, content: item.nc_image == null}">
        <h4 v-text="item.nc_title">11</h4>
        <p v-text="item.nc_desc">11</p>
        <span v-text="item.nc_readnum" v-if="item.nc_image != null">323</span>
      </div>
    </a>
    <div class="page" v-if="listInfo.total > 10">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="count"
        layout="total, prev, pager, next, jumper"
        :total="listInfo.total"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ItemView',
    data () {
      return {
        count: 10,
        page: 1
      }
    },
    computed: {
      listInfo () {
        return this.$store.state.news.list.data
      },
      listData () {
        return this.listInfo.list
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.$store.dispatch('loadNewsList', {page: val, limit: this.count, type: this.step})
      },
      // 输出时间日期
      formatTime (row) {
        let count = new Date(row).getMonth()
        switch (count) {
          case 0 : return 'Jan'
          case 1 : return 'Feb'
          case 2 : return 'Mar'
          case 3 : return 'Apr'
          case 4 : return 'May'
          case 5 : return 'Jun'
          case 6 : return 'Jul'
          case 7 : return 'Aug'
          case 8 : return 'Sep'
          case 9 : return 'Oct'
          case 10 : return 'Nov'
          case 11 : return 'Dec'
        }
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.news-item{
  .empty{
    padding-top:120px;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    color:#333;
  }
  .page{
    padding:20px 0;
    text-align: center;
  }
  .item{
    position:relative;
    display:block;
    padding:35px 40px 35px 145px;
    border-bottom:1px solid #f1f1f1;
    &:hover{
      .date{
        p{
          color:#149ccf;
        }
      }
      .content{
        h4{
          color:#149ccf;
        }
      }
      .content_img{
        h4{
          color:#149ccf;
        }
      }
    }
    .date{
      position:absolute;
      top:35px;
      left:75px;
      width:70px;
      height:90px;
      background: #f4f4f4;
      text-align: center;
      p{
        font-size: 18px;
        font-weight: bold;
        color:#323232;
        margin:0;
        line-height: 45px;
      }
    }
    .img{
      display:inline-block;
      vertical-align: top;
      width:200px;
      height:160px;
      img{
        width:200px;
        height:160px;
      }
    }
    .content_img{
      width:520px;
      height:160px;
      display:inline-block;
      vertical-align: top;
      padding-left:30px;
      position:relative;
      h4{
        font-size: 20px;
        color:#1e1e1e;
        width:500px;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        margin-bottom:25px;
      }
      p{
        font-size: 14px;
        color:#797979;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      span{
        position:absolute;
        bottom:0;
        left:25px;
        font-size: 14px;
        color:#797979;
        &:before{
          content: '';
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 10px;
          vertical-align: middle;
          background: url(/icon/new.png) no-repeat 0 2px;
        }
      }
    }
    .content{
      width:700px;
      display:inline-block;
      vertical-align: top;
      padding-left:30px;
      position:relative;
      height:90px;
      h4{
        font-size: 20px;
        color:#1e1e1e;
        width:700px;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        margin-bottom:25px;
      }
      p{
        font-size: 14px;
        color:#797979;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>