refactor(pages): 使用s-layout重构更多服务页面

pages/sub/service/more.vue

@@ -1,32 +1,33 @@
 <!-- 更多服务 - 模仿首页功能入口网格 -->
 <template>
-  <view class="more-service-page">
+  <s-layout title="更多服务">
-    <!-- 标题区 -->
+    <view class="more-service-page">
-    <view class="page-header">
+      <!-- 标题区 -->
-      <text class="page-title">更多服务</text>
+      <view class="page-header">
-      <text class="page-subtitle">可在此处查看所有服务哦~</text>
+        <text class="page-subtitle">可在此处查看所有服务哦~</text>
-    </view>
+      </view>
 
-    <!-- 功能入口网格 4列自适应 -->
+      <!-- 功能入口网格 4列自适应 -->
-    <view class="service-grid" v-if="serviceList.length > 0">
+      <view class="service-grid" v-if="serviceList.length > 0">
-      <view
+        <view
-        class="grid-item"
+          class="grid-item"
-        v-for="(item, index) in serviceList"
+          v-for="(item, index) in serviceList"
-        :key="index"
+          :key="index"
-        @tap="handleServiceTap(item)"
+          @tap="handleServiceTap(item)"
-      >
+        >
-        <view class="icon-wrapper" :style="{ background: item.bgGradient }">
+          <view class="icon-wrapper" :style="{ background: item.bgGradient }">
-          <image class="icon-img" :src="item.icon" mode="aspectFit"></image>
+            <image class="icon-img" :src="item.icon" mode="aspectFit"></image>
+          </view>
+          <text class="icon-label">{{ item.label }}</text>
         </view>
-        <text class="icon-label">{{ item.label }}</text>
+      </view>
+
+      <!-- 空状态 -->
+      <view class="empty-state" v-else>
+        <text class="empty-text">暂无数据</text>
       </view>
     </view>
-
+  </s-layout>
-    <!-- 空状态 -->
-    <view class="empty-state" v-else>
-      <text class="empty-text">暂无数据</text>
-    </view>
-  </view>
 </template>
 
 <script setup>