tongli_WeChat/subPackages/notice/noticeList.vue

<template>
	<view class="bg">
		<span class="iconfont topLeft" @click="goBack">&#xe660;</span>
		
		<image src="https://static.ticket.sz-trip.com/yandu/images/notice/topImg.png" mode="" class="topImg"></image>
		
		<view class="type-box">
			<view v-for="(item,index) in typeList" :key="index" :class="{'active': index == typeIndex}" @click="typeIndex=index;getList()">{{item.title}}</view>
		</view>
		
		<navigator :url="'/subPackages/notice/noticeDetail?id=' + item.id" v-for="(item,index) in list" :key="index" class="item">
			<image :src="showImg(item.image)" mode="aspectFill" class="headImg"></image>
			<view class="content flex-column">
				<view class="title">
					{{item.title}}
				</view>
				<view class="time">
					<image src="https://static.ticket.sz-trip.com/yandu/images/notice/time.png" mode=""></image>
					{{item.create_time.slice(0,10)}}
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [
					{
						title: '公告信息',
						id: '4'
					},
					{
						title: '旅游政策',
						id: '5'
					}
				],
				typeIndex: 0,
				list: []
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				this.Post({
					type_id: this.typeList[this.typeIndex].id
				},'/api/anncmnt/getAnncmntByType').then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		min-height: 100vh;
		background: #F7F7F7;
		padding-bottom: 100rpx;
	}
	
	.topLeft {
		position: absolute;
		left: 26rpx;
		top: 101rpx;
		font-size: 40rpx;
		z-index: 2;
	}
	
	.topImg {
		width: 750rpx;
		height: 432rpx;
	}
	
	.type-box {
		width: 404rpx;
		height: 77rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		display: flex;
		margin: -34rpx auto 0;
		overflow: hidden;
		position: relative;
		
		view {
			width: 50%;
			text-align: center;
			line-height: 77rpx;
		}
		
		.active {
			background: linear-gradient(90deg, #9EE4FE, #7FD491);
		}
	}
	
	.item {
		width: 697rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		margin: 28rpx auto;
		display: flex;
		padding: 6.67rpx;
		
		.headImg {
			width: 180rpx;
			height: 167rpx;
			border-radius: 7rpx;
		}
		
		.content {
			width: 475rpx;
			height: 180rpx;
			padding: 14rpx 0;
			justify-content: space-between;
			margin-left: 20rpx;
			
			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
			
			.time {
				font-weight: 500;
				font-size: 25rpx;
				color: #AFAFAF;
				display: flex;
				align-items: center;
				
				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 12rpx;
				}
			}
		}
	}
</style>