<template> <div class="topic-item" @click="toTopic"> <div class="topic-cover"> <ImageFormat v-if="data.topicImageUrl" :src="data.topicImageUrl" :mode="1" :width="240" :height="240"></ImageFormat> </div> <div class="topic-info"> <div class="topic-name"> <span>#{{data.topicName}}</span> <div v-if="data.isHot > 0" class="hot"></div> </div> <p class="topic-desc">{{data.topicDesc}}</p> </div> </div> </template> <script> export default { data() { return {}; }, props: [ 'data' ], methods: { toTopic() { this.$router.push({ name: 'topic', params: { topicId: this.data.id, topicName: this.data.topicName } }); } } }; </script> <style scoped lang="scss"> .topic-item { display: flex; padding: 14px 30px; .topic-cover { width: 120px; height: 120px; background-color: #ccc; margin-right: 20px; flex-shrink: 0; img { width: 100%; height: 100%; display: block; } } .topic-info { flex-grow: 1; } .topic-name { font-size: 32px; line-height: 1.6; color: #222; letter-spacing: 0.08PX; font-weight: 500; margin-bottom: 8px; display: flex; justify-content: space-between; span { display: inline-block; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hot { width: 92px; height: 30px; background-image: url("~statics/image/article/topic-hot.png"); background-size: contain; background-repeat: no-repeat; align-self: center; } } .topic-desc { font-size: 24px; line-height: 1.3; color: #b0b0b0; letter-spacing: 0.06PX; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } </style>