usoft-town/components/home/news.vue

<template>
  <div class="news">
    <div class="container">
      <div class="title">
        <a href="/news">更多</a>
        <p><i class="icon-trumpet"/>新闻动态</p>
      </div>
      <div class="content">
        <ul class="list-inline">
          <li class="info-list" v-for="item in list">
            <a :href="'/news/' + item.nc_id + '?type=' + item.nc_type">
              <img :src="item.nc_image">
              <div class="list-right">
                <p v-text="item.nc_title">企业为员工打造全新潼湖小镇，舒服办公环境</p>
                <span v-text="item.nc_desc">2017年，优软科技携手碧桂园创办全新智慧生态园，发扬优软新势力，适应互联网潮流 发展.</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'News',
      computed: {
        list () {
          return this.$store.state.news.list.data.list
        }
      }
    }
</script>

<style scoped type="text/scss" lang="scss">
.news{
  background: #fff;
  height:470px;
  .title{
    position:relative;
    a{
      position:absolute;
      right:0;
      top:65px;
      display:block;
      width:50px;
      height:26px;
      line-height: 26px;
      text-align: center;
      background: #eee;
      color:#797979;
      &:hover{
        cursor:pointer;
        color:#149ccf;
      }
    }
    p{
      line-height: 130px;
      font-size: 26px;
      color:#149ccf;
      margin:0;
      i{
        margin-right:10px;
      }
    }
  }
  .content{
    ul{
      li{
        width:580px;
        height:110px;
        border:1px solid #e5e5e5;
        padding:25px 16px;
        margin-bottom:30px;
        margin-right:10px;
        &:hover{
          cursor:pointer;
          box-shadow: 5px 5px 13px rgba(0,0,0,.14);
          border:none;
        }
        img{
          float:left;
          width:80px;
          height:55px;
          vertical-align:top;
        }
        .list-right{
          margin-left:100px;
          p{
            width:98%;
            font-size: 20px;
            color:#333;
            margin-bottom:20px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          span{
            display:block;
            width:100%;
            font-size: 14px;
            color:#969696;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
      }
    }

  }
}
</style>