uniappshell/pages/index/index.vue

<template>
	<view class="index-page ">
		<view class="header custom_status_bar">
			<view class="status_bar">
				 <div class="name">工作台</div>
				 <div class="actions">
					 <div class="message" @click="linkToMessage">
						 <image v-if="user.userAvatar" class="icon" src="/static/index/message.png" mode="widthFix"></image>
					 </div>
					 <div class="scan" @click="scanQrcode">
						 <image class="icon" src="/static/index/scanner.png" mode="widthFix"></image>
						 <text class="icon-name">扫一扫</text>
					</div>
				 </div>
			</view>		
			<view class="user-info">
				<div class="company">
					<text class="company-name">{{user.ocName}}</text>
					<image class="icon" src="/static/index/company.png" mode="widthFix"></image>
				</div>
				<div class="user">
					<view class="avatar-box">
						<image v-if="user.userAvatar" class="avatar" :src="user.userAvatar" mode="widthFix" @error="userAvatar=defaultAvatar"></image>
						<image v-else class="avatar" :src="defaultAvatar" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="user-name">
							{{user.userName}}
						</view>
						<view class="user-position">
							{{user.positionName}}
						</view>
					</view>
				</div>
			</view>
		</view>
		<view class="container">
			<view class="cont">
				<div class="container-wrap">
					<div class="notice">
						<div class="notice-name">
							<image class="icon" src="/static/index/notice.png" mode="widthFix"></image>
							<text>最近动态</text>
						</div>
						<div class="notice-cont">
							<uni-notice-bar
								scrollable :text="notice" 
								background-color="#fff0"
								:speed="20"
								color="#333" />
						</div>
					</div>
					<view class="tab">
						<div class="tab-item">
							<image class="icon" src="/static/index/tab1.png" mode="widthFix"></image>
							<view class="tab-name">待办任务 3 个</view>
						</div>
						<div class="tab-item">
							<image class="icon" src="/static/index/tab2.png" mode="widthFix"></image>
							<view class="tab-name">告警事件 2个</view>
						</div>
						<div class="tab-item">
							<image class="icon" src="/static/index/tab3.png" mode="widthFix"></image>
							<view class="tab-name">待处理隐患  2个</view>
						</div>
					</view>
					<view class="tab-cont">
						<div class="part" v-for="part in 4" :key="part">
							<div class="head">
								<text class="head-name">代办任务</text>
								<view class="more">更多</view>
							</div>
							<div class="part-cont">
								<div class="item" v-for="item in 4" :key="item">
									<div class="title">
										<div class="name">任务名称</div>
										<view class="state">状态</view>
									</div>
									<div class="tags">
										<text class="tag">优先级</text>
										<text class="tag">分类名称</text>
										<text class="tag">普通任务</text>
									</div>
									<view class="time">
										预期结束时间：21天12小时23分32秒
									</view>
									<div class="bottom">
										<view class="user">
											<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
											处理人：孙小白
										</view>		
										<view class="hand-time">
											2023.08.25 09:00
										</view>																
									</div>
								</div>
							</div>
						</div>
					</view>										
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import {getNotices} from '@/api/system/art.js'
	export default {
		data() {
			return {
				applist: [],
				defaultAvatar:"/static/components/avatar.png",
				notice:"",
				user:{
					groupName: "",
					ocName: "",
					positionName: "",
					roleName: "",
					userAvatar: "",
					userIntro: "",
					userName: "",
					userPhone: "",
					userPhoto: "",
					userRealName: ""					
			    }
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			scanQrcode(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					},
					fail() {
						uni.showToast({
							icon:'none',
							title:"扫码失败"
						})
					}
				});
			},
			linkToMessage(){
				uni.navigateTo({
					url:"/pages/message/message"
				})
			},
			getData(){
				let user=uni.getStorageSync('accountInfo');
				if(user){this.user=user}
				let notice=""
				getNotices({
					page: 1,
					limit: 10,
					artCatId: 2,
					artCatTitle: "最新动态"
				}).then((res)=>{
					for(let i=0;i<res.data.length;i++){
						notice+=`${res.data[i].artTitle} 发布时间:${res.data[i].issuedAt};`
					}
					this.notice=notice
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {
		min-height: 100vh;
		background-color: rgba(245, 246, 248, 1);
		.header{
			height: 400rpx;
			background-image: url('/static/index/bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			/* #ifdef MP-WEIXIN */
				padding-top: 28px;
			/* #endif */
			.status_bar{
				padding: 0 32rpx;
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					font-size: 40rpx;
					font-weight: 600;
					color: #000;
				}
				.actions{
					display: flex;
					align-items: center;
					.message{
						.icon{
							display: inline-block;
							width: 32rpx;
						}
					}
					.scan{
						width: 144rpx;
						height: 48rpx;
						border-radius: 20rpx;
						background-color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 32rpx;
						.icon{
							display: inline-block;
							width: 28rpx;					
						}		
						.icon-name{
							font-size: 24rpx;
							color: #000;
							padding-left: 10rpx;
						}
					}				
				}
			}	
			.user-info{
				width: 686rpx;
				height: 228rpx;
				background: linear-gradient(180deg, #7AB2FF 0%, #808EFF 100%);
				margin: 0 auto;
				border-radius: 16px;
				margin-top: 24rpx;
				padding: 24px 22rpx 0 30rpx;
				box-sizing: border-box;
				.company{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.company-name{
						padding-right: 10rpx;
						font-size: 28rpx;
						color: #fff;
					}
					.icon{
						display: block;
						width: 40rpx;
						height: 40rpx;
					}
				}
				.user{
					display: flex;
					align-items: center;
					.avatar-box{
						width: 72rpx;
						height: 72rpx;	
						border-radius: 50%;
						.avatar{
							display: block;
							width: 72rpx;
							height: 72rpx;	
							border-radius: 50%;
						}					
					}
					.info{
						padding-left: 24rpx;
						.user-name{
							font-size: 32rpx;
							color: #fff;
						}
						.user-position{
							font-size: 24rpx;
							color: #fff;
							opacity: 0.6;
							padding-top: 8rpx;
						}						
					}
				}
			}		
		}
		.container{
			position: relative;
			width: 750rpx;			
			.cont{
				width: 750rpx;
				min-height: 1200px;			
				position: absolute;
				overflow: auto;
				background-image: url('/static/index/bg-bottom.png');
				background-repeat: no-repeat;
				background-size: 100% 1200px;
				background-position: 0 0; 				
				box-sizing: border-box;
				top: -45px;
				margin-top: var(--status-bar-height);
				left: 0;
				.container-wrap{
					padding: 0 32rpx;	
					background-color: rgba(245, 246, 248, 1);	
					padding-bottom: 180rpx;								
				}
				.notice{
					height: 84rpx;
					background-color:rgba(245, 246, 248, 1);
					margin-top: 48rpx;
					border-radius: 8rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;					
					box-shadow: 0px 10px 10px -4px rgba(45, 54, 67, 0.2);
					padding: 0 32rpx;
					.notice-name{
						font-weight: 600;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.9);
						.icon{
							width: 22rpx;
							margin-right: 8rpx;
						}
					}
					.notice-cont{
						width: 500rpx;
						height: 80rpx;
						flex: 1;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.9);
						// background-color: #fff;
					}
				}
				.tab{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 40rpx 32rpx 20rpx 32rpx;
					.tab-item{
						width: 33.33%;
						height: 150rpx;
						display: flex;
						justify-content: center;
						align-items: center;	
						flex-direction: column;
						.icon{
							width: 96rpx;
						}
						.tab-name{
							font-size: 28rpx;
							color: rgba(0, 0, 0, 0.9);
							padding-top: 12rpx;
						}
					}
				}
				.tab-cont{				
					.part{
						.head{
							padding-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.head-name{
								font-size: 32rpx;
								font-weight: 600;
								color: rgba(0, 0, 0, 0.9);
							}
							.more{
								font-size: 24rpx;
								color: rgba(110, 116, 128, 1);								
							}
					    }
						.part-cont{
							.item{
								background-color: #fff;
								border-radius: 12rpx;
								margin-top: 16rpx;
								padding: 24rpx 20rpx;
								.title{
									display: flex;
									justify-content: space-between;
									align-items: center;
									.name{
										font-size: 36rpx;
										color: rgba(0, 0, 0, 0.8);
									}
									.state{
										font-size: 32rpx;
										color: rgba(250, 139, 55, 1);
									}
								}
								.tags{
									padding-top: 24rpx;
									.tag{
										background: rgba(245, 246, 248, 1);	
										font-size: 20rpx;
										margin-left: 10rpx;
										padding: 10rpx 20rpx;
										&:nth-child(1){
											color: rgba(234, 130, 89, 1);
											background: rgba(251, 241, 237, 1);
										}
									}
								}
								.time{
																	padding-top: 20rpx;
									font-size: 28rpx;									
									color:rgba(241, 57, 57, 0.8);
								}
								.bottom{
									display: flex;
									justify-content: space-between;
									align-items: center;
									padding-top: 20rpx;
									.user{
										display: flex;
										align-items: center;
										font-size: 24rpx;
										color: rgba(0, 0, 0, 1);
										.avatar{
											width: 44rpx;
											margin-right: 10rpx;
										}
									}
									.hand-time{
										font-size: 24rpx;
										color: rgba(0, 0, 0, 1);
									}
								}							
							}
						}
					}
				}
			}
		}
	}

</style>