/* 全部一行两个 */ <template> <div class="article"> <template v-for="(item, index) in list"> <!-- 3图文章内容的容器 1图添加class one--> <div class="article_list_wrap_three one" @click="toDetail(item)" :key="index"> <!-- 标题容器 --> <div class="article_list_ctx_wrap"> <div class="article_list_title"> <p>{{ item.title }}</p> </div> </div> <!-- 图片 --> <div class="article_list_pic_wrap"> <img class="article_list_pic" :src="item.imgUrl" /> </div> <!-- 阅读量和日期的容器 --> <div class="article_list_info_wrap"> <!-- 阅读量 --> <div> <p class="read_num">浏览量:{{ item.readNumber }}</p> </div> <!-- 日期 --> <div> <p class="push_date">{{ item.createTime }}</p> </div> </div> </div> </template> </div> </template> <script> export default { props: { list: { type: Array, default: [], }, }, data() { return { active: 0, } }, methods: { toDetail(item) { if (item.linkUrl) { this.yxAxios.post(`${this.proxyUrl}/manage/info/content/addReadNum`, { id: item.id }).then((res) => { if (res.data.code == 200) { location.href = item.linkUrl } else { this.$toast.fail(res.data.message) } }) } else { this.$router.push({ name: 'ArticleDetail', query: { id: item.id } }) } }, }, } </script> <style lang="scss" scoped> .article { width: 100%; height: 100%; overflow: auto; padding-left: 30px; box-sizing: border-box; .page-head { font-size: 40px; text-align: center; } .list { padding-left: 30px; } /* 文章内容的容器 三图 */ .article_list_wrap_three { height:128px; padding: 34px 0; } /* 标题内容 */ .article_list_wrap_three .article_list_title { font-size: 28px; font-family: PingFang SC; font-weight: 500; color: rgba(58, 58, 58, 1); line-height: 48px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .article_list_wrap_three .article_list_pic_wrap { display: flex; flex-direction: row; justify-content: space-between; } /* 一个图片样式 */ .article_list_wrap_three.one { position: relative; } .article_list_wrap_three.one .article_list_pic_wrap { position: absolute; right: 0; top: 14px; width: 260px; } .article_list_wrap_three .article_list_ctx_wrap, .article_list_wrap_three .article_list_info_wrap { margin-right: 270px; } .article_list_wrap_three .article_list_pic { width: 230px; height: 168px; } /* 阅读量和日期的容器 */ .article_list_wrap_three .article_list_info_wrap { display: flex; flex-direction: row; justify-content: start; } /* 阅读量 */ .article_list_wrap_three .read_num { font-size: 24px; font-family: PingFang SC; font-weight: 500; color: rgba(144, 144, 144, 1); } /* 日期 */ .article_list_wrap_three .push_date { font-size: 24px; font-family: PingFang SC; font-weight: 500; color: rgba(144, 144, 144, 1); margin-left: 35px; } } </style>