新闻列表

最新推荐文章于 2021-07-23 11:12:33 发布

风雨中的小菜鸟

最新推荐文章于 2021-07-23 11:12:33 发布

阅读量644

点赞数

分类专栏：功能文章标签： vue

本文链接：https://blog.csdn.net/qq_41979331/article/details/107087894

版权

功能专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<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;
}