chuangte_bike_newxcx/page_shanghu/guanli/admin_worke.vue

<template>
	<view class="page">
		<view class="bj"></view>
	<view class="toptit" @click="btnqh"><!-- @click="topage(4)" -->
			    <image @click.stop="topage(4)" style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uEQLkI1vDF4PTy44DTXH" mode=""></image>	{{areaname}}  <u-icon style="margin-left: 10rpx;" name="arrow-down" color="#fff" size="28"></u-icon> 
			</view>
		<view class="" style="width: 718rpx;
		height: 258rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		margin: auto;margin-top: 36rpx;">
			<view class="" style="display: flex;justify-content: space-between;width: 100%;padding: 0 32rpx;padding-top: 24rpx;">
				<view class="" style="font-weight: 600;font-size: 32rpx;color: #3D3D3D;">
					运营状况
				</view>
				<view class="" style="font-size: 24rpx;color: #4297F3;display: flex;align-items: center;" @click="btnchakan">
					查看更多 <u-icon style="margin-left: 6rpx;" name="arrow-right" color="#4297F3" size="28"></u-icon>
				</view>
			</view>
			<view class="leiji">
				<view class="li">
					<view class="top">
					  {{yunyingobj.orderCount == null ? 0 : yunyingobj.orderCount}} <text style="font-size: 26rpx;">笔</text>
					</view>
					<view class="bot">
						今日订单
					</view>
				</view>
				<view class="li">
					<view class="top">
						{{yunyingobj.orderActualAmount == null ? 0 : yunyingobj.orderActualAmount}} <text style="font-size: 26rpx;">元</text>
					</view>
					<view class="bot">
						今日营收
					</view>
				</view>
				<view class="li">
					<view class="top">
						{{yunyingobj.finishedOrderCount == null ? 0 : yunyingobj.finishedOrderCount}} <text style="font-size: 26rpx;">笔</text>
					</view>
					<view class="bot">
						已完成订单
					</view>
				</view>
				<view class="li">
					<view class="top">
						{{yunyingobj.orderStatusMap.PROCESSING == null ? 0 : yunyingobj.orderStatusMap.PROCESSING}} <text style="font-size: 26rpx;">笔</text>
					</view>
					<view class="bot">
						进行中订单
					</view>
				</view>
			</view>
		</view>
		
		<view class="newtop">
			<view class="" @click="topage(11)">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uReMugbnooJ4SSlLyF13" mode=""></image>
				<text>运营配置</text>
			</view>
			<view class="" @click="toMap">
				<image src="https://api.ccttiot.com/smartmeter/img/static/utuqX8JbqxLHn3nymdWo" mode=""></image>
				<text>电子围栏</text>
			</view>
			<view class="" @click="topage(12)">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ux863IEYVBkbjwqa9jf2" mode=""></image>
				<text>运营区域</text>
			</view>
			<view class="" @click="btnts">
				<image src="https://api.ccttiot.com/smartmeter/img/static/urvqyh17Uuoql0lXDdq0" mode=""></image>
				<text>用户投诉</text>
			</view>
			<view class="" @click="btnreturnbike">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uJ4x8uTOMd7pmTeBiX8p" mode=""></image>
				<text>订单审核</text>
			</view>
		</view>
		
		<view class="gonggao" @click="btntopgg">
			<image style="width: 28rpx;height: 28rpx;" src="https://api.ccttiot.com/smartmeter/img/static/urVdfzier4Q54s6u8Upl" mode=""></image>
			<view class="container">
			    <view class="scroll-text">
			      <view class="scroll-item">
			        {{announcements.title == null ? '暂无最新公告！！！' : announcements.title}}
			      </view>
			    </view>
			</view>
			<u-icon name="arrow-right" color="#373737" style="position: absolute;right: 10rpx;" size="32"></u-icon>
		</view>
		
		<!-- 常用工具 -->
		<view class="newtit">
			常用工具
		</view>
		<view class="" style="display: flex;justify-content: space-between;padding: 0 22rpx;margin-top: 12rpx;">
			<image @click="btnjs" style="width: 164rpx;height: 200rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uehKZhQD3xZFCecZSJf2" mode=""></image> <!-- //门店管理 -->
			<image @click="topage(10)" style="width: 164rpx;height: 200rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uRkGGK4bIWnMsosA5Zu1" mode=""></image> <!-- 收费模版 -->
			<image @click="topage(9)" style="width: 164rpx;height: 200rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uBsnPWXwpmwhuaDB6BMF" mode=""></image> <!-- 车辆型号 -->
			<image @click="topage(2)" style="width: 164rpx;height: 200rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uPXA0S6p7NZ3FEoklU95" mode=""></image> <!-- 车辆管理 -->
		</view>
		<!-- 其他工具 -->
		<view class="newtit" style="margin-top: 32rpx;">
			其他工具
		</view>
		<view class="" style="width: 718rpx;height: 680rpx;background: #FFFFFF;border-radius: 14rpx 14rpx 14rpx 14rpx;margin: auto;margin-top: 12rpx;">
			<view class="" style="display: flex;justify-content: space-between;padding:0 42rpx;padding-top: 40rpx;">
				<image @click="btnjm" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uffolC81XnKNgE9Uc7uB" mode=""></image> <!-- 加盟伙伴 -->
				<image @click="btnywry" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u1ZIXf7JVPNtZVtArR4E" mode=""></image> <!-- 运维人员 -->
				<image @click="btnkefu" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uxy4PyvtlQ1qA3VgOVIm" mode=""></image> <!-- 客服设置 -->
				<image @click="btnhy" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/umIo5c86JDdswIhamRAD" mode=""></image> <!-- 会员中心 -->
			</view>
			<view class="" style="display: flex;justify-content: space-between;padding:0 42rpx;margin-top: 40rpx;">
				<image @click="btnyunwei" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uc8BWB6V2AG1u6Rv7RJr" mode=""></image>
				<!-- 换电工单 -->
				<!-- 换电记录 -->
				<!-- 批量调度 -->
				<image @click="btndiaodujl" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u8pqPmRzOO7xfH0zFKJE" mode=""></image>
				<!-- 调度记录 -->
				<image @click="topage(7)" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uvLQbL993lGQMU5T1WGc" mode=""></image> <!-- 故障审核 -->
				<image @click="btnggsz" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u5ASdG202aRlfiKJqxbG" mode=""></image> <!-- 公告协议 -->
			</view>
			<view class="" style="display: flex;padding:0 42rpx;margin-top: 40rpx;gap: 74rpx;">
				<image @click="btnsp" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u9Ia1oZv3dvWOuIvxNZd" mode=""></image> <!-- 视频教程 -->
				<image @click="btnewm" style="width: 84rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uAlHiuCxL9vVQsc1m0pz" mode=""></image> <!-- 二维码 -->
				<image @click="btnInvoice" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u7FWEOjQE6vSYjLYryQt" mode=""></image> <!-- 电子发票 -->
				<image @click="btntuiguang" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uB6MeUkD1cSFiBujgYt6" mode=""></image> <!-- 推广 -->
			</view>
			<view class="" style="display: flex;padding:0 42rpx;margin-top: 40rpx;gap: 56rpx;">
				<image @click="btnkjpw" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/ukU5dVsJRl0LjuGvV0m8" mode=""></image> <!-- 卡劵配额 -->
				<image @click="btnyy" style="width: 112rpx;height: 122rpx;" src="https://api.ccttiot.com/smartmeter/img/static/ukU5dVsJRl0LjuGvV0m8" mode=""></image> <!-- 语音同步 -->
			</view>
		</view>
		
		<!-- 公告弹窗 -->
		<view class="noticetc" style="width: 100%;" v-if="gonggaoflag">
			<view class="name"> 
				公告
			</view>
			<view class="biaoti">
				{{announcements.title}}
			</view>
			<!-- <view class="cont" v-html="gonggaoxq.noticeContent"></view>  -->
			<u-parse :html="announcements.content" style="width: 100%;height: 60vh;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
			<view class="btn" @click="btnggtc">
				我知道了
			</view>
		</view>
		<view class="mask" v-if="gonggaoflag"></view>
		<u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm" v-if="list.length <= 5"></u-select>
		<!-- 自定义选择器 -->
		<view class="custom-select" v-if="show && list.length > 5">
			<view class="mask" @click="show = false"></view>
			<view class="select-content">
				<view class="select-header">
					<text>选择运营区</text>
					<text class="close" @click="show = false">×</text>
				</view>
				<view class="search-box">
					<input type="text" v-model="searchKey" placeholder="搜索运营区" @input="handleSearch" />
				</view>
				<scroll-view scroll-y class="select-list">
					<view class="select-item" v-for="item in displayList" :key="item.value" @click="selectItem(item)"
						:class="{ 'highlight': searchKey && item.label.includes(searchKey) }">
						{{ item.label }}
						<view style="font-size: 24rpx;color: #999;margin-left: auto;"> {{ item.deptName }}</view>
					</view>
					</scroll-view>
				</view>
		</view>
		<view class="fuwuewm" v-if="fuwuewm">
			<image src="https://api.ccttiot.com/qrcode_for_gh_25c71c637dbc_344%20(2)-1753329225290.jpg" show-menu-by-longpress @longpress="handleLongPress" mode=""></image>
			<text class="" style="width: 100%;text-align: center;margin-top: 20rpx;display: block;color: #fff;">
				长按关注公众号，租车信息不错过！
			</text>
			<view class="" @click="fuwuewm = false">
				关闭
			</view>
		</view>
		<view class="mask" style="background-color: rgba(0, 0, 0, 0.5);" v-if="fuwuewm"></view>
		
		<TabBar :indexs='0' style=""></TabBar>
	</view>
</template>

<script>
import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue'
var xBlufi = require("@/components/blufi/xBlufi.js")
export default {
	components: { TabBar },
	data() {
		return {
			bgc: {
				backgroundColor: "#FFFFFF",
			},
			sn: '',
			areaId: '',
			areaInfo: {},
			list: [],
			show: false,
			info: {},
			userinfo: {},
			deptId: null,
			menuList: [],
			searchKey: '',
			displayList: [], // 用于显示的列表
			gonggaoxq:{},
			gonggaoflag:false,
			announcements: {},
			yyqid:'',
			userId:'',
			fuwuewm:false,
			weinum:0,
			areaname:'',
			yunyingobj:{},
			kstime:'',
			jstime:'',
		}
	},
	onLoad(option) {
		this.yyqid = option.id
		wx.openBluetoothAdapter({
		  success: function (res) {
		    console.log('蓝牙适配器初始化成功')
			xBlufi.initXBlufi(1)
		  },
		  fail: function (err) {
		    console.error('蓝牙适配器初始化失败，可能是因为没有权限', err)
		  }
		})
	},
	onShow() {
		this.$store.dispatch('jiance');
		this.getCurrentDate(0)
		this.getgonggao()
		this.getareaList()
		this.deptId = uni.getStorageSync('deptId')
		if (uni.getStorageSync('adminAreaid')) {
			this.areaId = uni.getStorageSync('adminAreaid')
			console.log(this.areaId);
			// this.getArea()
			this.getinfo()
			this.getweicl()
		}
		if (uni.getStorageSync('adminname')) {
			this.areaname = uni.getStorageSync('adminname')
		}
	},
	computed: {
		// 添加过滤后的列表计算属性
		filteredList() {
			if (!this.searchKey) return this.list
			return this.list.filter(item =>
				item.label.toLowerCase().includes(this.searchKey.toLowerCase())
			)
		}
	},
	methods: {
		// 点击配置语音
		btnyy(){
			uni.navigateTo({
				url:'/page_shanghu/gongzuotai/yuyin/index?areaId=' + this.areaId
			})
		},
		// 点击查看运营状况
		btnchakan(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/yunying'
			})
		},
		// 请求全部运营统计数据
		gettongji() {
		    let StatKeys = 'order_actual_amount,order_count,order_end_status_count,order_status_count,bonus_actual_amount,order_ridding_fee,order_deduction_fee,order_dispatch_fee,order_manage_fee,order_refund_amount'
		    this.$u.get(`/dashboard/revenueStat?keys=${StatKeys}&dateRange=${this.kstime + ',' + this.jstime}&userId=${this.userinfo.userId}&areaId=${this.areaId}`).then(res => {
		        if (res.code == 200) {
		            this.yunyingobj = res.data
		        }
		    })
		}, 
		// 一开始就获取当前年月日
		getCurrentDate(num) {
		    const currentDate = new Date()
		    const year = currentDate.getFullYear()
		    const month = currentDate.getMonth() + 1
		    const day = currentDate.getDate()
		    const formatDate = (year, month, day) => {
		        const formattedMonth = month < 10 ? `0${month}` : month
		        const formattedDay = day < 10 ? `0${day}` : day
		        return `${year}-${formattedMonth}-${formattedDay}`
		    }
		    const getFirstDayOfMonth = (year, month) => {
		        return new Date(year, month - 1, 1)
		    }
		    const getLastDayOfMonth = (year, month) => {
		        return new Date(year, month, 0)
		    }
		    switch (num) {
		        case 0:
		            this.kstime = formatDate(year, month, day)
		            this.jstime = formatDate(year, month, day)
		            break
		    }
		},
		// 点击切换运营区
		btnqh(){
			this.show = true
		},
		// 点击菜单图标
		handleMenuClick(){
			// 可以在这里添加菜单功能，比如显示更多选项
			uni.showToast({
				title: '功能开发中',
				icon: 'none',
				duration: 2000
			})
		},
		getareaList() {
			this.$u.get('/bst/area/list?pageNunm=1&pageSize=9999').then((res) => {
				if (res.code == 200) {
					this.list = res.rows.map(item => ({
						value: item.id,
						label: item.name,
						deptName: item.userName
					}))
					this.displayList = this.list; // 重置显示列表
				}
			})
		},
		// 点击跳转到调度记录
		btndiaodujl(){
			uni.navigateTo({
				url:'/page_shanghu/gongzuotai/diaodujl?areaId=' + this.areaId
			})
		},
		// 点击跳转到换电工单
		btnyunwei(){
			uni.navigateTo({
				url:'/page_shanghu/yunwei/index?areaId=' + this.areaId
			})
		},
		// 点击生成二维码
		btnewm(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/Qrcode?areaId=' + this.areaId + '&type=1'
			})
		},
		// 查询商户未处理订单
		getweicl(){
			this.$u.get(`/dashboard/complaint/statusMap?areaId=${this.areaId}`).then(res => {
			    if (res.code== 200) {
			        const key = "1";
			        this.weinum = res.data[key]
			    }
			})
		},
		// 点击绑定服务号
		btnfuwuewm(){
			let that = this
			wx.login({
				success(res) {
					if (res.code) {
						that.$u.put(`/app/user/bindUnionId?jsCode=${res.code}`).then((res) => {
							if (res.code == 200) {
							    that.fuwuewm = true
							}else{
								uni.showModal({
									title: '提示',
									content: res.msg,
									showCancel:false,
								})
							}
						})
					}
				},
			})
		},
		// 点击跳转到投诉列表
		btnts(){
			uni.navigateTo({
				url:'/page_fenbao/tousu/shlist?areaId='+this.areaId
			})
		},
		// 点击跳转到会员列表
		btnhy(){
			uni.navigateTo({
				url:'/page_fenbao/huiyuan/huiyuanlist?areaId='+this.areaId
			})
		},
		// 点击进入视频教程
		btnsp(){
			uni.navigateTo({
				url:'/page_user/shiping/index'
			})
		},
		// 点击跳转到运维人员
		btnywry(){
			uni.navigateTo({
				url:'/page_fenbao/yunwei/index?areaId=' + this.areaId
			})
		},
		// 点击跳转到电子围栏
		toMap(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/msp_set?areaId='+this.areaId
			})
		},
		// 点击跳转客服
		btnkefu(){
			uni.navigateTo({
				url:'/page_user/shanghugl/ggsz?id=' + this.areaId
			})
		},
		// 点击跳转公告协议
		btnggsz(){
			uni.navigateTo({
				url:'/page_shanghu/gonggaolist?areaId=' + this.areaId
			})
		},
		// 点击跳转到电子发票列表
		btnInvoice(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/invoice_list?userId=' + this.userinfo.userId
			})
		},
		// 点击跳转到推广列表
		btntuiguang(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/tuiguang_list?areaId=' + this.areaId
			})
		},
		// // 点击跳转免责协议
		// btnmz(){
		// 	uni.navigateTo({
		// 		url:'/page_user/shanghugl/mianze'
		// 	})
		// },
		// // 点击跳转公告管理
		// btngggl(){
		// 	uni.navigateTo({
		// 		url:'/page_user/shanghugl/index'
		// 	})
		// },
		// 点击跳转到收款账户
		btnskzh(){
			if(this.userinfo.isReal == true){
				uni.navigateTo({
					url:'/page_user/shoukuan/index'
				})
			}else{
				uni.showModal({
					title: '提示',
					content: '您还未通过实名认证，是否前往？',
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url:'/page_user/shiming'
							})
						} else if (res.cancel) {
						    console.log('取消'); // 用户点击取消
						}
					}
				})
			}
		},
		// 点击跳转到还车审核
		btnreturnbike(){
			uni.navigateTo({
				url:'/page_user/returnbike?areaId=' + this.areaId
			})
		},
		// 点击头部滚动通知
		btntopgg(){
			uni.navigateTo({
				url:'/page_user/guzhang/gonggaolist'
			})
			// if(this.announcements.content){
			// 	this.gonggaoflag = true
			// }
		},
		// 点击公告我知道了
		btnggtc(){
			this.gonggaoflag = false
			uni.setStorageSync('noticeIds', this.announcements.id)
		},
		// 获取最新公告
		getgonggao(){
			this.$u.get(`/app/article/first?code=MCH_NOTICE&appId=${this.$store.state.appid}`).then(res =>{
				if(res.code == 200){
					this.announcements = res.data
					if(res.data.id != uni.getStorageSync('noticeIds')){
						this.gonggaoflag = true
					}
				}
			})
		},
		// 点击提示功能完善中
		btnjs(){
			uni.showToast({
				title: '功能完善中',
				icon: 'none',
				duration: 2000
			})
		},
		// 点击跳转到加盟伙伴
		btnjm(){
			uni.navigateTo({
				url:'/page_fenbao/jiameng/index?areaId=' + this.areaId
			})
		},
		handleSearch(e) {
			const value = e.detail.value
			if (!value) {
				// 搜索框为空时显示全部数据
				this.displayList = this.list
			} else {
				// 有搜索内容时过滤数据
				this.displayList = this.list.filter(item => {
				  const label = String(item.label || '').toLowerCase();
				  const deptName = String(item.deptName || '').toLowerCase();
				  const searchValue = String(value || '').toLowerCase();
				  return label.includes(searchValue) || deptName.includes(searchValue);
				});
			}
		},
		selectItem(item) {
			this.confirm([item])
			this.show = false
			this.searchKey = '' // 选择后清空搜索框
			this.displayList = this.list // 重置显示列表
			this.gettongji()
		},
		getinfo() {
			this.$u.get("/getInfo").then((res) => {
				if (res.code == 200) {
					this.userinfo = res.user
					this.gettongji()
				} 
			})
		},
		shows() {
			if (this.list.length < 2) {

			} else {
				this.show = true
			}
		},
		confirm(e) {
			console.log(e);
			uni.setStorageSync('adminAreaid', e[0].value)
			uni.setStorageSync('adminname', e[0].label)
			this.areaname = e[0].label
			this.areaId = e[0].value
			this.getArea()
		},
		getArea() {
			let id = this.areaId
			this.$u.get(`/bst/area/${id}`).then((res) => {
				if (res.code == 200) {
					this.areaInfo = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
				}
			})
		},
		topage(num) {
			if (num == 0) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/worke_Operation'
				})
			} else if (num == 1) {
				uni.navigateTo({
					url: '/pages_admin/worke/worke_income'
				})
			} else if (num == 2) { //设备管理
			    uni.reLaunch({
			    	url:'/page_shanghu/qbcheliang'
			    })
				// uni.navigateTo({
				// 	url: '/page_shanghu/gongzuotai/woke_deviceMgmt'
				// })
			} else if (num == 3) {
				uni.navigateTo({
					url: '/pages_admin/worke/worke_user'
				})
			} else if (num == 4) { //用户页面
				uni.switchTab({
					url: '/pages/my'
				})
			} else if (num == 5) {
				uni.navigateTo({
					url: '/pages_admin/worke/bind_sn'
				})
			} else if (num == 6) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/AccountDetails'
				})
			} else if (num == 7) { //故障审核
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/shgl?areaId=' + this.areaId
				})
			} else if (num == 8) {
				uni.navigateTo({
					url: '/pages_adminSet/financialStatement'
				})
			} else if (num == 9) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/CarModel?userId=' + this.userinfo.userId
				})
			} else if (num == 10) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/ChargingTemplate'
				})
			} else if (num == 11) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/sysSet'
				})
			} else if (num == 12) { //区域设置
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/ParkIngList'
				})
			}
		},
		// 点击跳转到卡券配额
		btnkjpw(){
			uni.navigateTo({
				url:'/page_shanghu/guanli/kajuan_peie_list?areaId=' + this.areaId
			})
		}
	}
}
</script>

<style lang="scss">
	.newtit{
		font-weight: 600;
		font-size: 36rpx;
		color: #3D3D3D;
		margin-top: 28rpx;
		padding-left: 22rpx;
	}
	.newtop{
		width: 718rpx;
		height: 214rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin: auto;
		margin-top: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 38rpx;
		view{
			width: 120rpx;
			text-align: center;
			image{
				width: 94rpx;
				height: 92rpx;
			}
			text{
				display: block;
				font-size: 26rpx;
				color: #3D3D3D;
				margin-top: 14rpx;
			}
		}
	}
	.leiji{
		width: 718rpx;
		height: 178rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 38rpx 44rpx;
		box-sizing: border-box;
		margin: auto;
		.li{
			text-align: center;
			.top{
				font-weight: 600;
				font-size: 40rpx;
				color: #3D3D3D;
				margin-top: 12rpx;
			}
			.bot{
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #AFAFAF;
			}
		}
	}
	.fuwuewm{
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		image{
			width: 600rpx;
			height: 600rpx;
		}
		view{
			width: 200rpx;
			height: 70rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 70rpx;
			margin: auto;
			margin-top: 50rpx;
			border-radius: 10rpx;
		}
	}
	.fuwuhao{
		width: 100%;
		text-align: center;
		text-underline-offset: 4px;
		margin-top: 30rpx;
		color: #4297F3;
		padding-left: 50rpx;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		text-decoration: underline;
		text-decoration-color: #4297F3;
		text-decoration-thickness: 1px;
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 9;
	}
	.gonggao{
		width: 718rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		margin: auto;
		margin-top: 30rpx;
		padding: 0 32rpx;
	}
	.container {
	  width: 560rpx;
	  height: 60rpx; /* 根据需要调整高度 */
	  display: flex;
	  align-items: center;
	  margin: auto;
	  overflow: hidden;
	  position: relative;
	  color: #373737;
	  box-sizing: border-box;
	}
	.scroll-text {
	  width: 100%;
	  overflow: hidden;
	  box-sizing: border-box;
	  display: inline-block;
	  white-space: nowrap;
	  animation: scroll 8s linear infinite;
	}
	.scroll-item {
	  display: inline-block;
	  padding: 0 10px;
	  font-size: 16px;
	}
	@keyframes scroll {
	  0% {
	    transform: translateX(100%);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}
	.noticetc{
		width: 680rpx;
		height: 80vh;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		// top: 340rpx;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 10;
		.btn{
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			margin: auto;
			margin-top: 30rpx;
		}
		.name{
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 30rpx;
		}
		.biaoti{
			font-size: 32rpx;
			margin-top: 20rpx;
		}
		.cont{
			width: 100%;
			height: 620rpx;
			overflow: scroll;
			background-color: #ececec;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
	
page {
	
}
.bj{

}
.custom-select {
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}
	.select-content {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 1000;
		height: 50vh; // 最大高度
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
		.select-header {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
			.close {
				font-size: 40rpx;
				color: #999;
			}
		}
		.search-box {
			padding: 15rpx 20rpx;
			border-bottom: 1px solid #eee;
			input {
				width: 100%;
				height: 60rpx;
				background: #f5f5f5;
				border-radius: 30rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
			}
		}
		.select-list {
			flex: 1;
			max-height: calc(50vh - 140rpx);
			min-height: 260rpx; // 为列表添加最小高度
			.select-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #eee;
				font-size: 28rpx;
				&.highlight {
					background-color: #f0f9ff;
					color: #2d8cf0;
				}
				&:active {
					background: #f5f5f5;
				}
			}
		}
	}
}
.page {
	width: 750rpx;
	background: linear-gradient( 180deg, #4886F1 0%, #F7F7F7 60%);
	overflow: scroll;
	height: 91vh;
	.toptit {
		display: flex;
		align-items: center;
		margin-top: 114rpx;
		margin-left: 22rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.cont_box {
		padding: 46rpx 50rpx;
		margin: 30rpx auto;
		width: 680rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		height: 72vh;
		overflow: scroll;
		padding-bottom: 200rpx;
		.top {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			margin-top: 40rpx;
			font-weight: 600;
			image {
				margin-right: 16rpx;
				width: 32rpx;
				height: 32rpx;
			}
			font-size: 32rpx;
			color: #3D3D3D;

		}
		.app_box {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.cont:nth-child(4n) {
				margin-right: 0;
			}
			.cont {
				margin-right: 60rpx;
				margin-top: 20rpx;
				width: 96rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				image {
					width: 80rpx;
					height: 80rpx;
				}
				.text {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}
		}
	}
}
</style>