rongzidanbao-ui/pages/index/notice.vue

<template>
	<view class="notice" :style="'padding-top:' + height + 'rpx;'">
		<view class="pfixed">
			<tab-list :tablist="tablist" :height="height" :tabidx="tabidx" @getCheck="getCheck"></tab-list>
		</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},{tit:'已读',val:2}],
				tabidx:0,
				height:100
			}
		},
		methods:{
			checkPermi, checkRole,
			getCheck(val){
				this.tabidx=val
			}
		}
	}
</script>

<style lang="scss" scoped>
.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;}
	}

}
</style>