Skip to content

activities / web-lottery

Go to a project
Commit f2fc0efc by 施嘉伟
Options

refactor(winpupop): 重构开奖框和倒计时样式 

1.重构开奖框样式穿透 | 2.重构倒计时样式穿透
parent baeb72e4
Showing with 1097 additions and 189 deletions
components/Lottery/Instant/CountdownBar.vue
<template>
<section v-if="'startTime' in lotteryInfo" class="countdown-bar">
<div
class="countdown-bar__status"
:style="barStyle"
>
<div class="countdown-bar__status">
<template v-if="+status !== LOTTERY_STATUS.end">
<div class="countdown-bar__text">{{ LOTTERY_STATUS_TXT[+status].actionLabel }}倒计时：</div>
<van-count-down millisecond :time="time" :style="{ color: barStyle.color }">
<van-count-down millisecond :time="time">
<template #default="timeData">
<span v-if="timeData.days" class="time-item">
{{ timeData.days | limitNum }}
......@@ -54,12 +51,6 @@ export default {
return value
}
},
props: {
barStyle: {
type: Object,
default: () => ({})
}
},
data() {
return {
LOTTERY_STATUS,
......
components/Lottery/Instant/WinPopup.vue
......@@ -10,6 +10,7 @@
<div class="win-popup__container">
<div class="win-popup__wrap">
<div class="win-popup__content">
<slot v-if="isWin" name="title-bg"></slot>
<div v-if="isWin" class="win-popup__win-info">
<div class="win-popup__title">恭喜获得</div>
<div class="win-popup__prize-img">
......@@ -19,7 +20,9 @@
{{ info.name }}
</div>
</div>
<div v-else class="win-popup__thanks">谢谢参与，再接再厉</div>
<div v-else class="win-popup__thanks">
<slot name="thanks">谢谢参与，再接再厉</slot>
</div>
</div>
<div class="win-popup__footer">
<template v-if="isWin">
......
components/Lottery/Instant/WinPopupNew.vue
......@@ -207,7 +207,7 @@ export default {
height: 120px;
display: flex;
flex-direction: column;
justify-content: start;
justify-content: flex-start;
align-items: center;
}
&__footer {
......
components/Lottery/Instant/type/TypeGashapon.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
......@@ -20,11 +20,19 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有扭到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
......@@ -38,17 +46,12 @@ 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 {
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
countDownBarPurple
} from './config'
import { recordsConfigGashapon, ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
......@@ -83,8 +86,6 @@ export default {
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片
}
},
......@@ -213,8 +214,9 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background-color: #7826A9;
background-color: #7826a9;
padding: 8px 15px 30px 15px;
border-radius: 0;
&__sec-title {
......@@ -240,5 +242,98 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #8350B299;
}
}
</style>
components/Lottery/Instant/type/TypeGashapon2.vue
......@@ -5,7 +5,7 @@
</div>
<div class="lottery-instant__main">
<div class="lottery-instant__countdown">
<CountdownBar :bar-style="barStyle"></CountdownBar>
<CountdownBar></CountdownBar>
</div>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
......@@ -22,11 +22,19 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有扭到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
......@@ -40,17 +48,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disab
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon,
countDownBarNone
} from './config'
import { recordsConfigGashapon2 as recordsConfigGashapon, ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
......@@ -85,8 +88,6 @@ export default {
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
barStyle: countDownBarNone,
ballListGashapon // 扭蛋球图片
}
},
......@@ -211,6 +212,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background-color: #ffbd33;
padding: 75px 11px 8px 11px;
......@@ -239,5 +241,96 @@ export default {
color: #000;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-blue.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-blue.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
background-color: transparent;
padding: 0;
border: none;
}
}
</style>
components/Lottery/Instant/type/TypeGashaponMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
......@@ -21,17 +21,22 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有扭到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
rule-position="bottom"
></IntroductionPopup>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -42,17 +47,12 @@ 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 {
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
countDownBarPurple
} from './config'
import { recordsConfigGashapon, ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
......@@ -91,8 +91,6 @@ export default {
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片
}
},
......@@ -235,6 +233,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
......@@ -264,5 +263,99 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #8350B299;
}
}
</style>
components/Lottery/Instant/type/TypeGashaponMini2.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__countdown">
<CountdownBar :bar-style="barStyle"></CountdownBar>
<CountdownBar></CountdownBar>
</div>
<div class="lottery-instant__main">
<div class="lottery-instant__layout-gashapon">
......@@ -20,17 +20,22 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有扭到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
rule-position="bottom"
></IntroductionPopup>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -41,21 +46,16 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disab
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon,
countDownBarWhite
} from './config'
import { recordsConfigGashapon2 as recordsConfigGashapon, ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
PrizeGashapon,
PrizeGashapon
},
props: {
winInfo: {
......@@ -90,8 +90,6 @@ export default {
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
barStyle: countDownBarWhite,
ballListGashapon // 扭蛋球图片
}
},
......@@ -217,6 +215,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/gashapon2/intro-bg-mini.png');
&__wrap {
......@@ -246,5 +245,101 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-blue.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-blue.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #ffffff99;
color: #000;
.van-count-down {
color: #000;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuess.vue
......@@ -2,7 +2,7 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></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">
......@@ -27,11 +27,19 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-guess.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有猜中</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
......@@ -42,19 +50,13 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
import { blindBoxListGuess, recordsConfigGuess, starConfig } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records')
......@@ -91,8 +93,6 @@ export default {
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
barStyle: countDownBarDeepPurple,
starConfig
}
},
......@@ -244,6 +244,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
padding: 30px 15px;
......@@ -265,5 +266,98 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #12121233;
}
}
</style>
components/Lottery/Instant/type/TypeGuess2.vue
......@@ -2,7 +2,7 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></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">
......@@ -27,11 +27,19 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-guess.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有猜中</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
......@@ -42,19 +50,13 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess2,
recordsConfigGuess,
winConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
import { blindBoxListGuess2, recordsConfigGuess, starConfig } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records')
......@@ -91,8 +93,6 @@ export default {
timer: null,
blindBoxList: blindBoxListGuess2,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
barStyle: countDownBarDeepPurple,
starConfig
}
},
......@@ -242,6 +242,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
padding: 30px 15px;
......@@ -267,5 +268,96 @@ export default {
color: #fff;
}
}
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #12121233;
}
}
</style>
components/Lottery/Instant/type/TypeGuessMini.vue
......@@ -2,7 +2,7 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></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">
......@@ -28,11 +28,19 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-guess.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有猜中</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
......@@ -43,13 +51,13 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import { blindBoxListGuess, recordsConfigGuess, winConfigGuess, countDownBarDeepPurple, starConfig } from './config'
import { blindBoxListGuess, recordsConfigGuess, starConfig } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup')
......@@ -90,8 +98,6 @@ export default {
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
barStyle: countDownBarDeepPurple,
starConfig
}
},
......@@ -261,6 +267,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
......@@ -290,5 +297,97 @@ export default {
color: #fff;
}
}
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #12121233;
}
}
</style>
components/Lottery/Instant/type/TypeGuessMini2.vue
......@@ -2,7 +2,7 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></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">
......@@ -28,17 +28,22 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-guess.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有猜中</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
rule-position="bottom"
></IntroductionPopup>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -46,19 +51,13 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess2 as blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
import { blindBoxListGuess2 as blindBoxListGuess, recordsConfigGuess, starConfig } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup')
......@@ -99,8 +98,6 @@ export default {
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
barStyle: countDownBarDeepPurple,
starConfig
}
},
......@@ -268,6 +265,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
......@@ -297,5 +295,98 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #12121233;
}
}
</style>
components/Lottery/Instant/type/TypeScratch.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></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="" />
......@@ -47,11 +47,19 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-scratch.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有刮到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有刮到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<Records :records-config="recordsConfig"></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
......@@ -65,11 +73,11 @@ 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 { recordsConfigScratch, countDownBarBlue, winConfigGashapon2 as winConfigScratch } from './config'
import { recordsConfigScratch } from './config'
export default {
components: {
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
......@@ -105,9 +113,7 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
winConfig: winConfigScratch, // 开奖样式
barStyle: countDownBarBlue
recordsConfig: recordsConfigScratch // 中奖记录样式配置
}
},
computed: {
......@@ -302,6 +308,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
padding: 38px 15px;
&__sec-title {
......@@ -319,5 +326,98 @@ export default {
color: #000;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-blue.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-blue.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #2452bb99;
}
}
</style>
components/Lottery/Instant/type/TypeScratchMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></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="" />
......@@ -48,6 +48,19 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-scratch.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有刮到奖品</p>
</div>
</template>
</WinPopup>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
......@@ -61,10 +74,11 @@ 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 { recordsConfigScratch, countDownBarBlue } from './config'
import { recordsConfigScratch } from './config'
export default {
components: {
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
......@@ -104,8 +118,7 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
barStyle: countDownBarBlue
recordsConfig: recordsConfigScratch // 中奖记录样式配置
}
},
computed: {
......@@ -147,6 +160,9 @@ export default {
duration: 1500
})
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
if (this.lotteryInfo.userTimes === 0) {
this.$refs.prizeScratchRef.tryAgain()
this.firstTimeLottering = true
......@@ -318,6 +334,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: linear-gradient(180deg, #60bdff 0%, #aaeefb 100%);
&__wrap {
......@@ -347,5 +364,97 @@ export default {
color: #000;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-blue.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-blue.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #2452bb99;
}
}
</style>
components/Lottery/Instant/type/config.js
......@@ -33,16 +33,8 @@ import personalBgDisabledBlue from '@/assets/images/lottery/records-new/personal
import winnersBgBlue from '@/assets/images/lottery/records-new/winners-blue.png'
import winnersBgDisabledBlue from '@/assets/images/lottery/records-new/winners-disabled-blue.png'
// 开奖样式
import winKnow from '@/assets/images/lottery/win-new/know.png'
import winTitleGuess from '@/assets/images/lottery/win-new/title-guess.png'
import winTitleGashapon from '@/assets/images/lottery/win-new/title-gashapon.png'
import winClosePurple from '@/assets/images/lottery/win-new/close-purple.png'
import winPrizeBgPurple from '@/assets/images/lottery/win-new/prize-bg-purple.png'
import winCloseBlue from '@/assets/images/lottery/win-new/close-blue.png'
import winPrizeBgBlue from '@/assets/images/lottery/win-new/prize-bg-blue.png'
const recordsConfigPurple = {
mode: 'new',
......@@ -57,12 +49,6 @@ const recordsConfigPurple = {
normalTextColor: '#fff',
prizebindTextColor: '#ffc800'
}
const winConfigPurple = {
winKnow,
bg: recordsBgPurple,
winClose: winClosePurple,
winPrizeBg: winPrizeBgPurple
}
const recordsConfigBlue = {
mode: 'new',
textColor: '#6F4800',
......@@ -74,31 +60,9 @@ const recordsConfigBlue = {
closeIcon: winCloseBlue,
noDataColor: '#8fb3dc'
}
const winConfigBlue = {
winKnow,
bg: recordsBgBlue,
winClose: winCloseBlue,
winPrizeBg: winPrizeBgBlue
}
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 starConfig = [
{
width: '0.3rem',
......@@ -163,7 +127,6 @@ const blindBoxListGuess2 = [
/* 扭蛋机 */
const recordsConfigGashapon = recordsConfigPurple
const winConfigGashapon = Object.assign({}, winConfigPurple, { winTitle: winTitleGashapon })
const ballListGashapon = [
{
img: ballGashapon1,
......@@ -208,7 +171,6 @@ const ballListGashapon = [
// 扭蛋机2
const recordsConfigGashapon2 = recordsConfigBlue
const winConfigGashapon2 = Object.assign({}, winConfigBlue, { winTitle: winTitleGashapon })
const recordsConfigScratch = Object.assign({}, recordsConfigBlue, { textColor: '#093C85' })
......@@ -216,23 +178,14 @@ export {
// 猜盲盒
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
// 猜盲盒2
blindBoxListGuess2,
// 扭蛋机
ballListGashapon,
recordsConfigGashapon,
winConfigGashapon,
// 扭蛋机2
recordsConfigGashapon2,
winConfigGashapon2,
// 刮刮乐
recordsConfigScratch,
// countDown
countDownBarBlue,
countDownBarPurple,
countDownBarWhite,
countDownBarNone,
countDownBarDeepPurple,
starConfig
}
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