<template> <view class="rumor-list"> <view class="rumor-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)"> <view class="left"> <text class="title">{{item.title}}</text> <text class="time">{{item.time}}</text> </view> <image :src="imgUrl" style="width: 120px;height: 100px;flex-shrink: 0;" mode=""></image> </view> </view> </template> <script> export default { name: 'RumorList', props: { list: Array, default: () => [] }, data() { return { imgUrl: 'http://111.198.10.15:11604/png/rumor.png', } }, methods: { handleClick(val) { wx.navigateTo({ url: '/packageC/rumorDetail/rumorDetail' }) } } } </script> <style lang="scss" scoped> @import '../../common/variables.scss'; .rumor-list { width: 100%; box-sizing: border-box; .rumor-item { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 240rpx; padding: 20rpx 32rpx; background-color: #fff; box-sizing: border-box; margin-top: 32rpx; border-radius: 16rpx; box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); &:first-child { margin-top: -24rpx; } .left { height: 100%; display: flex; flex-direction: column; justify-content: space-between; margin-right: 20rpx; .title { font-size: 32rpx; color: #000; font-weight: 600; @include exceeding-line-overflow(3); } .time { font-size: 28rpx; color: #c1c1c1; } } .right { width: 100rpx; height: 100rpx; } } } </style>