Skip to content

activities / web-lottery

Go to a project
Commit 8f3bda17 by 施嘉伟
Options

新三种抽奖样式调整

parent 56ad4cf5
Showing with 272 additions and 90 deletions
components/Lottery/Instant/CountdownBar.vue
......@@ -2,11 +2,11 @@
<section v-if="'startTime' in lotteryInfo" class="countdown-bar">
<div
class="countdown-bar__status"
:class="{ 'mini-width-version': version === 'mini', 'none-width-version': version === 'none' }"
:style="barStyle"
>
<template v-if="parseInt(status, 10) !== LOTTERY_STATUS.end">
<div class="countdown-bar__text">{{ LOTTERY_STATUS_TXT[parseInt(status, 10)].actionLabel }}倒计时：</div>
<van-count-down millisecond :time="time">
<van-count-down millisecond :time="time" :style="{ color: barStyle.color }">
<template #default="timeData">
<span v-if="timeData.days" class="time-item">
{{ timeData.days | limitNum }}
......@@ -55,9 +55,9 @@ export default {
}
},
props: {
version: {
type: String,
default: 'normal'
barStyle: {
type: Object,
default: () => ({})
}
},
data() {
......@@ -126,15 +126,5 @@ export default {
width: 100%;
text-align: center;
}
.mini-width-version {
min-width: 160px;
padding: 0 6px;
border: none;
}
.none-width-version {
background-color: transparent;
padding: 0;
border: none;
}
}
</style>
components/Lottery/Instant/Introduction.vue
......@@ -115,7 +115,8 @@ export default {
&-rule {
text-align: center;
margin-top: 30px;
font-size: 14px;
margin: 30px 0 20px 0;
}
}
&__title {
......
components/Lottery/Instant/RecordsPupupNew.vue
<template>
<van-popup v-model="visible" class="records-popup" swipeable close-icon="close">
<van-popup v-model="visible" class="records-popup" swipeable>
<div class="records-popup__close" :style="closeBg" @click="closePopup"></div>
<div class="records-popup__title">
<div class="records-popup__title-personal" :style="personalBg" @click="changeActive('personal')"></div>
<div class="records-popup__title-winners" :style="winnersBg" @click="changeActive('winners')"></div>
......@@ -7,34 +8,34 @@
<div class="records-popup__main" :style="mainBg">
<div v-show="active === 'personal'" class="records-popup__personal-record">
<div class="records-popup__record-content">
<div class="records-popup__phone">
<div class="records-popup__phone" :style="normalTextColor">
领奖手机号：
<span v-if="isBindPhone">{{ userInfo.phone }}</span>
<span v-else class="records-popup__bind-phone" @click="bindMobile">绑定手机号</span>
<span v-if="isBindPhone" :style="normalTextColor">{{ userInfo.phone }}</span>
<span v-else class="records-popup__bind-phone" :style="prizebindTextColor" @click="bindMobile">绑定手机号</span>
</div>
<ul v-if="Object.keys(recordList).length !== 0" class="records-popup__record-list">
<li v-for="(session, key, index) in recordList" :key="index">
<div v-for="(item, itemIndex) in session" :key="itemIndex" class="records-popup__session-info">
<div class="records-popup__info-wrap">
<div v-if="session.length > 1" class="records-popup__session">第{{ NUMBER_LIST[index + 1] }}场次</div>
<div class="records-popup__time">
<div v-if="session.length > 1" class="records-popup__session" :style="normalTextColor">第{{ NUMBER_LIST[index + 1] }}场次</div>
<div class="records-popup__time" :style="normalTextColor">
<span>{{ (item.drawTime * 1000) | formatDate('MM-DD HH:mm:ss') }}</span>
</div>
</div>
<div class="records-popup__prize-name">{{ item.prizeName }}</div>
<div class="records-popup__prize-name" :style="normalTextColor">{{ item.prizeName }}</div>
</div>
</li>
</ul>
<div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data">暂无记录</div>
<div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data" :style="noDataColor">暂无记录</div>
</div>
</div>
<div v-show="active === 'winners' && isShowWinnersList" class="records-popup__winners-record">
<div class="records-popup__record-content">
<div class="records-popup__winners-list">
<div v-for="(item, index) in winnersList" :key="index" class="records-popup__item">
<div v-for="(item, index) in winnersList" :key="index" class="records-popup__item" :style="normalTextColor">
{{ item.userNick }} 获得 <span class="records-popup__prize-name">{{ item.prizeName }}</span>
</div>
<div v-if="winnersList.length === 0" class="records-popup__no-data">暂无数据</div>
<div v-if="winnersList.length === 0" class="records-popup__no-data" :style="noDataColor">暂无数据</div>
</div>
</div>
</div>
......@@ -111,6 +112,26 @@ export default {
? `url(${this.recordsConfig.winnersBg})`
: `url(${this.recordsConfig.winnersBgDisabled})`
}
},
closeBg() {
return {
backgroundImage: `url(${this.recordsConfig.closeIcon})`
}
},
noDataColor() {
return {
color: this.recordsConfig.noDataColor
}
},
normalTextColor() {
return {
color: this.recordsConfig.normalTextColor
}
},
prizebindTextColor() {
return {
color: this.recordsConfig.prizebindTextColor
}
}
},
watch: {
......@@ -173,6 +194,9 @@ export default {
changeActive(val) {
this.active = val
this.onChange()
},
closePopup() {
this.$emit('setIsShowRecordsPopup', false)
}
}
}
......@@ -180,14 +204,23 @@ export default {
<style lang="less" scoped>
.records-popup {
top: 48%;
width: 258px;
height: 291px;
background-color: transparent;
border-radius: 15px;
overflow: visible;
font-size: 12px;
&__close {
position: absolute;
right: -8px;
top: 15px;
width: 25px;
height: 25px;
background-size: 100% 100%;
}
&__main {
position: relative;
height: 100%;
background-size: 100% 100%;
padding: 24px 16px;
......@@ -308,9 +341,13 @@ export default {
}
}
&__no-data {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
text-align: center;
padding-top: 40px;
// padding-top: 40px;
}
}
</style>
components/Lottery/Instant/type/TypeGashapon.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="lottery-instant__main">
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
......@@ -15,7 +11,11 @@
<img src="@/assets/images/lottery/gashapon/game-bg.png" />
</div>
<div class="on-start" @click="startLottery">
<img :src="buttonImg" />
<div class="lottery-instant__times" :style="btnTextColor">
抽奖次数:<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<img :src="btnImg" />
</div>
</div>
</div>
......@@ -46,7 +46,13 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabl
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import { introductionConfigGashapon, winConfigGashapon, recordsConfigGashapon, ballListGashapon } from './config'
import {
introductionConfigGashapon,
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
countDownBarPurple
} from './config'
export default {
components: {
......@@ -88,6 +94,7 @@ export default {
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashapon,
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片
}
},
......@@ -104,11 +111,21 @@ export default {
return +status !== LOTTERY_STATUS.start
},
// 按钮图片样式
buttonImg() {
btnImg() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return onStartDidabledImg
}
return onStartImg
},
btnTextColor() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return {
color: '#6d6d6d'
}
}
return {
color: '#610ca1'
}
}
},
methods: {
......@@ -196,13 +213,14 @@ export default {
}
}
}
&__times {
position: absolute;
top: 0;
left: 0;
font-size: 13px;
color: #fff;
padding: 25px 15px;
bottom: 29%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
white-space: nowrap;
}
}
</style>
components/Lottery/Instant/type/TypeGashapon2.vue
......@@ -5,7 +5,7 @@
</div>
<div class="lottery-instant__main">
<div class="lottery-instant__countdown">
<CountdownBar version="none"></CountdownBar>
<CountdownBar :bar-style="barStyle"></CountdownBar>
</div>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
......@@ -52,7 +52,8 @@ import {
introductionConfigGashapon2 as introductionConfigGashapon,
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon
ballListGashapon,
countDownBarNone
} from './config'
export default {
......@@ -95,6 +96,7 @@ export default {
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashapon,
barStyle: countDownBarNone,
ballListGashapon // 扭蛋球图片
}
},
......@@ -149,7 +151,7 @@ export default {
-webkit-overflow-scrolling: touch;
&__countdown {
position: absolute;
top: 10px;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
......
components/Lottery/Instant/type/TypeGashaponMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="lottery-instant__main">
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
......@@ -15,7 +11,11 @@
<img src="@/assets/images/lottery/gashapon/game-bg.png" />
</div>
<div class="on-start" @click="startLottery">
<img :src="buttonImg" />
<div class="lottery-instant__times" :style="btnTextColor">
抽奖次数:<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<img :src="btnImg" />
</div>
</div>
</div>
......@@ -47,7 +47,13 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabl
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import { introductionConfigGashaponMini, winConfigGashapon, recordsConfigGashapon, ballListGashapon } from './config'
import {
introductionConfigGashaponMini,
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
countDownBarPurple
} from './config'
export default {
components: {
......@@ -93,6 +99,7 @@ export default {
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashaponMini,
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片
}
},
......@@ -109,11 +116,21 @@ export default {
return +status !== LOTTERY_STATUS.start
},
// 按钮图片样式
buttonImg() {
btnImg() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return onStartDidabledImg
}
return onStartImg
},
btnTextColor() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return {
color: '#6d6d6d'
}
}
return {
color: '#610ca1'
}
}
},
methods: {
......@@ -205,11 +222,11 @@ export default {
}
&__times {
position: absolute;
top: 0;
left: 0;
font-size: 13px;
color: #fff;
padding: 25px 15px;
bottom: 29%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
white-space: nowrap;
}
&__intro-entry {
......
components/Lottery/Instant/type/TypeGashaponMini2.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__countdown">
<CountdownBar version="mini"></CountdownBar>
<CountdownBar :bar-style="barStyle"></CountdownBar>
</div>
<div class="lottery-instant__main">
<div class="lottery-instant__layout-gashapon">
......@@ -50,7 +50,8 @@ import {
introductionConfigGashaponMini2 as introductionConfigGashaponMini,
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon
ballListGashapon,
countDownBarWhite
} from './config'
export default {
......@@ -97,6 +98,7 @@ export default {
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashaponMini,
barStyle: countDownBarWhite,
ballListGashapon // 扭蛋球图片
}
},
......
components/Lottery/Instant/type/TypeGuess.vue
......@@ -2,9 +2,12 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
<img src="@/assets/images/lottery/guess/star.png" />
</div>
<img src="@/assets/images/lottery/guess/gift-main.png" />
</div>
<div class="content-main">
......@@ -47,7 +50,14 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import { blindBoxListGuess, recordsConfigGuess, winConfigGuess, introductionConfigGuess } from './config'
import {
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
export default {
components: {
......@@ -91,7 +101,9 @@ export default {
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuess
introConfig: introductionConfigGuess,
barStyle: countDownBarDeepPurple,
starConfig
}
},
computed: {
......@@ -143,7 +155,7 @@ export default {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/gashapon/page-bg.png') !important;
background-image: url('@/assets/images/lottery/guess/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
......@@ -164,12 +176,16 @@ export default {
&__layout-guess {
padding: 0 15px;
.content-img {
position: relative;
width: 152px;
height: 154px;
margin: 10px auto 0 auto;
img {
width: 100%;
}
&--star {
position: absolute;
}
}
.content-main {
position: relative;
......
components/Lottery/Instant/type/TypeGuess2.vue
......@@ -2,9 +2,12 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
<img src="@/assets/images/lottery/guess/star.png" />
</div>
<img src="@/assets/images/lottery/guess2/gift-main.png" />
</div>
<div class="content-main">
......@@ -47,7 +50,14 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import { blindBoxListGuess2, recordsConfigGuess, winConfigGuess, introductionConfigGuess2 as introductionConfigGuess } from './config'
import {
blindBoxListGuess2,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuess2 as introductionConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
export default {
components: {
......@@ -91,7 +101,9 @@ export default {
blindBoxList: blindBoxListGuess2,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuess
introConfig: introductionConfigGuess,
barStyle: countDownBarDeepPurple,
starConfig
}
},
computed: {
......@@ -143,7 +155,7 @@ export default {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/gashapon/page-bg.png') !important;
background-image: url('@/assets/images/lottery/guess/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
......@@ -164,12 +176,16 @@ export default {
&__layout-guess {
padding: 0 15px;
.content-img {
position: relative;
width: 218px;
height: 205px;
margin: -10px auto 0 auto;
img {
width: 100%;
}
&--star {
position: absolute;
}
}
.content-main {
position: relative;
......
components/Lottery/Instant/type/TypeGuessMini.vue
......@@ -2,9 +2,12 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
<img src="@/assets/images/lottery/guess/star.png" />
</div>
<img src="@/assets/images/lottery/guess/gift-main.png" />
</div>
<div class="content-main">
......@@ -52,7 +55,9 @@ import {
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuessMini
introductionConfigGuessMini,
countDownBarDeepPurple,
starConfig
} from './config'
export default {
......@@ -101,7 +106,9 @@ export default {
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuessMini
introConfig: introductionConfigGuessMini,
barStyle: countDownBarDeepPurple,
starConfig
}
},
computed: {
......@@ -176,12 +183,16 @@ export default {
}
&__layout-guess {
.content-img {
position: relative;
width: 152px;
height: 154px;
margin: 10px auto 0 auto;
img {
width: 100%;
}
&--star {
position: absolute;
}
}
.content-main {
position: relative;
......
components/Lottery/Instant/type/TypeGuessMini2.vue
......@@ -2,9 +2,12 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
<img src="@/assets/images/lottery/guess/star.png" />
</div>
<img src="@/assets/images/lottery/guess2/gift-main.png" />
</div>
<div class="content-main">
......@@ -52,7 +55,9 @@ import {
blindBoxListGuess2 as blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuessMini
introductionConfigGuessMini,
countDownBarDeepPurple,
starConfig
} from './config'
export default {
......@@ -101,7 +106,9 @@ export default {
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuessMini
introConfig: introductionConfigGuessMini,
barStyle: countDownBarDeepPurple,
starConfig
}
},
computed: {
......@@ -176,12 +183,16 @@ export default {
}
&__layout-guess {
.content-img {
position: relative;
width: 218px;
height: 205px;
margin: -10px auto 0 auto;
img {
width: 100%;
}
&--star {
position: absolute;
}
}
.content-main {
position: relative;
......
components/Lottery/Instant/type/TypeScratch.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<div class="lottery-instant__layout-scratch">
<div class="lottery-instant__content-scratch">
<img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" />
......@@ -67,7 +67,7 @@ import coverImg from '@/assets/images/lottery/scratch/mask.png'
import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
import Bus from '@/utils/Bus'
import { introductionConfigScratch, recordsConfigScratch } from './config'
import { introductionConfigScratch, recordsConfigScratch, countDownBarBlue } from './config'
export default {
components: {
......@@ -107,7 +107,8 @@ export default {
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
introConfig: introductionConfigScratch
introConfig: introductionConfigScratch,
barStyle: countDownBarBlue
}
},
computed: {
......@@ -207,6 +208,7 @@ export default {
.content-title {
width: 74%;
object-fit: cover;
margin: 10px 0;
}
.content-prize {
font-size: 12px;
......
components/Lottery/Instant/type/TypeScratchMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="lottery-instant__main">
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<div class="lottery-instant__layout-scratch">
<div class="lottery-instant__content-scratch">
<img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" />
......@@ -32,10 +28,15 @@
<div class="lottery-instant__button-mask">
<div v-show="firstTimeLottering" class="lottery-instant__button-img">
<img :src="buttonImg" @click="startLottery" />
<div class="times">
今日次数<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
</div>
<div v-show="!firstTimeLottering" class="lottery-instant__button-continue">
<span @click="continueScratch"
>继续刮奖</span
>今日次数<span>{{ lotteryInfo.userTimes }}</span
>次，继续刮奖</span
>
</div>
</div>
......@@ -68,7 +69,7 @@ import coverImg from '@/assets/images/lottery/scratch/mask.png'
import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
import Bus from '@/utils/Bus'
import { introductionConfigScratchMini2, recordsConfigScratch } from './config'
import { introductionConfigScratchMini2, recordsConfigScratch, countDownBarBlue } from './config'
export default {
components: {
......@@ -112,7 +113,8 @@ export default {
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
introConfig: introductionConfigScratchMini2
introConfig: introductionConfigScratchMini2,
barStyle: countDownBarBlue
}
},
computed: {
......@@ -212,6 +214,7 @@ export default {
.content-title {
width: 74%;
object-fit: cover;
margin: 10px 0;
}
.content-prize {
font-size: 12px;
......
components/Lottery/Instant/type/config.js
......@@ -63,7 +63,11 @@ const recordsConfigPurple = {
personalBg: personalBgPurple,
personalBgDisabled: personalBgDisabledPurple,
winnersBg: winnersBgPurple,
winnersBgDisabled: winnersBgDisabledPurple
winnersBgDisabled: winnersBgDisabledPurple,
closeIcon: winClosePurple,
noDataColor: '#fff',
normalTextColor: '#fff',
prizebindTextColor: '#ffc800'
}
const winConfigPurple = {
winKnow,
......@@ -78,7 +82,9 @@ const recordsConfigBlue = {
personalBg: personalBgBlue,
personalBgDisabled: personalBgDisabledBlue,
winnersBg: winnersBgBlue,
winnersBgDisabled: winnersBgDisabledBlue
winnersBgDisabled: winnersBgDisabledBlue,
closeIcon: winCloseBlue,
noDataColor: '#8fb3dc'
}
const winConfigBlue = {
winKnow,
......@@ -184,11 +190,52 @@ const introductionConfigMiniBlue = {
}
}
}
const countDownBarBlue = {
minWidth: '2.13rem',
padding: '0 0.12rem',
border: 'none',
height: '0.3rem !important',
backgroundColor: '#2452bb99'
}
const countDownBarPurple = Object.assign({}, countDownBarBlue, { backgroundColor: '#8350B299' })
const countDownBarWhite = Object.assign({}, countDownBarBlue, { backgroundColor: '#ffffff99', color: '#000' })
const countDownBarDeepPurple = Object.assign({}, countDownBarBlue, { backgroundColor: '#12121233' })
const countDownBarNone = {
backgroundColor: 'transparent',
padding: '0',
border: 'none'
}
/* 猜盲盒 */
const recordsConfigGuess = recordsConfigPurple
const winConfigGuess = Object.assign({}, winConfigPurple, { winTitle: winTitleGuess })
const introductionConfigGuessMini = introductionConfigMiniPurple
const starConfig = [
{
width: '0.3rem',
height: '0.3rem',
top: "10%",
left: "-30%"
},
{
width: '0.4rem',
height: '0.3rem',
top: "-15%",
left: "-25%"
},
{
width: '0.6rem',
height: '0.3rem',
top: "-25%",
right: "-25%"
},
{
width: '0.4rem',
height: '0.3rem',
top: "20%",
right: "-35%"
}
]
// 猜盲盒1
const blindBoxListGuess = [
......@@ -316,7 +363,7 @@ const ballListGashapon = [
{
img: ballGashapon5,
shrink: 1
},
}
]
// 扭蛋机1
......@@ -327,13 +374,14 @@ const introductionConfigGashapon = {
fontSize: '0.22rem',
fontWeight: '700',
textAlign: 'center',
width: '23%',
width: '22%',
height: 'auto',
padding: '0.05rem 0',
left: '50%',
color: '#fff',
transform: 'translate(-50%, 50%)',
backgroundColor: '#ffffff63'
backgroundColor: '#ffffff63',
borderRadius: '0.03rem'
},
titleText: '活动介绍',
// 外框
......@@ -456,5 +504,12 @@ export {
// 刮刮乐
introductionConfigScratch,
recordsConfigScratch,
introductionConfigScratchMini2
introductionConfigScratchMini2,
// countDown
countDownBarBlue,
countDownBarPurple,
countDownBarWhite,
countDownBarNone,
countDownBarDeepPurple,
starConfig
}
pages/list/index.vue
......@@ -173,6 +173,7 @@ export default {
color: #fff;
padding: 0 17px;
font-size: 14px;
background-color: #00000080;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment