rongzidanbao-ui/pages/index/notice.vue

<template>
	<view class="notice" :style="'padding-top:196rpx;'">
		<view class="pfixed" style="background: transparent;">
			<tab-list :tablist="tablist" :height="height" :tabidx="tabidx" @getCheck="getCheck"></tab-list>
			<!-- 筛选条件 -->
			<view class="flexc checkbox" :class="scroflag?'scbg':''">
				<picker mode="date"    @change='bindDateChangea'>
					<view class="chekt">
						<view>{{sbsj|| "通知时间"}}</view>
						<image :src="upimg"></image>
					</view>
				</picker>
				<picker range-key='label' :value="shidx" :range="shlist"  @change='bindDateChangeb'>
					<view class="chekt">
						<view>{{shzt || "阅读状态"}}</view>
						<image :src="upimg"></image>
					</view>
				</picker>
				<view class="reset" @click="getResetFn">
					<image :src="resetimg" ></image>
					<!-- <image :src="wresetimg" v-else></image> -->
				</view>
			</view>
		</view>
		<view class="mt12">
			<view class="cards">
				<view class="top flexc">
					<view class="cir bga"></view>
					<view class="tit">系统通知</view>
					<view class="time">2024-04-10 18:32</view>
				</view>
				<view class="ctxt">
					<view>
						您好，皖源融资担保管理系统现已更新版本，请尽快前 往更新，以免造成您的使用不便。
					</view>
					<view class="tzhu">祝您生活愉快！</view>
				</view>
			</view>
			<view class="cards">
				<view class="top flexc">
					<view class="cir bgb"></view>
					<view class="tit">待办通知</view>
					<view class="time">2024-04-10 18:32</view>
				</view>
				<view class="ctxt">
					<view>
						您有<text class="cof6">1</text>条来自【潜山弘立新型建材有限公司】的申报信 息，请您前往审核。
					</view>
					<view class="tzhu">祝您生活愉快！</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import tabList from '@/components/toptab/tab.vue'
	export default{
		components:{tabList},
		data(){
			return{
				tablist:[{tit:'系统通知',val:0},{tit:'待办通知',val:1}],
				resetimg:require('@/work/static/images/reset.png'),
				wresetimg:require('@/work/static/images/wreset.png'),
				upimg:require('@/work/static/images/sup.png'),
				tabidx:0,
				height:100,
				scroflag:false,
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			// var listTop=Number(this.listTop)-Number(this.nvaHeight)
			if(scrollTop>2){
				this.scroflag=true
			}else{
				this.scroflag=false
			}
		},
		methods:{
			checkPermi, checkRole,
			getCheck(val){
				this.tabidx=val
			}
		}
	}
</script>

<style lang="scss" scoped>
.notice /deep/	uni-picker{flex: 1;}
.cards{width: 702rpx;background: #FFFFFF;border-radius: 10rpx;margin: 0 auto 24rpx;
	.top{padding: 26rpx 34rpx;
		.cir{width: 20rpx;height: 20rpx;flex: 0 0 auto;margin-right: 20rpx;border-radius: 20rpx;
			&.bga{background: #28C529;}
			&.bgb{background: #FF6969;}
		}
		.tit{flex: 1;font-weight: bold;font-size: 26rpx;color: #343434;line-height: 36rpx;}
		.time{font-weight: 500;font-size: 26rpx;flex: 0 0 auto;margin-right: 20rpx;color: #222327;}
	}
	.ctxt{font-weight: 500;font-size: 26rpx;color: #666666;border-top: 2rpx solid #E5E5E5;padding: 34rpx;
		view{line-height: 36rpx;}
		.tzhu{margin-top: 28rpx;}
	}

}
.checkbox{padding-top: 4rpx;
	&.scbg{background-color: #FFFFFF;}
	.chekt{display: flex;align-items: center;margin:0 20rpx;height:88rpx;
		view{text-align: center;font-weight: bold;font-size: 26rpx;color: #374B61;flex:1;word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;}
		image{width: 16rpx;height: 12rpx;flex: 0 0 auto;margin-left: 4rpx;}
	}
}
.reset{width:56rpx; height: 88rpx;display: flex;align-items: center;justify-content: center;flex: 1;
	image{width: 26rpx;height: 30rpx;}
}
</style>