deming/components/informations/notice/notice.vue

<template>
	<view class="notice" :style="{height : height  + 'px'}">
		<view v-for="(item,index) in notice" :key="index"  @click="gotoInfo(index)">
			<view class="time_notice">{{ item.addtime }}</view>
			<view class="notice_view">
				<image :src="item.picture" mode="aspectFill" ></image>
				<view class="text_view">
                    <view class="u-line-2">{{ item.content }}</view>
                </view>
				<view class="notice_list">
					<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{
            width: 690rpx;
            height: 120rpx;
			padding: 26rpx;
            color: #333;
            font-size: 26rpx;
            line-height: 38rpx;
		}
		.notice_view > view:nth-child(3){
			height: 80rpx;
			line-height: 80rpx;
			border-top: 1px #F5F5F5  solid;
		}
	}
	.time_notice{
		text-align: center;
		font-size:28rpx;
		font-weight:400;
		color:rgba(102,102,102,1);
		padding: 26rpx 0 39rpx 0;
	}
	.notice_list{
        display: flex;
        align-items: center;
        justify-content: space-between;
		width: 100%;
		padding: 0 25rpx;
	}
	
</style>
<script>
	export default {
		name: "notice",
        props: ['list'],
		data() {
			return {
				notice : [],
				height : ''
			};
		},
        watch: {
            list(newVal,old) {
                // console.log(newVal);
                this.notice = newVal;
            }
        },
		onLoad() {
		},
        methods: {
            gotoInfo(index) {
                console.log(index);
                this.$u.route({
                    url: "/pageD/notice/info",
                    params: {
                        index: index
                    },
                })
            }
        }
	}
</script>