<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-if="iskjb" 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-if="iskjb" 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 class="warpboxss" style="box-shadow:none;">
				<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">
						<u-icon name="arrow-down" size="20" color="#666"
							:style="isshow1 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
					</view>
				</view>
				<view v-show="isshow1">
					<view class="fun_box_fir">
						<view v-if="iskjb" class="fun_fir_1 fun_fir_border" 
							@click="isSettingMode ? toggleCommonFunction({ text: '开单', url: '/pages/lx/lx', icon: '/static/home/order.png', iconClass: 'icon-circle-bg-1' }) : goToPage('/pages/lx/lx')">
							<view class="icon icon-circle-bg-1">
								<image src="/static/home/order.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/lx/lx')">+</view>
							</view>
							<view>开单</view>
						</view>
						<view v-if="iskjb" class="fun_fir_1 fun_fir_border" 
							@click="isSettingMode ? toggleCommonFunction({ text: '活动开单', url: '/pages/lx/lx?type=1', icon: '/static/home/activity-order.png', iconClass: 'icon-circle-bg-3' }) : goToPage('/pages/lx/lx?type=1')">
							<view class="icon icon-circle-bg-3">
								<image src="/static/home/activity-order.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/lx/lx?type=1')">+</view>
							</view>
							<view>活动开单</view>
						</view>
						<view v-if="iskjb" class="fun_fir_1 fun_fir_border"
							@click="isSettingMode ? toggleCommonFunction({ text: '耗卡', url: '/pages/member-consume/member-consume', icon: '/static/home/consume-card.png', iconClass: 'icon-circle-bg-2' }) : goToPage('/pages/member-consume/member-consume')">
							<view class="icon icon-circle-bg-2">
								<image src="/static/home/consume-card.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/member-consume/member-consume')">+</view>
							</view>
							<view>耗卡</view>
						</view>
						<view v-if="iskjb" class="fun_fir_1 fun_fir_border" 
							@click="isSettingMode ? toggleCommonFunction({ text: '退卡', url: '/pages/refund/refund', icon: '/static/home/refund-card.png', iconClass: 'icon-circle-bg-4' }) : goToPage('/pages/refund/refund')">
							<view class="icon icon-circle-bg-4">
								<image src="/static/home/refund-card.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/refund/refund')">+</view>
							</view>
							<view>退卡</view>
						</view>
						<view v-if="iskjb" class="fun_fir_1 fun_fir_border"
							@click="isSettingMode ? toggleCommonFunction({ text: '转卡', url: '/pages/transferCard/transferCard', icon: '/static/home/transfer-card.png', iconClass: 'icon-circle-bg-5' }) : goToPage('/pages/transferCard/transferCard')">
							<view class="icon icon-circle-bg-5">
								<image src="/static/home/transfer-card.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/transferCard/transferCard')">+</view>
							</view>
							<view>转卡</view>
						</view>
						<view v-if="iskjb" class="fun_fir_1 fun_fir_border"
							@click="isSettingMode ? toggleCommonFunction({ text: '鼎轩开单', url: '/pages/lx/lx?time=2025-10-01', icon: '/static/home/dingxuan-order.png', iconClass: 'icon-circle-bg-8' }) : goToPage('/pages/lx/lx?time=2025-10-01')">
							<view class="icon icon-circle-bg-8">
								<image src="/static/home/dingxuan-order.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/lx/lx?time=2025-10-01')">+</view>
							</view>
							<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">
						<u-icon name="arrow-down" size="20" color="#666"
							:style="isshow2 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
					</view>
				</view>
				<view v-show="isshow2">
					<view class="mgmt-row">
						<view class="mgmt-btn" 
							@click="isSettingMode ? toggleCommonFunction({ text: '会员', url: '/pages/clue-list/clue-list', icon: '/static/home/member.png', iconClass: 'icon-circle-bg-9' }) : goToPage('/pages/clue-list/clue-list')">
							<view class="mgmt-icon icon-circle-bg-9">
								<image src="/static/home/member.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/clue-list/clue-list')">+</view>
							</view>
							<view class="mgmt-text">会员</view>
						</view>
						<view class="mgmt-btn" 
							@click="isSettingMode ? toggleCommonFunction({ text: '建档', url: '/pages/member-edit/member-edit', icon: '/static/home/create-member.png', iconClass: 'icon-circle-bg-6' }) : goToPage('/pages/member-edit/member-edit')">
							<view class="mgmt-icon icon-circle-bg-6">
								<image src="/static/home/create-member.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/member-edit/member-edit')">+</view>
							</view>
							<view class="mgmt-text">建档</view>
						</view>
						<view class="mgmt-btn" 
							@click="isSettingMode ? toggleCommonFunction({ text: '拓客', url: '/pages/expansion/expansion', icon: '/static/home/expansion.png', iconClass: 'icon-circle-bg-7' }) : goToPage('/pages/expansion/expansion')">
							<view class="mgmt-icon icon-circle-bg-7">
								<image src="/static/home/expansion.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/expansion/expansion')">+</view>
							</view>
							<view class="mgmt-text">拓客</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 采购报销板块 -->
			<view class="warpboxss">
				<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">
						<u-icon name="arrow-down" size="20" color="#666"
							:style="isshow3 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
					</view>
				</view>
				<view v-show="isshow3">
					<view class="fun_box_fir">
						<view class="fun_fir_1 fun_fir_border" 
							@click="isSettingMode ? toggleCommonFunction({ text: '物品购买', url: '/pages/purchase-list/purchase-list', icon: '/static/home/purchase.png', iconClass: 'icon-circle-bg-10' }) : goToPage('/pages/purchase-list/purchase-list')">
							<view class="icon icon-circle-bg-10">
								<image src="/static/home/purchase.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/purchase-list/purchase-list')">+</view>
							</view>
							<view>物品购买</view>
						</view>
						<view class="fun_fir_1 fun_fir_border"
							@click="isSettingMode ? toggleCommonFunction({ text: '报销申请', url: '/pages/reimbursement-list/reimbursement-list', icon: '/static/home/reimbursement-apply.png', iconClass: 'icon-circle-bg-12' }) : goToPage('/pages/reimbursement-list/reimbursement-list')">
							<view class="icon icon-circle-bg-12">
								<image src="/static/home/reimbursement-apply.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/reimbursement-list/reimbursement-list')">+</view>
							</view>
							<view>报销申请</view>
						</view>
						<view
							v-if="newuserInfo.gw == '董事长' || newuserInfo.gw == '总裁' || newuserInfo.gw == '总经理' || newuserInfo.gw == '主管' || newuserInfo.mobilePhone == '18884847552' || newuserInfo.mobilePhone == '17882512738' || newuserInfo.mobilePhone == '18588888888'"
							class="fun_fir_1 fun_fir_border"
							@click="isSettingMode ? toggleCommonFunction({ text: '报销审核', url: '/pages/reimbursement-audit-list/reimbursement-audit-list', icon: '/static/home/reimbursement-audit.png', iconClass: 'icon-circle-bg-11' }) : goToPage('/pages/reimbursement-audit-list/reimbursement-audit-list')">
							<view class="icon icon-circle-bg-11">
								<image src="/static/home/reimbursement-audit.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/reimbursement-audit-list/reimbursement-audit-list')">+</view>
							</view>
							<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">
						<u-icon name="arrow-down" size="20" color="#666"
							:style="isshow4 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
					</view>
				</view>
				<view v-show="isshow4">
					<view class="bottom-row">
						<view class="bottom-btn" 
							@click="isSettingMode ? toggleCommonFunction({ text: '使用记录', url: '/pages/usage-list/usage-list', icon: '/static/home/usage-record.png', iconClass: 'icon-circle-bg-13' }) : goToPage('/pages/usage-list/usage-list')">
							<view class="bottom-icon icon-circle-bg-13">
								<image src="/static/home/usage-record.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/usage-list/usage-list')">+</view>
							</view>
							<view class="bottom-text">使用记录</view>
						</view>
						<view class="bottom-btn" 
							@click="isSettingMode ? toggleCommonFunction({ text: '毛巾记录', url: '/pages/laundry-flow-list/laundry-flow-list', icon: '/static/home/towel-record.png', iconClass: 'icon-circle-bg-14' }) : goToPage('/pages/laundry-flow-list/laundry-flow-list')">
							<view class="bottom-icon icon-circle-bg-14">
								<image src="/static/home/towel-record.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/laundry-flow-list/laundry-flow-list')">+</view>
							</view>
							<view class="bottom-text">毛巾记录</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 系统管理板块 -->
			<view class="warpboxss">
				<view class="warpboxs-small-title" :style="isshow5 ? 'padding-bottom: 30rpx;' : ''"
					@click="isshow5 = !isshow5">
					<view><text class="warpboxs-small-title-line"></text>其他</view>
					<view class="warpboxs-small-title-img">
						<u-icon name="arrow-down" size="20" color="#666"
							:style="isshow5 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
					</view>
				</view>
				<view v-show="isshow5">
					<view class="fun_box_fir">
						<view
							v-if="newuserInfo.mobilePhone == '18382415096' || newuserInfo.mobilePhone == '19938623860' || newuserInfo.mobilePhone == '18588888888'"
							class="fun_fir_1 fun_fir_border" 
							@click="isSettingMode ? toggleCommonFunction({ text: '门店管理', url: '/pages/store-list/store-list', icon: '/static/home/store-management.png', iconClass: 'icon-circle-bg-15' }) : goToPage('/pages/store-list/store-list')">
							<view class="icon icon-circle-bg-15">
								<image src="/static/home/store-management.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/store-list/store-list')">+</view>
							</view>
							<view>门店管理</view>
						</view>
						<view class="fun_fir_1 fun_fir_border" 
							@click="isSettingMode ? toggleCommonFunction({ text: 'AI问答', url: '/pages/web/web', icon: '/static/home/ai-qa.png', iconClass: 'icon-circle-bg-16' }) : goToPage('/pages/web/web')">
							<view class="icon icon-circle-bg-16">
								<image src="/static/home/ai-qa.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/web/web')">+</view>
							</view>
							<view>AI问答</view>
						</view>
						<!-- <view class="fun_fir_1 fun_fir_border" v-if="showReport"
							@click="isSettingMode ? toggleCommonFunction({ text: '报表', url: '/pages/dailyReport/dailyReport', icon: '/static/home/report.png', iconClass: 'icon-circle-bg-17' }) : goToPage('/pages/dailyReport/dailyReport')">
							<view class="icon icon-circle-bg-17">
								<image src="/static/home/report.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/dailyReport/dailyReport')">+</view>
							</view>
							<view>报表</view>
						</view> -->
						<view class="fun_fir_1 fun_fir_border" v-if="showReport" 
							@click="isSettingMode ? toggleCommonFunction({ text: '集团驾驶舱', url: '/pages/dashboard/dashboard', icon: '/static/home/report.png', iconClass: 'icon-circle-bg-18' }) : goToPage('/pages/dashboard/dashboard')">
							<view class="icon icon-circle-bg-17">
								<image src="/static/home/report.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/dashboard/dashboard')">+</view>
							</view>
							<view>集团驾驶舱</view>
						</view>
						<view class="fun_fir_1 fun_fir_border" v-if="showReport" 
							@click="isSettingMode ? toggleCommonFunction({ text: '门店数据', url: '/pages/store-dashboard/store-dashboard', icon: '/static/home/report.png', iconClass: 'icon-circle-bg-18' }) : goToPage('/pages/store-dashboard/store-dashboard')">
							<view class="icon icon-circle-bg-17">
								<image src="/static/home/report.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/store-dashboard/store-dashboard')">+</view>
							</view>
							<view>门店数据</view>
						</view>
						<view class="fun_fir_1 fun_fir_border" v-if="showReport"
							@click="isSettingMode ? toggleCommonFunction({ text: '科技部数据', url: '/pages/tech-department-dashboard/tech-department-dashboard', icon: '/static/home/report.png', iconClass: 'icon-circle-bg-18' }) : goToPage('/pages/tech-department-dashboard/tech-department-dashboard')">
							<view class="icon icon-circle-bg-17">
								<image src="/static/home/report.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/tech-department-dashboard/tech-department-dashboard')">+</view>
							</view>
							<view>科技部数据</view>
						</view>
						<view class="fun_fir_1 fun_fir_border" v-if="showReport"
							@click="isSettingMode ? toggleCommonFunction({ text: '事业部数据', url: '/pages/business-unit-dashboard/business-unit-dashboard', icon: '/static/home/report.png', iconClass: 'icon-circle-bg-18' }) : goToPage('/pages/business-unit-dashboard/business-unit-dashboard')">
							<view class="icon icon-circle-bg-17">
								<image src="/static/home/report.png" mode="heightFix"></image>
								<view class="action-badge add-badge" v-if="isSettingMode && !isInCommonFunctions('/pages/business-unit-dashboard/business-unit-dashboard')">+</view>
							</view>
							<view>事业部数据</view>
						</view>
					</view>
					<!-- <view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="handleLogout">
						<view class="icon">
							<u-icon name="arrow-rightward" size="32" color="#43a047"></u-icon>
						</view>
						<view>退出</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,
			isshow1: true,
			isshow2: true,
			isshow3: true,
			isshow4: true,
			isshow5: true,
			newuserInfo: {},
			userInfo: {},
			isSettingMode: false, // 是否处于设置模式
			commonFunctions: [], // 常用功能列表
			tempCommonFunctions: [], // 临时常用功能列表（设置模式下使用）
			features: [{
				text: '开单',
				url: '/pages/lx/lx',
				icon: '/static/home/order.png',
				iconClass: 'icon-circle-bg-1',
				theme: {
					h: 210,
					s: 45,
					l: 62
				}
			},
			{
				text: '活动开单',
				url: '/pages/lx/lx?type=1',
				icon: '/static/home/activity-order.png',
				iconClass: 'icon-circle-bg-3',
				theme: {
					h: 0,
					s: 45,
					l: 62
				}
			},
			{
				text: '耗卡',
				url: '/pages/member-consume/member-consume',
				icon: '/static/home/consume-card.png',
				iconClass: 'icon-circle-bg-2',
				theme: {
					h: 140,
					s: 45,
					l: 50
				}
			},
			{
				text: '退卡',
				url: '/pages/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: '/pages/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/dailyReport/dailyReport',
				icon: '/static/home/report.png',
				iconClass: 'icon-circle-bg-17',
				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()
	},
	methods: {
		// 初始化
		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: '/pages/lx/lx',
						icon: '/static/home/order.png',
						iconClass: 'icon-circle-bg-1'
					},
					{
						text: '耗卡',
						url: '/pages/member-consume/member-consume',
						icon: '/static/home/consume-card.png',
						iconClass: 'icon-circle-bg-2'
					},
					{
						text: '退卡',
						url: '/pages/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: '/pages/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);
			}
		}

		.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);
				}
			}
		}

		.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>