<template>
	<view class="warpbox">
		<!-- #ifdef MP-WEIXIN -->
		<cover-view class="headerbox" :style="{height:topHeight+'px',paddingTop:paddingHeight+'px'}">
			<cover-view class="headerbox-icon"></cover-view>
			<cover-view class="headerbox-content">应用</cover-view>
			<cover-view class="headerbox-icon"></cover-view>
		</cover-view>
		<cover-view :style="{height:topHeight+'px'}"></cover-view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY || APP-PLUS -->
		<view class="headerbox_h5" style="height:150rpx">
			<view class="headerbox-icon"></view>
			<view class="headerbox-content">应用</view>
			<view class="headerbox-icon"></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="headerbox_h5">
			<view class="headerbox-icon"></view>
			<view class="headerbox-content">应用</view>
			<view class="headerbox-icon"></view>
		</view>
		<!-- #endif -->
		<view class="warpboxss" style="margin-top: 25rpx;">
			<view class="warpboxs-small-title" :style="isshow1?'padding-bottom: 30rpx;':''" @click="isshow1=!isshow1" >
				<view><text class="warpboxs-small-title-line"></text>公司资料</view>
				<view class="warpboxs-small-title-img">
					<image src="../../static/arrow-down.png" :style="isshow1?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></image>
				</view>
			</view>
			<view v-show="isshow1">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesB/new1/new1?type=公司资质')">
						<!-- <view class="fun_tip" v-if="info2 && info2.leads && info2.leads.count != 0">{{info2 && info2.leads.count}}</view> -->
						<image src="/static/icon/icon1.png" mode="scaleToFill"></image>
						<view>公司资质</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesB/new1/new1?type=公司介绍')">
						<image src="/static/icon/icon2.png" mode="scaleToFill"></image>
						<view>公司介绍</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesB/new1/new1?type=协同办公')">
						<image src="/static/icon/icon22.png" mode="scaleToFill"></image>
						<view>协同办公</view>
					</view>
				</view>
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesB/new1/new1?type=财务')">
						<!-- <view class="fun_tip" v-if="info2 && info2.leads && info2.leads.count != 0">{{info2 && info2.leads.count}}</view> -->
						<image src="/static/icon/icon23.png" mode="scaleToFill"></image>
						<view>财务</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesB/new1/new1?type=人力资源')">
						<image src="/static/icon/icon24.png" mode="scaleToFill"></image>
						<view>人力资源</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesB/new1/new1?type=渠道管理')">
						<image src="/static/icon/icon25.png" mode="scaleToFill"></image>
						<view>渠道管理</view>
					</view>
				</view>
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesB/new1/new1?type=合约协议集合')">
						<image src="/static/icon/icon20.png" mode="scaleToFill"></image>
						<view>合约协议集合</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow2?'padding-bottom: 30rpx;':''" @click="isshow2=!isshow2">
				<view><text class="warpboxs-small-title-line"></text>产品及服务</view>
				<view class="warpboxs-small-title-img">
					<image src="../../static/arrow-down.png" :style="isshow2?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></image>
				</view>
			</view>
			<view v-show="isshow2">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesA/product/index')">
						<!-- <view class="fun_tip" v-if="info2 && info2.leads && info2.leads.count != 0">{{info2 && info2.leads.count}}</view> -->
						<image src="/static/icon/icon3.png" mode="scaleToFill"></image>
						<view>公司产品</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pages/index/workorder/workorder')">
						<!-- <view class="fun_tip" v-if="info2 && info2.agent && info2.agent.count != 0">{{info2 && info2.agent.count}}</view> -->
						<image src="/static/icon/icon4.png" mode="scaleToFill"></image>
						<view>工单</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesB/new1/new1?type=产品方案')">
						<image src="/static/icon/icon26.png" mode="scaleToFill"></image>
						<view>产品方案</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="warpboxss" v-if="isshowall">
			<view class="warpboxs-small-title" :style="isshow3?'padding-bottom: 30rpx;':''" @click="isshow3=!isshow3">
				<view><text class="warpboxs-small-title-line"></text>在线培训</view>
				<view class="warpboxs-small-title-img">
					<image src="../../static/arrow-down.png" :style="isshow3?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></image>
				</view>
			</view>
			<view v-show="isshow3">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border"  @click="gopath('/pagesB/new1/new1?type=培训资料')">
						<!-- <view class="fun_tip" v-if="info2 && info2.leads && info2.leads.count != 0">{{info2 && info2.leads.count}}</view> -->
						<image src="/static/icon/icon5.png" mode="scaleToFill"></image>
						<view>培训资料</view>
					</view>
					<view class="fun_fir_1 fun_fir_border"  @click="gotoPages()">
						<!-- <view class="fun_tip" v-if="info2 && info2.agent && info2.agent.count != 0">{{info2 && info2.agent.count}}</view> -->
						<image src="/static/icon/icon6.png" mode="scaleToFill"></image>
						<view>在线培训</view>
					</view>
		<!-- 			<view class="fun_fir_1 fun_fir_border">
						<view></view>
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow4?'padding-bottom: 30rpx;':''" @click="isshow4=!isshow4">
				<view><text class="warpboxs-small-title-line"></text>协同办公</view>
				<view class="warpboxs-small-title-img">
					<image src="../../static/arrow-down.png" :style="isshow4?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></image>
				</view>
			</view>
			<view v-show="isshow4">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pagesA/punchclock/index')">
						<!-- <view class="fun_tip" v-if="info2 && info2.leads && info2.leads.count != 0">{{info2 && info2.leads.count}}</view> -->
						<image src="/static/icon/icon7.png" mode="scaleToFill"></image>
						<view>考勤</view>
					</view>
					<view class="fun_fir_1 fun_fir_border"  @click="gopath('/pagesA/newbill/newbill')">
						<!-- <view class="fun_tip" v-if="info2 && info2.agent && info2.agent.count != 0">{{info2 && info2.agent.count}}</view> -->
						<image src="/static/icon/icon8.png" mode="scaleToFill"></image>
						<view>审批</view>
					</view>
					<view class="fun_fir_1 fun_fir_border"  @click="gopath('/pages/index/schedule/schedule')">
						<image src="/static/icon/icon28.png" mode="scaleToFill"></image>
						<view>日程</view>
					</view>
		<!-- 			<view class="fun_fir_1 fun_fir_border"  @click="gopath('/pagesA/profile/needDeal')">
						<image src="/static/icon/icon9.png" mode="scaleToFill"></image> 
						<view>待办</view>
					</view> -->
				</view>
				<view class="fun_box_fir" style="margin-top: -2rpx;">
					<view class="fun_fir_1 fun_fir_border" @click="gopath('/pages/news/theReminder/theReminder')">
						<!-- <view class="fun_tip" v-if="info2 && info2.examine && info2.examine.count != 0">{{info2 && info2.examine.count}}</view> -->
						<image src="/static/icon/icon10.png" mode="scaleToFill"></image> 
						<view>通知</view>
					</view>
				<!-- 	<view class="fun_fir_1 fun_fir_border"  @click="gopath('/pages/index/schedule/schedule')">
						<image src="/static/icon/icon28.png" mode="scaleToFill"></image>
						<view>日程</view>
					</view> -->
			<!-- 		<view class="fun_fir_1 fun_fir_border">
						<view></view>
					</view>
					<view class="fun_fir_1 fun_fir_border">
						<view></view>
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="warpboxss" v-if="isshowall">
			<view class="warpboxs-small-title"  @click="isshow5=!isshow5" :style="isshow5?'padding-bottom: 30rpx;':''">
				<view><text class="warpboxs-small-title-line"></text>财务</view>
				<view class="warpboxs-small-title-img">
					<image src="../../static/arrow-down.png" :style="isshow5?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></image>
				</view>
			</view>
			<view v-show="isshow5">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border"  @click="gopath('/pages/index/contract/contract')">
						<!-- <view class="fun_tip" v-if="info2 && info2.leads && info2.leads.count != 0">{{info2 && info2.leads.count}}</view> -->
						<image src="/static/icon/icon11.png" mode="scaleToFill"></image>
						<view>合同</view>
					</view>
					<view class="fun_fir_1 fun_fir_border"  @click="gopath('/pagesA/payment/index')">
						<!-- <view class="fun_tip" v-if="info2 && info2.agent && info2.agent.count != 0">{{info2 && info2.agent.count}}</view> -->
						<image src="/static/icon/icon12.png" mode="scaleToFill"></image>
						<view>回款</view>
					</view>
					<view class="fun_fir_1 fun_fir_border"  @click="gopath('/pagesB/fplist/fplist')">
						<!-- <view class="fun_tip" v-if="info2 && info2.examine && info2.examine.count != 0">{{info2 && info2.examine.count}}</view> -->
						<image src="/static/icon/icon13.png" mode="scaleToFill"></image> 
						<view>发票</view>
					</view>
				</view>
			</view>
		</view>
		
		

		
		<!-- 底部导航 -->
		<uniTabbar v-if="tipNumber || tipNumber==3" :tipNumber="tipNumber"></uniTabbar>
	</view>
</template>
<script>
	import uniTabbar from '@/components/tabbara/tabbar.vue'
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	import {
		pageJumps,
		statisticalPageJumps
	} from "@/pagesA/crm/crm_page_jumps.js";
	import {
		netAgentList
	} from '@/api/clues.js'
	import {
		getNowData
	} from '@/util/weekTime.js'
	import {
		netGetBriefdata,
		netTurnoverList
	} from '@/api/kehu.js'
	import {
		netGetData,
		netTime
	} from '@/api/index.js'
	import {
		netMapKey
	} from '@/api/login.js'
	import {
		getStaff102
	} from '@/api/ly.js'
	import screenPop from './screen.vue'
	

	export default {
		mixins: [pageJumps, statisticalPageJumps],
		components: {
			uniTabbar,
			screenPop
		},
		data() {
			return {
				isshow1:true,
				isshow2:true,
				isshow3:true,
				isshow4:true,
				isshow5:true,
				topHeight: 0,
				paddingHeight: 0,
				searchWidth: 470,
				BASE_IMG_URL: BASE_IMG_URL,
				tipNumber: 3,
				typeList: ['本人及下属', '仅本人', '仅下属'],
				typeIndex: 0,
				dataTime: '',
				startTime:'',
				endTime:'',
				text:'本月',
				info: {}, //数据简报 数据
				info2:{},
				target_money: 0, //目标金额
				complete_money: 0, //完成 金额
				percentage: 0, //百分比
				shows: false,
				approvelNum: 0,
				oneChart:{},
				chartData: {},
				//业绩目标
				achieveArr:[
					{id:1,name:'合同'},
					{id:2,name:'回款'}
				],
				achieveIndex:0,
				roleType:1,
				rules:[],
				userinfo:uni.getStorageSync('userinfo'),
				isshowall:true
			}
		},
		onLaunch() {
		
		},
		onLoad() {
			//获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					let HeaderBar = 0
					// #ifdef MP-WEIXIN
					let rect = wx.getMenuButtonBoundingClientRect();
					HeaderBar = rect.height + (rect.top - res.statusBarHeight) * 2 + res.statusBarHeight + 5;
					this.topHeight = HeaderBar;
					this.paddingHeight = rect.top
					this.searchWidth = 470
					// #endif
					// #ifdef MP-ALIPAY || APP-PLUS
					HeaderBar = res.pixelRatio * res.statusBarHeight
					this.topHeight = HeaderBar
					this.paddingHeight = res.statusBarHeight
					this.searchWidth = 690
					// #endif
					// #ifdef H5 
					this.topHeight = 72
					this.paddingHeight = 24
					this.searchWidth = 690
					// #endif
				}
			})
			getStaff102().then(res=>{
				console.error(res)
				for (let i = 0; i < res.data.length; i++) {
					if(this.userinfo.id == res.data[i]) {
						this.isshowall = false
					}
				}
				console.error(this.isshowall)
			})
			
		},
		onShow() {
			this.roleType = uni.getStorageSync('roleType')
			this.rules = uni.getStorageSync('rules')
			this.dataTime = getNowData().substr(0, 7)
			if (uni.getStorageSync('isAuth')) {
				this.getTip()
			} else {
				// this.tipNumber = 0
			}
		},
		methods: {
			//小程序跳转
			gotoPages(){
			    uni.navigateToMiniProgram({
			      appId: 'wx0efbee4b6225c8ae',
			      success(res) {
			        // 打开成功
			        uni.showToast({
			            title: '跳转成功'
			        })
			    
			      },
			      fail(err) {
			          console.log(err)
			            // 打开失败/取消
			            uni.showToast({
			                title: '跳转不成功'
			            })
			        }
			    })
			},
			gopath(e) {
				if(e) {
					uni.navigateTo({
						url:e,
					})
				} else {
					uni.showToast({
						icon:'none',
						title:'暂未开通'
					})
				}
			},
			//业绩目标
			toTarget() {
				if (this.roleType == 2 && (this.rules.indexOf('all') != -1 || this.rules.indexOf('2') != -1)) {
					uni.navigateTo({
						url: '/pagesA/crm/salesTarget/salesTarget',
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/crm/salesTarget/myTarget',
					})
				}
			},
			//员工列表
			jumpStaffList() {
				uni.navigateTo({
					url:'/pagesA/profile/staff/stafflist/index'
				})
			},
			//审批管理
			toApproveManage() {
				uni.navigateTo({
					url:'/pagesA/work/approvelManage/index'
				})
			},
			//业绩排名
			achieveRank() {
				uni.navigateTo({
					url:'/pagesA/crm/statisticalFrom/achieveRank'
				})
			},
			//切换业绩目标
			changeAchieve(e) {
				this.achieveIndex = e.detail.value
				// 业绩目标
				this.getTarget()
			},
			
			getTime() {
				netTime({times:'thismonth'}).then(res=>{
					res = res.data
					this.startTime = res.times[0]
					this.endTime = res.times[1]
					//当月 数据 简报、
					this.getData()
					// 业绩目标
					this.getTarget()
				})
			},
			getOpenid() {
				netMapKey().then(res => {
					uni.setStorageSync('mapKey', res.data.map_key)
					uni.setStorageSync('appid', res.data.appid)
				})
			},
			getTip() {
				netAgentList().then(res => {
					uni.setStorageSync('token', res.data.userinfo.token)
					uni.setStorageSync('roleType', res.data.userinfo.role_type)
					uni.setStorageSync('rules', res.data.userinfo.rules)
					// this.tipNumber = res.data.total
					this.info2 = res.data
					
					this.approvelNum = res.data.examine.count
					//获取默认 时间的数据
					this.getTime()
					//获取appid
					this.getOpenid()
				})
			},
			getData() {
				let params = {
					times: this.startTime+','+this.endTime,
					type: this.typeIndex
				}
				netGetBriefdata(params).then(res => {
					this.info = res.data
				})
			},
			getTarget() {
				let params = {
					times: this.startTime+','+this.endTime,
					type: this.typeIndex,
					status: this.achieveArr[this.achieveIndex].id,
				}
				netGetData(params).then(res => {
					this.complete_money = res.data.contract_moneys
					this.target_money = res.data.achievement
					let ratio = res.data.ratio>=100?100:res.data.ratio
					let obj = {
						series: [{
							name: "已完成",
							color: "#2979ff",
							data: ratio/100
						}]
					};
					let b = {
						title: {
							name: res.data.ratio+'%',
							fontSize: 18,
							color: "#2979ff"
						},
						subtitle: {
							name: "完成率",
							fontSize: 15,
							color: "#666666"
						},
						extra: {
							arcbar: {
								type: "circle",
								width: 12,
								backgroundColor: "#E9E9E9",
								startAngle: 1.5,
								endAngle: 0.25,
								gap: 2
							}
						}
					}
					this.oneChart = b
					this.chartData = obj;
				})
			},
			changeType(e) {
				this.typeIndex = e.detail.value
				this.getData()
				this.getTarget()
			},
			changeDataTime(e) {
				this.$refs.screenChild.init()
			},
			sureTime(params) {
				console.log(params,'====')
				if(params.text && params.start_time && params.end_time){
					this.text = params.text
					this.startTime = params.start_time
					this.endTime = params.end_time
					this.getData()
					this.getTarget()
				}
			},
			//产品列表
			toProductList() {
				uni.navigateTo({
					url: '/pagesA/product/index'
				})
			},
			
			//项目列表
			toBusinessList(){
				uni.navigateTo({
					url: '/pagesA/business/my_business'
				})
			},
			
			toWorkorderList(){
				uni.navigateTo({
					url: '/pages/index/workorder/workorder'
				})
			},
			
			
			
			//回款列表
			toPayment() {
				uni.navigateTo({
					url: '/pagesA/payment/index'
				})
			},
			//费用管理
			toCostList() {
				uni.navigateTo({
					url: '/pagesA/cost/index'
				})
			},
			//回款列表
			toPayment() {
				uni.navigateTo({
					url: '/pagesA/payment/index'
				})
			},
			//回款计划
			toPayPlan() {
				uni.navigateTo({
					url: '/pagesA/payplan/index'
				})
			},
			//业绩统计
			achieveStatis() {
				uni.navigateTo({
					url:'/pagesA/crm/statisticalFrom/achieveStatis'
				})
			},
			//打卡
			toClock() {
				uni.navigateTo({
					url:'/pagesA/punchclock/index'
				})
			},
			//项目
			toBusiness() {
				uni.navigateTo({
					url:'/pagesA/business/index'
				})
			},
			//数据简报的  项目
			toCheckBusiness() {
				uni.navigateTo({
					url:'/pagesA/business/index?type='+this.typeIndex+'&stime='+this.startTime+'&etime='+this.endTime,
				})
			},
			//客户成交量  未成交量
			toCus(status) {
				uni.navigateTo({
					url:'/pagesA/crm/customerManagement/customerManagement?cusStatus='+status+'&stime='+this.startTime+'&etime='+this.endTime,
				})
			},
			//项目成交量  未成交量
			toBus(status) {
				uni.navigateTo({
					url:'/pagesA/business/index?busStatus='+status+'&stime='+this.startTime+'&etime='+this.endTime,
				})
			},
			//线索池
			toCluePool() {
				uni.navigateTo({
					url:'/pagesB/cluepool/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fun_box_fir_a{
		display: flex;
		align-items: center;
		border-top: 2rpx solid #efefef;
		.fun_fir_1{
			flex-shrink: 0;
			background:#fff;
			text-align: center;
			width:50%;
			padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size:24rpx;
			color:#000;
			position: relative;
			.fun_tip{
				position: absolute;
				right:150rpx;
				top:18rpx;
				background:#F13E27;
				color:#fff;
				font-size:20rpx;
				width:34rpx;
				height:34rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 34rpx;
				z-index:2;
			}
			image{
				width:45rpx;
				height:45rpx;
				margin-bottom:15rpx;
			}
		}
		.fun_fir_border {
			border-bottom: 2rpx solid #efefef;
			border-right: 2rpx solid #efefef;
		}
		.fun_fir_border_right {
			border-right: 2rpx solid #efefef;
		}
	}
	.fun_box_fir{
		display: flex;
		align-items: center;
		.fun_fir_1{
			flex-shrink: 0;
			background:#fff;
			text-align: center;
			width:33%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size:24rpx;
			color:#000;
			position: relative;
			height: 170rpx;
			.fun_tip{
				position: absolute;
				right: 85rpx;
				top:18rpx;
				background:#F13E27;
				color:#fff;
				font-size:20rpx;
				width:34rpx;
				height:34rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 34rpx;
				z-index: 10;
				
			}
			image{
				width:45rpx;
				height:45rpx;
				margin-bottom:15rpx;
			}
		}
		.fun_fir_border {
			border-top: 2rpx solid #efefef;
			border-bottom: 2rpx solid #efefef;
			border-right: 2rpx solid #efefef;
			border-left: 2rpx solid #efefef;
		}
		.fun_fir_border_right {
			border-right: 2rpx solid #efefef;
		}
	}
	.message_num {
		width: 20rpx;
		height: 20rpx;
		border-radius: 20rpx;
		color: #fff;
		position: relative;
		top: 0;
		right: 0;
	}
	.color{
		background: #fff;
	}
	.colore{
		background: #f00;
	}
	.warpboxs{
		width:100%;
		box-sizing: border-box;
		background:#fff;
		margin-bottom: 20rpx;
		.warptitle{
			font-size:26rpx;
			color:#333;
			margin-bottom:30rpx;
		}
		.warptitle-left {
			display: flex;
			align-items: center;
			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
		}
		.warptitle-arrow-right {
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
		.fun_box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap:wrap;
			.fun_fir{
				flex-shrink: 0;
				background:#fff;
				border-radius: 10rpx;
				text-align: center;
				width:142rpx;
				height:115rpx;
				margin-right:24rpx;
				margin-bottom:24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size:24rpx;
				color:#000;
				&:nth-child(4n){
					margin-right:0;
				}
				image{
					width:50rpx;
					height:50rpx;
					margin-bottom:15rpx;
				}
			}
			
		}
	}
	.u-progress-info {
		text-align: center;
	}

	.headerbox_h5 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: var(--status-bar-height);
		padding-left: 30rpx;
		z-index: 9;
		background: #f2f3f5;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		.headerbox-icon {
			width:16%;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-top: 10rpx;
			}
		}
		.headerbox-content {
			width: 64%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}
		.search_box {
			height: 60rpx;
			border-radius: 30rpx;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 15rpx;

			.iconsearch {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}

			.self_search {
				font-size: 24rpx;
				color: #333;
				height: 58rpx;
				line-height: 58rpx;
				padding: 0;
				margin: 0;
				width: 500rpx;
			}
		}
	}

	.headerbox {
		background: #fff;
		box-sizing: border-box;
		width: 100%;
		height: 150rpx;
		position: fixed;
		left: 0;
		top: 0rpx;
		padding-top: var(--status-bar-height);
		padding-left: 30rpx;
		z-index: 9;
		display: flex;
		justify-content: space-between;
		.headerbox-icon {
			width:10%;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-top: 10rpx;
			}
		}
		.headerbox-content {
			width: 80%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}
		.search_box {
			height: 60rpx;
			border-radius: 30rpx;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 15rpx;

			.icon-search {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
				position: relative;

				&::before {
					content: '';
					width: 0;
					height: 0;
				}
			}

			.self_search {
				font-size: 24rpx;
				color: #666;
				height: 58rpx;
				line-height: 58rpx;
				padding: 0;
				margin: 0;
				width: 500rpx;
			}
		}
	}

	.topbox {
		width: 100%;
		background: linear-gradient(180deg, #DFF0FF 0%, #F1F4F6 48%, #F4F4F4 100%);

		.top_warp {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx 60rpx;
			text-align: center;

			.top_fir {
				font-size: 24rpx;
				color: #333;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.fun_warp {
		padding: 30rpx 24rpx;
		background: #fff;
		width: 710rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);

		.fun_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25rpx;

			.fun_tit {
				font-size: 26rpx;
				color: #333333;
				font-weight: 700;
			}
		}

		.fun_box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.fun_fir {
				flex-shrink: 0;
				background: #fff;
				border-radius: 10rpx;
				text-align: center;
				width: 23%;
				height: 150rpx;
				margin-right: 14rpx;
				margin-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #000;
				position: relative;

				&:nth-child(4n) {
					margin-right: 0;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 15rpx;
				}

				.tab-number {
					font-size: 24rpx;
					color: #fff;
					background: #F43F3B;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 40rpx;
					position: absolute;
					right: 30rpx;
					top: 0;
				}
			}
		}
	}

	.pre-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 30rpx;
		margin: 20rpx 0 30rpx 0;
		.form_right {
			width: 180rpx;
			height: 50rpx;
			line-height: 48rpx;
			border-radius: 8rpx;
			background: #fff;
			margin-right: 15rpx;
			font-size: 22rpx;
			color: #666;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);

			.bottomimg {
				width: 20rpx;
				height: 33rpx;
			}
		}

		// .newimg{
		// 	image{
		// 		width:20rpx;
		// 		height:33rpx;
		// 	}
		// }
	}

	.dataPre {
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx 0 40rpx;
		margin: 0 24rpx 30rpx 24rpx;
		border-radius: 20rpx;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);

		.pre_content {
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			.content_item {
				width: 33.33%;
				text-align: center;
				:first-child {
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 26rpx;
					margin-bottom: 10rpx;
					color:#333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				:last-child {
					font-size: 24rpx;
					padding: 0 20rpx;
					color: #999;
				}
			}
		}
	}

	.pre_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;

		.pre_title {
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.body_head {
		width: 702rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 5;
		.conwarp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.con_title {
				font-weight: 700;
				font-size: 28rpx;
			}
			.achivebox{
				font-size:24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.achitit{
					margin-right:10rpx;
				}
				.bottomimg{
					width: 35rpx;
					height: 33rpx;
				}
			}
		}
		

		.con_head {
			display: flex;
			align-items: center;

			.dountChart {
				margin-top: 70rpx;
				width: 350rpx;
				height: 350rpx;
				margin-right: 24rpx;
			}

			.money_show {
				padding-top: 45rpx;

				.money_target {
					:first-child {
						margin-bottom: 30rpx;
						color: #666;
					}

					:last-child {
						font-size: 40rpx;
						margin-bottom: 30rpx;
						color: #000;
					}
				}
			}
		}
	}

		
		
		
		
	.warpboxss{
		//width:100%;
		//box-sizing: border-box;
		background:#fff;
		padding: 30rpx;
		margin: 0 25rpx 40rpx 25rpx;
		border-radius: 10rpx;
		box-shadow: 0 10rpx 20rpx #b8c6d7;
		// margin-top: 25rpx;
		.warpboxs-small-title {
			//padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
			.warpboxs-small-title-line {
				display: inline-block;
				background-color: #1a75e0;
				height: 26rpx;
				width: 10rpx;
				margin-right: 10rpx;
			}
			.warpboxs-small-title-img {
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.fun_box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap:wrap;
			.fun_fir{
				flex-shrink: 0;
				background:#fff;
				border-radius: 10rpx;
				text-align: center;
				width:25%;
				//height:115rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size:24rpx;
				color:#666666;
				margin-top: 40rpx;
				image{
					width:46rpx;
					height:46rpx;
					margin-bottom:15rpx;
				}
			}
			
		}
	}
</style>
