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 <template> 1 <template>
2 <view class="page"> 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 </view> 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 </view> 20 </view>
34 - <view>活动开单</view> 21 + <view class="common-func-text">{{ item.text }}</view>
35 </view> 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 </view> 34 </view>
43 </view> 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 </view> 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 </view> 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 </view> 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 </view> 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 </view> 90 </view>
78 - <view>鼎轩开单</view>  
79 </view> 91 </view>
80 </view> 92 </view>
81 </view> 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 </view> 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 </view> 127 </view>
99 - <view>会员</view>  
100 </view> 128 </view>
101 </view> 129 </view>
102 </view> 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 </view> 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 </view> 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 </view> 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 </view> 168 </view>
136 - <view>报销审核</view>  
137 </view> 169 </view>
138 </view> 170 </view>
139 </view> 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 </view> 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 </view> 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 </view> 205 </view>
164 - <view>毛巾记录</view>  
165 </view> 206 </view>
166 </view> 207 </view>
167 </view> 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 </view> 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 </view> 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 </view> 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 </view> 245 </view>
200 - <view>报表</view>  
201 </view> 246 </view>
202 - </view>  
203 - <!-- <view class="fun_box_fir"> 247 + <!-- <view class="fun_box_fir">
204 <view class="fun_fir_1 fun_fir_border" @click="handleLogout"> 248 <view class="fun_fir_1 fun_fir_border" @click="handleLogout">
205 <view class="icon"> 249 <view class="icon">
206 <u-icon name="arrow-rightward" size="32" color="#43a047"></u-icon> 250 <u-icon name="arrow-rightward" size="32" color="#43a047"></u-icon>
@@ -208,306 +252,1323 @@ @@ -208,306 +252,1323 @@
208 <view>退出</view> 252 <view>退出</view>
209 </view> 253 </view>
210 </view> --> 254 </view> -->
  255 + </view>
211 </view> 256 </view>
  257 + <view style="height: 140rpx;"></view>
  258 + <!-- 自定义 tabBar -->
  259 + <custom-tab-bar />
212 </view> 260 </view>
213 - <view style="height: 140rpx;"></view>  
214 - <!-- 自定义 tabBar -->  
215 - <custom-tab-bar /> 261 +
216 </view> 262 </view>
217 -</view>  
218 </template> 263 </template>
219 264
220 <script> 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 this.userInfo = uni.getStorageSync('userInfo') 514 this.userInfo = uni.getStorageSync('userInfo')
271 this.newuserInfo = uni.getStorageSync('newuserInfo') || {} 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 } else { 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 </script> 678 </script>
325 679
326 <style lang="scss" scoped> 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 /* #endif */ 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 display: flex; 1073 display: flex;
356 - justify-content: space-between; 1074 + flex-direction: column;
  1075 + justify-content: center;
357 align-items: center; 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 display: flex; 1105 display: flex;
390 - flex-direction: column;  
391 - justify-content: center;  
392 align-items: center; 1106 align-items: center;
393 - font-size: 24rpx;  
394 - color: #000; 1107 + justify-content: center;
  1108 + margin-bottom: 12rpx;
395 position: relative; 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 </style> 1574 </style>
514 \ No newline at end of file 1575 \ No newline at end of file