Skip to content

activities / web-lottery

Go to a project
Commit fcba4836 by 施嘉伟
Options

Merge branch 'feature/lottery_20220419' into feature/lottery_20220322 

# Conflicts:
#	components/Lottery/Instant/Main.vue
parents aa9d9777 4794654b
Showing with 338 additions and 462 deletions
components/Lottery/Instant/Introduction.vue
<template>
<div class="introduction" :style="introBoxStyle">
<div class="introduction__sec-title" :style="titleStyle">{{ titleText }}</div>
<div class="introduction__wrap" :style="wrapStyle">
<div class="introduction__content" :style="contentStyle">
<p v-if="rule.position === 'top'" class="introduction__intro" :style="rule.style">{{ lotteryInfo.intro }}</p>
<div class="introduction">
<div class="introduction__sec-title">活动介绍</div>
<div class="introduction__wrap">
<div class="introduction__content">
<p v-if="rulePosition === 'top'" class="introduction__intro">{{ lotteryInfo.intro }}</p>
<template v-if="!!lotteryInfo.isShowPrize">
<div class="introduction__title">本场活动奖品：</div>
<div class="introduction__prize">
......@@ -19,7 +19,7 @@
</ul>
</div>
</template>
<div v-if="rule.position === 'bottom'" class="introduction__intro" :style="rule.style">
<div v-if="rulePosition === 'bottom'" class="introduction__intro">
<p class="introduction__intro-rule">活动规则</p>
<p>{{ lotteryInfo.intro }}</p>
</div>
......@@ -35,33 +35,10 @@ import img from '@/assets/images/lottery/gift.png'
export default {
name: 'Introduction',
props: {
rule: {
type: Object,
default: () => ({
position: 'top',
style: {}
})
},
titleStyle: {
type: Object,
default: () => ({})
},
titleText: {
rulePosition: {
type: String,
default: ''
},
wrapStyle: {
type: Object,
default: () => ({})
default: 'top'
},
contentStyle: {
type: Object,
default: () => ({})
},
introBoxStyle: {
type: Object,
default: () => ({})
}
},
data() {
return {
......@@ -91,6 +68,7 @@ export default {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
font-size: 0;
}
&__wrap {
width: 100%;
......
components/Lottery/Instant/IntroductionPopup.vue
......@@ -5,15 +5,14 @@
position="bottom"
transition="van-fade"
class="introduction-popup"
:style="popupStyle"
>
<div class="introduction-popup__main">
<div class="introduction-popup__sec-title" :style="titleStyle">活动介绍</div>
<div class="introduction-popup__wrap" :style="wrapStyle">
<div class="introduction-popup__content" :style="contentStyle">
<p v-if="rule.position === 'top'" class="introduction-popup__intro" :style="rule.style">{{ lotteryInfo.intro }}</p>
<div class="introduction-popup__sec-title">活动介绍</div>
<div class="introduction-popup__wrap">
<div class="introduction-popup__content">
<p v-if="rulePosition === 'top'" class="introduction-popup__intro">{{ lotteryInfo.intro }}</p>
<template v-if="!!lotteryInfo.isShowPrize">
<div class="introduction-popup__box" :style="contentBoxStyle">
<div class="introduction-popup__box">
<div class="introduction-popup__title">本场活动奖品：</div>
<div class="introduction-popup__prize">
<ul
......@@ -29,13 +28,13 @@
</div>
</div>
</template>
<div v-if="rule.position === 'bottom'" class="introduction-popup__intro" :style="rule.style">
<div v-if="rulePosition === 'bottom'" class="introduction-popup__intro">
<p class="introduction-popup__intro-rule">活动规则</p>
<p>{{ lotteryInfo.intro }}</p>
</div>
</div>
</div>
<div class="introduction-popup__back" :style="backStyle" @click="visible = false">返回活动</div>
<div class="introduction-popup__back" @click="visible = false">返回活动</div>
</div>
</van-popup>
</template>
......@@ -52,37 +51,10 @@ export default {
type: Boolean,
default: false
},
rule: {
type: Object,
default: () => ({
position: 'top',
style: {}
})
rulePosition: {
type: String,
default: 'top'
},
contentBoxStyle: {
type: Object,
default: () => ({})
},
titleStyle: {
type: Object,
default: () => ({})
},
wrapStyle: {
type: Object,
default: () => ({})
},
contentStyle: {
type: Object,
default: () => ({})
},
popupStyle: {
type: Object,
default: () => ({})
},
backStyle: {
type: Object,
default: () => ({})
}
},
data() {
return {
......
components/Lottery/Instant/Main.vue
......@@ -150,7 +150,7 @@
</div>
</div>
<Records></Records>
<Introduction class="lottery-instant__intro" :title-style="wheelIntroductionTitleStyle"></Introduction>
<Introduction class="lottery-instant__intro"></Introduction>
<WinPopup v-model="isShowWin" :info="winInfo"></WinPopup>
<BindPhoneDialog v-model="isShowBindPhone"></BindPhoneDialog>
</section>
......@@ -162,7 +162,6 @@ import { setLottery } from '@/api/modules/lottery'
import { LOTTERY_STATUS, LOTTERY_STATUS_TXT, LOTTERY_STYLE } from '@/utils/constant'
import { PrizeGrid, PrizeWheel } from 'lotteries'
import 'lotteries/lib/index.css'
import wheelIntroductionTitleImg from '@/assets/images/lottery/intro_title.png'
import Bus from '@/utils/Bus'
export default {
......@@ -251,11 +250,6 @@ export default {
}
return ''
},
wheelIntroductionTitleStyle() {
return {
backgroundImage: `url(${wheelIntroductionTitleImg})`
}
}
},
mounted() {
// this.lotteryInfo.showType = 4
......
components/Lottery/Instant/RecordsPupupNew.vue
<template>
<van-popup v-model="visible" class="records-popup" swipeable>
<div class="records-popup__close" :style="closeBg" @click="closePopup"></div>
<div class="records-popup__close" @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>
......
components/Lottery/Instant/type/TypeGashapon.vue
......@@ -27,15 +27,7 @@
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:title-text="introConfig.titleText"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -47,7 +39,6 @@ import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
introductionConfigGashapon,
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
......@@ -93,7 +84,6 @@ export default {
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashapon,
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片
}
......@@ -223,4 +213,35 @@ export default {
white-space: nowrap;
}
}
// 样式穿透
.lottery-instant {
/deep/ .introduction {
background-color: #7826A9;
padding: 8px 15px 30px 15px;
border-radius: 0;
&__sec-title {
background-image: none;
font-size: 16px;
font-weight: 700;
text-align: center;
width: 22%;
height: auto;
padding: 4px 0;
left: 50%;
color: #fff;
transform: translate(-50%, 50%);
background-color: #ffffff63;
border-radius: 2px;
}
&__wrap {
background-color: #7826a9;
padding: 2px;
}
&__content {
background: #7826a9;
color: #fff;
}
}
}
</style>
components/Lottery/Instant/type/TypeGashapon2.vue
......@@ -29,15 +29,7 @@
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:title-text="introConfig.titleText"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -49,7 +41,6 @@ import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
introductionConfigGashapon2 as introductionConfigGashapon,
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon,
......@@ -95,7 +86,6 @@ export default {
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashapon,
barStyle: countDownBarNone,
ballListGashapon // 扭蛋球图片
}
......@@ -221,4 +211,36 @@ export default {
}
}
}
// 样式穿透
.lottery-instant {
/deep/ .introduction {
background-color: #ffbd33;
padding: 75px 11px 8px 11px;
border-radius: 0;
&__sec-title {
background-image: url('@/assets/images/lottery/gashapon2/intro-wrap-title.png');
width: 95%;
padding: 4px 0;
color: #fff;
font-size: 18px;
text-align: center;
line-height: 2;
top: -7%;
left: 50%;
transform: translate(-50%, 50%);
}
&__wrap {
background-image: url('@/assets/images/lottery/gashapon2/intro-wrap-bg.png');
background-size: 100% 100%;
padding: 15px 18px 25px 18px;
background-color: transparent;
}
&__content {
background: #fff9e9;
border-radius: 2px;
color: #000;
}
}
}
</style>
components/Lottery/Instant/type/TypeGashaponMini.vue
......@@ -30,12 +30,7 @@
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
rule-position="bottom"
></IntroductionPopup>
</section>
</template>
......@@ -48,7 +43,6 @@ import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
introductionConfigGashaponMini,
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
......@@ -98,7 +92,6 @@ export default {
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashaponMini,
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片
}
......@@ -242,4 +235,37 @@ export default {
border-radius: 10px 0 0 10px;
}
}
// 样式穿透
.lottery-instant {
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
color: #fff;
}
}
}
</style>
components/Lottery/Instant/type/TypeGashaponMini2.vue
......@@ -29,12 +29,7 @@
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
rule-position="bottom"
></IntroductionPopup>
</section>
</template>
......@@ -47,7 +42,6 @@ import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
introductionConfigGashaponMini2 as introductionConfigGashaponMini,
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon,
......@@ -97,7 +91,6 @@ export default {
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashaponMini,
barStyle: countDownBarWhite,
ballListGashapon // 扭蛋球图片
}
......@@ -224,4 +217,37 @@ export default {
border-radius: 10px 0 0 10px;
}
}
// 样式穿透
.lottery-instant {
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/gashapon2/intro-bg-mini.png');
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
color: #fff;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuess.vue
......@@ -34,15 +34,7 @@
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:title-text="introConfig.titleText"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -54,7 +46,6 @@ import {
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
......@@ -101,7 +92,6 @@ export default {
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuess,
barStyle: countDownBarDeepPurple,
starConfig
}
......@@ -254,4 +244,29 @@ export default {
opacity: 0;
top: 0 !important;
}
// 样式穿透
.lottery-instant {
/deep/ .introduction {
background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
padding: 30px 15px;
border-radius: 0;
&__sec-title {
background-image: none;
font-size: 16px;
font-weight: 700;
text-align: center;
color: #fff;
padding-top: 8px;
}
&__wrap {
background-color: #7f17e3;
padding: 2px;
}
&__content {
background: linear-gradient(180deg, #7b07c5 0%, #450393 100%);
color: #fff;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuess2.vue
......@@ -34,15 +34,7 @@
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:title-text="introConfig.titleText"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -54,7 +46,6 @@ import {
blindBoxListGuess2,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuess2 as introductionConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
......@@ -101,7 +92,6 @@ export default {
blindBoxList: blindBoxListGuess2,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuess,
barStyle: countDownBarDeepPurple,
starConfig
}
......@@ -252,4 +242,33 @@ export default {
.choose-fade-leave-to {
opacity: 0;
}
// 样式穿透
.lottery-instant {
/deep/ .introduction {
background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
padding: 30px 15px;
border-radius: 0;
&__sec-title {
width: 97px;
height: 20px;
left: 50%;
transform: translate(-50%, 12px);
font-size: 0;
font-weight: 700;
text-align: center;
color: #fff;
background-image: url('@/assets/images/lottery/guess2/intro-title.png');
background-size: 100% 100%;
}
&__wrap {
background-color: #7f17e3;
padding: 2px;
}
&__content {
background: linear-gradient(180deg, #7b07c5 0%, #450393 100%);
color: #fff;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuessMini.vue
......@@ -35,15 +35,7 @@
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
></IntroductionPopup>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -51,14 +43,7 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuessMini,
countDownBarDeepPurple,
starConfig
} from './config'
import { blindBoxListGuess, recordsConfigGuess, winConfigGuess, countDownBarDeepPurple, starConfig } from './config'
export default {
components: {
......@@ -106,7 +91,6 @@ export default {
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuessMini,
barStyle: countDownBarDeepPurple,
starConfig
}
......@@ -277,4 +261,37 @@ export default {
opacity: 0;
top: 0 !important;
}
// 样式穿透
.lottery-instant {
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
color: #fff;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuessMini2.vue
......@@ -37,12 +37,7 @@
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
rule-position="bottom"
></IntroductionPopup>
</section>
</template>
......@@ -55,7 +50,6 @@ import {
blindBoxListGuess2 as blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuessMini,
countDownBarDeepPurple,
starConfig
} from './config'
......@@ -106,7 +100,6 @@ export default {
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuessMini,
barStyle: countDownBarDeepPurple,
starConfig
}
......@@ -275,4 +268,37 @@ export default {
.choose-fade-leave-to {
opacity: 0;
}
// 样式穿透
.lottery-instant {
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
color: #fff;
}
}
}
</style>
components/Lottery/Instant/type/TypeScratch.vue
......@@ -48,14 +48,7 @@
</div>
</div>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -67,7 +60,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, countDownBarBlue } from './config'
import { recordsConfigScratch, countDownBarBlue } from './config'
export default {
components: {
......@@ -107,7 +100,6 @@ export default {
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
introConfig: introductionConfigScratch,
barStyle: countDownBarBlue
}
},
......@@ -297,4 +289,25 @@ export default {
}
}
}
// 样式穿透
.lottery-instant {
/deep/ .introduction {
padding: 38px 15px;
&__sec-title {
background-image: url('@/assets/images/lottery/scratch/introduction.png');
width: 38%;
left: 50%;
transform: translateX(-50%);
}
&__wrap {
background-color: #0000001a;
border-radius: 22px;
}
&__content {
background-color: transparent;
color: #000;
}
}
}
</style>
components/Lottery/Instant/type/TypeScratchMini.vue
......@@ -49,15 +49,7 @@
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
></IntroductionPopup>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -69,7 +61,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, countDownBarBlue } from './config'
import { recordsConfigScratch, countDownBarBlue } from './config'
export default {
components: {
......@@ -113,7 +105,6 @@ export default {
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
introConfig: introductionConfigScratchMini2,
barStyle: countDownBarBlue
}
},
......@@ -324,4 +315,37 @@ export default {
border-radius: 10px 0 0 10px;
}
}
// 样式穿透
.lottery-instant {
/deep/ .introduction-popup {
background: linear-gradient(180deg, #60bdff 0%, #aaeefb 100%);
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
color: #000;
}
}
}
</style>
components/Lottery/Instant/type/config.js
......@@ -5,10 +5,6 @@ import gift2 from '@/assets/images/lottery/guess/gift_2.png'
import gift3 from '@/assets/images/lottery/guess/gift_3.png'
import gift4 from '@/assets/images/lottery/guess/gift_4.png'
// 介绍背景图
import introBgMiniPurple from '@/assets/images/lottery/guess/intro-bg-mini.png'
import introBgMiniYellow from '@/assets/images/lottery/gashapon2/intro-bg-mini.png'
/* 猜盲盒2 */
// 游戏礼物样式
import gift1Guess2 from '@/assets/images/lottery/guess2/gift_1.png'
......@@ -16,7 +12,6 @@ import gift2Guess2 from '@/assets/images/lottery/guess2/gift_2.png'
import gift3Guess2 from '@/assets/images/lottery/guess2/gift_3.png'
import gift4Guess2 from '@/assets/images/lottery/guess2/gift_4.png'
import gift5Guess2 from '@/assets/images/lottery/guess2/gift_5.png'
import introTitleBg from '@/assets/images/lottery/guess2/intro-title.png'
/* 扭蛋机 */
import ballGashapon1 from '@/assets/images/lottery/gashapon-ball/red-blue.png'
......@@ -25,13 +20,6 @@ import ballGashapon3 from '@/assets/images/lottery/gashapon-ball/phone.png'
import ballGashapon4 from '@/assets/images/lottery/gashapon-ball/gift.png'
import ballGashapon5 from '@/assets/images/lottery/gashapon-ball/egg-red.png'
/* 扭蛋机2 */
import introTitleGashapon2 from '@/assets/images/lottery/gashapon2/intro-wrap-title.png'
import introWrapBgGashapon2 from '@/assets/images/lottery/gashapon2/intro-wrap-bg.png'
/* 刮刮乐 */
import IntroTitleScratch from '@/assets/images/lottery/scratch/introduction.png'
// 记录样式
import recordsBgPurple from '@/assets/images/lottery/records-new/bg-purple.png'
import personalBgPurple from '@/assets/images/lottery/records-new/personal-purple.png'
......@@ -92,104 +80,6 @@ const winConfigBlue = {
winClose: winCloseBlue,
winPrizeBg: winPrizeBgBlue
}
const introductionConfigMiniPurple = {
introWrapStyle: {
backgroundColor: 'transparent',
padding: '0.03rem'
},
introContentStyle: {
backgroundColor: 'transparent',
color: '#fff',
padding: 0
},
introPopupStyle: {
backgroundImage: `url(${introBgMiniPurple})`
},
contentBoxStyle: {
backgroundColor: '#00000030',
padding: '0.01rem 0.2rem 0.2rem 0.2rem',
borderRadius: '0.3rem'
},
backStyle: {
top: '0.12667rem',
right: 0,
background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
borderRadius: '0.13333rem 0 0 0.13333rem',
padding: '0.08rem 0.04rem',
border: 0
},
rule: {
position: 'bottom',
style: {}
}
}
const introductionConfigMiniYellow = {
introWrapStyle: {
backgroundColor: 'transparent',
padding: '0.03rem'
},
introContentStyle: {
backgroundColor: 'transparent',
color: '#fff',
padding: 0
},
introPopupStyle: {
background: `url(${introBgMiniYellow})`
},
contentBoxStyle: {
backgroundColor: '#00000030',
padding: '0.01rem 0.2rem 0.2rem 0.2rem',
borderRadius: '0.3rem'
},
backStyle: {
top: '0.12667rem',
right: 0,
background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
borderRadius: '0.13333rem 0 0 0.13333rem',
padding: '0.08rem 0.04rem',
border: 0
},
rule: {
position: 'bottom',
style: {}
}
}
const introductionConfigMiniBlue = {
introWrapStyle: {
backgroundColor: 'transparent',
padding: '0.03rem'
},
introContentStyle: {
backgroundColor: 'transparent',
color: '#fff',
padding: 0
},
introPopupStyle: {
background: 'linear-gradient(180deg, #60BDFF 0%, #AAEEFB 100%)'
},
contentBoxStyle: {
backgroundColor: '#00000030',
padding: '0.01rem 0.2rem 0.2rem 0.2rem',
borderRadius: '0.3rem'
},
backStyle: {
top: '0.12667rem',
right: 0,
background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
borderRadius: '0.13333rem 0 0 0.13333rem',
padding: '0.08rem 0.04rem',
border: 0
},
rule: {
position: 'bottom',
style: {
color: '#000'
}
}
}
const countDownBarBlue = {
minWidth: '2.13rem',
padding: '0 0.12rem',
......@@ -209,7 +99,6 @@ const countDownBarNone = {
/* 猜盲盒 */
const recordsConfigGuess = recordsConfigPurple
const winConfigGuess = Object.assign({}, winConfigPurple, { winTitle: winTitleGuess })
const introductionConfigGuessMini = introductionConfigMiniPurple
const starConfig = [
{
width: '0.3rem',
......@@ -252,37 +141,6 @@ const blindBoxListGuess = [
img: gift4
}
]
const introductionConfigGuess = {
// 标题
introTitleStyle: {
backgroundImage: 'none',
fontSize: '0.22rem',
fontWeight: '700',
textAlign: 'center',
color: '#fff',
paddingTop: '0.1rem'
},
titleText: '活动介绍',
// 外框
introWrapStyle: {
backgroundColor: '#7F17E3',
padding: '0.03rem'
},
// 内容
introContentStyle: {
background: 'linear-gradient(180deg, #7B07C5 0%, #450393 100%)',
color: '#fff'
},
introBoxStyle: {
background: 'linear-gradient(180deg, #682CA1 0%, #A649D8 100%)',
padding: '0.4rem 0.2rem',
borderRadius: 0
},
rule: {
position: 'bottom',
style: {}
}
}
// 猜盲盒2
const blindBoxListGuess2 = [
......@@ -302,31 +160,10 @@ const blindBoxListGuess2 = [
img: gift5Guess2
}
]
const introductionConfigGuess2 = Object.assign({}, introductionConfigGuess, {
introTitleStyle: {
backgroundImage: `url(${introTitleBg})`,
backgroundSize: '100% 100%',
width: '1.3rem',
height: '0.27rem',
left: '50%',
transform: 'translate(-50%, 0.16rem)'
},
titleText: '',
introContentStyle: {
background: '#450393',
color: '#fff'
},
introBoxStyle: {
background: 'linear-gradient(180deg, #682CA1 0%, #A649D8 100%)',
padding: '0.4rem 0.2rem',
borderRadius: 0
}
})
/* 扭蛋机 */
const recordsConfigGashapon = recordsConfigPurple
const winConfigGashapon = Object.assign({}, winConfigPurple, { winTitle: winTitleGashapon })
const introductionConfigGashaponMini = introductionConfigMiniPurple
const ballListGashapon = [
{
img: ballGashapon1,
......@@ -367,144 +204,30 @@ const ballListGashapon = [
]
// 扭蛋机1
const introductionConfigGashapon = {
// 标题
introTitleStyle: {
backgroundImage: 'none',
fontSize: '0.22rem',
fontWeight: '700',
textAlign: 'center',
width: '22%',
height: 'auto',
padding: '0.05rem 0',
left: '50%',
color: '#fff',
transform: 'translate(-50%, 50%)',
backgroundColor: '#ffffff63',
borderRadius: '0.03rem'
},
titleText: '活动介绍',
// 外框
introWrapStyle: {
backgroundColor: '#7826A9',
padding: '0.03rem'
},
// 内容
introContentStyle: {
background: '#7826A9',
color: '#fff'
},
// 外框颜色
introBoxStyle: {
backgroundColor: '#7826A9',
padding: '0.10667rem 0.2rem 0.4rem 0.2rem',
borderRadius: 0
},
rule: {
position: 'bottom',
style: {}
}
}
// 扭蛋机2
const introductionConfigGashapon2 = {
// 标题
introTitleStyle: {
backgroundImage: `url(${introTitleGashapon2})`,
width: '95%',
padding: '0.05rem 0',
color: '#fff',
fontSize: '0.25rem',
textAlign: 'center',
lineHeight: '2',
top: '-7%',
left: '50%',
transform: 'translate(-50%, 50%)'
},
titleText: '活动介绍',
// 内框
introWrapStyle: {
backgroundImage: `url(${introWrapBgGashapon2})`,
backgroundSize: '100% 100%',
padding: '0.2rem 0.24rem 0.34rem',
backgroundColor: 'transparent'
},
// 内容
introContentStyle: {
background: '#FFF9E9',
borderRadius: '0.03rem',
color: '#000'
},
// 外框
introBoxStyle: {
backgroundColor: '#FFBD33',
padding: '1rem 0.15rem 0.1rem',
borderRadius: 0
},
rule: {
position: 'bottom',
style: {}
}
}
const recordsConfigGashapon2 = recordsConfigBlue
const winConfigGashapon2 = Object.assign({}, winConfigBlue, { winTitle: winTitleGashapon })
const introductionConfigGashaponMini2 = introductionConfigMiniYellow
// 刮刮乐
const introductionConfigScratch = {
// 介绍组件样式
introTitleStyle: {
backgroundImage: `url(${IntroTitleScratch})`,
width: '38%',
left: '50%',
transform: 'translateX(-50%)'
},
// 介绍组件外框样式
introWrapStyle: {
backgroundColor: '#0000001a',
borderRadius: '0.3rem'
},
// 介绍组件内容样式
introContentStyle: {
backgroundColor: 'transparent',
color: '#000'
},
introBoxStyle: {
padding: '0.5rem 0.2rem'
},
rule: {
position: 'bottom',
style: {}
}
}
const recordsConfigScratch = Object.assign({}, recordsConfigBlue, { textColor: '#093C85' })
const introductionConfigScratchMini2 = introductionConfigMiniBlue
export {
// 猜盲盒
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuess,
introductionConfigGuessMini,
// 猜盲盒2
blindBoxListGuess2,
introductionConfigGuess2,
// 扭蛋机
ballListGashapon,
introductionConfigGashapon,
recordsConfigGashapon,
winConfigGashapon,
introductionConfigGashaponMini,
// 扭蛋机2
introductionConfigGashapon2,
recordsConfigGashapon2,
winConfigGashapon2,
introductionConfigGashaponMini2,
// 刮刮乐
introductionConfigScratch,
recordsConfigScratch,
introductionConfigScratchMini2,
// countDown
countDownBarBlue,
countDownBarPurple,
......
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