From 09c8de11a59f0987ea42dd19e742f7b30b75dae4 Mon Sep 17 00:00:00 2001
From: wangdong <1551135706@qq.com>
Date: Wed, 17 Apr 2024 13:47:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A4=9A=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/activity/newGoods.vue        |  27 ++--
 pages/activity/newGoodsStyle.scss  | 109 ++++++++++++++
 pages/activity/newPeople.vue       |  26 +++-
 pages/activity/newPeopleStyle.scss |  19 +++
 pages/activity/presale.vue         |  42 ++++--
 pages/activity/presaleStyle.scss   |  39 +++++
 pages/activity/ranking.vue         |  34 +++--
 pages/activity/rankingStyle.scss   |  39 +++++
 pages/index/index.vue              |  36 +++--
 pages/index/style.scss             | 219 +++++++++++++++++++++++++++++
 pages/invite/index.vue             |  39 ++++-
 pages/invite/style.scss            |  34 +++++
 pages/news/coupon/index.vue        |  42 ++++--
 pages/news/coupon/style.scss       |  98 +++++++++++++
 pages/styleColor.js                |   6 +
 utils/utils.scss                   |   4 +
 16 files changed, 752 insertions(+), 61 deletions(-)
 create mode 100644 pages/activity/newGoodsStyle.scss
 create mode 100644 pages/activity/newPeopleStyle.scss
 create mode 100644 pages/activity/presaleStyle.scss
 create mode 100644 pages/activity/rankingStyle.scss
 create mode 100644 pages/index/style.scss
 create mode 100644 pages/invite/style.scss
 create mode 100644 pages/news/coupon/style.scss
 create mode 100644 pages/styleColor.js

diff --git a/pages/activity/newGoods.vue b/pages/activity/newGoods.vue
index 563d88d..826839d 100644
--- a/pages/activity/newGoods.vue
+++ b/pages/activity/newGoods.vue
@@ -1,10 +1,12 @@
 <template>
-	<view class="newGoods">
+	<view class="newGoods" :id="`newGoods${styleIndex}`">
 		<!-- <image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> -->
 		<view>
-			<u-navbar title="新品首发" :border-bottom="false" title-color="#333" :background="background"></u-navbar>
+			<u-navbar title="新品首发" :border-bottom="false" title-color="#333" :background="styleIndex > 0 ? { background: '#fff'} : background"></u-navbar>
 		</view>
-		<view class="firGoods" :style="{backgroundImage:'url('+backgroundImg+')'}">
+		<view v-if="!styleIndex" class="firGoods" :style="{backgroundImage:'url('+backgroundImg+')'}">
+		</view>
+		<view v-else class="firGoods" :style="{backgroundImage:`url(${$picUrl + '/static/goods/firGood' + styleIndex + '.png'})`}">
 		</view>
 		<view class="goodsList">
 			<view class="goodsItem" v-for="(item,index) in list" :key="index" @click="goDetails(item.goods_id)">
@@ -38,7 +40,7 @@
 				</view>
 			</view>
 			<view class="lookBtn" @click="backtop">
-				再挑挑看<u-icon name="arrow-upward" color="#242424" size="30"></u-icon>
+				再挑挑看<u-icon name="arrow-upward" color="#fff" size="30" style="transform: rotate(90deg);"></u-icon>
 			</view>
 			<view class="lookJie" v-html="content">
 			</view>
@@ -68,6 +70,12 @@
 				content: ''
 			}
 		},
+		computed: {
+			styleIndex() {
+				const index = 5;
+				return index;
+			},
+		},
 		/**
 		 * 生命周期函数--监听页面加载
 		 */
@@ -135,10 +143,11 @@
 </script>
 
 <style lang="scss" scoped>
+	@import './newGoodsStyle.scss';
 	.lookBtn {
-		width: 190rpx;
-		line-height: 75rpx;
-		height: 75rpx;
+		width: 500rpx;
+		line-height: 90rpx;
+		height: 90rpx;
 		background-color: #FFDCC3;
 		text-align: center;
 		font-size: 30rpx;
@@ -151,7 +160,7 @@
 		text-align: center;
 		color: #fff;
 		font-size: 28rpx;
-		margin: 20rpx 0 50rpx 0;
+		margin: 30rpx 0 50rpx 0;
 	}
 
 	.newGoods {
@@ -170,7 +179,7 @@
 
 	.firGoods {
 		width: 100%;
-		height: 510rpx;
+		height: 652rpx;
 		background-image: url('https://www.royaum.com.cn/static/newGoods/top.png');
 		background-repeat: no-repeat; /* 不重复平铺背景图片 */
 		background-position: center top; /* 居中显示背景图片 */
diff --git a/pages/activity/newGoodsStyle.scss b/pages/activity/newGoodsStyle.scss
new file mode 100644
index 0000000..2376e6f
--- /dev/null
+++ b/pages/activity/newGoodsStyle.scss
@@ -0,0 +1,109 @@
+#newGoods1 {
+	background: linear-gradient(0deg, #E4F8FF, #CDDFFF);
+	.goodsList {
+		background-image: none;
+		.goodsItem {
+			.hotSell {
+				background: #A7C5FA;
+			}
+			.item {
+				background: #B7D2FF;
+			}
+		}
+	}
+	.lookBtn {
+		background: #226DEE;
+		color: #fff;
+	}
+	.lookJie {
+		color: #226DEE;
+	}
+}
+
+#newGoods2 {
+	background: linear-gradient(0deg, #F4EFFE, #E5DDFB);
+	.goodsList {
+		background-image: none;
+		.goodsItem {
+			.hotSell {
+				background: #D5C7F4;
+			}
+			.item {
+				background: #DFD3FA;
+			}
+		}
+	}
+	.lookBtn {
+		background: #9378DB;
+		color: #fff;
+	}
+	.lookJie {
+		color: #9378DB;
+	}
+}
+
+#newGoods3 {
+	background: linear-gradient(0deg, #FFFEF4, #FAF7E1);
+	.goodsList {
+		background-image: none;
+		.goodsItem {
+			.hotSell {
+				background: #FEE1CB;
+			}
+			.item {
+				background: #FDE7D5;
+			}
+		}
+	}
+	.lookBtn {
+		background: #FB392A;
+		color: #fff;
+	}
+	.lookJie {
+		color: #FB392A;
+	}
+}
+
+#newGoods4 {
+	background: linear-gradient(0deg, #E9F6E6, #D3F0C3);
+	.goodsList {
+		background-image: none;
+		.goodsItem {
+			.hotSell {
+				background: #C2DBB7;
+			}
+			.item {
+				background: #CBE2C0;
+			}
+		}
+	}
+	.lookBtn {
+		background: #82AB6F;
+		color: #fff;
+	}
+	.lookJie {
+		color: #82AB6F;
+	}
+}
+
+#newGoods5 {
+	background: linear-gradient(0deg, #FFE4E8, #FFCDD5);
+	.goodsList {
+		background-image: none;
+		.goodsItem {
+			.hotSell {
+				background: #FEE1CB;
+			}
+			.item {
+				background: #FDE7D5;
+			}
+		}
+	}
+	.lookBtn {
+		background: #FB392A;
+		color: #fff;
+	}
+	.lookJie {
+		color: #FB392A;
+	}
+}
\ No newline at end of file
diff --git a/pages/activity/newPeople.vue b/pages/activity/newPeople.vue
index e2f70e2..f6d63f9 100644
--- a/pages/activity/newPeople.vue
+++ b/pages/activity/newPeople.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="newpeople">
+	<view class="newpeople" :id="`newpeople${styleIndex}`">
 		<view class="newpeople-navbar">
 			<u-navbar :title="title" title-color="#fff" back-icon-color="#fff" :border-bottom="false"
 				:background="background"></u-navbar>
@@ -79,7 +79,7 @@
 				isLoading: true,
 				background: {
 					background: 'url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat',
-					backgroundSize: '100%',
+					backgroundSize: '200% auto',
 
 				},
 				goodList: [],
@@ -87,6 +87,20 @@
 				couList: []
 			}
 		},
+		computed: {
+			styleIndex() {
+				const index = 1;
+				return index;
+			},
+		},
+		watch: {
+			styleIndex: {
+				immediate: true,
+				handler() {
+					this.background.background = `url(https://www.royaum.com.cn/static/news/newPeople${this.styleIndex}-bg.png) center top no-repeat`;
+				},
+			},
+		},
 		/**
 		 * 生命周期函数--监听页面显示
 		 */
@@ -189,16 +203,17 @@
 </script>
 
 <style lang="scss" scoped>
+	@import './newPeopleStyle.scss';
 	::v-deep .u-empty {
 		padding: 100rpx 0;
 	}
 	.newpeople {
-		background: url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat;
+		background: url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center 24rpx no-repeat;
 		background-size: 100% auto;
 		overflow: hidden;
 
 		&-hd {
-			height: 200rpx;
+			height: 288rpx;
 
 			.rule {
 				right: 0;
@@ -219,9 +234,8 @@
 
 		&-gift {
 			width: 100%;
-			border-radius: 10rpx 10rpx 0 0;
-			background-color: #fff;
 			overflow: hidden;
+			margin-top: 20rpx;
 
 			.a {
 				width: 100%;
diff --git a/pages/activity/newPeopleStyle.scss b/pages/activity/newPeopleStyle.scss
new file mode 100644
index 0000000..75d2a88
--- /dev/null
+++ b/pages/activity/newPeopleStyle.scss
@@ -0,0 +1,19 @@
+#newpeople1 {
+	background-image: url(https://www.royaum.com.cn/static/news/newPeople1-bg.png);
+}
+
+#newpeople2 {
+	background-image: url(https://www.royaum.com.cn/static/news/newPeople2-bg.png);
+}
+
+#newpeople3 {
+	background-image: url(https://www.royaum.com.cn/static/news/newPeople3-bg.png);
+}
+
+#newpeople4 {
+	background-image: url(https://www.royaum.com.cn/static/news/newPeople4-bg.png);
+}
+
+#newpeople5 {
+	background-image: url(https://www.royaum.com.cn/static/news/newPeople5-bg.png);
+}
\ No newline at end of file
diff --git a/pages/activity/presale.vue b/pages/activity/presale.vue
index 8b56930..ca1138d 100644
--- a/pages/activity/presale.vue
+++ b/pages/activity/presale.vue
@@ -1,18 +1,19 @@
 <template>
-	<view class="presale">
+	<view class="presale" :id="`presale${styleIndex}`">
 		<view class="presale-hd">
+			<image v-if="styleIndex > 0" :src="`${$picUrl}/static/news/banner${styleIndex}.png`" class="banner"></image>
 			<view class="rule" @click="openPage()">规则</view>
 		</view>
 		<view class="presale-bd">
 			<view class="tab">
-				<u-tabs :list="menuList" :is-scroll="true" :show-bar="false" active-color="#FFFFFF"
-					bg-color="rgba(255,255,255,0)" inactive-color="rgba(255,255,255,0.62)" v-model="current"
+				<u-tabs :list="menuList" :is-scroll="true" :show-bar="false" active-color="#222222"
+					bg-color="rgba(255,255,255,0)" inactive-color="#C3BCB4" v-model="current"
 					@change='onChosed'></u-tabs>
 			</view>
 			<view class="title">
-				<image :src="$picUrl+'/static/news/newPresale-1.png'"></image>
+				<image :src="`${$picUrl}/static/news/newPresale${styleIndex}${styleIndex > 0 ? '' : '-1'}.png`"></image>
 				正在进行中
-				<image :src="$picUrl+'/static/news/newPresale-1.png'"></image>
+				<image :src="`${$picUrl}/static/news/newPresale${styleIndex}${styleIndex > 0 ? '' : '-1'}.png`"></image>
 			</view>
 			<view class="list" :isLoading="isLoading">
 				<view class="item" v-for="(item,index) in goodList" :key="index" @click="goPre(item)">
@@ -52,6 +53,12 @@
 				info: ''
 			}
 		},
+		computed: {
+			styleIndex() {
+				const index = 1;
+				return index;
+			},
+		},
 		/**
 		 * 生命周期函数--监听页面显示
 		 */
@@ -133,6 +140,7 @@
 </script>
 
 <style lang="scss" scoped>
+	@import './presaleStyle.scss';
 	.presale {
 		background: #ff7b79 url(https://www.royaum.com.cn/static/news/newPresale-bg.png) center top no-repeat;
 		background-size: 100% auto;
@@ -141,8 +149,13 @@
 
 		&-hd {
 			position: relative;
-			height: 380rpx;
-
+			height: 460rpx;
+			.banner {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
 			.rule {
 				right: 0;
 				top: 74rpx;
@@ -168,20 +181,21 @@
 
 			.title {
 				width: 100%;
-				border-radius: 12rpx 12rpx 0 0;
-				height: 78rpx;
+				height: 90rpx;
 				font-size: 28rpx;
 				font-weight: 500;
-				color: #FFFFFF;
-				border: 2px solid #fff;
+				color: #222222;
+				border-radius: 10rpx;
+				border: 1px solid #838992;
 				display: flex;
 				align-items: center;
 				justify-content: center;
+				margin-bottom: 24rpx;
 
 				image {
-					width: 32rpx;
-					height: 13rpx;
-					margin: 0 20rpx;
+					width: 71rpx;
+					height: 30rpx;
+					margin: 0 50rpx;
 				}
 			}
 
diff --git a/pages/activity/presaleStyle.scss b/pages/activity/presaleStyle.scss
new file mode 100644
index 0000000..b5c3c00
--- /dev/null
+++ b/pages/activity/presaleStyle.scss
@@ -0,0 +1,39 @@
+#presale1 {
+	background: linear-gradient(0deg, #F6F6F6, #E0EFFD);
+	.banner {
+		width: 634rpx;
+		height: 373rpx;
+	}
+}
+
+#presale2 {
+	background: linear-gradient(0deg, #F6F6F6, #F4EFFE);
+	.banner {
+		width: 679rpx;
+		height: 325rpx;
+	}
+}
+
+#presale3 {
+	background: linear-gradient(0deg, #F6F6F6, #FFF1E2);
+	.banner {
+		width: 683rpx;
+		height: 357rpx;
+	}
+}
+
+#presale4 {
+	background: linear-gradient(0deg, #F6F6F6, #FCFAED);
+	.banner {
+		width: 654rpx;
+		height: 402rpx;
+	}
+}
+
+#presale5 {
+	background: linear-gradient(0deg, #F6F6F6, #FFEAED);
+	.banner {
+		width: 650rpx;
+		height: 363rpx;
+	}
+}
\ No newline at end of file
diff --git a/pages/activity/ranking.vue b/pages/activity/ranking.vue
index c8cb021..09d1e62 100644
--- a/pages/activity/ranking.vue
+++ b/pages/activity/ranking.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="newGoods">
+	<view class="newGoods" :id="`rank${styleIndex}`">
 		<!-- :style="{backgroundImage:'url('+backgroundImg+')'}" -->
 		<!-- <view class="rule" @click="openPage()">规则</view> -->
 		<view>
@@ -8,10 +8,10 @@
 		</view>
 		<!-- <image :src="$picUrl+'/static/rank/rangkImg.png'"  mode="" class="bgImg"></image> -->
 		<view class="headTitle">
-			全站好物热榜
+			{{ styleIndex > 0 ? '' : '全站好物热榜' }}
 		</view>
 		<view class="ranking">
-			- 跟榜买错不了 -
+			{{ styleIndex > 0 ? '' : '- 跟榜买错不了 -' }}
 		</view>
 		<view class="menuList">
 			<scroll-view scroll-x="true" class="list">
@@ -74,7 +74,7 @@
 					</view>
 					<view class="look1" @click="goDetail(item.goods_id)">
 						去看看
-						<image :src="$picUrl+'/static/rank/right.png'" mode="" class="right1"></image>
+						<u-icon name="arrow-right" color="#fff" size="30" class="right1"></u-icon>
 					</view>
 				</view>
 			</view>
@@ -88,7 +88,7 @@
 		data() {
 			return {
 				background: {
-					background: 'url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat',
+					background: 'url(https://www.royaum.com.cn/static/rank/rank1.png) center bottom no-repeat',
 					backgroundSize: '100% auto',
 				},
 				category_id: "",
@@ -99,6 +99,20 @@
 				goodList: [],
 			}
 		},
+		computed: {
+			styleIndex() {
+				const index = 2;
+				return index;
+			},
+		},
+		watch: {
+			styleIndex: {
+				immediate: true,
+				handler() {
+					this.background.background = `url(https://www.royaum.com.cn/static/rank/rank-bg${this.styleIndex}.png) center top no-repeat`;
+				},
+			},
+		},
 		onShow() {
 			this.getListCharts()
 		},
@@ -190,6 +204,7 @@
 </script>
 
 <style lang="scss" scoped>
+	@import './rankingStyle.scss';
 	.newGoods {
 		width: 100%;
 		position: relative;
@@ -197,6 +212,11 @@
 		padding-bottom: 30rpx;
 		background: #F34A40 url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat;
 		background-size: 100% auto;
+		::v-deep {
+			.u-navbar-inner {
+				height: 80rpx!important;
+			}
+		}
 
 		.bgImg {
 			width: 100%;
@@ -460,7 +480,7 @@
 				.look1 {
 					width: 202rpx;
 					height: 60rpx;
-					background: linear-gradient(180deg, #FF7E6A 0%, #FB322A 100%);
+					background: #F9BD6C;
 					border-radius: 70rpx;
 					margin-right: 22rpx;
 					text-align: center;
@@ -472,8 +492,6 @@
 					justify-content: center;
 
 					.right1 {
-						width: 18rpx;
-						height: 27rpx;
 						margin-left: 12rpx;
 					}
 				}
diff --git a/pages/activity/rankingStyle.scss b/pages/activity/rankingStyle.scss
new file mode 100644
index 0000000..cfbf143
--- /dev/null
+++ b/pages/activity/rankingStyle.scss
@@ -0,0 +1,39 @@
+#rank1 {
+	background-image: url(https://www.royaum.com.cn/static/rank/rank-bg1.png);
+	background-color: #F8D1BC;
+	.ranking {
+		background: none;
+	}
+}
+
+#rank2 {
+	background-image: url(https://www.royaum.com.cn/static/rank/rank-bg2.png);
+	background-color: #F8BCBC;
+	.ranking {
+		background: none;
+	}
+}
+
+#rank3 {
+	background-image: url(https://www.royaum.com.cn/static/rank/rank-bg3.png);
+	background-color: #CE3821;
+	.ranking {
+		background: none;
+	}
+}
+
+#rank4 {
+	background-image: url(https://www.royaum.com.cn/static/rank/rank-bg4.png);
+	background-color: #E2A666;
+	.ranking {
+		background: none;
+	}
+}
+
+#rank5 {
+	background-image: url(https://www.royaum.com.cn/static/rank/rank-bg5.png);
+	background-color: #961619;
+	.ranking {
+		background: none;
+	}
+}
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 0a1f548..606ce30 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,10 +1,10 @@
 <template>
-	<view class="index">
+	<view class="index" :id="`index${styleIndex}`">
 		<view class="navbarContent">
-			<u-navbar :is-back="false" title="" :background="background" :border-bottom="false">
+			<u-navbar :is-back="false" :background="styleIndex ? {} : background" :border-bottom="false">
 				<image :src="logoImage" mode="heightFix" class="logo"></image>
 				<view class="slot-wrap">
-					<u-subsection active-color="#FB213D" inactive-color="#000000" height="60" @change="changeHome"
+					<u-subsection :active-color="tabActiveColor || '#FB213D'" inactive-color="#000000" height="60" @change="changeHome"
 						:bold="false" button-color="#fff" :list="list" :current="current"></u-subsection>
 				</view>
 			</u-navbar>
@@ -34,7 +34,7 @@
 					v-for="(item,index) in tabList" :key="index">
 					{{item.name}}
 					<view class="flag" v-if="tabCurrent==index">
-						<image :src="$picUrl+'/static/index/line.png'"></image>
+						<image :src="`${$picUrl}/static/index/line${styleIndex}.png`"></image>
 					</view>
 				</view>
 				<!-- <u-tabs :list="tabList" name="name" font-size="28" active-color="#F6393D"
@@ -73,7 +73,7 @@
 					</view>
 				</view>
 				<view class="firstContent" @click="goNewUser" v-if="wxAppSetting.new_first_gift">
-					<image :src="$picUrl+'/static/index/new.png?t='+timestamp" class="firstBg"></image>
+					<image :src="`${$picUrl}/static/index/new${styleIndex || ''}.png?t=${timestamp}`" class="firstBg" :class="{ 'firstBgStyle': styleIndex }"></image>
 					<view class="firstInfo">
 						<view class="fTitle">
 							<image :src="$picUrl+'/static/index/xinren.png'" class="firstTitle"></image>
@@ -184,7 +184,7 @@
 				</view>
 				<view class="activity">
 					<view class="left" @click="goNews" v-if="wxAppSetting.service">
-						<image :src="$picUrl+'/static/index/activity.png?t='+timestamp" mode="widthFix"></image>
+						<image :src="`${$picUrl}/static/index/activity${styleIndex || ''}.png?t=${timestamp}`" mode="widthFix"></image>
 					</view>
 					<view class="right">
 						<!-- <view class="rightContent"> -->
@@ -494,7 +494,8 @@
 	import * as limit from '@/api/sharp/home.js';
 	import * as Api from '@/api/goods'
 	import * as activity from '@/api/activity'
-	import * as newFunApi from '@/api/newFun'
+	import * as newFunApi from '@/api/newFun';
+	import styleColor from '../styleColor';
 	export default {
 		data() {
 			return {
@@ -571,6 +572,18 @@
 				wxAppSetting: {}
 			}
 		},
+		computed: {
+			styleIndex() {
+				const index = 4;
+				return index;
+			},
+			tabActiveColor() {
+				return this.styleIndex ? (styleColor.indexColor[this.styleIndex - 1] || '') : ''
+			}
+		},
+		mounted() {
+			console.log(styleColor);
+		},
 		methods: {
 			/**
 			 * 获取小程序配置
@@ -1005,6 +1018,7 @@
 	}
 </script>
 <style lang="scss" scoped>
+	@import './style.scss';
 	.index {
 		min-height: calc(100vh - 100rpx);
 		background: url('https://www.royaum.com.cn/static/index/index-bg.png');
@@ -1287,6 +1301,10 @@
 					width: 698rpx;
 					height: 230rpx;
 					margin-bottom: 20rpx;
+					&.firstBgStyle {
+						width: 686rpx;
+						height: 230rpx;
+					}
 				}
 
 				.firstInfo {
@@ -1390,7 +1408,7 @@
 
 			.dapai {
 				position: relative;
-				background: url("https://www.royaum.com.cn/static/index/dapaibg.png");
+				background-image: url("https://www.royaum.com.cn/static/index/dapaibg.png");
 				background-size: cover;
 				background-repeat: no-repeat;
 				padding: 20rpx 24rpx;
@@ -1658,7 +1676,7 @@
 					.rightItem1,
 					.rightItem2 {
 						background: url('https://www.royaum.com.cn/static/index/newFirst.png');
-						background-size: cover;
+						background-size: cover!important;
 						padding: 14rpx;
 						position: relative;
 						box-sizing: border-box;
diff --git a/pages/index/style.scss b/pages/index/style.scss
new file mode 100644
index 0000000..56e47a2
--- /dev/null
+++ b/pages/index/style.scss
@@ -0,0 +1,219 @@
+#index1 {
+	background: linear-gradient(to bottom, #E6F2FC 0%, #f4f4f4 640rpx, #F4F4F4 100%);
+	.flag {
+		bottom: -16rpx;
+		image {
+			width: 20rpx;
+			height: 8rpx;
+		}
+	}
+	.searchContentContainer .searchContent .btn {
+		background: #3F8EFF;
+	}
+	.tabs .active {
+		color: #3F8EFF;
+	}
+	.firstContent {
+		.firstInfo {
+			top: 12%;
+			.flag, .num {
+				color: #3F8EFF;
+			}
+			.couponName {
+				color: #3B3B3B;
+				>view:last-child {
+					color: #8B8B8B;
+				}
+			}
+		}
+	}
+	.activity {
+		.right {
+			.rightItem1 {
+				background: url('https://www.royaum.com.cn/static/index/newFirst1.png');
+			}
+			.rightItem2 {
+				background: url('https://www.royaum.com.cn/static/index/ranking1.png');
+			}
+		}
+	}
+	.dapai {
+		background-image: url("https://www.royaum.com.cn/static/index/dapaibg1.png");
+	}
+}
+
+#index2 {
+	background: linear-gradient(to bottom, #F4EFFE 0%, #f4f4f4 640rpx, #F4F4F4 100%);
+	.flag {
+		bottom: -16rpx;
+		image {
+			width: 20rpx;
+			height: 8rpx;
+		}
+	}
+	.searchContentContainer .searchContent .btn {
+		background: #926DF4;
+	}
+	.tabs .active {
+		color: #926DF4;
+	}
+	.firstContent {
+		.firstInfo {
+			top: 12%;
+			.flag, .num {
+				color: #926DF4;
+			}
+			.couponName {
+				color: #3B3B3B;
+				>view:last-child {
+					color: #8B8B8B;
+				}
+			}
+		}
+	}
+	.activity {
+		.right {
+			.rightItem1 {
+				background: url('https://www.royaum.com.cn/static/index/newFirst2.png');
+			}
+			.rightItem2 {
+				background: url('https://www.royaum.com.cn/static/index/ranking2.png');
+			}
+		}
+	}
+	.dapai {
+		background-image: url("https://www.royaum.com.cn/static/index/dapaibg2.png");
+	}
+}
+
+#index3 {
+	background: linear-gradient(to bottom, #FCFAED 0%, #f4f4f4 640rpx, #F4F4F4 100%);
+	.flag {
+		bottom: -16rpx;
+		image {
+			width: 20rpx;
+			height: 8rpx;
+		}
+	}
+	.searchContentContainer .searchContent .btn {
+		background: #FEB137;
+	}
+	.tabs .active {
+		color: #FEB137;
+	}
+	.firstContent {
+		.firstInfo {
+			top: 12%;
+			.flag, .num {
+				color: #F21A1C;
+			}
+			.couponName {
+				color: #3B3B3B;
+				>view:last-child {
+					color: #8B8B8B;
+				}
+			}
+		}
+	}
+	.activity {
+		.right {
+			.rightItem1 {
+				background: url('https://www.royaum.com.cn/static/index/newFirst3.png');
+			}
+			.rightItem2 {
+				background: url('https://www.royaum.com.cn/static/index/ranking3.png');
+			}
+		}
+	}
+	.dapai {
+		background-image: url("https://www.royaum.com.cn/static/index/dapaibg3.png");
+	}
+}
+
+#index4 {
+	background: linear-gradient(to bottom, #E9F6E5 0%, #f4f4f4 640rpx, #F4F4F4 100%);
+	.flag {
+		bottom: -16rpx;
+		image {
+			width: 20rpx;
+			height: 8rpx;
+		}
+	}
+	.searchContentContainer .searchContent .btn {
+		background: #82AB6F;
+	}
+	.tabs .active {
+		color: #82AB6F;
+	}
+	.firstContent {
+		.firstInfo {
+			top: 12%;
+			.flag, .num {
+				color: #82AB6F;
+			}
+			.couponName {
+				color: #3B3B3B;
+				>view:last-child {
+					color: #8B8B8B;
+				}
+			}
+		}
+	}
+	.activity {
+		.right {
+			.rightItem1 {
+				background: url('https://www.royaum.com.cn/static/index/newFirst4.png');
+			}
+			.rightItem2 {
+				background: url('https://www.royaum.com.cn/static/index/ranking4.png');
+			}
+		}
+	}
+	.dapai {
+		background-image: url("https://www.royaum.com.cn/static/index/dapaibg4.png");
+	}
+}
+
+#index5 {
+	background: linear-gradient(to bottom, #FFF5F6 0%, #f4f4f4 640rpx, #F4F4F4 100%);
+	.flag {
+		bottom: -16rpx;
+		image {
+			width: 20rpx;
+			height: 8rpx;
+		}
+	}
+	.searchContentContainer .searchContent .btn {
+		background: #FB6569;
+	}
+	.tabs .active {
+		color: #FB6569;
+	}
+	.firstContent {
+		.firstInfo {
+			top: 12%;
+			.flag, .num {
+				color: #F21A1C;
+			}
+			.couponName {
+				color: #3B3B3B;
+				>view:last-child {
+					color: #8B8B8B;
+				}
+			}
+		}
+	}
+	.activity {
+		.right {
+			.rightItem1 {
+				background: url('https://www.royaum.com.cn/static/index/newFirst5.png');
+			}
+			.rightItem2 {
+				background: url('https://www.royaum.com.cn/static/index/ranking5.png');
+			}
+		}
+	}
+	.dapai {
+		background-image: url("https://www.royaum.com.cn/static/index/dapaibg5.png");
+	}
+}
\ No newline at end of file
diff --git a/pages/invite/index.vue b/pages/invite/index.vue
index 7d493a6..7fa2f0a 100644
--- a/pages/invite/index.vue
+++ b/pages/invite/index.vue
@@ -1,11 +1,12 @@
 <template>
-	<view class="invite">
+	<view class="invite" :id="`invite${styleIndex}`">
 		<view class="invite-notice">
 			<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar>
 		</view>
 		<view class="invite-hd">
 			<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> -->
-			<view class="btn" @click="openPage(3)"></view>
+			<view v-if="!styleIndex" class="btn" @click="openPage(3)"></view>
+			<view v-else class="btn btn2" @click="openPage(3)"></view>
 			<view class="rule" @click="openPage(4)"></view>
 		</view>
 		<view class="invite-bd">
@@ -86,6 +87,7 @@
 	} from '@/utils/qrcode'
 	import * as newFunApi from '@/api/newFun'
 	import * as Api from '@/api/help'
+	import styleColor from '../styleColor';
 	export default {
 		data() {
 			return {
@@ -102,6 +104,22 @@
 				list: []
 			}
 		},
+		computed: {
+			styleIndex() {
+				const index = 4;
+				return index;
+			},
+		},
+		watch: {
+			styleIndex: {
+				immediate: true,
+				handler() {
+					uni.setNavigationBarColor({
+						backgroundColor: this.styleIndex > 0 ? styleColor.inviteNavBgColor[this.styleIndex - 1] : '#FF4A49',
+					})
+				},
+			},
+		},
 		onReady() {
 			this.getList();
 			this.getCarousel()
@@ -269,6 +287,7 @@
 </script>
 
 <style lang="scss" scoped>
+	@import './style.scss';
 	.invite {
 		background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat;
 		background-size: 100% auto;
@@ -359,7 +378,7 @@
 			width: 100%;
 			text-align: center;
 			// background-color: #FF5554;
-			height: 436rpx;
+			height: 536rpx;
 			position: relative;
 
 			.rule {
@@ -373,12 +392,20 @@
 
 			.btn {
 				width: 396rpx;
-				height: 88rpx;
+				height: 90rpx;
 				position: absolute;
-				left: 50%;
+				left: 51%;
 				margin-left: -205rpx;
-				bottom: 0rpx;
+				bottom: 2rpx;
 				z-index: 2;
+				text-align: center;
+				line-height: 90rpx;
+				color: #fff;
+				font-size: 28rpx;
+				border-radius: 45rpx;
+				&.btn2 {
+					bottom: 24rpx;
+				}
 			}
 		}
 
diff --git a/pages/invite/style.scss b/pages/invite/style.scss
new file mode 100644
index 0000000..58b774d
--- /dev/null
+++ b/pages/invite/style.scss
@@ -0,0 +1,34 @@
+#invite1 {
+	background-image: url(https://www.royaum.com.cn/static/news/invite1-bg.png);
+	.uni-page-head {
+		background-color: #FFC6CF!important;
+	}
+}
+
+#invite2 {
+	background-image: url(https://www.royaum.com.cn/static/news/invite2-bg.png);
+	.uni-page-head {
+		background-color: #FFC6CF!important;
+	}
+}
+
+#invite3 {
+	background-image: url(https://www.royaum.com.cn/static/news/invite3-bg.png);
+	.uni-page-head {
+		background-color: #FFC6CF!important;
+	}
+}
+
+#invite4 {
+	background-image: url(https://www.royaum.com.cn/static/news/invite4-bg.png);
+	.uni-page-head {
+		background-color: #FFC6CF!important;
+	}
+}
+
+#invite5 {
+	background-image: url(https://www.royaum.com.cn/static/news/invite5-bg.png);
+	.uni-page-head {
+		background-color: #FFC6CF!important;
+	}
+}
\ No newline at end of file
diff --git a/pages/news/coupon/index.vue b/pages/news/coupon/index.vue
index 99357e5..864bbdb 100644
--- a/pages/news/coupon/index.vue
+++ b/pages/news/coupon/index.vue
@@ -1,8 +1,10 @@
 <template>
-	<view class="coupon">
+	<view class="coupon" :id="`coupon${styleIndex}`">
 		<view class="rule" @click="openPage()">规则</view>
 		<view class="coupon-hd">
-			<image src="https://www.royaum.com.cn/static/news/coupon-bg.jpg"></image>
+			<!-- <image v-if="styleIndex > 0" :src="`https://www.royaum.com.cn/static/news/coupon-bg${styleIndex}.jpg`"></image> -->
+			<!-- <image v-if="styleIndex > 0" src="https://www.royaum.com.cn/static/news/coupon-bg.jpg"></image> -->
+			<image v-if="!styleIndex" src="https://www.royaum.com.cn/static/news/coupon-bg.jpg"></image>
 		</view>
 		<view class="coupon-tab">
 			<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">商品券</view>
@@ -36,6 +38,7 @@
 
 <script>
 	import * as CouponApi from '@/api/coupon'
+	import styleColor from '../../styleColor';
 	export default {
 		data() {
 			return {
@@ -43,6 +46,22 @@
 				couponList: []
 			}
 		},
+		computed: {
+			styleIndex() {
+				const index = 5;
+				return index;
+			},
+		},
+		watch: {
+			styleIndex: {
+				immediate: true,
+				handler() {
+					uni.setNavigationBarColor({
+						backgroundColor: this.styleIndex > 0 ? styleColor.couponNavBgColor[this.styleIndex - 1] : '#FB3A22',
+					})
+				},
+			},
+		},
 		onShow() {
 			this.getCoupon(this.tabIndex)
 		},
@@ -101,6 +120,7 @@
 </script>
 
 <style lang="scss" scoped>
+	@import './style.scss';
 	.coupon {
 		background-color: #FB3A22;
 		overflow: hidden;
@@ -144,7 +164,7 @@
 
 		&-hd {
 			width: 100%;
-			height: 445rpx;
+			height: 460rpx;
 
 			image {
 				width: 100%;
@@ -153,7 +173,8 @@
 		}
 
 		&-tab {
-			padding: 0 40rpx;
+			padding: 40rpx 40rpx 0;
+			border-radius: 30rpx 30rpx 0 0;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
@@ -183,6 +204,8 @@
 				position: relative;
 				margin-top: 20rpx;
 				overflow: hidden;
+				background: #fff;
+				border-radius: 15rpx;
 
 				image {
 					width: 100%;
@@ -265,18 +288,19 @@
 		bottom: 0;
 		left: 0;
 		width: 100%;
-		height: 148rpx;
+		height: 98rpx;
 		justify-content: center;
 		align-items: center;
-		font-size: 36rpx;
+		font-size: 30rpx;
 		font-weight: 500;
 		color: #FA3B22;
-		line-height: 148rpx;
-		background: linear-gradient(180deg, #FFFFFF 0%, #FEEECA 100%);
+		line-height: 98rpx;
+		background: #FFE5B2;
 		z-index: 999;
 
 		.fooIcon {
-			margin-left: 36rpx;
+			margin-left: 15rpx;
+			font-size: 24rpx;
 		}
 	}
 </style>
diff --git a/pages/news/coupon/style.scss b/pages/news/coupon/style.scss
new file mode 100644
index 0000000..ec63d8f
--- /dev/null
+++ b/pages/news/coupon/style.scss
@@ -0,0 +1,98 @@
+#coupon1 {
+	background: url(https://www.royaum.com.cn/static/news/coupon-bg1.png) no-repeat top center;
+	background-size: 100% auto;
+	background-color: #FC6453;
+	.coupon-tab {
+		.item {
+			background: #F45240;
+			color: #fff;
+			&.item-on {
+				background: #FFFFFF;
+				color: #F2212A;
+			}
+		}
+	}
+}
+
+#coupon2 {
+	background: url(https://www.royaum.com.cn/static/news/coupon-bg2.png) no-repeat top center;
+	background-size: 100% auto;
+	background-color: #FC6453;
+	display: flex;
+	flex-direction: column;
+	.coupon-tab {
+		background: #fff;
+		.item {
+			background: #F3F0EF;
+			color: #666666;
+			&.item-on {
+				background: #F45240;
+				color: #fff;
+			}
+		}
+	}
+	.coupon-bd {
+		flex: 1;
+		background: #fff;
+		.item {
+			background-color: #FCF6F6;
+		}
+	}
+}
+
+#coupon3 {
+	background: url(https://www.royaum.com.cn/static/news/coupon-bg3.png) no-repeat top center;
+	background-size: 100% auto;
+	background-color: #FA688A;
+	.coupon-tab {
+		.item {
+			background: #F65379;
+			color: #fff;
+			&.item-on {
+				background: #FFFFFF;
+				color: #F2212A;
+			}
+		}
+	}
+}
+
+#coupon4 {
+	background: url(https://www.royaum.com.cn/static/news/coupon-bg4.png) no-repeat top center;
+	background-size: 100% auto;
+	background-color: #fff;
+	.coupon-tab {
+		background-color: transparent;
+		border-radius: 0;
+		.item {
+			background: #F6F6F6;
+			color: #666;
+			&.item-on {
+				background: #F45240;
+				color: #fff;
+			}
+		}
+	}
+	.coupon-bd {
+		.item {
+			background-color: #FCF6F6;
+		}
+	}
+}
+
+#coupon5 {
+	background: url(https://www.royaum.com.cn/static/news/coupon-bg5.png) no-repeat top center;
+	background-size: 623rpx auto;
+	background-color: #F6E3CF;
+	.coupon-tab {
+		background-color: transparent;
+		border-radius: 0;
+		.item {
+			background: #F7D3AD;
+			color: #F45240;
+			&.item-on {
+				background: #F45240;
+				color: #fff;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/pages/styleColor.js b/pages/styleColor.js
new file mode 100644
index 0000000..d970ff0
--- /dev/null
+++ b/pages/styleColor.js
@@ -0,0 +1,6 @@
+export default {
+	indexColor: ['#3F8EFF', '#926DF4', '#FEB137', '82AB6F', '#FB6569'],
+	inviteNavBgColor: ['#F5DBB4', '#FA482B', '#FA335B', '#F7D8A3', '#FFC6CF'],
+	couponNavBgColor: ['#FFE7E4', '#FB700C', '#FB700C', '#EF333B', '#F6E3CF'],
+	rankNavBgColor: ['#F8D1BC', '#F8BCBC', '#CE3821', '#E2A666', '#961619']
+}
\ No newline at end of file
diff --git a/utils/utils.scss b/utils/utils.scss
index c29eff7..6b3099a 100644
--- a/utils/utils.scss
+++ b/utils/utils.scss
@@ -338,3 +338,7 @@ button:after {
   content: none;
   border: none;
 }
+
+.u-navbar-inner {
+	height: 80rpx;
+}
\ No newline at end of file