<is-empty size="medium" :show="list.length > 0" :icon="require('@/assets/imgs/icon-empty-gray.png')" message="暂时通知与公告~">
<div class="notices">
<el-card class="notices-item" shadow="never" v-for="notice in list" :key="notice.id">
<h4 class="notice-title" v-text="notice.name"></h4>
<el-row>
<el-col class="notice-img" :span="4" v-if="notice.img">
<img :src="notice.img | filterUrl">
</el-col>
<el-col :span="notice.img ? 20 : 24">
<div :class="{
'notice-content': true,
open: notice.open,
exceed: notice.content.length > 160
}">{{notice.content}}</div>
<div class="text-r notice-btns" v-if="notice.content.length > 160">
<el-button type="text" @click="notice.open = !notice.open">{{notice.open ? '收起' : '展开'}}</el-button>
</div>
<p class="text-r notice-footer">
<span>时间：{{notice.time}}</span>
<span>查看人次：105554</span>
</p>
</el-col>
</el-row>
</el-card>
</div>
</is-empty>
is-empty是判断该页面有没有内容,没有内容即显示一张图片,交互更好. exceed: notice.content.length > 160 是让文章最多显示160字
实现效果为
<script>
import isEmpty from '@/components/common/is-empty'
export default {
data () {
return {
list: [
{
id: 3,
name: '关于举办2019年武汉理工大学大学生数学建模竞赛的通知',
img: '',
content: '为进一步激发我校学生生的精神，提高为进一步激发我校学生的创新精神学生运用数学方法和计算机技提高学力，同时为做好201年全国大学生数学建模竞赛选拔工作由上海理工大学教务处、教育发展基金会、团委联合主办，理学院承办的201年上海理工大学大学生数学建模竞赛将于近期开展为进一理学院承办的2019年上海理工大学大学生数学建模竞',
time: '2019-06-25 09:35:27',
open: false
},
{
id: 4,
name: '关于举办2019年武汉理工大学大学生数学建模竞赛的通知',
img: '',
content: '为进一为进一步激发我校学生的创新精神步激发我校学生的创提高学生运提高学生运用数学方法和计算机技术解决实际问题的能用数学方法和计算机技术解决实际问题的能为进一步激发提高学生运用数学方法和计算机技术解决实际问题的能我校学生的创新精神新精神，提高学生运用数学方法和计算机技术解决实际问题的能力，同时为做好201年全国大学生数学建模竞赛选拔工作由上海理工大学教务处、教育发展基金会、团委联合主办，理学院承办的201年上海理工大学大学生数学建模竞赛将于近期开展为进一步激发我校学生的创新精神理学院承办的2019年上海理工大学大学生数学建模竞赛将于近期开展为进一步激发我校学生的创新精神',
time: '2019-06-25 09:35:27',
open: false
},
{
id: 1,
name: '关于举办2019年武汉理工大学大学生数学建模竞赛的通知',
img: '/group1/M00/00/0E/wKgAcFzuKbWAMfztAADlR2A33kE525.png',
content: '为进一步激发我校学生生的精神，提高为进一步激发我校学生的创新精神学生运用数学方法和计算机技提高学力，同时为做好201年全国大学生数学建模竞赛选拔工作由上海理工大学教务处、教育发展基金会、团委联合主办，理学院承办的201年上海理工大学大学生数学建模竞赛将于近期开展为进一理学院承办的2019年上海理工大学大学生数学建模竞',
time: '2019-06-25 09:35:27',
open: false
},
{
id: 2,
name: '关于举办2019年武汉理工大学大学生数学建模竞赛的通知',
img: '/group1/M00/00/0E/wKgAcFzuKbWAAsODAAGU46j5WKc112.png',
content: '为进一步激为进一步激发我校学生的创新精神发我校学生的提高学生运用数学提高学生运用数学方法和计算机技术解决实际问题的能方法和计算机技术解决实际问题的能提高学生运用数学方法和计算机技术解决实际问题的能创新精神，提为进一步提高学生运用数学方法和计算机技术解决实际问题的能激发我校学生的创新精神高学生运用数学方法和计算机技术解决实际问题的能力，同时为做好201年全国大学生数学建模竞赛选拔工作由上海理工大学教务处、教育发展基金会、团委联合主办，理学院承办的201年上海理工大学大学生数学建模竞赛将于近期开展为进一步激发我校学生的创新精神理学院承办的2019年上海理工大学大学生数学建模竞赛将于近期开展为进一步激发我校学生的创新精神为进一步激为进一步激发我校学生的创新精神发我校学生的提高学生运用数学提高学生运用数学方法和计算机技术解决实际问题的能方法和计算机技术解决实际问题的能提高学生运用数学方法和计算机技术解决实际问题的能创新精神，提为进一步提高学生运用数学方法和计算机技术解决实际问题的能激发我校学生的创新精神高学生运用数学方法和计算机技术解决实际问题的能力，同时为做好201年全国大学生数学建模竞赛选拔工作由上海理工大学教务处、教育发展基金会、团委联合主办，理学院承办的201年上海理工大学大学生数学建模竞赛将于近期开展为进一步激发我校学生的创新精神理学院承办的2019年上海理工大学大学生数学建模竞赛将于近期开展为进一步激发我校学生的创新精神为进一步激为进一步激发我校学生的创新精神发我校学生的提高学生运用数学提高学生运用数学方法和计算机技术解决实际问题的能方法和计算机技术解决实际问题的能提高学生运用数学方法和计算机技术解决实际问题的能创新精神，提为进一步提高学生运用数学方法和计算机技术解决实际问题的能激发我校学生的创新精神高学生运用数学方法和计算机技术解决实际问题的能力，同时为做好201年全国大学生数学建模竞赛选拔工作由上海理工大学教务处、教育发展基金会、团委联合主办，理学院承办的201年上海理工大学大学生数学建模竞赛将于近期开展为进一步激发我校学生的创新精神理学院承办的2019年上海理工大学大学生数学建模竞赛将于近期开展为进一步激发我校学生的创新精神',
time: '2019-06-25 09:35:27',
open: false
}
]
}
},
components: {
isEmpty
},
created () {}
}
</script>
此为模拟数据
