antissoft / lvqianmeiye_ERP

Commit 7f0666d69591cbef39cabd8dbe46d7ff4b6be7a9

Authored by “wangming”
1 parent 4f00d759

feat: 移除抖动和弹窗效果，简化常用功能添加/移除逻辑，并为常用功能图标添加完整的颜色样式

Inline Side-by-side
Showing 1 changed file with 1461 additions and 400 deletions
绿纤uni-app/pages/home/home.vue
  View file @7f0666d
1 1 <template>
2 2 <view class="page">
3   - <!-- 自定义导航栏 -->
4   - <custom-navbar
5   - title="绿纤协同平台"
6   - :show-background="true"
7   - background-image="https://zhgw.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/bg.png"
8   - @height-change="handleNavbarHeightChange"
9   - ></custom-navbar>
10   - <view class="warpbox">
11   -
12   - <view :style="{'height': contentTopMargin}"></view>
13   - <!-- 业务操作板块 -->
14   - <view class="warpboxss" style="box-shadow:none;">
15   - <view class="warpboxs-small-title" :style="isshow1?'padding-bottom: 30rpx;':''" @click="isshow1=!isshow1">
16   - <view><text class="warpboxs-small-title-line"></text>业务操作</view>
17   - <view class="warpboxs-small-title-img">
18   - <u-icon name="arrow-down" size="20" color="#666"
19   - :style="isshow1?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
  3 + <!-- 自定义导航栏 -->
  4 + <custom-navbar title="绿纤协同平台" :show-background="false" titleColor="#1f2937"
  5 + @height-change="handleNavbarHeightChange"></custom-navbar>
  6 + <view class="warpbox">
  7 +
  8 + <view :style="{ 'height': contentTopMargin }"></view>
  9 +
  10 + <!-- 常用功能区 -->
  11 + <view class="warpboxss common-func-area">
  12 + <view class="warpboxs-small-title">
  13 + <view><text class="warpboxs-small-title-line"></text>常用功能</view>
20 14 </view>
21   - </view>
22   - <view v-show="isshow1">
23   - <view class="fun_box_fir">
24   - <view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx')">
25   - <view class="icon icon-circle-bg-1">
26   - <image src="/static/home/order.png" mode="heightFix"></image>
27   - </view>
28   - <view>开单</view>
29   - </view>
30   - <view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx?type=1')">
31   - <view class="icon icon-circle-bg-3">
32   - <image src="/static/home/activity-order.png" mode="heightFix"></image>
  15 + <view class="common-func-row">
  16 + <view v-if="iskjb" v-for="(item, index) in commonFunctions" :key="index" class="common-func-btn"
  17 + @click="goToPage(item.url)" @longpress="handleRemoveFromCommon(index)">
  18 + <view class="common-func-icon" :class="item.iconClass">
  19 + <image :src="item.icon" mode="heightFix"></image>
33 20 </view>
34   - <view>活动开单</view>
  21 + <view class="common-func-text">{{ item.text }}</view>
35 22 </view>
36   - <view v-if="iskjb" class="fun_fir_1 fun_fir_border"
37   - @click="goToPage('/pages/member-consume/member-consume')">
38   - <view class="icon icon-circle-bg-2">
39   - <image src="/static/home/consume-card.png" mode="heightFix"></image>
40   - </view>
41   - <view>耗卡</view>
  23 + </view>
  24 + </view>
  25 +
  26 + <!-- 业务操作板块 -->
  27 + <view class="warpboxss" style="box-shadow:none;">
  28 + <view class="warpboxs-small-title" :style="isshow1 ? 'padding-bottom: 30rpx;' : ''"
  29 + @click="isshow1 = !isshow1">
  30 + <view><text class="warpboxs-small-title-line"></text>业务操作</view>
  31 + <view class="warpboxs-small-title-img">
  32 + <u-icon name="arrow-down" size="20" color="#666"
  33 + :style="isshow1 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
42 34 </view>
43 35 </view>
44   - <view class="fun_box_fir">
45   - <view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/refund/refund')">
46   - <view class="icon icon-circle-bg-4">
47   - <image src="/static/home/refund-card.png" mode="heightFix"></image>
  36 + <view v-show="isshow1">
  37 + <view class="fun_box_fir">
  38 + <view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx')"
  39 + @longpress="handleAddToCommon({ text: '开单', url: '/pages/lx/lx', icon: '/static/home/order.png', iconClass: 'icon-circle-bg-1' })">
  40 + <view class="icon icon-circle-bg-1">
  41 + <image src="/static/home/order.png" mode="heightFix"></image>
  42 + </view>
  43 + <view>开单</view>
48 44 </view>
49   - <view>退卡</view>
50   - </view>
51   - <view v-if="iskjb" class="fun_fir_1 fun_fir_border"
52   - @click="goToPage('/pages/transferCard/transferCard')">
53   - <view class="icon icon-circle-bg-5">
54   - <image src="/static/home/transfer-card.png" mode="heightFix"></image>
  45 + <view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx?type=1')"
  46 + @longpress="handleAddToCommon({ text: '活动开单', url: '/pages/lx/lx?type=1', icon: '/static/home/activity-order.png', iconClass: 'icon-circle-bg-3' })">
  47 + <view class="icon icon-circle-bg-3">
  48 + <image src="/static/home/activity-order.png" mode="heightFix"></image>
  49 + </view>
  50 + <view>活动开单</view>
55 51 </view>
56   - <view>转卡</view>
57   - </view>
58   - <view v-if="iskjb" class="fun_fir_1 fun_fir_border"
59   - @click="goToPage('/pages/member-create/member-create')">
60   - <view class="icon icon-circle-bg-6">
61   - <image src="/static/home/create-member.png" mode="heightFix"></image>
  52 + <view v-if="iskjb" class="fun_fir_1 fun_fir_border"
  53 + @click="goToPage('/pages/member-consume/member-consume')"
  54 + @longpress="handleAddToCommon({ text: '耗卡', url: '/pages/member-consume/member-consume', icon: '/static/home/consume-card.png', iconClass: 'icon-circle-bg-2' })">
  55 + <view class="icon icon-circle-bg-2">
  56 + <image src="/static/home/consume-card.png" mode="heightFix"></image>
  57 + </view>
  58 + <view>耗卡</view>
62 59 </view>
63   - <view>建档</view>
64   - </view>
65   - </view>
66   - <view class="fun_box_fir">
67   - <view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/expansion/expansion')">
68   - <view class="icon icon-circle-bg-7">
69   - <image src="/static/home/expansion.png" mode="heightFix"></image>
  60 + <view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/refund/refund')"
  61 + @longpress="handleAddToCommon({ text: '退卡', url: '/pages/refund/refund', icon: '/static/home/refund-card.png', iconClass: 'icon-circle-bg-4' })">
  62 + <view class="icon icon-circle-bg-4">
  63 + <image src="/static/home/refund-card.png" mode="heightFix"></image>
  64 + </view>
  65 + <view>退卡</view>
70 66 </view>
71   - <view>拓客</view>
72   - </view>
73   - <view v-if="iskjb" class="fun_fir_1 fun_fir_border"
74   - @click="goToPage('/pages/lx/lx?time=2025-10-01')">
75   - <view class="icon icon-circle-bg-8">
76   - <image src="/static/home/dingxuan-order.png" mode="heightFix"></image>
  67 + <view v-if="iskjb" class="fun_fir_1 fun_fir_border"
  68 + @click="goToPage('/pages/transferCard/transferCard')"
  69 + @longpress="handleAddToCommon({ text: '转卡', url: '/pages/transferCard/transferCard', icon: '/static/home/transfer-card.png', iconClass: 'icon-circle-bg-5' })">
  70 + <view class="icon icon-circle-bg-5">
  71 + <image src="/static/home/transfer-card.png" mode="heightFix"></image>
  72 + </view>
  73 + <view>转卡</view>
  74 + </view>
  75 + <view v-if="iskjb" class="fun_fir_1 fun_fir_border"
  76 + @click="goToPage('/pages/expansion/expansion')"
  77 + @longpress="handleAddToCommon({ text: '拓客', url: '/pages/expansion/expansion', icon: '/static/home/expansion.png', iconClass: 'icon-circle-bg-7' })">
  78 + <view class="icon icon-circle-bg-7">
  79 + <image src="/static/home/expansion.png" mode="heightFix"></image>
  80 + </view>
  81 + <view>拓客</view>
  82 + </view>
  83 + <view v-if="iskjb" class="fun_fir_1 fun_fir_border"
  84 + @click="goToPage('/pages/lx/lx?time=2025-10-01')"
  85 + @longpress="handleAddToCommon({ text: '鼎轩开单', url: '/pages/lx/lx?time=2025-10-01', icon: '/static/home/dingxuan-order.png', iconClass: 'icon-circle-bg-8' })">
  86 + <view class="icon icon-circle-bg-8">
  87 + <image src="/static/home/dingxuan-order.png" mode="heightFix"></image>
  88 + </view>
  89 + <view>鼎轩开单</view>
77 90 </view>
78   - <view>鼎轩开单</view>
79 91 </view>
80 92 </view>
81 93 </view>
82   - </view>
83 94  
84   - <!-- 会员管理板块 -->
85   - <view class="warpboxss">
86   - <view class="warpboxs-small-title" :style="isshow2?'padding-bottom: 30rpx;':''" @click="isshow2=!isshow2">
87   - <view><text class="warpboxs-small-title-line"></text>会员管理</view>
88   - <view class="warpboxs-small-title-img">
89   - <u-icon name="arrow-down" size="20" color="#666"
90   - :style="isshow2?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
  95 + <!-- 会员管理板块 -->
  96 + <view class="warpboxss">
  97 + <view class="warpboxs-small-title" :style="isshow2 ? 'padding-bottom: 30rpx;' : ''"
  98 + @click="isshow2 = !isshow2">
  99 + <view><text class="warpboxs-small-title-line"></text>会员管理</view>
  100 + <view class="warpboxs-small-title-img">
  101 + <u-icon name="arrow-down" size="20" color="#666"
  102 + :style="isshow2 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
  103 + </view>
91 104 </view>
92   - </view>
93   - <view v-show="isshow2">
94   - <view class="fun_box_fir">
95   - <view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/clue-list/clue-list')">
96   - <view class="icon icon-circle-bg-9">
97   - <image src="/static/home/member.png" mode="heightFix"></image>
  105 + <view v-show="isshow2">
  106 + <view class="mgmt-row">
  107 + <view class="mgmt-btn" @click="goToPage('/pages/clue-list/clue-list')"
  108 + @longpress="handleAddToCommon({ text: '会员', url: '/pages/clue-list/clue-list', icon: '/static/home/member.png', iconClass: 'icon-circle-bg-9' })">
  109 + <view class="mgmt-icon icon-circle-bg-9">
  110 + <image src="/static/home/member.png" mode="heightFix"></image>
  111 + </view>
  112 + <view class="mgmt-text">会员</view>
  113 + </view>
  114 + <view class="mgmt-btn" @click="goToPage('/pages/member-rights/member-rights')"
  115 + @longpress="handleAddToCommon({ text: '权益', url: '/pages/member-rights/member-rights', icon: '/static/home/member.png', iconClass: 'icon-circle-bg-10' })">
  116 + <view class="mgmt-icon icon-circle-bg-10">
  117 + <image src="/static/home/member.png" mode="heightFix"></image>
  118 + </view>
  119 + <view class="mgmt-text">权益</view>
  120 + </view>
  121 + <view class="mgmt-btn" @click="goToPage('/pages/member-edit/member-edit')"
  122 + @longpress="handleAddToCommon({ text: '建档', url: '/pages/member-edit/member-edit', icon: '/static/home/create-member.png', iconClass: 'icon-circle-bg-6' })">
  123 + <view class="mgmt-icon icon-circle-bg-6">
  124 + <image src="/static/home/create-member.png" mode="heightFix"></image>
  125 + </view>
  126 + <view class="mgmt-text">建档</view>
98 127 </view>
99   - <view>会员</view>
100 128 </view>
101 129 </view>
102 130 </view>
103   - </view>
104 131  
105   - <!-- 采购报销板块 -->
106   - <view class="warpboxss">
107   - <view class="warpboxs-small-title" :style="isshow3?'padding-bottom: 30rpx;':''" @click="isshow3=!isshow3">
108   - <view><text class="warpboxs-small-title-line"></text>采购报销</view>
109   - <view class="warpboxs-small-title-img">
110   - <u-icon name="arrow-down" size="20" color="#666"
111   - :style="isshow3?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
  132 + <!-- 采购报销板块 -->
  133 + <view class="warpboxss">
  134 + <view class="warpboxs-small-title" :style="isshow3 ? 'padding-bottom: 30rpx;' : ''"
  135 + @click="isshow3 = !isshow3">
  136 + <view><text class="warpboxs-small-title-line"></text>采购报销</view>
  137 + <view class="warpboxs-small-title-img">
  138 + <u-icon name="arrow-down" size="20" color="#666"
  139 + :style="isshow3 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
  140 + </view>
112 141 </view>
113   - </view>
114   - <view v-show="isshow3">
115   - <view class="fun_box_fir">
116   - <view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/purchase-list/purchase-list')">
117   - <view class="icon icon-circle-bg-10">
118   - <image src="/static/home/purchase.png" mode="heightFix"></image>
  142 + <view v-show="isshow3">
  143 + <view class="fun_box_fir">
  144 + <view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/purchase-list/purchase-list')"
  145 + @longpress="handleAddToCommon({ text: '物品购买', url: '/pages/purchase-list/purchase-list', icon: '/static/home/purchase.png', iconClass: 'icon-circle-bg-10' })">
  146 + <view class="icon icon-circle-bg-10">
  147 + <image src="/static/home/purchase.png" mode="heightFix"></image>
  148 + </view>
  149 + <view>物品购买</view>
119 150 </view>
120   - <view>物品购买</view>
121   - </view>
122   - <view class="fun_fir_1 fun_fir_border"
123   - @click="goToPage('/pages/reimbursement-list/reimbursement-list')">
124   - <view class="icon icon-circle-bg-12">
125   - <image src="/static/home/reimbursement-apply.png" mode="heightFix"></image>
  151 + <view class="fun_fir_1 fun_fir_border"
  152 + @click="goToPage('/pages/reimbursement-list/reimbursement-list')"
  153 + @longpress="handleAddToCommon({ text: '报销申请', url: '/pages/reimbursement-list/reimbursement-list', icon: '/static/home/reimbursement-apply.png', iconClass: 'icon-circle-bg-12' })">
  154 + <view class="icon icon-circle-bg-12">
  155 + <image src="/static/home/reimbursement-apply.png" mode="heightFix"></image>
  156 + </view>
  157 + <view>报销申请</view>
126 158 </view>
127   - <view>报销申请</view>
128   - </view>
129   - <view
130   - v-if="newuserInfo.gw == '董事长' || newuserInfo.gw == '总裁' || newuserInfo.gw == '总经理' || newuserInfo.gw == '主管' || newuserInfo.mobilePhone == '18884847552' || newuserInfo.mobilePhone == '17882512738' || newuserInfo.mobilePhone == '18588888888'"
131   - class="fun_fir_1 fun_fir_border"
132   - @click="goToPage('/pages/reimbursement-audit-list/reimbursement-audit-list')">
133   - <view class="icon icon-circle-bg-11">
134   - <image src="/static/home/reimbursement-audit.png" mode="heightFix"></image>
  159 + <view
  160 + v-if="newuserInfo.gw == '董事长' || newuserInfo.gw == '总裁' || newuserInfo.gw == '总经理' || newuserInfo.gw == '主管' || newuserInfo.mobilePhone == '18884847552' || newuserInfo.mobilePhone == '17882512738' || newuserInfo.mobilePhone == '18588888888'"
  161 + class="fun_fir_1 fun_fir_border"
  162 + @click="goToPage('/pages/reimbursement-audit-list/reimbursement-audit-list')"
  163 + @longpress="handleAddToCommon({ text: '报销审核', url: '/pages/reimbursement-audit-list/reimbursement-audit-list', icon: '/static/home/reimbursement-audit.png', iconClass: 'icon-circle-bg-11' })">
  164 + <view class="icon icon-circle-bg-11">
  165 + <image src="/static/home/reimbursement-audit.png" mode="heightFix"></image>
  166 + </view>
  167 + <view>报销审核</view>
135 168 </view>
136   - <view>报销审核</view>
137 169 </view>
138 170 </view>
139 171 </view>
140   - </view>
141 172  
142   - <!-- 记录查询板块 -->
143   - <view class="warpboxss">
144   - <view class="warpboxs-small-title" :style="isshow4?'padding-bottom: 30rpx;':''" @click="isshow4=!isshow4">
145   - <view><text class="warpboxs-small-title-line"></text>记录查询</view>
146   - <view class="warpboxs-small-title-img">
147   - <u-icon name="arrow-down" size="20" color="#666"
148   - :style="isshow4?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
  173 + <!-- 记录查询板块 -->
  174 + <view class="warpboxss">
  175 + <view class="warpboxs-small-title" :style="isshow4 ? 'padding-bottom: 30rpx;' : ''"
  176 + @click="isshow4 = !isshow4">
  177 + <view><text class="warpboxs-small-title-line"></text>记录查询</view>
  178 + <view class="warpboxs-small-title-img">
  179 + <u-icon name="arrow-down" size="20" color="#666"
  180 + :style="isshow4 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
  181 + </view>
149 182 </view>
150   - </view>
151   - <view v-show="isshow4">
152   - <view class="fun_box_fir">
153   - <view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/usage-list/usage-list')">
154   - <view class="icon icon-circle-bg-13">
155   - <image src="/static/home/usage-record.png" mode="heightFix"></image>
  183 + <view v-show="isshow4">
  184 + <view class="bottom-row">
  185 + <view class="bottom-btn" @click="goToPage('/pages/usage-list/usage-list')"
  186 + @longpress="handleAddToCommon({ text: '使用记录', url: '/pages/usage-list/usage-list', icon: '/static/home/usage-record.png', iconClass: 'icon-circle-bg-13' })">
  187 + <view class="bottom-icon icon-circle-bg-13">
  188 + <image src="/static/home/usage-record.png" mode="heightFix"></image>
  189 + </view>
  190 + <view class="bottom-text">使用记录</view>
156 191 </view>
157   - <view>使用记录</view>
158   - </view>
159   - <view class="fun_fir_1 fun_fir_border"
160   - @click="goToPage('/pages/laundry-flow-list/laundry-flow-list')">
161   - <view class="icon icon-circle-bg-14">
162   - <image src="/static/home/towel-record.png" mode="heightFix"></image>
  192 + <view class="bottom-btn" @click="goToPage('/pages/laundry-flow-list/laundry-flow-list')"
  193 + @longpress="handleAddToCommon({ text: '毛巾记录', url: '/pages/laundry-flow-list/laundry-flow-list', icon: '/static/home/towel-record.png', iconClass: 'icon-circle-bg-14' })">
  194 + <view class="bottom-icon icon-circle-bg-14">
  195 + <image src="/static/home/towel-record.png" mode="heightFix"></image>
  196 + </view>
  197 + <view class="bottom-text">毛巾记录</view>
  198 + </view>
  199 + <view class="bottom-btn" @click="goToPage('/pages/order-records-list/order-records-list')"
  200 + @longpress="handleAddToCommon({ text: '旧日志', url: '/pages/order-records-list/order-records-list', icon: '/static/home/reimbursement-audit.png', iconClass: 'icon-circle-bg-11' })">
  201 + <view class="bottom-icon icon-circle-bg-11">
  202 + <image src="/static/home/reimbursement-audit.png" mode="heightFix"></image>
  203 + </view>
  204 + <view class="bottom-text">旧日志</view>
163 205 </view>
164   - <view>毛巾记录</view>
165 206 </view>
166 207 </view>
167 208 </view>
168   - </view>
169 209  
170   - <!-- 系统管理板块 -->
171   - <view class="warpboxss">
172   - <view class="warpboxs-small-title" :style="isshow5?'padding-bottom: 30rpx;':''" @click="isshow5=!isshow5">
173   - <view><text class="warpboxs-small-title-line"></text>其他</view>
174   - <view class="warpboxs-small-title-img">
175   - <u-icon name="arrow-down" size="20" color="#666"
176   - :style="isshow5?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
  210 + <!-- 系统管理板块 -->
  211 + <view class="warpboxss">
  212 + <view class="warpboxs-small-title" :style="isshow5 ? 'padding-bottom: 30rpx;' : ''"
  213 + @click="isshow5 = !isshow5">
  214 + <view><text class="warpboxs-small-title-line"></text>其他</view>
  215 + <view class="warpboxs-small-title-img">
  216 + <u-icon name="arrow-down" size="20" color="#666"
  217 + :style="isshow5 ? 'transform: rotate(0deg);' : 'transform: rotate(-180deg);'"></u-icon>
  218 + </view>
177 219 </view>
178   - </view>
179   - <view v-show="isshow5">
180   - <view class="fun_box_fir">
181   - <view
182   - v-if="newuserInfo.mobilePhone == '18382415096' || newuserInfo.mobilePhone == '19938623860' || newuserInfo.mobilePhone == '18588888888'"
183   - class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/store-list/store-list')">
184   - <view class="icon icon-circle-bg-15">
185   - <image src="/static/home/store-management.png" mode="heightFix"></image>
  220 + <view v-show="isshow5">
  221 + <view class="fun_box_fir">
  222 + <view
  223 + v-if="newuserInfo.mobilePhone == '18382415096' || newuserInfo.mobilePhone == '19938623860' || newuserInfo.mobilePhone == '18588888888'"
  224 + class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/store-list/store-list')"
  225 + @longpress="handleAddToCommon({ text: '门店管理', url: '/pages/store-list/store-list', icon: '/static/home/store-management.png', iconClass: 'icon-circle-bg-15' })">
  226 + <view class="icon icon-circle-bg-15">
  227 + <image src="/static/home/store-management.png" mode="heightFix"></image>
  228 + </view>
  229 + <view>门店管理</view>
186 230 </view>
187   - <view>门店管理</view>
188   - </view>
189   - <view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/web/web')">
190   - <view class="icon icon-circle-bg-16">
191   - <image src="/static/home/ai-qa.png" mode="heightFix"></image>
  231 + <view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/web/web')"
  232 + @longpress="handleAddToCommon({ text: 'AI问答', url: '/pages/web/web', icon: '/static/home/ai-qa.png', iconClass: 'icon-circle-bg-16' })">
  233 + <view class="icon icon-circle-bg-16">
  234 + <image src="/static/home/ai-qa.png" mode="heightFix"></image>
  235 + </view>
  236 + <view>AI问答</view>
192 237 </view>
193   - <view>AI问答</view>
194   - </view>
195   - <view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/dailyReport/dailyReport')"
196   - v-if="showReport">
197   - <view class="icon icon-circle-bg-17">
198   - <image src="/static/home/report.png" mode="heightFix"></image>
  238 + <view class="fun_fir_1 fun_fir_border" v-if="showReport"
  239 + @click="goToPage('/pages/dailyReport/dailyReport')"
  240 + @longpress="handleAddToCommon({ text: '报表', url: '/pages/dailyReport/dailyReport', icon: '/static/home/report.png', iconClass: 'icon-circle-bg-17' })">
  241 + <view class="icon icon-circle-bg-17">
  242 + <image src="/static/home/report.png" mode="heightFix"></image>
  243 + </view>
  244 + <view>报表</view>
199 245 </view>
200   - <view>报表</view>
201 246 </view>
202   - </view>
203   - <!-- <view class="fun_box_fir">
  247 + <!-- <view class="fun_box_fir">
204 248 <view class="fun_fir_1 fun_fir_border" @click="handleLogout">
205 249 <view class="icon">
206 250 <u-icon name="arrow-rightward" size="32" color="#43a047"></u-icon>
... ... @@ -208,306 +252,1323 @@
208 252 <view>退出</view>
209 253 </view>
210 254 </view> -->
  255 + </view>
211 256 </view>
  257 + <view style="height: 140rpx;"></view>
  258 + <!-- 自定义 tabBar -->
  259 + <custom-tab-bar />
212 260 </view>
213   - <view style="height: 140rpx;"></view>
214   - <!-- 自定义 tabBar -->
215   - <custom-tab-bar />
  261 +
216 262 </view>
217   -</view>
218 263 </template>
219 264  
220 265 <script>
221   - import CustomTabBar from '@/components/custom-tab-bar/index.vue'
222   - import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'
  266 +import CustomTabBar from '@/components/custom-tab-bar/index.vue'
  267 +import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'
223 268  
224   - export default {
225   - components: {
226   - CustomTabBar,
227   - CustomNavbar
228   - },
229   - data() {
230   - return {
231   - navbarHeightRpx: 0,
232   - isshow1: true,
233   - isshow2: true,
234   - isshow3: true,
235   - isshow4: true,
236   - isshow5: true,
237   - newuserInfo: {},
238   - userInfo: {}
239   - }
240   - },
241   - computed: {
242   - // 内容区域顶部间距
243   - contentTopMargin() {
244   - if (this.navbarHeightRpx > 0) {
245   - return (this.navbarHeightRpx + 20) + 'rpx'
  269 +export default {
  270 + components: {
  271 + CustomTabBar,
  272 + CustomNavbar
  273 + },
  274 + data() {
  275 + return {
  276 + navbarHeightRpx: 0,
  277 + isshow1: true,
  278 + isshow2: true,
  279 + isshow3: true,
  280 + isshow4: true,
  281 + isshow5: true,
  282 + newuserInfo: {},
  283 + userInfo: {},
  284 + commonFunctions: [], // 常用功能列表
  285 + features: [{
  286 + text: '开单',
  287 + url: '/pages/lx/lx',
  288 + icon: '/static/home/order.png',
  289 + iconClass: 'icon-circle-bg-1',
  290 + theme: {
  291 + h: 210,
  292 + s: 45,
  293 + l: 62
246 294 }
247   - return '100rpx'
248   - }
249   - },
250   - computed: {
251   - iskjb() {
252   - if (this.newuserInfo.gw == '科技老师') {
253   - return false
  295 + },
  296 + {
  297 + text: '活动开单',
  298 + url: '/pages/lx/lx?type=1',
  299 + icon: '/static/home/activity-order.png',
  300 + iconClass: 'icon-circle-bg-3',
  301 + theme: {
  302 + h: 0,
  303 + s: 45,
  304 + l: 62
  305 + }
  306 + },
  307 + {
  308 + text: '耗卡',
  309 + url: '/pages/member-consume/member-consume',
  310 + icon: '/static/home/consume-card.png',
  311 + iconClass: 'icon-circle-bg-2',
  312 + theme: {
  313 + h: 140,
  314 + s: 45,
  315 + l: 50
  316 + }
  317 + },
  318 + {
  319 + text: '退卡',
  320 + url: '/pages/refund/refund',
  321 + icon: '/static/home/refund-card.png',
  322 + iconClass: 'icon-circle-bg-4',
  323 + theme: {
  324 + h: 186,
  325 + s: 45,
  326 + l: 50
  327 + }
  328 + },
  329 + {
  330 + text: '转卡',
  331 + url: '/pages/transferCard/transferCard',
  332 + icon: '/static/home/transfer-card.png',
  333 + iconClass: 'icon-circle-bg-5',
  334 + theme: {
  335 + h: 30,
  336 + s: 50,
  337 + l: 55
  338 + }
  339 + },
  340 + {
  341 + text: '建档',
  342 + url: '/pages/member-create/member-create',
  343 + icon: '/static/home/create-member.png',
  344 + iconClass: 'icon-circle-bg-6',
  345 + theme: {
  346 + h: 286,
  347 + s: 40,
  348 + l: 60
  349 + }
  350 + },
  351 + {
  352 + text: '拓客',
  353 + url: '/pages/expansion/expansion',
  354 + icon: '/static/home/expansion.png',
  355 + iconClass: 'icon-circle-bg-7',
  356 + theme: {
  357 + h: 330,
  358 + s: 40,
  359 + l: 60
  360 + }
  361 + },
  362 + {
  363 + text: '鼎轩开单',
  364 + url: '/pages/lx/lx?time=2025-10-01',
  365 + icon: '/static/home/dingxuan-order.png',
  366 + iconClass: 'icon-circle-bg-8',
  367 + theme: {
  368 + h: 48,
  369 + s: 45,
  370 + l: 58
254 371 }
255   - return true
256 372 },
257   - // 根据用户权限显示报表按钮
258   - showReport() {
259   - if (!this.userInfo || !this.userInfo.userAccount) return false
260   - const adminAccounts = ['admin', '13198568627', '18884847552', '13608016021', '18628973287']
261   - return adminAccounts.includes(this.userInfo.userAccount)
  373 + {
  374 + text: '会员',
  375 + url: '/pages/clue-list/clue-list',
  376 + icon: '/static/home/member.png',
  377 + iconClass: 'icon-circle-bg-9',
  378 + theme: {
  379 + h: 217,
  380 + s: 45,
  381 + l: 55
  382 + }
  383 + },
  384 + {
  385 + text: '物品购买',
  386 + url: '/pages/purchase-list/purchase-list',
  387 + icon: '/static/home/purchase.png',
  388 + iconClass: 'icon-circle-bg-10',
  389 + theme: {
  390 + h: 130,
  391 + s: 45,
  392 + l: 52
  393 + }
  394 + },
  395 + {
  396 + text: '报销审核',
  397 + url: '/pages/reimbursement-audit-list/reimbursement-audit-list',
  398 + icon: '/static/home/reimbursement-audit.png',
  399 + iconClass: 'icon-circle-bg-11',
  400 + theme: {
  401 + h: 355,
  402 + s: 45,
  403 + l: 55
  404 + }
  405 + },
  406 + {
  407 + text: '报销申请',
  408 + url: '/pages/reimbursement-list/reimbursement-list',
  409 + icon: '/static/home/reimbursement-apply.png',
  410 + iconClass: 'icon-circle-bg-12',
  411 + theme: {
  412 + h: 190,
  413 + s: 45,
  414 + l: 52
  415 + }
  416 + },
  417 + {
  418 + text: '使用记录',
  419 + url: '/pages/usage-list/usage-list',
  420 + icon: '/static/home/usage-record.png',
  421 + iconClass: 'icon-circle-bg-13',
  422 + theme: {
  423 + h: 32,
  424 + s: 45,
  425 + l: 55
  426 + }
  427 + },
  428 + {
  429 + text: '毛巾记录',
  430 + url: '/pages/laundry-flow-list/laundry-flow-list',
  431 + icon: '/static/home/towel-record.png',
  432 + iconClass: 'icon-circle-bg-14',
  433 + theme: {
  434 + h: 277,
  435 + s: 40,
  436 + l: 52
  437 + }
  438 + },
  439 + {
  440 + text: '门店管理',
  441 + url: '/pages/store-list/store-list',
  442 + icon: '/static/home/store-management.png',
  443 + iconClass: 'icon-circle-bg-15',
  444 + theme: {
  445 + h: 330,
  446 + s: 40,
  447 + l: 55
  448 + }
  449 + },
  450 + {
  451 + text: 'AI问答',
  452 + url: '/pages/web/web',
  453 + icon: '/static/home/ai-qa.png',
  454 + iconClass: 'icon-circle-bg-16',
  455 + theme: {
  456 + h: 50,
  457 + s: 45,
  458 + l: 58
  459 + }
  460 + },
  461 + {
  462 + text: '报表',
  463 + url: '/pages/dailyReport/dailyReport',
  464 + icon: '/static/home/report.png',
  465 + iconClass: 'icon-circle-bg-17',
  466 + theme: {
  467 + h: 24,
  468 + s: 20,
  469 + l: 50
  470 + }
  471 + }
  472 + ]
  473 + }
  474 + },
  475 + computed: {
  476 + // 内容区域顶部间距
  477 + contentTopMargin() {
  478 + const info = uni.getSystemInfoSync()
  479 + const pxToRpx = 750 / info.windowWidth
  480 + const safeSpacingPx = 20
  481 + const safeSpacingRpx = Math.ceil(safeSpacingPx * pxToRpx)
  482 + if (this.navbarHeightRpx > 0) {
  483 + return (this.navbarHeightRpx + safeSpacingRpx) + 'rpx'
262 484 }
  485 + return (100 + safeSpacingRpx) + 'rpx'
263 486 },
264   - onLoad() {
265   - this.checkLoginStatus()
266   - this.init()
  487 + iskjb() {
  488 + if (this.newuserInfo.gw == '科技老师') {
  489 + return false
  490 + }
  491 + return true
267 492 },
268   - onShow() {
269   - // 每次显示时更新用户信息
  493 + // 根据用户权限显示报表按钮
  494 + showReport() {
  495 + if (!this.userInfo || !this.userInfo.userAccount) return false
  496 + const adminAccounts = ['admin', '13198568627', '18884847552', '13608016021', '18628973287']
  497 + return adminAccounts.includes(this.userInfo.userAccount)
  498 + }
  499 + },
  500 + onLoad() {
  501 + this.checkLoginStatus()
  502 + this.init()
  503 + },
  504 + onShow() {
  505 + // 每次显示时更新用户信息
  506 + this.userInfo = uni.getStorageSync('userInfo')
  507 + this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
  508 + // 重新加载常用功能配置
  509 + this.loadCommonFunctions()
  510 + },
  511 + methods: {
  512 + // 初始化
  513 + init() {
270 514 this.userInfo = uni.getStorageSync('userInfo')
271 515 this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
  516 + // 从缓存读取常用功能配置
  517 + this.loadCommonFunctions()
272 518 },
273   - methods: {
274   - // 初始化
275   - init() {
276   - this.userInfo = uni.getStorageSync('userInfo')
277   - this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
278   - },
279   - // 检查登录状态
280   - checkLoginStatus() {
281   - const token = uni.getStorageSync('token')
282   - if (!token) {
283   - uni.reLaunch({
284   - url: '/pages/login/login'
285   - })
286   - return
  519 + // 从缓存加载常用功能
  520 + loadCommonFunctions() {
  521 + try {
  522 + const saved = uni.getStorageSync('commonFunctions')
  523 + if (saved && Array.isArray(saved)) {
  524 + this.commonFunctions = saved
287 525 } else {
288   - this.userInfo = uni.getStorageSync('userInfo')
  526 + // 如果没有缓存，使用默认的常用功能
  527 + this.commonFunctions = [{
  528 + text: '开单',
  529 + url: '/pages/lx/lx',
  530 + icon: '/static/home/order.png',
  531 + iconClass: 'icon-circle-bg-1'
  532 + },
  533 + {
  534 + text: '耗卡',
  535 + url: '/pages/member-consume/member-consume',
  536 + icon: '/static/home/consume-card.png',
  537 + iconClass: 'icon-circle-bg-2'
  538 + },
  539 + {
  540 + text: '退卡',
  541 + url: '/pages/refund/refund',
  542 + icon: '/static/home/refund-card.png',
  543 + iconClass: 'icon-circle-bg-4'
  544 + },
  545 + {
  546 + text: '拓客',
  547 + url: '/pages/expansion/expansion',
  548 + icon: '/static/home/expansion.png',
  549 + iconClass: 'icon-circle-bg-7'
  550 + }
  551 + ]
  552 + this.saveCommonFunctions()
289 553 }
290   - },
291   - // 页面跳转
292   - goToPage(url) {
293   - uni.navigateTo({
294   - url: url
  554 + } catch (e) {
  555 + console.error('加载常用功能失败:', e)
  556 + // 使用默认配置
  557 + this.commonFunctions = [{
  558 + text: '开单',
  559 + url: '/pages/lx/lx',
  560 + icon: '/static/home/order.png',
  561 + iconClass: 'icon-circle-bg-1'
  562 + },
  563 + {
  564 + text: '耗卡',
  565 + url: '/pages/member-consume/member-consume',
  566 + icon: '/static/home/consume-card.png',
  567 + iconClass: 'icon-circle-bg-2'
  568 + },
  569 + {
  570 + text: '退卡',
  571 + url: '/pages/refund/refund',
  572 + icon: '/static/home/refund-card.png',
  573 + iconClass: 'icon-circle-bg-4'
  574 + },
  575 + {
  576 + text: '拓客',
  577 + url: '/pages/expansion/expansion',
  578 + icon: '/static/home/expansion.png',
  579 + iconClass: 'icon-circle-bg-7'
  580 + }
  581 + ]
  582 + }
  583 + },
  584 + // 保存常用功能到缓存
  585 + saveCommonFunctions() {
  586 + try {
  587 + uni.setStorageSync('commonFunctions', this.commonFunctions)
  588 + } catch (e) {
  589 + console.error('保存常用功能失败:', e)
  590 + uni.showToast({
  591 + title: '保存失败',
  592 + icon: 'none'
295 593 })
296   - },
297   - // 处理导航栏高度变化
298   - handleNavbarHeightChange(heightInfo) {
299   - this.navbarHeightRpx = heightInfo.rpx || 0
300   - },
301   - // 退出登录
302   - handleLogout() {
303   - uni.showModal({
304   - title: '提示',
305   - content: '确定要退出登录吗？',
306   - success: (res) => {
307   - if (res.confirm) {
308   - this.API.logout().then(res => {
309   - if (res.code == 200) {
310   - // 清除本地存储
311   - uni.clearStorageSync()
312   - // 跳转到登录页
313   - uni.reLaunch({
314   - url: '/pages/login/login'
315   - })
316   - }
317   - })
318   - }
319   - }
  594 + }
  595 + },
  596 + // 长按添加到常用功能
  597 + handleAddToCommon(item) {
  598 + // 检查是否已存在
  599 + const exists = this.commonFunctions.some(func => func.url === item.url)
  600 + if (exists) {
  601 + uni.showToast({
  602 + title: '已在常用功能中',
  603 + icon: 'none'
  604 + })
  605 + return
  606 + }
  607 + // 最多保存8个常用功能
  608 + if (this.commonFunctions.length >= 8) {
  609 + uni.showToast({
  610 + title: '常用功能最多8个',
  611 + icon: 'none'
  612 + })
  613 + return
  614 + }
  615 + // 添加到常用功能
  616 + this.commonFunctions.push(JSON.parse(JSON.stringify(item))) // 深拷贝避免响应式问题
  617 + this.saveCommonFunctions()
  618 + uni.showToast({
  619 + title: '已添加到常用功能',
  620 + icon: 'success'
  621 + })
  622 + },
  623 + // 长按从常用功能移除
  624 + handleRemoveFromCommon(index) {
  625 + this.commonFunctions.splice(index, 1)
  626 + this.saveCommonFunctions()
  627 + uni.showToast({
  628 + title: '已移除',
  629 + icon: 'success'
  630 + })
  631 + },
  632 + // 检查登录状态
  633 + checkLoginStatus() {
  634 + const token = uni.getStorageSync('token')
  635 + if (!token) {
  636 + uni.reLaunch({
  637 + url: '/pages/login/login'
320 638 })
  639 + return
  640 + } else {
  641 + this.userInfo = uni.getStorageSync('userInfo')
321 642 }
  643 + },
  644 + // 页面跳转
  645 + goToPage(url) {
  646 + uni.navigateTo({
  647 + url: url
  648 + })
  649 + },
  650 +
  651 + // 处理导航栏高度变化
  652 + handleNavbarHeightChange(heightInfo) {
  653 + this.navbarHeightRpx = heightInfo.rpx || 0
  654 + },
  655 + // 退出登录
  656 + handleLogout() {
  657 + uni.showModal({
  658 + title: '提示',
  659 + content: '确定要退出登录吗？',
  660 + success: (res) => {
  661 + if (res.confirm) {
  662 + this.API.logout().then(res => {
  663 + if (res.code == 200) {
  664 + // 清除本地存储
  665 + uni.clearStorageSync()
  666 + // 跳转到登录页
  667 + uni.reLaunch({
  668 + url: '/pages/login/login'
  669 + })
  670 + }
  671 + })
  672 + }
  673 + }
  674 + })
322 675 }
323 676 }
  677 +}
324 678 </script>
325 679  
326 680 <style lang="scss" scoped>
327   - .page {
328   - position: absolute;
329   - left: 0;
330   - top: 0;
331   - width: 100%;
332   - height: 100%;
333   - background-color: #f5f7fa;
  681 +.page {
  682 + position: relative;
  683 + left: 0;
  684 + top: 0;
  685 + width: 100%;
  686 + min-height: 100vh;
  687 + background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
  688 + background-repeat: no-repeat;
  689 + background-size: 100% 100%;
  690 + font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  691 + -webkit-overflow-scrolling: touch;
  692 + overscroll-behavior-y: auto;
  693 +}
  694 +
  695 +.hero {
  696 + height: 60vh;
  697 + min-height: 520rpx;
  698 + display: flex;
  699 + flex-direction: column;
  700 + justify-content: center;
  701 + align-items: center;
  702 + padding: 20rpx 16rpx 0;
  703 + box-sizing: border-box;
  704 +}
  705 +
  706 +.hero-grid {
  707 + width: 100%;
  708 + display: grid;
  709 + grid-template-columns: repeat(auto-fill, 280px);
  710 + justify-content: center;
  711 + gap: 15px;
  712 + padding: 24rpx;
  713 + background: rgba(255, 255, 255, 0.6);
  714 + border-radius: 28rpx;
  715 + backdrop-filter: saturate(180%) blur(18px);
  716 + -webkit-backdrop-filter: saturate(180%) blur(18px);
  717 + box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  718 + grid-auto-flow: dense;
  719 +}
  720 +
  721 +.hero-item {
  722 + display: flex;
  723 + flex-direction: column;
  724 + justify-content: center;
  725 + align-items: center;
  726 + min-height: 200px;
  727 + transition: transform 300ms ease, opacity 300ms ease;
  728 +}
  729 +
  730 +.hero-item:active {
  731 + transform: scale(0.97);
  732 +}
  733 +
  734 +.hero-icon {
  735 + width: 140rpx;
  736 + height: 140rpx;
  737 + border-radius: 16rpx;
  738 + display: flex;
  739 + align-items: center;
  740 + justify-content: center;
  741 + box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.06);
  742 + border: 1px solid rgba(0, 0, 0, 0.1);
  743 + margin-bottom: 14rpx;
  744 +}
  745 +
  746 +.hero-icon image {
  747 + width: 64rpx;
  748 + height: 64rpx;
  749 + filter: brightness(0) invert(1);
  750 + transition: transform 300ms ease, opacity 300ms ease;
  751 +}
  752 +
  753 +.hero-text {
  754 + font-size: 28rpx;
  755 + color: #0f172a;
  756 +}
  757 +
  758 +.warpbox {
  759 + position: relative;
  760 + z-index: 111;
  761 + padding: 0 40rpx;
  762 + top: 90rpx;
  763 + /* #ifdef MP-WEIXIN */
  764 + top: 140rpx;
  765 + /* #endif */
  766 +}
  767 +
  768 +.warpboxss {
  769 + background: rgba(255, 255, 255, 0.7);
  770 + backdrop-filter: blur(20px) saturate(180%);
  771 + -webkit-backdrop-filter: blur(20px) saturate(180%);
  772 + padding: 30rpx;
  773 + border-radius: 24rpx;
  774 + box-shadow:
  775 + 0 8rpx 32rpx rgba(0, 0, 0, 0.08),
  776 + 0 0 0 1px rgba(255, 255, 255, 0.8) inset,
  777 + 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  778 + border: 1px solid rgba(255, 255, 255, 0.9);
  779 + margin-bottom: 40rpx;
  780 +
  781 + .warpboxs-small-title {
  782 + display: flex;
  783 + justify-content: space-between;
  784 + align-items: center;
  785 + font-size: 30rpx;
  786 + font-weight: 600;
  787 + color: #1f2937;
  788 +
  789 + .warpboxs-small-title-line {
  790 + display: inline-block;
  791 + background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%);
  792 + height: 26rpx;
  793 + width: 6rpx;
  794 + margin-right: 12rpx;
  795 + border-radius: 3rpx;
  796 + box-shadow:
  797 + 0 2rpx 8rpx rgba(67, 160, 71, 0.4),
  798 + 0 0 12rpx rgba(67, 160, 71, 0.3),
  799 + inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
  800 + position: relative;
  801 +
  802 + &::after {
  803 + content: '';
  804 + position: absolute;
  805 + top: 0;
  806 + left: 0;
  807 + right: 0;
  808 + bottom: 0;
  809 + border-radius: 3rpx;
  810 + background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  811 + pointer-events: none;
  812 + }
  813 + }
  814 +
  815 + .warpboxs-small-title-img {
  816 + display: flex;
  817 + align-items: center;
  818 + transition: transform 0.3s ease;
  819 + }
334 820 }
335   - .warpbox {
336   - position: relative;
337   - z-index: 111;
338   - padding: 0 40rpx;
339   - top: 90rpx;
340   - /* #ifdef MP-WEIXIN */
341   - top: 140rpx;
  821 +
  822 + /* 常用功能区样式 */
  823 + .common-func-row {
  824 + display: grid;
  825 + grid-template-columns: repeat(4, 1fr);
  826 + gap: 20rpx;
  827 + align-items: stretch;
  828 + margin-top: 30rpx;
  829 + }
  830 +
  831 + .common-func-btn {
  832 + text-align: center;
  833 + display: flex;
  834 + flex-direction: column;
  835 + align-items: center;
  836 + justify-content: center;
  837 + opacity: 0.85;
  838 + transition: opacity 0.2s ease;
  839 + touch-action: manipulation;
  840 +
  841 + &:active {
  842 + transform: translateY(-4rpx) scale(0.97);
  843 + }
  844 +
  845 + &:active .common-func-icon::after {
  846 + transform: scale(1) rotate(180deg);
  847 + }
  848 +
  849 + /* #ifdef H5 */
  850 + &:hover {
  851 + opacity: 1;
  852 + }
  853 +
342 854 /* #endif */
343 855 }
344 856  
345   - .warpboxss {
346   - background: #fff;
347   - padding: 30rpx;
348   - // margin: 0 25rpx 40rpx 25rpx;
349   - // margin: 30rpx 0;
350   - // margin: 40rpx 0;
351   - border-radius: 10rpx;
352   - box-shadow: 0 0 18rpx 10rpx #efefef;
353   - margin-bottom: 40rpx;
354   - .warpboxs-small-title {
  857 + .common-func-icon {
  858 + width: 100rpx;
  859 + height: 100rpx;
  860 + border-radius: 50rpx;
  861 + display: flex;
  862 + align-items: center;
  863 + justify-content: center;
  864 + margin-bottom: 12rpx;
  865 + position: relative;
  866 + transition: all 0.3s ease;
  867 + overflow: hidden;
  868 +
  869 + &::before {
  870 + content: '';
  871 + position: absolute;
  872 + top: 0;
  873 + left: 0;
  874 + right: 0;
  875 + bottom: 0;
  876 + border-radius: 50rpx;
  877 + background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  878 + opacity: 1;
  879 + z-index: 1;
  880 + }
  881 +
  882 + &::after {
  883 + content: '';
  884 + position: absolute;
  885 + top: -50%;
  886 + left: -50%;
  887 + width: 200%;
  888 + height: 200%;
  889 + background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  890 + transition: transform 0.6s ease;
  891 + transform: scale(0);
  892 + z-index: 2;
  893 + }
  894 +
  895 + image {
  896 + width: 50rpx;
  897 + height: 50rpx;
  898 + position: relative;
  899 + z-index: 3;
  900 + filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
  901 + }
  902 +
  903 + /* 主题色背景 - 渐变立体效果 */
  904 + &.icon-circle-bg-1 {
  905 + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
  906 + box-shadow:
  907 + 0 6rpx 20rpx rgba(30, 136, 229, 0.35),
  908 + 0 2rpx 8rpx rgba(30, 136, 229, 0.25),
  909 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  910 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  911 + }
  912 +
  913 + &.icon-circle-bg-2 {
  914 + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
  915 + box-shadow:
  916 + 0 6rpx 20rpx rgba(67, 160, 71, 0.35),
  917 + 0 2rpx 8rpx rgba(67, 160, 71, 0.25),
  918 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  919 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  920 + }
  921 +
  922 + &.icon-circle-bg-4 {
  923 + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
  924 + box-shadow:
  925 + 0 6rpx 20rpx rgba(0, 131, 143, 0.35),
  926 + 0 2rpx 8rpx rgba(0, 131, 143, 0.25),
  927 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  928 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  929 + }
  930 +
  931 + &.icon-circle-bg-7 {
  932 + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
  933 + box-shadow:
  934 + 0 6rpx 20rpx rgba(194, 24, 91, 0.35),
  935 + 0 2rpx 8rpx rgba(194, 24, 91, 0.25),
  936 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  937 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  938 + }
  939 +
  940 + &.icon-circle-bg-3 {
  941 + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
  942 + box-shadow:
  943 + 0 6rpx 20rpx rgba(211, 47, 47, 0.35),
  944 + 0 2rpx 8rpx rgba(211, 47, 47, 0.25),
  945 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  946 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  947 + }
  948 +
  949 + &.icon-circle-bg-5 {
  950 + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
  951 + box-shadow:
  952 + 0 6rpx 20rpx rgba(245, 124, 0, 0.35),
  953 + 0 2rpx 8rpx rgba(245, 124, 0, 0.25),
  954 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  955 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  956 + }
  957 +
  958 + &.icon-circle-bg-6 {
  959 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
  960 + box-shadow:
  961 + 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
  962 + 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
  963 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  964 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  965 + }
  966 +
  967 + &.icon-circle-bg-8 {
  968 + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
  969 + box-shadow:
  970 + 0 6rpx 20rpx rgba(249, 168, 37, 0.35),
  971 + 0 2rpx 8rpx rgba(249, 168, 37, 0.25),
  972 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  973 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  974 + }
  975 +
  976 + &.icon-circle-bg-9 {
  977 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
  978 + box-shadow:
  979 + 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
  980 + 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
  981 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  982 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  983 + }
  984 +
  985 + &.icon-circle-bg-10 {
  986 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
  987 + box-shadow:
  988 + 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
  989 + 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
  990 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  991 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  992 + }
  993 +
  994 + &.icon-circle-bg-11 {
  995 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
  996 + box-shadow:
  997 + 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
  998 + 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
  999 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1000 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1001 + }
  1002 +
  1003 + &.icon-circle-bg-12 {
  1004 + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
  1005 + box-shadow:
  1006 + 0 6rpx 20rpx rgba(0, 151, 167, 0.35),
  1007 + 0 2rpx 8rpx rgba(0, 151, 167, 0.25),
  1008 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1009 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1010 + }
  1011 +
  1012 + &.icon-circle-bg-13 {
  1013 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
  1014 + box-shadow:
  1015 + 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
  1016 + 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
  1017 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1018 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1019 + }
  1020 +
  1021 + &.icon-circle-bg-14 {
  1022 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
  1023 + box-shadow:
  1024 + 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
  1025 + 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
  1026 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1027 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1028 + }
  1029 +
  1030 + &.icon-circle-bg-15 {
  1031 + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
  1032 + box-shadow:
  1033 + 0 6rpx 20rpx rgba(173, 20, 87, 0.35),
  1034 + 0 2rpx 8rpx rgba(173, 20, 87, 0.25),
  1035 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1036 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1037 + }
  1038 +
  1039 + &.icon-circle-bg-16 {
  1040 + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
  1041 + box-shadow:
  1042 + 0 6rpx 20rpx rgba(251, 192, 45, 0.35),
  1043 + 0 2rpx 8rpx rgba(251, 192, 45, 0.25),
  1044 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1045 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1046 + }
  1047 +
  1048 + &.icon-circle-bg-17 {
  1049 + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
  1050 + box-shadow:
  1051 + 0 6rpx 20rpx rgba(93, 64, 55, 0.35),
  1052 + 0 2rpx 8rpx rgba(93, 64, 55, 0.25),
  1053 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1054 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1055 + }
  1056 + }
  1057 +
  1058 + .common-func-text {
  1059 + font-size: 26rpx;
  1060 + color: #0f172a;
  1061 + }
  1062 +
  1063 + .fun_box_fir {
  1064 + display: grid;
  1065 + grid-template-columns: repeat(4, 1fr);
  1066 + gap: 20rpx;
  1067 + align-items: stretch;
  1068 + margin-top: 12rpx;
  1069 +
  1070 + .fun_fir_1 {
  1071 + background: transparent;
  1072 + text-align: center;
355 1073 display: flex;
356   - justify-content: space-between;
  1074 + flex-direction: column;
  1075 + justify-content: center;
357 1076 align-items: center;
358   - font-size: 30rpx;
359   - font-weight: bold;
360   - color: #000;
361   -
362   - .warpboxs-small-title-line {
363   - display: inline-block;
364   - background-color: #009b4d;
365   - height: 26rpx;
366   - width: 10rpx;
367   - margin-right: 10rpx;
368   - border-radius: 18rpx;
  1077 + font-size: 26rpx;
  1078 + color: #0f172a;
  1079 + position: relative;
  1080 + transition: all 0.2s ease;
  1081 + box-sizing: border-box;
  1082 + padding: 8rpx 0;
  1083 + touch-action: manipulation;
  1084 + opacity: 0.8;
  1085 +
  1086 + &:active {
  1087 + transform: translateY(-4rpx) scale(0.97);
369 1088 }
370 1089  
371   - .warpboxs-small-title-img {
372   - display: flex;
373   - align-items: center;
374   - transition: transform 0.3s;
  1090 + &:active .icon::after {
  1091 + transform: scale(1) rotate(180deg);
375 1092 }
376   - }
377 1093  
378   - .fun_box_fir {
379   - display: flex;
380   - align-items: center;
381   - flex-wrap: wrap;
382   - // margin-top: 20rpx;
383   -
384   - .fun_fir_1 {
385   - flex-shrink: 0;
386   - background: #fff;
387   - text-align: center;
388   - width: 33%;
  1094 + /* #ifdef H5 */
  1095 + &:hover {
  1096 + opacity: 1;
  1097 + }
  1098 +
  1099 + /* #endif */
  1100 +
  1101 + .icon {
  1102 + border-radius: 20rpx;
  1103 + width: 100rpx;
  1104 + height: 100rpx;
389 1105 display: flex;
390   - flex-direction: column;
391   - justify-content: center;
392 1106 align-items: center;
393   - font-size: 24rpx;
394   - color: #000;
  1107 + justify-content: center;
  1108 + margin-bottom: 12rpx;
395 1109 position: relative;
396   - height: 170rpx;
397   - transition: all 0.2s;
398   - box-sizing: border-box;
399   -
400   - &:active {
401   - transform: scale(0.98);
402   - }
403   -
404   - .icon {
405   - // display: flex;
406   - // align-items: center;
407   - // justify-content: center;
408   - // padding:20rpx 30rpx;
409   - border-radius: 90%;
410   - width: 90rpx;
411   - height: 90rpx;
412   - display: flex;
413   - justify-content: baseline;
414   - align-items: center;
415   - margin-bottom: 8rpx;
416   -
417   - image {
418   - // width: 45rpx;
419   - height: 45rpx;
420   - margin: 0 auto;
421   - vertical-align: middle;
422   - // margin-bottom: 15rpx;
423   - }
  1110 + transition: all 0.3s ease;
  1111 + overflow: hidden;
424 1112  
425   - // &[class*="icon-circle-bg"] {
426   - // width: 90rpx;
427   - // height: 90rpx;
428   - // border-radius: 50%;
  1113 + &::before {
  1114 + content: '';
  1115 + position: absolute;
  1116 + top: 0;
  1117 + left: 0;
  1118 + right: 0;
  1119 + bottom: 0;
  1120 + border-radius: 20rpx;
  1121 + background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  1122 + opacity: 1;
  1123 + z-index: 1;
  1124 + }
429 1125  
430   - // image {
431   - // margin-bottom: 0;
432   - // }
433   - // }
  1126 + &::after {
  1127 + content: '';
  1128 + position: absolute;
  1129 + top: -50%;
  1130 + left: -50%;
  1131 + width: 200%;
  1132 + height: 200%;
  1133 + background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  1134 + transition: transform 0.6s ease;
  1135 + transform: scale(0);
  1136 + z-index: 2;
  1137 + }
434 1138  
435   - &.icon-circle-bg-1 {
436   - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); // 蓝色渐变
437   - }
  1139 + image {
  1140 + width: 50rpx;
  1141 + height: 50rpx;
  1142 + margin: 0 auto;
  1143 + vertical-align: middle;
  1144 + position: relative;
  1145 + z-index: 3;
  1146 + filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
  1147 + transition: transform 300ms ease, opacity 300ms ease;
  1148 + }
438 1149  
439   - &.icon-circle-bg-2 {
440   - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); // 绿色渐变
441   - }
  1150 + /* 主题色 - 渐变立体效果 */
  1151 + &.icon-circle-bg-1 {
  1152 + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
  1153 + box-shadow:
  1154 + 0 6rpx 20rpx rgba(30, 136, 229, 0.35),
  1155 + 0 2rpx 8rpx rgba(30, 136, 229, 0.25),
  1156 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1157 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1158 + }
442 1159  
443   - &.icon-circle-bg-3 {
444   - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); // 红色渐变
445   - }
  1160 + &.icon-circle-bg-2 {
  1161 + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
  1162 + box-shadow:
  1163 + 0 6rpx 20rpx rgba(67, 160, 71, 0.35),
  1164 + 0 2rpx 8rpx rgba(67, 160, 71, 0.25),
  1165 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1166 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1167 + }
446 1168  
447   - &.icon-circle-bg-4 {
448   - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%); // 青色渐变
449   - }
  1169 + &.icon-circle-bg-3 {
  1170 + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
  1171 + box-shadow:
  1172 + 0 6rpx 20rpx rgba(211, 47, 47, 0.35),
  1173 + 0 2rpx 8rpx rgba(211, 47, 47, 0.25),
  1174 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1175 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1176 + }
450 1177  
451   - &.icon-circle-bg-5 {
452   - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); // 橙色渐变
453   - }
  1178 + &.icon-circle-bg-4 {
  1179 + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
  1180 + box-shadow:
  1181 + 0 6rpx 20rpx rgba(0, 131, 143, 0.35),
  1182 + 0 2rpx 8rpx rgba(0, 131, 143, 0.25),
  1183 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1184 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1185 + }
454 1186  
455   - &.icon-circle-bg-6 {
456   - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); // 紫色渐变
457   - }
  1187 + &.icon-circle-bg-5 {
  1188 + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
  1189 + box-shadow:
  1190 + 0 6rpx 20rpx rgba(245, 124, 0, 0.35),
  1191 + 0 2rpx 8rpx rgba(245, 124, 0, 0.25),
  1192 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1193 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1194 + }
458 1195  
459   - &.icon-circle-bg-7 {
460   - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%); // 粉色渐变
461   - }
  1196 + &.icon-circle-bg-6 {
  1197 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
  1198 + box-shadow:
  1199 + 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
  1200 + 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
  1201 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1202 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1203 + }
462 1204  
463   - &.icon-circle-bg-8 {
464   - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%); // 黄色渐变
465   - }
  1205 + &.icon-circle-bg-7 {
  1206 + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
  1207 + box-shadow:
  1208 + 0 6rpx 20rpx rgba(194, 24, 91, 0.35),
  1209 + 0 2rpx 8rpx rgba(194, 24, 91, 0.25),
  1210 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1211 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1212 + }
466 1213  
467   - &.icon-circle-bg-9 {
468   - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); // 深蓝色渐变
469   - }
  1214 + &.icon-circle-bg-8 {
  1215 + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
  1216 + box-shadow:
  1217 + 0 6rpx 20rpx rgba(249, 168, 37, 0.35),
  1218 + 0 2rpx 8rpx rgba(249, 168, 37, 0.25),
  1219 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1220 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1221 + }
470 1222  
471   - &.icon-circle-bg-10 {
472   - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); // 深绿色渐变
473   - }
  1223 + &.icon-circle-bg-9 {
  1224 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
  1225 + box-shadow:
  1226 + 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
  1227 + 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
  1228 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1229 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1230 + }
474 1231  
475   - &.icon-circle-bg-11 {
476   - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); // 深红色渐变
477   - }
  1232 + &.icon-circle-bg-10 {
  1233 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
  1234 + box-shadow:
  1235 + 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
  1236 + 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
  1237 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1238 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1239 + }
478 1240  
479   - &.icon-circle-bg-12 {
480   - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%); // 深青色渐变
481   - }
  1241 + &.icon-circle-bg-11 {
  1242 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
  1243 + box-shadow:
  1244 + 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
  1245 + 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
  1246 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1247 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1248 + }
482 1249  
483   - &.icon-circle-bg-13 {
484   - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); // 深橙色渐变
485   - }
  1250 + &.icon-circle-bg-12 {
  1251 + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
  1252 + box-shadow:
  1253 + 0 6rpx 20rpx rgba(0, 151, 167, 0.35),
  1254 + 0 2rpx 8rpx rgba(0, 151, 167, 0.25),
  1255 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1256 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1257 + }
486 1258  
487   - &.icon-circle-bg-14 {
488   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); // 深紫色渐变
489   - }
  1259 + &.icon-circle-bg-13 {
  1260 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
  1261 + box-shadow:
  1262 + 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
  1263 + 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
  1264 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1265 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1266 + }
490 1267  
491   - &.icon-circle-bg-15 {
492   - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%); // 深粉色渐变
493   - }
  1268 + &.icon-circle-bg-14 {
  1269 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
  1270 + box-shadow:
  1271 + 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
  1272 + 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
  1273 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1274 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1275 + }
494 1276  
495   - &.icon-circle-bg-16 {
496   - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%); // 深黄色渐变
497   - }
  1277 + &.icon-circle-bg-15 {
  1278 + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
  1279 + box-shadow:
  1280 + 0 6rpx 20rpx rgba(173, 20, 87, 0.35),
  1281 + 0 2rpx 8rpx rgba(173, 20, 87, 0.25),
  1282 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1283 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1284 + }
498 1285  
499   - &.icon-circle-bg-17 {
500   - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%); // 棕色渐变
501   - }
  1286 + &.icon-circle-bg-16 {
  1287 + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
  1288 + box-shadow:
  1289 + 0 6rpx 20rpx rgba(251, 192, 45, 0.35),
  1290 + 0 2rpx 8rpx rgba(251, 192, 45, 0.25),
  1291 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1292 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
502 1293 }
503   - }
504 1294  
505   - .fun_fir_border {
506   - border-top: 2rpx solid #efefef;
507   - border-bottom: 2rpx solid #efefef;
508   - border-right: 2rpx solid #efefef;
509   - border-left: 2rpx solid #efefef;
  1295 + &.icon-circle-bg-17 {
  1296 + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
  1297 + box-shadow:
  1298 + 0 6rpx 20rpx rgba(93, 64, 55, 0.35),
  1299 + 0 2rpx 8rpx rgba(93, 64, 55, 0.25),
  1300 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1301 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1302 + }
510 1303 }
511 1304 }
  1305 +
  1306 + .fun_fir_border {
  1307 + border: none;
  1308 + }
  1309 + }
  1310 +
  1311 + .mgmt-row {
  1312 + display: grid;
  1313 + grid-template-columns: repeat(4, 1fr);
  1314 + gap: 20rpx;
  1315 + align-items: stretch;
  1316 + margin-top: 12rpx;
  1317 + }
  1318 +
  1319 + .mgmt-btn {
  1320 + text-align: center;
  1321 + display: flex;
  1322 + flex-direction: column;
  1323 + align-items: center;
  1324 + justify-content: center;
  1325 + font-size: 26rpx;
  1326 + color: #0f172a;
  1327 + opacity: 0.8;
  1328 + transition: opacity 0.2s ease;
  1329 + touch-action: manipulation;
  1330 +
  1331 + &:active {
  1332 + transform: translateY(-4rpx) scale(0.97);
  1333 + }
  1334 +
  1335 + &:active .mgmt-icon::after {
  1336 + transform: scale(1) rotate(180deg);
  1337 + }
  1338 +
  1339 + /* #ifdef H5 */
  1340 + &:hover {
  1341 + opacity: 1;
  1342 + }
  1343 +
  1344 + /* #endif */
  1345 + }
  1346 +
  1347 + .mgmt-icon {
  1348 + border-radius: 20rpx;
  1349 + width: 100rpx;
  1350 + height: 100rpx;
  1351 + display: flex;
  1352 + align-items: center;
  1353 + justify-content: center;
  1354 + margin-bottom: 12rpx;
  1355 + position: relative;
  1356 + transition: all 0.3s ease;
  1357 + overflow: hidden;
  1358 +
  1359 + &::before {
  1360 + content: '';
  1361 + position: absolute;
  1362 + top: 0;
  1363 + left: 0;
  1364 + right: 0;
  1365 + bottom: 0;
  1366 + border-radius: 20rpx;
  1367 + background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  1368 + opacity: 1;
  1369 + z-index: 1;
  1370 + }
  1371 +
  1372 + &::after {
  1373 + content: '';
  1374 + position: absolute;
  1375 + top: -50%;
  1376 + left: -50%;
  1377 + width: 200%;
  1378 + height: 200%;
  1379 + background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  1380 + transition: transform 0.6s ease;
  1381 + transform: scale(0);
  1382 + z-index: 2;
  1383 + }
  1384 +
  1385 + image {
  1386 + width: 50rpx;
  1387 + height: 50rpx;
  1388 + position: relative;
  1389 + z-index: 3;
  1390 + filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
  1391 + }
  1392 +
  1393 + /* 主题色背景 - 渐变立体效果 */
  1394 + &.icon-circle-bg-6 {
  1395 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
  1396 + box-shadow:
  1397 + 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
  1398 + 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
  1399 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1400 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1401 + }
  1402 +
  1403 + &.icon-circle-bg-9 {
  1404 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
  1405 + box-shadow:
  1406 + 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
  1407 + 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
  1408 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1409 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1410 + }
  1411 +
  1412 + &.icon-circle-bg-10 {
  1413 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
  1414 + box-shadow:
  1415 + 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
  1416 + 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
  1417 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1418 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1419 + }
  1420 + }
  1421 +
  1422 + .mgmt-text {
  1423 + font-size: 26rpx;
  1424 + color: #0f172a;
  1425 + }
  1426 +
  1427 + .bottom-row {
  1428 + display: grid;
  1429 + grid-template-columns: repeat(4, 1fr);
  1430 + gap: 20rpx;
  1431 + align-items: stretch;
  1432 + margin-top: 12rpx;
  1433 + }
  1434 +
  1435 + .bottom-btn {
  1436 + text-align: center;
  1437 + display: flex;
  1438 + flex-direction: column;
  1439 + align-items: center;
  1440 + justify-content: center;
  1441 + font-size: 26rpx;
  1442 + color: #0f172a;
  1443 + opacity: 0.8;
  1444 + transition: opacity 0.2s ease;
  1445 + touch-action: manipulation;
  1446 +
  1447 + &:active {
  1448 + transform: translateY(-4rpx) scale(0.97);
  1449 + }
  1450 +
  1451 + &:active .bottom-icon::after {
  1452 + transform: scale(1) rotate(180deg);
  1453 + }
  1454 +
  1455 + /* #ifdef H5 */
  1456 + &:hover {
  1457 + opacity: 1;
  1458 + }
  1459 +
  1460 + /* #endif */
  1461 + }
  1462 +
  1463 + .bottom-icon {
  1464 + border-radius: 20rpx;
  1465 + width: 100rpx;
  1466 + height: 100rpx;
  1467 + display: flex;
  1468 + align-items: center;
  1469 + justify-content: center;
  1470 + margin-bottom: 12rpx;
  1471 + position: relative;
  1472 + transition: all 0.3s ease;
  1473 + overflow: hidden;
  1474 +
  1475 + &::before {
  1476 + content: '';
  1477 + position: absolute;
  1478 + top: 0;
  1479 + left: 0;
  1480 + right: 0;
  1481 + bottom: 0;
  1482 + border-radius: 20rpx;
  1483 + background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  1484 + opacity: 1;
  1485 + z-index: 1;
  1486 + }
  1487 +
  1488 + &::after {
  1489 + content: '';
  1490 + position: absolute;
  1491 + top: -50%;
  1492 + left: -50%;
  1493 + width: 200%;
  1494 + height: 200%;
  1495 + background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  1496 + transition: transform 0.6s ease;
  1497 + transform: scale(0);
  1498 + z-index: 2;
  1499 + }
  1500 +
  1501 + image {
  1502 + width: 50rpx;
  1503 + height: 50rpx;
  1504 + position: relative;
  1505 + z-index: 3;
  1506 + filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
  1507 + }
  1508 +
  1509 + /* 主题色背景 - 渐变立体效果 */
  1510 + &.icon-circle-bg-11 {
  1511 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
  1512 + box-shadow:
  1513 + 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
  1514 + 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
  1515 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1516 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1517 + }
  1518 +
  1519 + &.icon-circle-bg-13 {
  1520 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
  1521 + box-shadow:
  1522 + 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
  1523 + 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
  1524 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1525 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1526 + }
  1527 +
  1528 + &.icon-circle-bg-14 {
  1529 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
  1530 + box-shadow:
  1531 + 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
  1532 + 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
  1533 + inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
  1534 + inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  1535 + }
  1536 + }
  1537 +
  1538 + .bottom-text {
  1539 + font-size: 26rpx;
  1540 + color: #0f172a;
  1541 + }
  1542 +
  1543 + @media (min-width: 768px) {
  1544 + .warpboxss .fun_box_fir .fun_fir_1 {
  1545 + min-height: 200rpx;
  1546 + }
  1547 + }
  1548 +
  1549 + /* 深色主题 */
  1550 + :root[data-theme="dark"] .page {
  1551 + background-color: #0b0f14;
  1552 + color: #e5e7eb;
  1553 + }
  1554 +
  1555 + :root[data-theme="dark"] .warpboxss {
  1556 + background: rgba(22, 26, 33, 0.6);
  1557 + box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.35);
  1558 + }
  1559 +
  1560 + :root[data-theme="dark"] .warpboxs-small-title {
  1561 + color: #e5e7eb;
  1562 + }
  1563 +
  1564 + /* RTL支持 */
  1565 + .page[dir="rtl"] .warpboxs-small-title {
  1566 + flex-direction: row-reverse;
  1567 + text-align: right;
  1568 + }
  1569 +
  1570 + .page[dir="rtl"] .warpboxs-small-title .warpboxs-small-title-img {
  1571 + justify-content: flex-start;
512 1572 }
  1573 +}
513 1574 </style>
514 1575 \ No newline at end of file
... ...