uniappshell/pages/index/index.vue

<template>
	<view class="index-page ">
		<view class="header custom_status_bar">
			<view class="status_bar">
				 <view class="name">工作台</view>
				 <view class="actions">
					 <view class="message" @click="linkToMessage">
						 <image v-if="user.userAvatar" class="icon" src="/static/index/message.png" mode="widthFix"></image>
					 </view>
					 <view class="scan" @click="scanQrcode">
						 <image class="icon" src="/static/index/scanner.png" mode="widthFix"></image>
						 <text class="icon-name">扫一扫</text>
					</view>
				 </view>
			</view>		
			<view class="user-info">
				<view class="company">
					<text class="company-name">{{user.ocName}}</text>
					<image class="icon" src="/static/index/company.png" mode="widthFix"></image>
				</view>
				<view 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">
							<span>{{user.groupName}}</span>
							<span v-if="user.positionName">【{{user.positionName}}】</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="cont">
				<view class="container-wrap">
					<view class="notice">
						<view class="notice-name">
							<image class="icon" src="/static/index/notice.png" mode="widthFix"></image>
							<text>最近动态</text>
						</view>
						<view class="notice-cont" v-if="showNotice">
							<uni-notice-bar
								scrollable :text="notice" 
								background-color="#fff0"
								:speed="50"
								ref="uni-notice-bar"							
								color="#333" />
						</view>
					</view>
					<view class="tab">
						<view class="tab-item" @click="linkTo('task','待办任务')">
							<image class="icon" src="/static/index/tab1.png" mode="widthFix"></image>
							<view class="tab-name">待办任务</view>
							<view class="number">{{taskTotal>99?'99+':taskTotal}}</view>
						</view>
						<view class="tab-item" @click="linkTo('alert','预警事件')">
							<image class="icon" src="/static/index/tab_alert.png" mode="widthFix"></image>
							<view class="tab-name">预警提醒</view>
							<view class="number">{{alertTotal>99?'99+':alertTotal}}</view>
						</view>
						<view class="tab-item" @click="linkTo('warn','告警事件')">
							<image class="icon" src="/static/index/tab2.png" mode="widthFix"></image>
							<view class="tab-name">告警事件  </view>
							<view class="number">{{warnTotal>99?'99+':warnTotal}}</view>
						</view>
						<view class="tab-item" @click="linkTo('danger','待处理隐患')">
							<image class="icon" src="/static/index/tab3.png" mode="widthFix"></image>
							<view class="tab-name">待处理隐患</view>
							<view class="number">{{dangerTotal>99?'99+':dangerTotal}}</view>
						</view>
					</view>
					<view class="tabs-nav">
						<view class="tabs-nav-item" @click="changeTabNav(1)" :class="tabsnavIdx===1?'active':''">待办事项</view>
						<view class="tabs-nav-item" @click="changeTabNav(2)" :class="tabsnavIdx===2?'active':''">管控单元</view>							
					</view>
					<view class="tab-cont" v-if="tabsnavIdx===1">
						<view class="part" v-if="taskList.length>0">
							<view class="head">
								<text class="head-name">待办任务</text>
								<view class="more" @click="linkTo('task','待办任务')">更多</view>
							</view>
							<view class="part-cont">
								<view class="item" v-for="(item,taskIdx) in taskList" :key="item.taskId" @click="handle('task',item)">
									<view class="index">{{taskIdx+1}}</view>										
									<view class="title">
										<view class="name">{{item.taskTitle}}</view>
										<view class="state">{{taskStatus(item.status)}}</view>
									</view>
									<view class="tags">
										<text class="tag">{{taskPriority(item.taskPriority)}}</text>
										<text class="tag">{{item.taskCatTitle}}</text>
										<text class="tag">{{taskType(item.taskTypeId)}}</text>
									</view>
<!-- 									<view class="countdowntime"  v-if="item.expectedEndTime">
										<text class="name">预期结束时间：</text>
										<uni-countdown :timestamp="getcountdownTime(item.expectedEndTime)" :font-size="12"  color="#FFFFFF" background-color="#007AFF" /> 										
									</view> -->
									<template v-if="item.expectedEndTime">
										<view class="countdowntime"  v-if="getcountdownTime(item.expectedEndTime)">
											<text class="name">预期结束时间：</text>
											<uni-countdown :timestamp="getcountdownTime(item.expectedEndTime)" :font-size="12"  color="#FFFFFF" background-color="#007AFF" /> 										
										</view>	
										<view class="time" v-else>
											预期结束时间：{{item.expectedEndTime}}
											【逾期】
										</view>																			
									</template>
									<view class="bottom">
										<view class="user">
											<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
											处理人：{{item.handleAccountName}}
										</view>		
										<view class="hand-time">
											{{item.launchTime}}
										</view>																
									</view>
								</view>
							</view>
						</view>
						<view class="part" v-if="warnList.length>0">
							<view class="head">
								<text class="head-name">告警事件</text>
								<view class="more" @click="linkTo('warn','告警事件')">更多</view>
							</view>
							<view class="part-cont">
								<view class="item" v-for="(item,warnIdx) in warnList" :key="item.warnId" @click="handle('warn',item)">
									<view class="index">{{warnIdx+1}}</view>											
									<view class="title">
										<view class="name">{{item.warnTitle}}</view>
										<view class="state">{{alertStatus(item.status)}}</view>
									</view>
									<view class="tags">
										<text class="tag">{{warningLevelFilter(item.warnLevel)}}</text>
									</view>
									<view class="bottom">
										<view class="user">
											<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
											处理人：{{item.handleAccountName}}
										</view>		
										<view class="hand-time">
											{{item.warnTime}}
										</view>																
									</view>
								</view>
							</view>
						</view>
<!-- 						<view class="part" v-if="alertList.length>0">
							<view class="head">
								<text class="head-name">预警事件</text>
								<view class="more" @click="linkTo('alert','预警事件')">更多</view>
							</view>
							<view class="part-cont">
								<view class="item" v-for="(item,alertIdx) in alertList" :key="item.alertId">
									<view class="index">{{alertIdx+1}}</view>				
									<view class="title">
										<view class="name">{{item.alertTitle}}</view>
										<view class="state">{{alertStatus(item.status)}}</view>
									</view>
									<view class="tags">
										<text class="tag">{{alertLevel(item.alertLevel)}}</text>
									</view>
									<view class="time">
										发生时间：{{item.alertTime}}
									</view>
									<view class="bottom" v-if="item.handleAccountName">
										<view class="user">
											<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
											处理人：{{item.handleAccountName}}
										</view>		
										<view class="hand-time">
											{{item.handleTime}}
										</view>																
									</view>
								</view>
							</view>
						</view> -->
						<view class="part" v-if="dangerList.length>0">
							<view class="head">
								<text class="head-name">待处理隐患</text>
								<view class="more" @click="linkTo('danger','待处理隐患')">更多</view>
							</view>
							<view class="part-cont">
								<view class="item" v-for="(item,dangerIdx) in dangerList" :key="item.dangerId" @click="handle('danger',item)">
									<view class="index">{{dangerIdx+1}}</view>
									<view class="title">
										<view class="name">{{item.dangerTitle}}</view>
										<view class="state">{{dangerStatus(item.status)}}</view>
									</view>
									<view class="tags">
										<text class="tag">{{dangerLevel(item.dangerLevel)}}</text>
										<text class="tag">{{item.dangerCatTitle}}</text>
									</view>
									<template v-if="item.dangerDeadLine">
										<view class="countdowntime"  v-if="getcountdownTime(item.dangerDeadLine)">
											<text class="name">预期结束时间：</text>
											<uni-countdown :timestamp="getcountdownTime(item.dangerDeadLine)" :font-size="12"  color="#FFFFFF" background-color="#007AFF" /> 										
										</view>	
										<view class="time" v-else>
											预期结束时间：{{item.dangerDeadLine}}
											【逾期】
										</view>																			
									</template>
									<view class="bottom">
										<view class="user">
											<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
											处理人：{{item.curAccountName}}
										</view>		
										<view class="hand-time">
											{{item.submitTime}}
										</view>																
									</view>
								</view>
							</view>
						</view>
					</view>	
					<view class="tab-cont" v-if="tabsnavIdx===2">
						 <view class="statis-tabs">
						 	<view class="statis-tab-item lv1">
								<view class="number">{{myActiveRiskStatis.l1}}</view>									
								<view class="name">1级风险点</view>
								<view class="tag">
									<view class="line"></view>
									<view class="dot"></view>
									<view class="dot"></view>
								</view>						 		
						 	</view>
							<view class="statis-tab-item lv2">
								<view class="number">{{myActiveRiskStatis.l2}}</view>									
								<view class="name">2级风险点</view>
								<view class="tag">
									<view class="line"></view>
									<view class="dot"></view>
									<view class="dot"></view>
								</view>						 		
							</view>
							<view class="statis-tab-item lv3">
								<view class="number">{{myActiveRiskStatis.l3}}</view>									
								<view class="name">3级风险点</view>
								<view class="tag">
									<view class="line"></view>
									<view class="dot"></view>
									<view class="dot"></view>
								</view>						 		
							</view>
							<view class="statis-tab-item lv4">
								<view class="number">{{myActiveRiskStatis.l4}}</view>									
								<view class="name">4级风险点</view>
								<view class="tag">
									<view class="line"></view>
									<view class="dot"></view>
									<view class="dot"></view>
								</view>						 		
							</view>
						 </view>
						<view class="part">
							<view class="part-cont">
								<view class="item flex" v-for="(item,riskIdx) in myActiveRiskList" :key="'risk-'+riskIdx" @click="showRiskDetail(item)">									
									<view class="item-icon">
										<view class="index">{{riskIdx+1}}</view>
										<image :src="item.riskPointIcon" class="item-icon-pic"></image>
									</view>
									<view class="item-info">
										<view class="title">
											<view class="name">{{item.riskPointTitle}}</view>
											<view class="state">{{item.riskPointTypeTitle}}</view>
										</view>
										<view class="">{{item.groupName}}</view>
										<view class="tags">
											<text class="tag risk" :class="'l'+item.riskPointLevel">{{riskLevelFilter(item.riskPointLevel)}}</text>
											<text class="tag">{{item.riskPointCatTitle}}</text>
										</view>								
									</view>
								</view>
							</view>							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getRecentListByLimit,getArtByList} from '@/api/system/art.js'
	import { getAlertByPage } from '@/api/aqpt/alertApi.js';
	import { getDangerByPage } from '@/api/aqpt/dangerApi.js';
	import { getTaskByPage,getMyWaitingTaskTop } from '@/api/aqpt/taskApi.js';
	import { getMyWarningWaitingTop } from '@/api/aqpt/warning.js';	
	import { handleCheckTask } from '@/api/aqpt/checkTaskApi'
	import {riskPointMyCountByLevel,getMyActiveRiskPointByList} from '@/api/aqpt/riskPointApi'
	import{
		taskStatus,taskPriority,taskType,
		alertLevel,alertStatus,
		dangerStatus,dangerLevel,
	} from '@/libs/enum.js';
	export default {
		data() {
			return {
				applist: [],
				defaultAvatar:"/static/components/avatar.png",
				showNotice:false,
				notice:"",
				tabsnavIdx:1,
				user:{
					groupName: "",
					ocName: "",
					positionName: "",
					roleName: "",
					userAvatar: "",
					userIntro: "",
					userName: "",
					userPhone: "",
					userPhoto: "",
					userRealName: ""					
			    },
				alertList:[],
				dangerList:[],
				taskList:[],
				warnList:[],
				alertTotal:0,
				dangerTotal:0,
				taskTotal:0,
				warnTotal:0,
				myActiveRiskStatis:{
					l1:0,
					l2:0,
					l3:0,
					l4:0
				},
				myActiveRiskList:[]
			}
		},
		// created() {
		// 	this.getData()
		// },
		onShow() {
			this.getData()
		},
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},
		methods: {
			taskStatus,taskPriority,taskType,
			alertLevel,alertStatus,
			dangerStatus,dangerLevel,
			warningLevelFilter(val) {
			  const enums = { 1: 'Ⅰ级', 2: 'Ⅱ级', 3: 'Ⅲ级', 4: 'Ⅳ级' }
			  return enums[val]
			},
			riskLevelFilter(val) {
			  const enums = { 1: '重大', 2: '普通', 3: '一般', 4: '较小' }
			  return enums[val]
			},
			scanQrcode(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						if(res.result.includes('ocId')&&res.result.includes('code')){
								uni.setStorageSync('qrcode',res.result)
								uni.navigateTo({
									url:`/pages/webview/webview?type=scan&name=扫码处理`
								})					
						}else{
							uni.showToast({
								icon:'none',
								title:"无效的二维码"
							})								
						}
					},
					fail(res) {
						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=""
				getArtByList(3).then((res)=>{
					for(let i=0;i<res.data.length;i++){
						notice+=`${res.data[i].artTitle} 发布时间:${res.data[i].issuedAt};`
					}
					this.notice=notice
					this.showNotice=true
					this.$nextTick(()=>{
						this.$refs['uni-notice-bar'].initSize()
					})
				})
				this.getMyWaitingTask();
				this.getMyActiveRiskPoint()													
			},
			getMyWaitingTask(){
				let params={
					page: 1,
					limit: 5,
					status: 0,
					handleAccountId: this.user.userId							
				}
				getMyWarningWaitingTop(5).then((res)=>{
					this.warnList=res.data
					this.warnTotal=res.total
				})
				getAlertByPage(params).then((res)=>{
					this.alertList=res.data
					this.alertTotal=res.total
				})
				getDangerByPage({
					page: 1,
					limit: 5,
					curAccountId: this.user.userId
				}).then((res)=>{
					this.dangerList=res.data
					this.dangerTotal=res.total
				})
				getMyWaitingTaskTop(5).then((res)=>{
					this.taskList=res.data
					this.taskTotal=res.total
				})				
			},
			getMyActiveRiskPoint(){
				riskPointMyCountByLevel().then((res)=>{
					this.myActiveRiskStatis=res.data
				})
				getMyActiveRiskPointByList().then((res)=>{
					this.myActiveRiskList=res.data
				})					
			},
			changeTabNav(tabsnavIdx){
				this.tabsnavIdx=tabsnavIdx;
				if(tabsnavIdx===1){
					this.getMyWaitingTask();
				}else{
					this.getMyActiveRiskPoint()		
				}
			},
			linkTo(type,name){
				uni.navigateTo({
					url:`/pages/index/detail/detail?type=${type}&name=${name}`
				})							
			},
			handle(type,item){
				let url=""
				if(type==='danger'){
					url=`/pages/index/handle/danger/index/index?type=${type}&id=${item.dangerId}`
				}
				if(type==='task'){this.handTask(item);return};
				if(type==='warn'){
					url=`/pages/index/handle/warning/warning?id=${item.warnId}`
				}				
				uni.navigateTo({
					url
				})				
			},
			showRiskDetail(item){				
				let baseUrl=this.$h5
				uni.navigateTo({
					url:`/pages/webview/webview?href=${baseUrl}/riskPoint/views/detail.html?id=${item.riskPointId}&ocId=${item.riskPointId}&code=${item.riskPointId}&name=${item.riskPointTitle}`
				})
			},			
			handTask(item){
				handleCheckTask(item.taskId).then((res)=>{
					const { checklistId, checklistTypeId } = res.data //recordId-taskId
					if (checklistTypeId === 1) {// HazardRecordView	
						uni.navigateTo({
							url:`/pages/index/handle/task/hazardRecord/hazardRecord?rid=${item.taskId}&cid=${checklistId}&title=${item.taskTitle}`
						})															  
					} else if (checklistTypeId === 2) {// PointRecordView
						uni.navigateTo({
							url:`/pages/index/handle/task/task?rid=${item.taskId}&cid=${checklistId}&title=${item.taskTitle}`
						})																  
					} else if (checklistTypeId === 3) {// ScoreRecordView	
						uni.navigateTo({
							url:`/pages/index/handle/task/task?rid=${item.taskId}&cid=${checklistId}&title=${item.taskTitle}`
						})															  
					}	
	
				})
			},
			getcountdownTime(time){
				if(!time) return 0
				if(parseInt(new Date(time).getTime() / 1000, 10)-parseInt(new Date().getTime() / 1000, 10)>0){
					return parseInt(new Date(time).getTime() / 1000, 10)
				}else{
					return false
				}
			}
		}
	}
</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;
				// max-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 0 20rpx 0;
					.tab-item{
						width: 25%;
						// 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;
						}
					}
				}
				.tabs-nav{
					display: flex;
					border-radius: 16rpx 16rpx 0 0;
					overflow: hidden;
					position: relative;
					.tabs-nav-item{
						width: 50%;
						text-align: center;
						background-color: #fff;
						padding: 16rpx 0;
						transition: 0.3s;
						&.active{
							background-color:  #808EFF;
							color: #fff;
						}
					}
					&::after{
						width: 1px;
						height: 100%;
						background-color: #7AB2FF;
						content: "";
						position: absolute;	
						left: 50%;
						top:0;
					}
				}
				.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 24rpx 50rpx;
								position: relative;
								.index{
									width: 38rpx;
									height: 38rpx;
									line-height: 38rpx;
									text-align: center;
									border-radius: 50%;
									color:#ea8259;
									background-color:#fbf1ed;
									font-size:20rpx;
									position: absolute;
									left: 4rpx;
									top: 28rpx;
								}
								.title{
									display: flex;
									justify-content: space-between;
									align-items: center;
									.name{
										font-size: 32rpx;
										color: rgba(0, 0, 0, 0.8);
									}
									.state{
										font-size: 30rpx;
										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);
										}
										&.risk{
											color: #fff;
											&.l1{
												background-color: #FF3F3E;
											}
											&.l2{
											   background-color: #FF7800;
											}
											&.l3{
												background-color: #FFCC00;
											}
											&.l4{
												background-color: #3095FD;
											}										
										}
									}
								}
								.time{
									padding-top: 20rpx;
									font-size: 28rpx;									
									color:rgba(241, 57, 57, 0.8);
								}
								.countdowntime{
									display: flex;
									align-items: center;
									padding-top: 20rpx;
									padding-left: 20rpx;
									.name{
										padding-right: 10rpx;
										font-size: 28rpx;
									}
								}
								.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);
									}
								}							
							}
						}
					}
				}
				.statis-tabs{
					display: flex;
					justify-content: center;
					align-items: center;	
					.statis-tab-item{
						width: 25%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						padding: 20rpx 0;
						.number{
							font-size: 36rpx;
							font-weight: bold;
						}
						.name{
							padding: 16rpx 0;
							font-size: 28rpx;
						}
						.tag{
							display: flex;
							.line{
								width: 60rpx;
								height: 10rpx;
								border-radius: 10px;
								background-color: #0FC587;							
							}
							.dot{
								width: 10rpx;
								height: 10rpx;
								border-radius: 50%;
								background-color: #0FC587;
								margin-left: 3px;							
							}
						}
						&.lv1{
							.tag{
								.line,.dot{background-color: #FF3F3E;}
							}
						}
						&.lv2{
							.tag{
								.line,.dot{background-color: #FF7800;}
							}
						}
						&.lv3{
							.tag{
								.line,.dot{background-color: #FFCC00;}
							}
						}
						&.lv4{
							.tag{
								.line,.dot{background-color: #3095FD;}
							}
						}
					}									
				}
				.part{
					.part-cont{
						.item{
							&.flex{
								display: flex;	
								padding-left: 20rpx;
								.item-icon{
									width: 100rpx;
									height: 100rpx;
									background-color: #ccc;
									border-radius: 10rpx;
									position: relative;
									.item-icon-pic{
										display: block;
										width: 100rpx;
										height: 100rpx;
										border-radius: 10rpx;
										box-sizing: border-box;
										border: 1rpx solid #eaeaea;
									}
									.index{
										position: absolute;
										left: -10rpx;
										top: -10rpx;
										background-color: #808EFF;
										color: #fff;
										z-index: 999;
									}								
								}	
								.item-info{
									flex: 1;
									padding-left: 20rpx;
								}										
							}
						}
					}					
				}
			}
		}
	}

</style>