<template>
|
<div class="news-list-component">
|
<div class="news-uplist"
|
v-for="(i,index) in newsList"
|
@click="handleNewsJump(i)"
|
:key="index">
|
<div class="news-uplist-left">
|
<p>{{i.title}}</p>
|
<div class="news-uplist-text">
|
<span class="news-uplist-left-date">{{ dateFormat(i.noticeTime, 'YYYY-MM-DD') }}</span>
|
<i class="iconfont icon-eye"></i>
|
<span>{{i.pv}}</span>
|
</div>
|
</div>
|
<div class="news-uplist-right">
|
<img :src="i.content">
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by 吴彦祖 on 2018/3/27.
|
* 资讯列表，用于资讯页面
|
* @param
|
* @newList {Array} 用于渲染列表数据
|
*/
|
import { dateFormat } from 'vux'
|
export default {
|
name: 'news-list-component',
|
data () {
|
return {
|
dateFormat
|
}
|
},
|
methods: {
|
// 资讯的跳转
|
handleNewsJump (newItem) {
|
this.$emit('on-click-news', newItem)
|
}
|
},
|
props:{
|
newsList:{
|
type:Array,
|
default:()=>{
|
return [
|
{
|
title:'这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题',
|
noticeTime: {
|
time: '1520424597000'
|
},
|
pv:'9999'
|
}
|
]
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@import '../style/mixin.less';
|
.news-list-component{
|
.news-uplist{
|
padding:10px 0 10px 0;
|
border-bottom: solid 1px @color-background-default;
|
.flexLayout(space-between,center,row);
|
margin:0px 12px 0px 12px;
|
box-sizing: border-box;
|
height:88px;
|
.news-uplist-left{
|
width:65%;
|
height:100%;
|
.flexLayout(space-between,flex-start,column);
|
p{
|
width: 100%;
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
.ellipsisLn(2);
|
}
|
.news-uplist-text{
|
font-size: @font-size-small;
|
color:@color-text-third;
|
i{
|
margin-left:44px;
|
vertical-align: middle;
|
}
|
}
|
}
|
.news-uplist-right{
|
width:99px;
|
height:64px;
|
line-height:64px;
|
text-align: center;
|
overflow: hidden;
|
/*margin-left: 27px;*/
|
img{
|
width:99px;
|
height:64px;
|
}
|
}
|
}
|
}
|
</style>
|
