<template>
<div class="com_newsList">
<div class="com_newsList_list" v-for="(item, index) in newsList " :key="index">
<div :class="!item.src?'com_newsList_leftNoImg':'com_newsList_left'">
<div class="com_newsList_list_title">{{ item.title }}</div>
<div class="com_newsList_list_type">
<span>[{{ item.type }}]</span>
<span>{{item.time}}</span>
</div>
</div>
<div v-if="!(!item.src)">
<img :src="item.src" alt>
</div>
</div>
</div>
</template>
<script>
//import * from '@/*/*'
export default {
components: {},
props: ['newsList'],
data() {
return {}
},
watch: {},
created() {},
methods: {}
}
</script>
<style scoped>
.com_newsList_list {
display: flex;
width: 95vw;
margin: 2vw;
padding: 2vw 1vw;
border-bottom: 1px solid#F0F0F0;
}
.com_newsList_list img {
width: 35vw;
height: 23vw;
border-radius: 1vw;
margin-left: 2vw;
}
.com_newsList_left {
width: 55vw;
text-align: left;
}
.com_newsList_leftNoImg {
width: 90vw;
text-align: left;
}
.com_newsList_list_title {
height: 15vw;
line-height: 7.5vw;
margin-top: 2vw;
margin-bottom: 2vw;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.com_newsList_list_type > span:nth-of-type(1) {
color: #ef6164;
}
.com_newsList_list_type > span:nth-of-type(2) {
color: #999999;
margin-left: 5vw;
}
Processed:
0.009, SQL:
9
