zhgdyunapp_vue3/pages/messageTask/messageList.vue

<template>
	<view class="">
		<headers :showBack="true">
			<view class="headerName">
				{{headersName}}
			</view>
		</headers>
		<!--选项 -->
		<view class="item">
			<view class="itemInner" :class="tabIndex==0?'active':''" @click="tabIndex=0">
				<view class="">
					未读
				</view>
			</view>
			<view class="itemInner" :class="tabIndex==1?'active':''" @click="tabIndex=1">
				<view class="">
					全部
				</view>
			</view>
		</view>
		<!--列表 -->
		<view class="list" v-if="tabIndex==0">
			<view class="list-item" v-for="item in 12" @click="toDetail">
				<view class="content">
					<view class="head">
						您有一条【安全隐患大项待整改】您有一条【安全隐患大项待整改】
					</view>
					<view class="hint">
						点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入
					</view>
				</view>
				
				<view class="box">
					<view class="left">
						发生时间：2023-12-12
					</view>
					<view class="right">
						查看更多
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="tabIndex==1">
			<view class="list-item" v-for="item in 5" @click="toDetail">
				<view class="content">
					<view class="head">
						您有一条【安全隐患大项待整改】您有一条【安全隐患大项待整改】
					</view>
					<view class="hint">
						点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入点击进入
					</view>
				</view>
				
				<view class="box">
					<view class="left">
						发生时间：2023-12-12
					</view>
					<view class="right">
						查看更多
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headers from "@/components/headers/headers.vue"
	export default {
		components: {
			headers
		},
		data() {
			return{
				headersName:'',
				tabIndex:0
			}
		},
		onLoad(e){
			console.log(e.name)
			this.headersName = e.name
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url: './messageDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		box-shadow: 0px 0px 8px -3px rgba(0, 0, 0, 0.4);
		margin-bottom: 40rpx;
		.itemInner {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
		}
		.active {
			color: #1E90FF;
			font-weight: bold;
			border-bottom: 1px solid #1E90FF;
		}
	}
	.list{
		padding-bottom: 60rpx;
		.list-item{
			height: 94rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			margin: 6px 24rpx;
			padding: 6px 24rpx;
			border-radius: 6px;
			box-shadow: 0px 0px 8px -3px rgba(0, 0, 0, 0.4);
			.content{
				.head{
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 4rpx;
				}
				.hint{
					font-size: 20rpx;
					color: #666;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;  
					-webkit-box-orient: vertical;
				}
			}
			.box{
				display: flex;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: flex-end;
					font-size: 20rpx;
					color: #666;
				}
				.right{
					display: flex;
					align-items: flex-end;
					height: 40rpx;
					padding: 0 6px;
					background: linear-gradient(to right, #c3c3c3, #fff);
					border-radius: 24rpx;
					color: #DA70D6;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
		}
	}
	
</style>