wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面多样式

Browse Source
version/0412
wangdong 9 months ago
parent cea1269c26
commit 09c8de11a5
16 changed files with 752 additions and 61 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 27
      pages/activity/newGoods.vue
  2. 109
      pages/activity/newGoodsStyle.scss
  3. 26
      pages/activity/newPeople.vue
  4. 19
      pages/activity/newPeopleStyle.scss
  5. 42
      pages/activity/presale.vue
  6. 39
      pages/activity/presaleStyle.scss
  7. 34
      pages/activity/ranking.vue
  8. 39
      pages/activity/rankingStyle.scss
  9. 36
      pages/index/index.vue
  10. 219
      pages/index/style.scss
  11. 39
      pages/invite/index.vue
  12. 34
      pages/invite/style.scss
  13. 42
      pages/news/coupon/index.vue
  14. 98
      pages/news/coupon/style.scss
  15. 6
      pages/styleColor.js
  16. 4
      utils/utils.scss

27
pages/activity/newGoods.vue
Unescape View File

@ -1,10 +1,12 @@
<template> <template>
<view class="newGoods"> <view class="newGoods" :id="`newGoods${styleIndex}`">
<!-- <image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> --> <!-- <image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> -->
<view> <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>
<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>
<view class="goodsList"> <view class="goodsList">
<view class="goodsItem" v-for="(item,index) in list" :key="index" @click="goDetails(item.goods_id)"> <view class="goodsItem" v-for="(item,index) in list" :key="index" @click="goDetails(item.goods_id)">
@ -38,7 +40,7 @@
</view> </view>
</view> </view>
<view class="lookBtn" @click="backtop"> <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>
<view class="lookJie" v-html="content"> <view class="lookJie" v-html="content">
</view> </view>
@ -68,6 +70,12 @@
content: '' content: ''
} }
}, },
computed: {
styleIndex() {
const index = 5;
return index;
},
},
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
@ -135,10 +143,11 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './newGoodsStyle.scss';
.lookBtn { .lookBtn {
width: 190rpx; width: 500rpx;
line-height: 75rpx; line-height: 90rpx;
height: 75rpx; height: 90rpx;
background-color: #FFDCC3; background-color: #FFDCC3;
text-align: center; text-align: center;
font-size: 30rpx; font-size: 30rpx;
@ -151,7 +160,7 @@
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 28rpx; font-size: 28rpx;
margin: 20rpx 0 50rpx 0; margin: 30rpx 0 50rpx 0;
} }
.newGoods { .newGoods {
@ -170,7 +179,7 @@
.firGoods { .firGoods {
width: 100%; width: 100%;
height: 510rpx; height: 652rpx;
background-image: url('https://www.royaum.com.cn/static/newGoods/top.png'); background-image: url('https://www.royaum.com.cn/static/newGoods/top.png');
background-repeat: no-repeat; /* 不重复平铺背景图片 */ background-repeat: no-repeat; /* 不重复平铺背景图片 */
background-position: center top; /* 居中显示背景图片 */ background-position: center top; /* 居中显示背景图片 */

109
pages/activity/newGoodsStyle.scss
Unescape View File

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

26
pages/activity/newPeople.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<view class="newpeople"> <view class="newpeople" :id="`newpeople${styleIndex}`">
<view class="newpeople-navbar"> <view class="newpeople-navbar">
<u-navbar :title="title" title-color="#fff" back-icon-color="#fff" :border-bottom="false" <u-navbar :title="title" title-color="#fff" back-icon-color="#fff" :border-bottom="false"
:background="background"></u-navbar> :background="background"></u-navbar>
@ -79,7 +79,7 @@
isLoading: true, isLoading: true,
background: { background: {
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 top no-repeat',
backgroundSize: '100%', backgroundSize: '200% auto',
}, },
goodList: [], goodList: [],
@ -87,6 +87,20 @@
couList: [] 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './newPeopleStyle.scss';
::v-deep .u-empty { ::v-deep .u-empty {
padding: 100rpx 0; padding: 100rpx 0;
} }
.newpeople { .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; background-size: 100% auto;
overflow: hidden; overflow: hidden;
&-hd { &-hd {
height: 200rpx; height: 288rpx;
.rule { .rule {
right: 0; right: 0;
@ -219,9 +234,8 @@
&-gift { &-gift {
width: 100%; width: 100%;
border-radius: 10rpx 10rpx 0 0;
background-color: #fff;
overflow: hidden; overflow: hidden;
margin-top: 20rpx;
.a { .a {
width: 100%; width: 100%;

19
pages/activity/newPeopleStyle.scss
Unescape View File

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

42
pages/activity/presale.vue
Unescape View File

@ -1,18 +1,19 @@
<template> <template>
<view class="presale"> <view class="presale" :id="`presale${styleIndex}`">
<view class="presale-hd"> <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 class="rule" @click="openPage()">规则</view>
</view> </view>
<view class="presale-bd"> <view class="presale-bd">
<view class="tab"> <view class="tab">
<u-tabs :list="menuList" :is-scroll="true" :show-bar="false" active-color="#FFFFFF" <u-tabs :list="menuList" :is-scroll="true" :show-bar="false" active-color="#222222"
bg-color="rgba(255,255,255,0)" inactive-color="rgba(255,255,255,0.62)" v-model="current" bg-color="rgba(255,255,255,0)" inactive-color="#C3BCB4" v-model="current"
@change='onChosed'></u-tabs> @change='onChosed'></u-tabs>
</view> </view>
<view class="title"> <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>
<view class="list" :isLoading="isLoading"> <view class="list" :isLoading="isLoading">
<view class="item" v-for="(item,index) in goodList" :key="index" @click="goPre(item)"> <view class="item" v-for="(item,index) in goodList" :key="index" @click="goPre(item)">
@ -52,6 +53,12 @@
info: '' info: ''
} }
}, },
computed: {
styleIndex() {
const index = 1;
return index;
},
},
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
@ -133,6 +140,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './presaleStyle.scss';
.presale { .presale {
background: #ff7b79 url(https://www.royaum.com.cn/static/news/newPresale-bg.png) center top no-repeat; background: #ff7b79 url(https://www.royaum.com.cn/static/news/newPresale-bg.png) center top no-repeat;
background-size: 100% auto; background-size: 100% auto;
@ -141,8 +149,13 @@
&-hd { &-hd {
position: relative; position: relative;
height: 380rpx; height: 460rpx;
.banner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rule { .rule {
right: 0; right: 0;
top: 74rpx; top: 74rpx;
@ -168,20 +181,21 @@
.title { .title {
width: 100%; width: 100%;
border-radius: 12rpx 12rpx 0 0; height: 90rpx;
height: 78rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #222222;
border: 2px solid #fff; border-radius: 10rpx;
border: 1px solid #838992;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 24rpx;
image { image {
width: 32rpx; width: 71rpx;
height: 13rpx; height: 30rpx;
margin: 0 20rpx; margin: 0 50rpx;
} }
} }

39
pages/activity/presaleStyle.scss
Unescape View File

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

34
pages/activity/ranking.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<view class="newGoods"> <view class="newGoods" :id="`rank${styleIndex}`">
<!-- :style="{backgroundImage:'url('+backgroundImg+')'}" --> <!-- :style="{backgroundImage:'url('+backgroundImg+')'}" -->
<!-- <view class="rule" @click="openPage()">规则</view> --> <!-- <view class="rule" @click="openPage()">规则</view> -->
<view> <view>
@ -8,10 +8,10 @@
</view> </view>
<!-- <image :src="$picUrl+'/static/rank/rangkImg.png'" mode="" class="bgImg"></image> --> <!-- <image :src="$picUrl+'/static/rank/rangkImg.png'" mode="" class="bgImg"></image> -->
<view class="headTitle"> <view class="headTitle">
全站好物热榜 {{ styleIndex > 0 ? '' : '全站好物热榜' }}
</view> </view>
<view class="ranking"> <view class="ranking">
- 跟榜买错不了 - {{ styleIndex > 0 ? '' : '- 跟榜买错不了 -' }}
</view> </view>
<view class="menuList"> <view class="menuList">
<scroll-view scroll-x="true" class="list"> <scroll-view scroll-x="true" class="list">
@ -74,7 +74,7 @@
</view> </view>
<view class="look1" @click="goDetail(item.goods_id)"> <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> </view>
</view> </view>
@ -88,7 +88,7 @@
data() { data() {
return { return {
background: { 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', backgroundSize: '100% auto',
}, },
category_id: "", category_id: "",
@ -99,6 +99,20 @@
goodList: [], 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() { onShow() {
this.getListCharts() this.getListCharts()
}, },
@ -190,6 +204,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './rankingStyle.scss';
.newGoods { .newGoods {
width: 100%; width: 100%;
position: relative; position: relative;
@ -197,6 +212,11 @@
padding-bottom: 30rpx; padding-bottom: 30rpx;
background: #F34A40 url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat; background: #F34A40 url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat;
background-size: 100% auto; background-size: 100% auto;
::v-deep {
.u-navbar-inner {
height: 80rpx!important;
}
}
.bgImg { .bgImg {
width: 100%; width: 100%;
@ -460,7 +480,7 @@
.look1 { .look1 {
width: 202rpx; width: 202rpx;
height: 60rpx; height: 60rpx;
background: linear-gradient(180deg, #FF7E6A 0%, #FB322A 100%); background: #F9BD6C;
border-radius: 70rpx; border-radius: 70rpx;
margin-right: 22rpx; margin-right: 22rpx;
text-align: center; text-align: center;
@ -472,8 +492,6 @@
justify-content: center; justify-content: center;
.right1 { .right1 {
width: 18rpx;
height: 27rpx;
margin-left: 12rpx; margin-left: 12rpx;
} }
} }

39
pages/activity/rankingStyle.scss
Unescape View File

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

36
pages/index/index.vue
Unescape View File

@ -1,10 +1,10 @@
<template> <template>
<view class="index"> <view class="index" :id="`index${styleIndex}`">
<view class="navbarContent"> <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> <image :src="logoImage" mode="heightFix" class="logo"></image>
<view class="slot-wrap"> <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> :bold="false" button-color="#fff" :list="list" :current="current"></u-subsection>
</view> </view>
</u-navbar> </u-navbar>
@ -34,7 +34,7 @@
v-for="(item,index) in tabList" :key="index"> v-for="(item,index) in tabList" :key="index">
{{item.name}} {{item.name}}
<view class="flag" v-if="tabCurrent==index"> <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>
</view> </view>
<!-- <u-tabs :list="tabList" name="name" font-size="28" active-color="#F6393D" <!-- <u-tabs :list="tabList" name="name" font-size="28" active-color="#F6393D"
@ -73,7 +73,7 @@
</view> </view>
</view> </view>
<view class="firstContent" @click="goNewUser" v-if="wxAppSetting.new_first_gift"> <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="firstInfo">
<view class="fTitle"> <view class="fTitle">
<image :src="$picUrl+'/static/index/xinren.png'" class="firstTitle"></image> <image :src="$picUrl+'/static/index/xinren.png'" class="firstTitle"></image>
@ -184,7 +184,7 @@
</view> </view>
<view class="activity"> <view class="activity">
<view class="left" @click="goNews" v-if="wxAppSetting.service"> <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>
<view class="right"> <view class="right">
<!-- <view class="rightContent"> --> <!-- <view class="rightContent"> -->
@ -494,7 +494,8 @@
import * as limit from '@/api/sharp/home.js'; import * as limit from '@/api/sharp/home.js';
import * as Api from '@/api/goods' import * as Api from '@/api/goods'
import * as activity from '@/api/activity' import * as activity from '@/api/activity'
import * as newFunApi from '@/api/newFun' import * as newFunApi from '@/api/newFun';
import styleColor from '../styleColor';
export default { export default {
data() { data() {
return { return {
@ -571,6 +572,18 @@
wxAppSetting: {} wxAppSetting: {}
} }
}, },
computed: {
styleIndex() {
const index = 4;
return index;
},
tabActiveColor() {
return this.styleIndex ? (styleColor.indexColor[this.styleIndex - 1] || '') : ''
}
},
mounted() {
console.log(styleColor);
},
methods: { methods: {
/** /**
* 获取小程序配置 * 获取小程序配置
@ -1005,6 +1018,7 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './style.scss';
.index { .index {
min-height: calc(100vh - 100rpx); min-height: calc(100vh - 100rpx);
background: url('https://www.royaum.com.cn/static/index/index-bg.png'); background: url('https://www.royaum.com.cn/static/index/index-bg.png');
@ -1287,6 +1301,10 @@
width: 698rpx; width: 698rpx;
height: 230rpx; height: 230rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
&.firstBgStyle {
width: 686rpx;
height: 230rpx;
}
} }
.firstInfo { .firstInfo {
@ -1390,7 +1408,7 @@
.dapai { .dapai {
position: relative; 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-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 20rpx 24rpx; padding: 20rpx 24rpx;
@ -1658,7 +1676,7 @@
.rightItem1, .rightItem1,
.rightItem2 { .rightItem2 {
background: url('https://www.royaum.com.cn/static/index/newFirst.png'); background: url('https://www.royaum.com.cn/static/index/newFirst.png');
background-size: cover; background-size: cover!important;
padding: 14rpx; padding: 14rpx;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;

219
pages/index/style.scss
Unescape View File

@ -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");
}
}

39
pages/invite/index.vue
Unescape View File

@ -1,11 +1,12 @@
<template> <template>
<view class="invite"> <view class="invite" :id="`invite${styleIndex}`">
<view class="invite-notice"> <view class="invite-notice">
<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar> <u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar>
</view> </view>
<view class="invite-hd"> <view class="invite-hd">
<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> --> <!-- <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 class="rule" @click="openPage(4)"></view>
</view> </view>
<view class="invite-bd"> <view class="invite-bd">
@ -86,6 +87,7 @@
} from '@/utils/qrcode' } from '@/utils/qrcode'
import * as newFunApi from '@/api/newFun' import * as newFunApi from '@/api/newFun'
import * as Api from '@/api/help' import * as Api from '@/api/help'
import styleColor from '../styleColor';
export default { export default {
data() { data() {
return { return {
@ -102,6 +104,22 @@
list: [] 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() { onReady() {
this.getList(); this.getList();
this.getCarousel() this.getCarousel()
@ -269,6 +287,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './style.scss';
.invite { .invite {
background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat; background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat;
background-size: 100% auto; background-size: 100% auto;
@ -359,7 +378,7 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
// background-color: #FF5554; // background-color: #FF5554;
height: 436rpx; height: 536rpx;
position: relative; position: relative;
.rule { .rule {
@ -373,12 +392,20 @@
.btn { .btn {
width: 396rpx; width: 396rpx;
height: 88rpx; height: 90rpx;
position: absolute; position: absolute;
left: 50%; left: 51%;
margin-left: -205rpx; margin-left: -205rpx;
bottom: 0rpx; bottom: 2rpx;
z-index: 2; z-index: 2;
text-align: center;
line-height: 90rpx;
color: #fff;
font-size: 28rpx;
border-radius: 45rpx;
&.btn2 {
bottom: 24rpx;
}
} }
} }

34
pages/invite/style.scss
Unescape View File

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

42
pages/news/coupon/index.vue
Unescape View File

@ -1,8 +1,10 @@
<template> <template>
<view class="coupon"> <view class="coupon" :id="`coupon${styleIndex}`">
<view class="rule" @click="openPage()">规则</view> <view class="rule" @click="openPage()">规则</view>
<view class="coupon-hd"> <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>
<view class="coupon-tab"> <view class="coupon-tab">
<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">商品券</view> <view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">商品券</view>
@ -36,6 +38,7 @@
<script> <script>
import * as CouponApi from '@/api/coupon' import * as CouponApi from '@/api/coupon'
import styleColor from '../../styleColor';
export default { export default {
data() { data() {
return { return {
@ -43,6 +46,22 @@
couponList: [] 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() { onShow() {
this.getCoupon(this.tabIndex) this.getCoupon(this.tabIndex)
}, },
@ -101,6 +120,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './style.scss';
.coupon { .coupon {
background-color: #FB3A22; background-color: #FB3A22;
overflow: hidden; overflow: hidden;
@ -144,7 +164,7 @@
&-hd { &-hd {
width: 100%; width: 100%;
height: 445rpx; height: 460rpx;
image { image {
width: 100%; width: 100%;
@ -153,7 +173,8 @@
} }
&-tab { &-tab {
padding: 0 40rpx; padding: 40rpx 40rpx 0;
border-radius: 30rpx 30rpx 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -183,6 +204,8 @@
position: relative; position: relative;
margin-top: 20rpx; margin-top: 20rpx;
overflow: hidden; overflow: hidden;
background: #fff;
border-radius: 15rpx;
image { image {
width: 100%; width: 100%;
@ -265,18 +288,19 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 148rpx; height: 98rpx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 36rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: #FA3B22; color: #FA3B22;
line-height: 148rpx; line-height: 98rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #FEEECA 100%); background: #FFE5B2;
z-index: 999; z-index: 999;
.fooIcon { .fooIcon {
margin-left: 36rpx; margin-left: 15rpx;
font-size: 24rpx;
} }
} }
</style> </style>

98
pages/news/coupon/style.scss
Unescape View File

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

6
pages/styleColor.js
Unescape View File

@ -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']
}

4
utils/utils.scss
Unescape View File

@ -338,3 +338,7 @@ button:after {
content: none; content: none;
border: none; border: none;
} }
.u-navbar-inner {
height: 80rpx;
}
Write Preview
Loading…
Cancel
Save