outsource/odf_new
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(odf-uniapp): Refactor global background styling to use centralized page background

Browse Source 
- 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
This commit is contained in:
zpc 2026-04-04 00:20:24 +08:00
parent 3da6b38d8e
commit 7e260a1d57
21 changed files with 28 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
odf-uniapp/App.vue
View File

@ -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>

8
odf-uniapp/pages.json
View File

@ -139,9 +139,9 @@
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "绥时录",
"navigationBarBackgroundColor": "#1A73EC",
"backgroundColor": "#F5F5F5",
"backgroundColorTop": "#F5F5F5",
"backgroundColorBottom": "#F5F5F5"
"navigationBarBackgroundColor": "transparent",
"backgroundColor": "transparent",
"backgroundColorTop": "transparent",
"backgroundColorBottom": "transparent"
}
}

13
odf-uniapp/pages/cable/index.vue
View File

@ -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 {

13
odf-uniapp/pages/change-password/index.vue
View File

@ -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 {

13
odf-uniapp/pages/checkin/index.vue
View File

@ -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 {

13
odf-uniapp/pages/fault-add/index.vue
View File

@ -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;

13
odf-uniapp/pages/fault-detail/index.vue
View File

@ -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;

13
odf-uniapp/pages/fault-list/index.vue
View File

@ -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;

13
odf-uniapp/pages/home/index.vue
View File

@ -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 {

4
odf-uniapp/pages/login/index.vue
View File

@ -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 {

13
odf-uniapp/pages/portal/index.vue
View File

@ -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 {

13
odf-uniapp/pages/rack-detail/index.vue
View File

@ -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 {

13
odf-uniapp/pages/rack/index.vue
View File

@ -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 {

13
odf-uniapp/pages/region/index.vue
View File

@ -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 {

13
odf-uniapp/pages/room/index.vue
View File

@ -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 {

13
odf-uniapp/pages/route-plan/index.vue
View File

@ -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 {

13
odf-uniapp/pages/search/index.vue
View File

@ -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 {

13
odf-uniapp/pages/settings/index.vue
View File

@ -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 {

2
odf-uniapp/pages/start/index.vue
View File

@ -36,7 +36,7 @@ onLoad(() => {
align-items: center;
justify-content: center;
height: 100vh;
background-color: #ffffff;
background-color: transparent;
}
.app-name {

13
odf-uniapp/pages/trunk-search/index.vue
View File

@ -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 {

13
odf-uniapp/pages/trunk/index.vue
View File

@ -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 {