<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> <view style="margin-top: 20rpx;"> <text class="time">时间:{{item.publishTime}}</text><br/> <text class="time">来源:{{item.linkAddr ? item.linkAddr : '未知'}}</text> </view> </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', } }, watch: { list: { handler: (val, olVal) => { console.log('我变化了', val, olVal) }, deep: true, // immediate: true } }, methods: { handleClick(val) { // const url = 'https://www.xjwljb.com/mobile/#/newsDetail?categoryId=9455f9a51c4160d6a9cc30c698a7d383&id=07a151458a1d7df15f843758ab029461' const url = `https://www.xjwljb.com/mobile/#/newsDetail?id=${val.id}&categoryId=${val.catalogId}` wx.navigateTo({ url: '/packageToolList/rumorWebView/rumorWebView?type=tzgg&url=' + encodeURIComponent(url) }) }, } } </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(2); } .time { font-size: 28rpx; color: #c1c1c1; } } .right { width: 100rpx; height: 100rpx; } } } </style>