更新

uniapp/components/sub/SubFunctions.vue

@@ -26,9 +26,7 @@
 			<view v-else class="group-list">
 				<view v-for="group in groups" :key="group.id" class="group-card">
 					<view class="group-head">
-						<view class="group-bar" />
 						<text class="group-title">{{ group.title }}</text>
-						<text class="group-count">{{ group.items.length }}</text>
 					</view>
 					<view class="grid">
 						<view
@@ -38,8 +36,11 @@
 							@tap="openMenu(item, item.title)"
 						>
 							<view class="fn-card" :class="{ locked: item.locked }">
-								<view class="tint-icon fn-icon" :class="item.locked ? 'tint-off' : 'tint-' + (item.tintIndex % 8)">
-									<FaIcon :name="item.icon || fallbackIcon" color="#ffffff" :size="18" />
+								<view
+									class="tint-icon fn-icon"
+									:class="item.locked ? 'tint-off' : 'tint-' + (item.tintIndex % 8)"
+								>
+									<FaIcon :name="item.icon || fallbackIcon" color="#ffffff" :size="20" />
 								</view>
 								<text class="fn-name">{{ item.title }}</text>
 							</view>
@@ -265,7 +266,9 @@ onShow(() => {
 	word-break: break-all;
 }
 
-/* ============ 分组卡：外层一个 card，内含若干功能 card ============ */
+/* ============ 分组卡：白色卡片 + 一行 4 个功能宫格（图标在上、名称在下） ============
+   cell 占 25% 宽并自带右侧间隙，容器用负 margin 抵消末列间隙，
+   避免使用 calc 除法——小程序端 wxss 对复杂 calc 支持不稳。 */
 .group-card {
 	@include card;
 	padding: 24rpx 20rpx 8rpx;
@@ -282,32 +285,15 @@ onShow(() => {
 	padding: 0 4rpx 20rpx;
 }
 
-.group-bar {
-	width: 6rpx;
-	height: 28rpx;
-	border-radius: $radius-full;
-	background: $color-primary;
-	flex-shrink: 0;
-}
-
 .group-title {
+	@include section-title;
 	flex: 1;
 	min-width: 0;
-	font-size: 28rpx;
-	font-weight: 600;
-	color: $color-text;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.group-count {
-	@include chip;
-}
-
-/* ============ 功能宫格：一行 4 个 ============
-   cell 占 25% 宽并自带右侧间隙，容器用负 margin 抵消末列间隙，
-   避免使用 calc 除法——小程序端 wxss 对复杂 calc 支持不稳。 */
 .grid {
 	display: flex;
 	flex-wrap: wrap;
@@ -317,15 +303,11 @@ onShow(() => {
 .cell {
 	width: 25%;
 	padding-right: 16rpx;
-	margin-bottom: 16rpx;
+	margin-bottom: 24rpx;
 	box-sizing: border-box;
 }
 
 .fn-card {
-	height: 100%;
-	padding: 18rpx 6rpx 16rpx;
-	border-radius: $radius-md;
-	background: $color-bg-page;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -338,12 +320,12 @@ onShow(() => {
 }
 
 .fn-icon {
-	@include tint-icon(64rpx, 18rpx);
+	@include tint-icon(84rpx, 24rpx);
 }
 
 .fn-name {
 	max-width: 100%;
-	font-size: 22rpx;
+	font-size: 24rpx;
 	line-height: 1.3;
 	color: $color-text;
 	text-align: center;