deming/components/informations/notice/notice.vue

<template>
	<view class="notice">
		<view v-for="(item,index) in notice" :key="index">
			<view class="time_notice">{{ item.addtime }}</view>
			<view class="notice_view">
				<image :src="item.picture" mode="aspectFill" ></image>
				<view class="text_view u-line-2">{{ item.content }}</view>
				<view class="notice_list" @click="gotoInfo(index)">
					<text>查看详情</text>
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.notice {
		.notice_view{
			width: 690rpx;
			height: 489rpx;
			border-radius: 20rpx;
			background: #fff;
			margin: 0 auto;
		}
		.notice_view image{
			height: 285rpx;
			width: 100%;
			border-radius: 20rpx 20rpx 0px 0px;
		}
		.text_view{
			font-size:26rpx;
			font-weight:400;
			color:rgba(51,51,51,1);
			margin: 28rpx 0 30rpx 0;
			width: 643rpx;
			margin: 0 auto;
			text-align: left;
			line-height: 40rpx;
		}
		.notice_view > view:nth-child(3){
			height: 84rpx;
			line-height: 84rpx;
			border-top: 1px #F5F5F5  solid;
			margin-top: 30rpx;
		}
	}
	.time_notice{
		text-align: center;
		font-size:28rpx;
		font-weight:400;
		color:rgba(102,102,102,1);
		padding: 26rpx 0 39rpx 0;
	}
	.notice_list{
		text-align: left;
		display: inline-block;
		width: 100%;
		position: relative;
		padding: 0 25rpx;
		margin: 0 auto;
		display: block;
	}
	.notice_list > view{
		text-align: right;
		position: absolute;
		right: 25rpx;
		top: 0;
		bottom: 0;
		margin: auto;
		
	}
	
</style>
<script>
	export default {
		name: "notice",
        props: ['list'],
		data() {
			return {
				notice : []
			};
		},
        watch: {
            list(newVal,old) {
                // console.log(newVal);
                this.notice = newVal;
            }
        },
        methods: {
            gotoInfo(index) {
                console.log(index);
                this.$u.route({
                    url: "/pageD/notice/info",
                    params: {
                        index: index
                    },
                })
            }
        }
	}
</script>