<template>
	<view class="page">
		<!-- 自定义导航栏 -->
		<custom-navbar title="绿纤协同平台" :show-background="false" titleColor="#1f2937"
			@height-change="handleNavbarHeightChange" backgroundColor="#fff"></custom-navbar>
		<view class="warpbox">

			<!-- <view :style="{ 'height': contentTopMargin }"></view> -->

			<!-- 设置按钮组 -->
			<view class="setting-btn-container">
				<view class="setting-btn" @click="openSettingMode" v-if="!isSettingMode">
					<u-icon name="setting" size="20" color="#fff"></u-icon>
					<!-- <text>常用功能</text> -->
				</view>
				<view class="setting-action-btns" v-if="isSettingMode">
					<view class="setting-action-btn-small cancel-btn" @click="cancelSetting">取消</view>
					<view class="setting-action-btn-small confirm-btn" @click="confirmSetting">确定</view>
				</view>
			</view>

			<!-- 常用功能区 -->
			<view class="warpboxss common-func-area"
				v-if="commonFunctions.length > 0 || isSettingMode || tempCommonFunctions.length > 0">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>常用功能</view>
				</view>
				<view class="common-func-row" v-if="!isSettingMode">
					<view v-for="(item, index) in commonFunctions" :key="index" class="common-func-btn"
						@click="goToPage(item.url)">
						<view class="common-func-icon" :class="item.iconClass">
							<image :src="item.icon" mode="heightFix"></image>
						</view>
						<view class="common-func-text">{{ item.text }}</view>
					</view>
				</view>
				<!-- 设置模式下的常用功能 -->
				<view class="common-func-row" v-if="isSettingMode">
					<view v-for="(item, index) in tempCommonFunctions" :key="index"
						class="common-func-btn setting-mode-btn" @click="toggleCommonFunction(item)">
						<view class="common-func-icon" :class="item.iconClass">
							<image :src="item.icon" mode="heightFix"></image>
							<view class="action-badge remove-badge">-</view>
						</view>
						<view class="common-func-text">{{ item.text }}</view>
					</view>
				</view>
			</view>

			<!-- 动态渲染所有板块 -->
			<view v-for="(section, sectionIndex) in getAllSections()" :key="section.id || sectionIndex"
				class="warpboxss" :style="section.fullName === '业务操作' ? 'box-shadow:none;' : ''">
				<view class="warpboxs-small-title" :style="isSectionShow(section.id) ? 'padding-bottom: 30rpx;' : ''"
					@click="toggleSection(section.id)">
					<view><text class="warpboxs-small-title-line"></text>{{ section.fullName }}</view>
					<view class="warpboxs-small-title-img">
						<u-icon name="arrow-down" size="20" color="#666"
							:style="isSectionShow(section.id) ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
					</view>
				</view>
				<view v-show="isSectionShow(section.id)">
					<view :class="section.fullName === '会员管理' ? 'mgmt-row' : (section.fullName === '记录查询' ? 'bottom-row' : 'fun_box_fir')">
						<view v-for="(item, index) in section.children" :key="item.id || index"
							:class="section.fullName === '会员管理' ? 'mgmt-btn' : (section.fullName === '记录查询' ? 'bottom-btn' : 'fun_fir_1 fun_fir_border')"
							@click="isSettingMode ? toggleCommonFunction({ text: item.fullName, url: item.url, icon: item.icon, iconClass: item.iconClass }) : goToPage(item.url)">
							<view :class="[section.fullName === '会员管理' ? 'mgmt-icon' : (section.fullName === '记录查询' ? 'bottom-icon' : 'icon'), item.iconClass]">
								<image v-if="item.icon" :src="item.icon" mode="heightFix"></image>
								<view class="action-badge add-badge"
									v-if="isSettingMode && item.url && !isInCommonFunctions(item.url)">+</view>
							</view>
							<view :class="section.fullName === '会员管理' ? 'mgmt-text' : (section.fullName === '记录查询' ? 'bottom-text' : '')">{{ item.fullName }}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 140rpx;"></view>
			<!-- 自定义 tabBar -->
			<custom-tab-bar />
		</view>

	</view>
</template>

<script>
	import CustomTabBar from '@/components/custom-tab-bar/index.vue'
	import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'

	export default {
		components: {
			CustomTabBar,
			CustomNavbar
		},
		data() {
			return {
				navbarHeightRpx: 0,
				sectionShowStates: {}, // 分组展开状态，key为分组ID或fullName
				newuserInfo: {},
				userInfo: {},
				isSettingMode: false, // 是否处于设置模式
				commonFunctions: [], // 常用功能列表
				tempCommonFunctions: [], // 临时常用功能列表（设置模式下使用）
				menuData: [], // 从 API 获取的菜单数据
				menuSections: {}, // 解析后的菜单分组数据
				features: [{
						text: '开单',
						url: '/pagesA/lx/lx',
						icon: '/static/home/order.png',
						iconClass: 'icon-circle-bg-1',
						theme: {
							h: 210,
							s: 45,
							l: 62
						}
					},
					{
						text: '活动开单',
						url: '/pagesA/lx/lx?type=1',
						icon: '/static/home/activity-order.png',
						iconClass: 'icon-circle-bg-3',
						theme: {
							h: 0,
							s: 45,
							l: 62
						}
					},
					{
						text: '耗卡',
						url: '/pagesA/member-consume/member-consume',
						icon: '/static/home/consume-card.png',
						iconClass: 'icon-circle-bg-2',
						theme: {
							h: 140,
							s: 45,
							l: 50
						}
					},
					{
						text: '退卡',
						url: '/pagesA/refund/refund',
						icon: '/static/home/refund-card.png',
						iconClass: 'icon-circle-bg-4',
						theme: {
							h: 186,
							s: 45,
							l: 50
						}
					},
					{
						text: '转卡',
						url: '/pages/transferCard/transferCard',
						icon: '/static/home/transfer-card.png',
						iconClass: 'icon-circle-bg-5',
						theme: {
							h: 30,
							s: 50,
							l: 55
						}
					},
					{
						text: '建档',
						url: '/pages/member-create/member-create',
						icon: '/static/home/create-member.png',
						iconClass: 'icon-circle-bg-6',
						theme: {
							h: 286,
							s: 40,
							l: 60
						}
					},
					{
						text: '拓客',
						url: '/pages/expansion/expansion',
						icon: '/static/home/expansion.png',
						iconClass: 'icon-circle-bg-7',
						theme: {
							h: 330,
							s: 40,
							l: 60
						}
					},
					{
						text: '鼎轩开单',
						url: '/pagesA/lx/lx?time=2025-10-01',
						icon: '/static/home/dingxuan-order.png',
						iconClass: 'icon-circle-bg-8',
						theme: {
							h: 48,
							s: 45,
							l: 58
						}
					},
					{
						text: '会员',
						url: '/pages/clue-list/clue-list',
						icon: '/static/home/member.png',
						iconClass: 'icon-circle-bg-9',
						theme: {
							h: 217,
							s: 45,
							l: 55
						}
					},
					{
						text: '物品购买',
						url: '/pages/purchase-list/purchase-list',
						icon: '/static/home/purchase.png',
						iconClass: 'icon-circle-bg-10',
						theme: {
							h: 130,
							s: 45,
							l: 52
						}
					},
					{
						text: '报销审核',
						url: '/pages/reimbursement-audit-list/reimbursement-audit-list',
						icon: '/static/home/reimbursement-audit.png',
						iconClass: 'icon-circle-bg-11',
						theme: {
							h: 355,
							s: 45,
							l: 55
						}
					},
					{
						text: '报销申请',
						url: '/pages/reimbursement-list/reimbursement-list',
						icon: '/static/home/reimbursement-apply.png',
						iconClass: 'icon-circle-bg-12',
						theme: {
							h: 190,
							s: 45,
							l: 52
						}
					},
					{
						text: '使用记录',
						url: '/pages/usage-list/usage-list',
						icon: '/static/home/usage-record.png',
						iconClass: 'icon-circle-bg-13',
						theme: {
							h: 32,
							s: 45,
							l: 55
						}
					},
					{
						text: '毛巾记录',
						url: '/pages/laundry-flow-list/laundry-flow-list',
						icon: '/static/home/towel-record.png',
						iconClass: 'icon-circle-bg-14',
						theme: {
							h: 277,
							s: 40,
							l: 52
						}
					},
					{
						text: '门店管理',
						url: '/pages/store-list/store-list',
						icon: '/static/home/store-management.png',
						iconClass: 'icon-circle-bg-15',
						theme: {
							h: 330,
							s: 40,
							l: 55
						}
					},
					{
						text: 'AI问答',
						url: '/pages/web/web',
						icon: '/static/home/ai-qa.png',
						iconClass: 'icon-circle-bg-16',
						theme: {
							h: 50,
							s: 45,
							l: 58
						}
					},
					{
						text: '日志',
						url: '/pages/log/log',
						icon: '/static/home/report.png',
						iconClass: 'icon-circle-bg-log',
						theme: {
							h: 200,
							s: 15,
							l: 45
						}
					},
					{
						text: '报表',
						url: '/pagesA/dailyReport/dailyReport',
						icon: '/static/home/report.png',
						iconClass: 'icon-circle-bg-report-1',
						theme: {
							h: 24,
							s: 20,
							l: 50
						}
					}
				]
			}
		},
		computed: {
			// 内容区域顶部间距
			contentTopMargin() {
				const info = uni.getSystemInfoSync()
				const pxToRpx = 750 / info.windowWidth
				const safeSpacingPx = 20
				const safeSpacingRpx = Math.ceil(safeSpacingPx * pxToRpx)
				if (this.navbarHeightRpx > 0) {
					return (this.navbarHeightRpx + safeSpacingRpx) + 'rpx'
				}
				return (100 + safeSpacingRpx) + 'rpx'
			},
			iskjb() {
				if (this.newuserInfo.gw == '科技老师') {
					return false
				}
				return true
			},
			// 根据用户权限显示报表按钮
			showReport() {
				if (!this.userInfo || !this.userInfo.userAccount) return false
				const adminAccounts = ['admin', '13198568627', '18884847552', '13608016021', '18628973287']
				return adminAccounts.includes(this.userInfo.userAccount)
			}
		},
		onLoad() {
			this.checkLoginStatus()
			this.init()
		},
		onShow() {
			// 每次显示时更新用户信息
			this.userInfo = uni.getStorageSync('userInfo')
			this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
			// 加载常用功能
			this.loadCommonFunctions()
			// 重新加载菜单数据
			this.loadMenuData()
		},
		methods: {
			// 加载菜单数据
			loadMenuData() {
				// 先从本地存储读取
				const cachedData = uni.getStorageSync('appMenuData')
				if (cachedData && Array.isArray(cachedData) && cachedData.length > 0) {
					this.menuData = cachedData
					this.parseMenuData()
					return
				}

				// 如果本地没有，则调用 API
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || !userInfo.userId) {
					return
				}

				this.API.getAppAuthorize().then(res => {
					if (res.code === 200 && res.data) {
						this.menuData = res.data
						uni.setStorageSync('appMenuData', res.data)
						this.parseMenuData()
					}
				}).catch(err => {
					console.error('获取菜单数据失败:', err)
				})
			},

			// 解析菜单数据
			parseMenuData() {
				if (!this.menuData || this.menuData.length === 0) {
					return
				}

				// 找到根节点（fullName 为 "app首页" 的节点）
				const rootNode = this.menuData.find(item => item.fullName === 'app首页')
				if (!rootNode || !rootNode.children) {
					return
				}

				// 解析每个分组
				this.menuSections = {}
				rootNode.children.forEach(section => {
					if (section.children && section.children.length > 0) {
						this.menuSections[section.id] = {
							id: section.id,
							fullName: section.fullName,
							children: section.children.map(item => {
								// 解析 description 字段
								const {
									icon,
									iconClass
								} = this.parseDescription(item.description || '')
								// 获取 URL
								const url = this.getUrlByFullName(item.fullName)

								return {
									id: item.id,
									fullName: item.fullName,
									icon: icon,
									iconClass: iconClass,
									url: url,
									sortCode: item.sortCode || 0
								}
							}).sort((a, b) => a.sortCode - b.sortCode) // 按 sortCode 排序
						}
						// 初始化分组展开状态，默认为展开
						if (!this.sectionShowStates.hasOwnProperty(section.id)) {
							this.$set(this.sectionShowStates, section.id, true)
						}
					}
				})
			},

			// 解析 description 字段，格式：图片路径,背景类名
			parseDescription(description) {
				if (!description) {
					return {
						icon: '',
						iconClass: ''
					}
				}

				const parts = description.split(',')
				const icon = parts[0] || ''
				const iconClass = parts[1] || ''

				return {
					icon: icon.trim(),
					iconClass: iconClass.trim()
				}
			},

			// 根据 fullName 获取对应的 URL
			getUrlByFullName(fullName) {
				const urlMap = {
					'开单': '/pagesA/lx/lx',
					'活动开单': '/pagesA/lx/lx?type=1',
					'耗卡': '/pagesA/member-consume/member-consume',
					'退卡': '/pagesA/refund/refund',
					'转卡': '/pages/transferCard/transferCard',
					'鼎轩开单': '/pagesA/lx/lx?time=2025-10-01',
					'会员': '/pages/clue-list/clue-list',
					'建档': '/pages/member-create/member-create',
					'拓客': '/pages/expansion/expansion',
					'物品购买': '/pages/purchase-list/purchase-list',
					'报销申请': '/pages/reimbursement-list/reimbursement-list',
					'报销审核': '/pages/reimbursement-audit-list/reimbursement-audit-list',
					'使用记录': '/pages/usage-list/usage-list',
					'毛巾记录': '/pages/laundry-flow-list/laundry-flow-list',
					'门店管理': '/pages/store-list/store-list',
					'AI问答': '/pages/web/web',
					'日报': '/pages/log/log'
				}

				return urlMap[fullName] || ''
			},

			// 根据分组名称获取分组数据
			getSectionByFullName(fullName) {
				if (!this.menuData || this.menuData.length === 0) {
					return null
				}

				const rootNode = this.menuData.find(item => item.fullName === 'app首页')
				if (!rootNode || !rootNode.children) {
					return null
				}

				const section = rootNode.children.find(item => item.fullName === fullName)
				if (!section || !section.children) {
					return null
				}

				return section.children.map(item => {
					const {
						icon,
						iconClass
					} = this.parseDescription(item.description || '')
					const url = this.getUrlByFullName(item.fullName)

					return {
						id: item.id,
						fullName: item.fullName,
						icon: icon,
						iconClass: iconClass,
						url: url,
						sortCode: item.sortCode || 0
					}
				}).sort((a, b) => a.sortCode - b.sortCode)
			},

			// 获取所有分组列表
			getAllSections() {
				if (!this.menuData || this.menuData.length === 0) {
					return []
				}

				const rootNode = this.menuData.find(item => item.fullName === 'app首页')
				if (!rootNode || !rootNode.children) {
					return []
				}

				return rootNode.children
					.filter(section => section.children && section.children.length > 0)
					.map(section => ({
						id: section.id,
						fullName: section.fullName,
						children: this.getSectionByFullName(section.fullName)
					}))
			},

			// 切换分组展开/收起状态
			toggleSection(sectionId) {
				this.$set(this.sectionShowStates, sectionId, !this.sectionShowStates[sectionId])
			},

			// 获取分组展开状态
			isSectionShow(sectionId) {
				return this.sectionShowStates[sectionId] !== false
			},

		// 根据分组名称获取对应的样式类
		sectionRowClass(fullName) {
			const classMap = {
				'业务操作': 'fun_box_fir',
				'会员管理': 'mgmt-row',
				'采购报销': 'fun_box_fir',
				'记录查询': 'bottom-row',
				'其他': 'fun_box_fir'
			}
			return classMap[fullName] || 'fun_box_fir'
		},
		
		// 根据分组名称获取对应的按钮样式类
		sectionBtnClass(fullName) {
			const classMap = {
				'业务操作': 'fun_fir_1 fun_fir_border',
				'会员管理': 'mgmt-btn',
				'采购报销': 'fun_fir_1 fun_fir_border',
				'记录查询': 'bottom-btn',
				'其他': 'fun_fir_1 fun_fir_border'
			}
			return classMap[fullName] || 'fun_fir_1 fun_fir_border'
		},
		
		// 根据分组名称获取对应的图标容器样式类
		sectionIconClass(fullName) {
			const classMap = {
				'业务操作': 'icon',
				'会员管理': 'mgmt-icon',
				'采购报销': 'icon',
				'记录查询': 'bottom-icon',
				'其他': 'icon'
			}
			return classMap[fullName] || 'icon'
		},
		
		// 根据分组名称获取对应的文本样式类
		sectionTextClass(fullName) {
			const classMap = {
				'业务操作': '',
				'会员管理': 'mgmt-text',
				'采购报销': '',
				'记录查询': 'bottom-text',
				'其他': ''
			}
			return classMap[fullName] || ''
		},

			// 检查菜单项是否应该显示（权限控制）
			shouldShowMenuItem(item, sectionFullName) {
				// 移除所有权限校验，直接返回 true
				return true
			},

			// 初始化
			init() {
				this.userInfo = uni.getStorageSync('userInfo')
				if (!this.userInfo || !this.userInfo.userId) {
					return
				}
				// 获取用户信息
				this.API.getUsers(this.userInfo.userId).then(res => {
					if (res.code === 200) {
						this.newuserInfo = res.data
						if (this.newuserInfo.enabledMark != '1') {
							uni.showToast({
								title: '您的账号已被禁用',
								icon: 'none'
							})
							// 清除本地存储
							uni.clearStorageSync()
							// 跳转到登录页
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 1500)
						} else {
							uni.setStorageSync('newuserInfo', this.newuserInfo)
							// 加载常用功能
							this.loadCommonFunctions()
						}
					}
				})
			},

			// 加载常用功能
			loadCommonFunctions() {
				try {
					const saved = uni.getStorageSync('commonFunctions')
					if (saved && Array.isArray(saved)) {
						this.commonFunctions = saved
					} else {
						// 如果没有缓存，使用默认的常用功能
						// this.commonFunctions = [{
						// 		text: '开单',
						// 		url: '/pagesA/lx/lx',
						// 		icon: '/static/home/order.png',
						// 		iconClass: 'icon-circle-bg-1'
						// 	},
						// 	{
						// 		text: '耗卡',
						// 		url: '/pagesA/member-consume/member-consume',
						// 		icon: '/static/home/consume-card.png',
						// 		iconClass: 'icon-circle-bg-2'
						// 	},
						// 	{
						// 		text: '退卡',
						// 		url: '/pagesA/refund/refund',
						// 		icon: '/static/home/refund-card.png',
						// 		iconClass: 'icon-circle-bg-4'
						// 	},
						// 	{
						// 		text: '拓客',
						// 		url: '/pages/expansion/expansion',
						// 		icon: '/static/home/expansion.png',
						// 		iconClass: 'icon-circle-bg-7'
						// 	}
						// ]
						this.saveCommonFunctions()
					}
				} catch (e) {
					console.error('加载常用功能失败:', e)
				}
			},
			// 保存常用功能到缓存
			saveCommonFunctions() {
				try {
					uni.setStorageSync('commonFunctions', this.commonFunctions)
				} catch (e) {
					console.error('保存常用功能失败:', e)
				}
			},
			// 打开设置模式
			openSettingMode() {
				this.isSettingMode = true
				// 复制当前常用功能到临时列表
				this.tempCommonFunctions = JSON.parse(JSON.stringify(this.commonFunctions))
			},
			// 取消设置
			cancelSetting() {
				this.isSettingMode = false
				this.tempCommonFunctions = []
			},
			// 确认设置
			confirmSetting() {
				this.commonFunctions = JSON.parse(JSON.stringify(this.tempCommonFunctions))
				this.saveCommonFunctions()
				this.isSettingMode = false
				this.tempCommonFunctions = []
				uni.showToast({
					title: '设置成功',
					icon: 'success'
				})
			},
			// 切换常用功能（添加或移除）
			toggleCommonFunction(item) {
				if (!this.isSettingMode) return

				const index = this.tempCommonFunctions.findIndex(func => func.url === item.url)
				if (index > -1) {
					// 如果已存在，则移除
					this.tempCommonFunctions.splice(index, 1)
				} else {
					// 如果不存在，则添加（最多8个）
					if (this.tempCommonFunctions.length >= 8) {
						uni.showToast({
							title: '最多只能添加8个常用功能',
							icon: 'none'
						})
						return
					}
					this.tempCommonFunctions.push(JSON.parse(JSON.stringify(item)))
				}
			},
			// 检查是否在常用功能中
			isInCommonFunctions(url) {
				return this.tempCommonFunctions.some(func => func.url === url)
			},
			// 检查登录状态
			checkLoginStatus() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				} else {
					this.userInfo = uni.getStorageSync('userInfo')
				}
			},
			// 页面跳转
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 跳转到集团驾驶舱
			goToDashboard() {
				uni.navigateTo({
					url: '/pagesA/dashboard/dashboard',
					fail: (err) => {
						console.error('跳转失败:', err)
						uni.showToast({
							title: '页面未找到',
							icon: 'none'
						})
					}
				})
			},

			// 处理导航栏高度变化
			handleNavbarHeightChange(heightInfo) {
				this.navbarHeightRpx = heightInfo.rpx || 0
			},
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.API.logout().then(res => {
								if (res.code == 200) {
									// 清除本地存储
									uni.clearStorageSync()
									// 跳转到登录页
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: auto;
		overflow-y: scroll;
	}

	.hero {
		height: 60vh;
		min-height: 520rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 16rpx 0;
		box-sizing: border-box;
	}

	.hero-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fill, 280px);
		justify-content: center;
		gap: 15px;
		padding: 24rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 28rpx;
		backdrop-filter: saturate(180%) blur(18px);
		-webkit-backdrop-filter: saturate(180%) blur(18px);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		grid-auto-flow: dense;
	}

	.hero-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 200px;
		transition: transform 300ms ease, opacity 300ms ease;
	}

	.hero-item:active {
		transform: scale(0.97);
	}

	.hero-icon {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 14rpx;
	}

	.hero-icon image {
		width: 64rpx;
		height: 64rpx;
		filter: brightness(0) invert(1);
		transition: transform 300ms ease, opacity 300ms ease;
	}

	.hero-text {
		font-size: 28rpx;
		color: #0f172a;
	}

	.warpbox {
		position: relative;
		// z-index: 111;
		padding: 0 40rpx;
		top: 90rpx;
		/* #ifdef  MP-WEIXIN */
		top: 140rpx;
		/* #endif */
	}

	.warpboxss {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		padding: 30rpx;
		border-radius: 24rpx;
		box-shadow:
			0 8rpx 32rpx rgba(0, 0, 0, 0.08),
			0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 40rpx;

		.warpboxs-small-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #1f2937;

			.warpboxs-small-title-line {
				display: inline-block;
				background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%);
				height: 26rpx;
				width: 10rpx;
				margin-right: 12rpx;
				border-radius: 18rpx;
				box-shadow:
					0 2rpx 8rpx rgba(67, 160, 71, 0.4),
					0 0 12rpx rgba(67, 160, 71, 0.3),
					inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border-radius: 3rpx;
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
					pointer-events: none;
				}
			}

			.warpboxs-small-title-img {
				display: flex;
				align-items: center;
				transition: transform 0.3s ease;
			}
		}

		/* 常用功能区样式 */
		.common-func-row {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20rpx;
			align-items: stretch;
			margin-top: 30rpx;
		}

		.common-func-btn {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			opacity: 0.85;
			transition: opacity 0.2s ease;
			touch-action: manipulation;

			&:active {
				transform: translateY(-4rpx) scale(0.97);
			}

			/* #ifdef H5 */
			&:hover {
				opacity: 1;
			}

			/* #endif */
		}

		.setting-mode-btn {
			opacity: 0.7;
		}

		.common-func-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12rpx;
			position: relative;
			transition: all 0.3s ease;
			overflow: visible;

			image {
				width: 50rpx;
				height: 50rpx;
				position: relative;
				z-index: 3;
				filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
			}

			/* 主题色背景 - 渐变立体效果 */
			&.icon-circle-bg-1 {
				background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
				box-shadow:
					0 6rpx 20rpx rgba(30, 136, 229, 0.35),
					0 2rpx 8rpx rgba(30, 136, 229, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-2 {
				background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
				box-shadow:
					0 6rpx 20rpx rgba(67, 160, 71, 0.35),
					0 2rpx 8rpx rgba(67, 160, 71, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-3 {
				background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
				box-shadow:
					0 6rpx 20rpx rgba(211, 47, 47, 0.35),
					0 2rpx 8rpx rgba(211, 47, 47, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-4 {
				background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
				box-shadow:
					0 6rpx 20rpx rgba(0, 131, 143, 0.35),
					0 2rpx 8rpx rgba(0, 131, 143, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-5 {
				background: linear-gradient(135deg, #5E35B1 0%, #7E57C2 50%, #4527A0 100%);
				box-shadow:
					0 6rpx 20rpx rgba(94, 53, 177, 0.35),
					0 2rpx 8rpx rgba(94, 53, 177, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-6 {
				background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
				box-shadow:
					0 6rpx 20rpx rgba(123, 31, 162, 0.35),
					0 2rpx 8rpx rgba(123, 31, 162, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-7 {
				background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
				box-shadow:
					0 6rpx 20rpx rgba(194, 24, 91, 0.35),
					0 2rpx 8rpx rgba(194, 24, 91, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-8 {
				background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
				box-shadow:
					0 6rpx 20rpx rgba(249, 168, 37, 0.35),
					0 2rpx 8rpx rgba(249, 168, 37, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-9 {
				background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
				box-shadow:
					0 6rpx 20rpx rgba(25, 118, 210, 0.35),
					0 2rpx 8rpx rgba(25, 118, 210, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-10 {
				background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
				box-shadow:
					0 6rpx 20rpx rgba(56, 142, 60, 0.35),
					0 2rpx 8rpx rgba(56, 142, 60, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-11 {
				background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
				box-shadow:
					0 6rpx 20rpx rgba(183, 28, 28, 0.35),
					0 2rpx 8rpx rgba(183, 28, 28, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-12 {
				background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
				box-shadow:
					0 6rpx 20rpx rgba(0, 151, 167, 0.35),
					0 2rpx 8rpx rgba(0, 151, 167, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-13 {
				background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
				box-shadow:
					0 6rpx 20rpx rgba(230, 81, 0, 0.35),
					0 2rpx 8rpx rgba(230, 81, 0, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-14 {
				background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
				box-shadow:
					0 6rpx 20rpx rgba(106, 27, 154, 0.35),
					0 2rpx 8rpx rgba(106, 27, 154, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-15 {
				background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
				box-shadow:
					0 6rpx 20rpx rgba(173, 20, 87, 0.35),
					0 2rpx 8rpx rgba(173, 20, 87, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-16 {
				background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
				box-shadow:
					0 6rpx 20rpx rgba(251, 192, 45, 0.35),
					0 2rpx 8rpx rgba(251, 192, 45, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-17 {
				background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
				box-shadow:
					0 6rpx 20rpx rgba(93, 64, 55, 0.35),
					0 2rpx 8rpx rgba(93, 64, 55, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-18 {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%);
				box-shadow:
					0 6rpx 20rpx rgba(102, 126, 234, 0.35),
					0 2rpx 8rpx rgba(102, 126, 234, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			/* 报表相关按钮背景色优化 */
			&.icon-circle-bg-report-1 {
				background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
				box-shadow:
					0 6rpx 20rpx rgba(25, 118, 210, 0.35),
					0 2rpx 8rpx rgba(25, 118, 210, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-report-2 {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%);
				box-shadow:
					0 6rpx 20rpx rgba(102, 126, 234, 0.35),
					0 2rpx 8rpx rgba(102, 126, 234, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-report-3 {
				background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
				box-shadow:
					0 6rpx 20rpx rgba(0, 151, 167, 0.35),
					0 2rpx 8rpx rgba(0, 151, 167, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-report-4 {
				background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
				box-shadow:
					0 6rpx 20rpx rgba(123, 31, 162, 0.35),
					0 2rpx 8rpx rgba(123, 31, 162, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			&.icon-circle-bg-report-5 {
				background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
				box-shadow:
					0 6rpx 20rpx rgba(230, 81, 0, 0.35),
					0 2rpx 8rpx rgba(230, 81, 0, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			/* 日志按钮背景色 */
			&.icon-circle-bg-log {
				background: linear-gradient(135deg, #455A64 0%, #607D8B 50%, #37474F 100%);
				box-shadow:
					0 6rpx 20rpx rgba(69, 90, 100, 0.35),
					0 2rpx 8rpx rgba(69, 90, 100, 0.25),
					inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
					inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
			}
		}

		.common-func-text {
			font-size: 26rpx;
			color: #0f172a;
		}

	}

	/* 设置按钮容器 */
	.setting-btn-container {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 40rpx 0;
	}

	.setting-btn {
		padding: 10rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
		border-radius: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(67, 160, 71, 0.3);
		transition: all 0.3s ease;

		text {
			font-size: 26rpx;
			color: #fff;
			font-weight: 500;
		}

		&:active {
			transform: scale(0.95);
			box-shadow: 0 2rpx 8rpx rgba(67, 160, 71, 0.4);
		}
	}

	.setting-action-btns {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.setting-action-btn-small {
		padding: 8rpx 20rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		border-radius: 26rpx;
		font-size: 24rpx;
		font-weight: 500;
		transition: all 0.3s ease;
		white-space: nowrap;
		min-width: 80rpx;

		&.cancel-btn {
			background: rgba(255, 255, 255, 0.9);
			color: #666;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		}

		&.confirm-btn {
			background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
			color: #fff;
			box-shadow: 0 4rpx 12rpx rgba(67, 160, 71, 0.3);
		}

		&:active {
			transform: scale(0.95);
		}
	}

	/* 添加/取消符号样式 */
	.action-badge {
		position: absolute;
		top: -8rpx;
		left: -8rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		z-index: 10;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);

		&.add-badge {
			background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
		}

		&.remove-badge {
			background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
		}
	}

	.fun_box_fir {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		align-items: stretch;
		margin-top: 12rpx;

		.fun_fir_1 {
			background: transparent;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #0f172a;
			position: relative;
			transition: all 0.2s ease;
			box-sizing: border-box;
			padding: 8rpx 0;
			touch-action: manipulation;
			opacity: 0.8;

			&:active {
				transform: translateY(-4rpx) scale(0.97);
			}

			&:active .icon::after {
				transform: scale(1) rotate(180deg);
			}

			/* #ifdef H5 */
			&:hover {
				opacity: 1;
			}

			/* #endif */

			.icon {
				border-radius: 20rpx;
				width: 100rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 12rpx;
				position: relative;
				transition: all 0.3s ease;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border-radius: 20rpx;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
					opacity: 1;
					z-index: 1;
				}

				&::after {
					content: '';
					position: absolute;
					top: -50%;
					left: -50%;
					width: 200%;
					height: 200%;
					background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
					transition: transform 0.6s ease;
					transform: scale(0);
					z-index: 2;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin: 0 auto;
					vertical-align: middle;
					position: relative;
					z-index: 3;
					filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
					transition: transform 300ms ease, opacity 300ms ease;
				}

				/* 主题色 - 渐变立体效果 */
				&.icon-circle-bg-1 {
					background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
					box-shadow:
						0 6rpx 20rpx rgba(30, 136, 229, 0.35),
						0 2rpx 8rpx rgba(30, 136, 229, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-2 {
					background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
					box-shadow:
						0 6rpx 20rpx rgba(67, 160, 71, 0.35),
						0 2rpx 8rpx rgba(67, 160, 71, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-3 {
					background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
					box-shadow:
						0 6rpx 20rpx rgba(211, 47, 47, 0.35),
						0 2rpx 8rpx rgba(211, 47, 47, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-4 {
					background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
					box-shadow:
						0 6rpx 20rpx rgba(0, 131, 143, 0.35),
						0 2rpx 8rpx rgba(0, 131, 143, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-5 {
					background: linear-gradient(135deg, #5E35B1 0%, #7E57C2 50%, #4527A0 100%);
					box-shadow:
						0 6rpx 20rpx rgba(94, 53, 177, 0.35),
						0 2rpx 8rpx rgba(94, 53, 177, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-6 {
					background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
					box-shadow:
						0 6rpx 20rpx rgba(123, 31, 162, 0.35),
						0 2rpx 8rpx rgba(123, 31, 162, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-7 {
					background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
					box-shadow:
						0 6rpx 20rpx rgba(194, 24, 91, 0.35),
						0 2rpx 8rpx rgba(194, 24, 91, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-8 {
					background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
					box-shadow:
						0 6rpx 20rpx rgba(249, 168, 37, 0.35),
						0 2rpx 8rpx rgba(249, 168, 37, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-9 {
					background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
					box-shadow:
						0 6rpx 20rpx rgba(25, 118, 210, 0.35),
						0 2rpx 8rpx rgba(25, 118, 210, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-10 {
					background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
					box-shadow:
						0 6rpx 20rpx rgba(56, 142, 60, 0.35),
						0 2rpx 8rpx rgba(56, 142, 60, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-11 {
					background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
					box-shadow:
						0 6rpx 20rpx rgba(183, 28, 28, 0.35),
						0 2rpx 8rpx rgba(183, 28, 28, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-12 {
					background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
					box-shadow:
						0 6rpx 20rpx rgba(0, 151, 167, 0.35),
						0 2rpx 8rpx rgba(0, 151, 167, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-13 {
					background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
					box-shadow:
						0 6rpx 20rpx rgba(230, 81, 0, 0.35),
						0 2rpx 8rpx rgba(230, 81, 0, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-14 {
					background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
					box-shadow:
						0 6rpx 20rpx rgba(106, 27, 154, 0.35),
						0 2rpx 8rpx rgba(106, 27, 154, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-15 {
					background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
					box-shadow:
						0 6rpx 20rpx rgba(173, 20, 87, 0.35),
						0 2rpx 8rpx rgba(173, 20, 87, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-16 {
					background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
					box-shadow:
						0 6rpx 20rpx rgba(251, 192, 45, 0.35),
						0 2rpx 8rpx rgba(251, 192, 45, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-17 {
					background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
					box-shadow:
						0 6rpx 20rpx rgba(93, 64, 55, 0.35),
						0 2rpx 8rpx rgba(93, 64, 55, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				/* 报表相关按钮背景色优化 */
				&.icon-circle-bg-report-1 {
					background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
					box-shadow:
						0 6rpx 20rpx rgba(25, 118, 210, 0.35),
						0 2rpx 8rpx rgba(25, 118, 210, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-report-2 {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%);
					box-shadow:
						0 6rpx 20rpx rgba(102, 126, 234, 0.35),
						0 2rpx 8rpx rgba(102, 126, 234, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-report-3 {
					background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
					box-shadow:
						0 6rpx 20rpx rgba(0, 151, 167, 0.35),
						0 2rpx 8rpx rgba(0, 151, 167, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-report-4 {
					background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
					box-shadow:
						0 6rpx 20rpx rgba(123, 31, 162, 0.35),
						0 2rpx 8rpx rgba(123, 31, 162, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				&.icon-circle-bg-report-5 {
					background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
					box-shadow:
						0 6rpx 20rpx rgba(230, 81, 0, 0.35),
						0 2rpx 8rpx rgba(230, 81, 0, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				/* 日志按钮背景色 */
				&.icon-circle-bg-log {
					background: linear-gradient(135deg, #455A64 0%, #607D8B 50%, #37474F 100%);
					box-shadow:
						0 6rpx 20rpx rgba(69, 90, 100, 0.35),
						0 2rpx 8rpx rgba(69, 90, 100, 0.25),
						inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
				}
			}
		}

		.fun_fir_border {
			border: none;
		}
	}

	.mgmt-row {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		align-items: stretch;
		margin-top: 12rpx;
	}

	.mgmt-btn {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #0f172a;
		opacity: 0.8;
		transition: opacity 0.2s ease;
		touch-action: manipulation;

		&:active {
			transform: translateY(-4rpx) scale(0.97);
		}

		&:active .mgmt-icon::after {
			transform: scale(1) rotate(180deg);
		}

		/* #ifdef H5 */
		&:hover {
			opacity: 1;
		}

		/* #endif */
	}

	.mgmt-icon {
		border-radius: 20rpx;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
		position: relative;
		transition: all 0.3s ease;
		// overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 20rpx;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
			opacity: 1;
			z-index: 1;
		}

		&::after {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
			transition: transform 0.6s ease;
			transform: scale(0);
			z-index: 2;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			position: relative;
			z-index: 3;
			filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
		}

		/* 主题色背景 - 渐变立体效果 */
		&.icon-circle-bg-6 {
			background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
			box-shadow:
				0 6rpx 20rpx rgba(123, 31, 162, 0.35),
				0 2rpx 8rpx rgba(123, 31, 162, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-9 {
			background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
			box-shadow:
				0 6rpx 20rpx rgba(25, 118, 210, 0.35),
				0 2rpx 8rpx rgba(25, 118, 210, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-7 {
			background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
			box-shadow:
				0 6rpx 20rpx rgba(194, 24, 91, 0.35),
				0 2rpx 8rpx rgba(194, 24, 91, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-10 {
			background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
			box-shadow:
				0 6rpx 20rpx rgba(56, 142, 60, 0.35),
				0 2rpx 8rpx rgba(56, 142, 60, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
	}

	.mgmt-text {
		font-size: 26rpx;
		color: #0f172a;
	}

	.bottom-row {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		align-items: stretch;
		margin-top: 12rpx;
	}

	.bottom-btn {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #0f172a;
		opacity: 0.8;
		transition: opacity 0.2s ease;
		touch-action: manipulation;

		&:active {
			transform: translateY(-4rpx) scale(0.97);
		}

		&:active .bottom-icon::after {
			transform: scale(1) rotate(180deg);
		}

		/* #ifdef H5 */
		&:hover {
			opacity: 1;
		}

		/* #endif */
	}

	.bottom-icon {
		border-radius: 20rpx;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
		position: relative;
		transition: all 0.3s ease;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 20rpx;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
			opacity: 1;
			z-index: 1;
		}

		&::after {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
			transition: transform 0.6s ease;
			transform: scale(0);
			z-index: 2;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			position: relative;
			z-index: 3;
			filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
		}

		/* 主题色背景 - 渐变立体效果 */
		&.icon-circle-bg-11 {
			background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
			box-shadow:
				0 6rpx 20rpx rgba(183, 28, 28, 0.35),
				0 2rpx 8rpx rgba(183, 28, 28, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-13 {
			background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
			box-shadow:
				0 6rpx 20rpx rgba(230, 81, 0, 0.35),
				0 2rpx 8rpx rgba(230, 81, 0, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-14 {
			background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
			box-shadow:
				0 6rpx 20rpx rgba(106, 27, 154, 0.35),
				0 2rpx 8rpx rgba(106, 27, 154, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
	}

	.bottom-text {
		font-size: 26rpx;
		color: #0f172a;
	}

	@media (min-width: 768px) {
		.warpboxss .fun_box_fir .fun_fir_1 {
			min-height: 200rpx;
		}
	}

	/* 深色主题 */
	:root[data-theme="dark"] .page {
		background-color: #0b0f14;
		color: #e5e7eb;
	}

	:root[data-theme="dark"] .warpboxss {
		background: rgba(22, 26, 33, 0.6);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.35);
	}

	:root[data-theme="dark"] .warpboxs-small-title {
		color: #e5e7eb;
	}

	/* RTL支持 */
	.page[dir="rtl"] .warpboxs-small-title {
		flex-direction: row-reverse;
		text-align: right;
	}

	.page[dir="rtl"] .warpboxs-small-title .warpboxs-small-title-img {
		justify-content: flex-start;
	}
</style>