fix: 首页样式完善。

src/pages/main/home.vue

@@ -1,55 +1,55 @@
 <template>
   <!-- <nut-row class="home_home" :style="{ marginTop: navBarHeight + 'px' }"> -->
   <nut-row class="home_home">
-    <CustomNavigationBar @refresh="resUsetInfo" />
+    <!-- 固定区域开始 -->
+    <view class="sticky-header">
+      <CustomNavigationBar @refresh="resUsetInfo" />
+      <!-- 头部操作按钮区 -->
+      <nut-col
+        :span="24"
+        class="view_f_between header-btn-container"
+      >
+       <view>
+          <nut-button type="primary" class="btn header-btn" size="small" @click="changeMode">
+            <template #icon>
+              <IconFont :name="change" size="18" />
+            </template>
+            <text class="font_32 c_fff">切换模式</text>
+          </nut-button>
+        </view>
+        <view>
+          <nut-button
+            type="primary"
+            class="btn header-btn font_28"
+            size="small"
+            open-type="contact"
+          >
+            <template #icon>
+              <IconFont :name="phone" size="18" />
+            </template>
+            <text class="font_32">联系工程师</text>
+          </nut-button>
+        </view>
+        <view>
+          <nut-button
+            type="primary"
+            class="btn header-btn header-btn-warning font_28"
+            size="small"
+            @click="openNotice"
+          >
+            <template #icon>
+              <Tips size="18" />
+            </template>
+            <text class="font_32">系统公告</text>
+          </nut-button>
+        </view>
+      </nut-col>
+    </view>
+    <!-- 固定区域结束 -->
     <nut-col :span="24" class="container" :class="showChart ? 'ov' : ''">
       <nut-config-provider :theme-vars="themeVars">
         <nut-row class="body" :catch-move="false">
-          <view :style="{ height: '120rpx' }">
+          <!-- 消息通知 -->
-            <!-- 头部操作按钮区 -->
-            <nut-col
-              :span="24"
-              class="view_f_between"
-              :style="{ padding: '20rpx 20rpx 0 20rpx' }"
-            >
-             <view>
-                <nut-button type="primary" class="btn" size="small" @click="changeMode">
-                  <template #icon>
-                    <IconFont :name="change" size="18" />
-                  </template>
-                  <text class="font_32 c_fff">切换模式</text>
-                </nut-button>
-              </view>
-                       <view>
-                <nut-button
-                  type="primary"
-                  class="btn font_28"
-                  size="small"
-                  open-type="contact"
-                >
-                  <template #icon>
-                    <IconFont :name="phone" size="18" />
-                  </template>
-                  <text class="font_32">联系工程师</text>
-                </nut-button>
-              </view>
-              <view>
-                <nut-button
-                  type="warning"
-                  class="btn font_28"
-                  size="small"
-                  @click="openNotice"
-                >
-                  <template #icon>
-                    <Tips size="18" />
-                  </template>
-                  <text class="font_32">系统公告</text>
-                </nut-button>
-              </view>
-     
-             
-            </nut-col>
-            <!-- 消息通知 -->
             <nut-col
               :span="24"
               class="pond m_t_15 view_f_between"
@@ -94,7 +94,6 @@
                
               </view>
             </nut-col>
-          </view>
           <!-- 模式一 -->
           <nut-col
             :span="24"
@@ -1263,6 +1262,56 @@ function toPay() {
 /** -----------------method end------------------- */
 </script>
 <style lang="scss">
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  background: #fff;
+  padding-bottom: 10rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+}
+
+.header-btn-container {
+  padding: 20rpx !important;
+  gap: 16rpx !important;
+  display: flex !important;
+  align-items: stretch !important;
+  background: #fff !important;
+  
+  view {
+    flex: 1;
+    display: flex;
+  }
+}
+
+.header-btn {
+  border-radius: 8rpx !important;
+  width: 100%;
+  height: 72rpx !important;
+  min-height: 72rpx !important;
+  max-height: 72rpx !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-sizing: border-box !important;
+  font-size: 28rpx !important;
+  font-weight: 500 !important;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
+  transition: all 0.3s ease !important;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1) !important;
+  }
+}
+
+.header-btn-warning {
+  background: #ff8800 !important;
+  background-color: #ff8800 !important;
+}
+
 .home_home {
   width: 100%;
   height: 100%;