From 7e260a1d57f880b8e901486798ed3b040ef903ec Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Sat, 4 Apr 2026 00:20:24 +0800
Subject: [PATCH] feat(odf-uniapp): Refactor global background styling to use
 centralized page background

- Replace individual page background images with global page background in App.vue
- Update pages.json global styles to use transparent colors for navigation and backgrounds
- Remove redundant bg-image elements and styles from all page components
- Set global page background with login_bg.png image, cover sizing, and fixed attachment
- Simplify individual page styling by removing duplicate background color declarations
- Consolidate background management to single source of truth in App.vue for consistent theming
---
 odf-uniapp/App.vue                         |  6 +++++-
 odf-uniapp/pages.json                      |  8 ++++----
 odf-uniapp/pages/cable/index.vue           | 13 +------------
 odf-uniapp/pages/change-password/index.vue | 13 +------------
 odf-uniapp/pages/checkin/index.vue         | 13 +------------
 odf-uniapp/pages/fault-add/index.vue       | 13 +------------
 odf-uniapp/pages/fault-detail/index.vue    | 13 +------------
 odf-uniapp/pages/fault-list/index.vue      | 13 +------------
 odf-uniapp/pages/home/index.vue            | 13 +------------
 odf-uniapp/pages/login/index.vue           |  4 +---
 odf-uniapp/pages/portal/index.vue          | 13 +------------
 odf-uniapp/pages/rack-detail/index.vue     | 13 +------------
 odf-uniapp/pages/rack/index.vue            | 13 +------------
 odf-uniapp/pages/region/index.vue          | 13 +------------
 odf-uniapp/pages/room/index.vue            | 13 +------------
 odf-uniapp/pages/route-plan/index.vue      | 13 +------------
 odf-uniapp/pages/search/index.vue          | 13 +------------
 odf-uniapp/pages/settings/index.vue        | 13 +------------
 odf-uniapp/pages/start/index.vue           |  2 +-
 odf-uniapp/pages/trunk-search/index.vue    | 13 +------------
 odf-uniapp/pages/trunk/index.vue           | 13 +------------
 21 files changed, 28 insertions(+), 213 deletions(-)

diff --git a/odf-uniapp/App.vue b/odf-uniapp/App.vue
index 2e3cca8..a3d2361 100644
--- a/odf-uniapp/App.vue
+++ b/odf-uniapp/App.vue
@@ -15,6 +15,10 @@
 <style>
 	/*每个页面公共css */
 	page {
-		background-color: #F5F5F5;
+		background-image: url('/static/images/login_bg.png');
+		background-size: cover;
+		background-position: center;
+		background-attachment: fixed;
+		min-height: 100vh;
 	}
 </style>
diff --git a/odf-uniapp/pages.json b/odf-uniapp/pages.json
index 9ff3b8b..c1c1fc4 100644
--- a/odf-uniapp/pages.json
+++ b/odf-uniapp/pages.json
@@ -139,9 +139,9 @@
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
 		"navigationBarTitleText": "绥时录",
-		"navigationBarBackgroundColor": "#1A73EC",
-		"backgroundColor": "#F5F5F5",
-		"backgroundColorTop": "#F5F5F5",
-		"backgroundColorBottom": "#F5F5F5"
+		"navigationBarBackgroundColor": "transparent",
+		"backgroundColor": "transparent",
+		"backgroundColorTop": "transparent",
+		"backgroundColorBottom": "transparent"
 	}
 }
\ No newline at end of file
diff --git a/odf-uniapp/pages/cable/index.vue b/odf-uniapp/pages/cable/index.vue
index f067faf..41b8b99 100644
--- a/odf-uniapp/pages/cable/index.vue
+++ b/odf-uniapp/pages/cable/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="cable-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -108,16 +106,7 @@ onPullDownRefresh(() => {
 .cable-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/change-password/index.vue b/odf-uniapp/pages/change-password/index.vue
index 99a635b..2137f03 100644
--- a/odf-uniapp/pages/change-password/index.vue
+++ b/odf-uniapp/pages/change-password/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="change-password-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -85,16 +83,7 @@ async function handleSubmit() {
 .change-password-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/checkin/index.vue b/odf-uniapp/pages/checkin/index.vue
index 0b3eff4..7cf0c6b 100644
--- a/odf-uniapp/pages/checkin/index.vue
+++ b/odf-uniapp/pages/checkin/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="checkin-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -135,16 +133,7 @@ onLoad((options) => {
 .checkin-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/fault-add/index.vue b/odf-uniapp/pages/fault-add/index.vue
index 6c6d78d..599b015 100644
--- a/odf-uniapp/pages/fault-add/index.vue
+++ b/odf-uniapp/pages/fault-add/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="fault-add-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -393,19 +391,10 @@ onLoad((options) => {
 .fault-add-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
+  background-color: transparent;
   padding-bottom: 120rpx;
 }
 
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
-}
-
 .content {
   position: relative;
   z-index: 1;
diff --git a/odf-uniapp/pages/fault-detail/index.vue b/odf-uniapp/pages/fault-detail/index.vue
index 5f957a7..a828728 100644
--- a/odf-uniapp/pages/fault-detail/index.vue
+++ b/odf-uniapp/pages/fault-detail/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="fault-detail-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -295,19 +293,10 @@ onLoad((options) => {
 .fault-detail-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
+  background-color: transparent;
   padding-bottom: 120rpx;
 }
 
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
-}
-
 .content {
   position: relative;
   z-index: 1;
diff --git a/odf-uniapp/pages/fault-list/index.vue b/odf-uniapp/pages/fault-list/index.vue
index f8f2f7e..c237df8 100644
--- a/odf-uniapp/pages/fault-list/index.vue
+++ b/odf-uniapp/pages/fault-list/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="fault-list-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -143,19 +141,10 @@ onReachBottom(() => {
 .fault-list-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
+  background-color: transparent;
   padding-bottom: 120rpx;
 }
 
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
-}
-
 .content {
   position: relative;
   z-index: 1;
diff --git a/odf-uniapp/pages/home/index.vue b/odf-uniapp/pages/home/index.vue
index c9a1e46..c14e697 100644
--- a/odf-uniapp/pages/home/index.vue
+++ b/odf-uniapp/pages/home/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="home-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -136,16 +134,7 @@ onPullDownRefresh(() => {
 .home-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/login/index.vue b/odf-uniapp/pages/login/index.vue
index d0a9e3b..af7821f 100644
--- a/odf-uniapp/pages/login/index.vue
+++ b/odf-uniapp/pages/login/index.vue
@@ -61,9 +61,7 @@ async function handleLogin() {
   flex-direction: column;
   align-items: center;
   height: 100vh;
-  background-image: url('/static/images/login_bg.png');
-  background-size: cover;
-  background-position: center;
+  background-color: transparent;
 }
 
 .app-title {
diff --git a/odf-uniapp/pages/portal/index.vue b/odf-uniapp/pages/portal/index.vue
index dc1a51c..cb30a7e 100644
--- a/odf-uniapp/pages/portal/index.vue
+++ b/odf-uniapp/pages/portal/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="portal-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -86,16 +84,7 @@ onLoad(() => {
 .portal-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/rack-detail/index.vue b/odf-uniapp/pages/rack-detail/index.vue
index 529bcd7..61ab3ad 100644
--- a/odf-uniapp/pages/rack-detail/index.vue
+++ b/odf-uniapp/pages/rack-detail/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="rack-detail-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -240,16 +238,7 @@ onLoad((options) => {
 .rack-detail-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/rack/index.vue b/odf-uniapp/pages/rack/index.vue
index 3a44638..bc59ad9 100644
--- a/odf-uniapp/pages/rack/index.vue
+++ b/odf-uniapp/pages/rack/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="rack-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -127,16 +125,7 @@ onReachBottom(() => {
 .rack-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/region/index.vue b/odf-uniapp/pages/region/index.vue
index e422dde..e0f5f2a 100644
--- a/odf-uniapp/pages/region/index.vue
+++ b/odf-uniapp/pages/region/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="region-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -66,16 +64,7 @@ onLoad((options) => {
 .region-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/room/index.vue b/odf-uniapp/pages/room/index.vue
index 5efee3a..2d63b5a 100644
--- a/odf-uniapp/pages/room/index.vue
+++ b/odf-uniapp/pages/room/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="room-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -100,16 +98,7 @@ onReachBottom(() => {
 .room-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/route-plan/index.vue b/odf-uniapp/pages/route-plan/index.vue
index e4fb552..945381a 100644
--- a/odf-uniapp/pages/route-plan/index.vue
+++ b/odf-uniapp/pages/route-plan/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="route-plan-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -379,16 +377,7 @@ onLoad(() => {
 .route-plan-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/search/index.vue b/odf-uniapp/pages/search/index.vue
index 0210275..e0d0dd6 100644
--- a/odf-uniapp/pages/search/index.vue
+++ b/odf-uniapp/pages/search/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="search-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -192,16 +190,7 @@ onLoad((options) => {
 .search-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/settings/index.vue b/odf-uniapp/pages/settings/index.vue
index b64ab81..7677d24 100644
--- a/odf-uniapp/pages/settings/index.vue
+++ b/odf-uniapp/pages/settings/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="settings-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -54,16 +52,7 @@ function handleLogout() {
 .settings-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/start/index.vue b/odf-uniapp/pages/start/index.vue
index e40f7d2..617b4af 100644
--- a/odf-uniapp/pages/start/index.vue
+++ b/odf-uniapp/pages/start/index.vue
@@ -36,7 +36,7 @@ onLoad(() => {
   align-items: center;
   justify-content: center;
   height: 100vh;
-  background-color: #ffffff;
+  background-color: transparent;
 }
 
 .app-name {
diff --git a/odf-uniapp/pages/trunk-search/index.vue b/odf-uniapp/pages/trunk-search/index.vue
index 108182a..247b9a5 100644
--- a/odf-uniapp/pages/trunk-search/index.vue
+++ b/odf-uniapp/pages/trunk-search/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="trunk-search-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -123,16 +121,7 @@ onLoad((options) => {
 .trunk-search-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {
diff --git a/odf-uniapp/pages/trunk/index.vue b/odf-uniapp/pages/trunk/index.vue
index 84e65b8..282c988 100644
--- a/odf-uniapp/pages/trunk/index.vue
+++ b/odf-uniapp/pages/trunk/index.vue
@@ -1,7 +1,5 @@
 <template>
   <view class="trunk-page">
-    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />
-
     <view class="content">
       <!-- 顶部导航栏 -->
       <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
@@ -73,16 +71,7 @@ onPullDownRefresh(() => {
 .trunk-page {
   position: relative;
   min-height: 100vh;
-  background-color: #F5F5F5;
-}
-
-.bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 500rpx;
-  z-index: 0;
+  background-color: transparent;
 }
 
 .content {