<!--
|
* @Descripttion:
|
* @version: 1.0.0
|
* @Author: Bridge
|
* @Date: 2021-08-31 16:04:44
|
-->
|
|
<template>
|
<div class="blind_box">
|
<!-- <div @click="clickShare">右侧按钮测试</div> -->
|
<nav-bar :shadow="false" :autoBack="false" leftIcon="arrow-left" title="活动详情"
|
@clickRight="clickShare" @clickLeft="clickLeft" v-if="getQueryVariable('flag')">
|
<div slot="right" class="right-icon"
|
v-if="promotion.promotionStatus == '00' || promotion.promotionStatus == '02'"></div>
|
</nav-bar>
|
<div class="content"
|
:style="{'background-image': `url(${promotionDetail.backgroundFileUrl ? promotionDetail.backgroundFileUrl : require('@/assets/images/blindBox/blind_box_bg1.png')})`}">
|
<div class="time_item">
|
<div class="time_text" v-if="promotion.promotionStartTime">
|
活动时间：{{promotion.promotionStartTime || "无时间"}}-{{promotion.promotionEndTime || "无时间"}}
|
</div>
|
</div>
|
<div class="item_bg2">
|
<div class="marquee">
|
<div v-if="promotionDetail.broadcast == 1" @click="handleMarquee">
|
<div v-for="(item, index) in marqueeList" :key="index"
|
:class="{ marquee_top: animate }">
|
恭喜
|
<span
|
v-if="/^[1][0-9]{10}$/.test(item.memberName)">{{ item.memberName.replace(/(\d{3})\d*(\d{4})/, "$1****$2") }}</span>
|
<span
|
v-else>{{item.memberName.substring(0, 1) + new Array(item.memberName.length).join('*')}}</span>
|
用户抽中{{ item.prizeName }}
|
</div>
|
</div>
|
</div>
|
<div class="winning-list row-center">
|
<div class="winning-btn" @click="handleMarquee"></div>
|
</div>
|
<div class="animation">
|
<img v-show="stateMy == 3" :src="promotionDetail.blindBoxGifFileUrl" />
|
<img v-show="stateMy != 3" :src="promotionDetail.blindBoxFileUrl" />
|
</div>
|
<div class="luck row-center">
|
<div class="luck-btn" @click="handleClick()"></div>
|
</div>
|
|
<div class="text_bottom"
|
v-if="promotionDetail.partakeType == '2' && jurisdiction == '1' && promotion.promotionStatus !== '06'">
|
您还有{{promotionDetail.lotteryNum }}次抽奖机会</div>
|
<div class="text_bottom"
|
v-if="promotionDetail.partakeType == '1' && jurisdiction == '1' && promotion.promotionStatus !== '06'">
|
当前抽奖次数不限制</div>
|
</div>
|
</div>
|
<div class="page-bottom-style" :style="{'background-color':`${promotionDetail.bgColor}`}"
|
v-if="promotionRuleStyle && promotionRuleStyle != null">
|
<div :style="{'border-radius':`${promotionRuleStyle.ruleRadiusSize}px`,'background-color':`${promotionRuleStyle.ruleBgColor}`}"
|
class="activity-rules-inner">
|
<div class="activity-rules-con"
|
:style="{'border':`1px dashed ${promotionRuleStyle.ruleTextColor}`,'color':`${promotionRuleStyle.ruleTextColor}`,'font-size':`${promotionRuleStyle.ruleTextSize}px`}">
|
<div v-html="promotion.promotionRuledesc" class="desc-style"></div>
|
</div>
|
</div>
|
<div class="page-bottom-tips"
|
:style="{'border-radius':`${promotionRuleStyle.ruleRadiusSize}px`,'background-color':`${promotionRuleStyle.ruleBgColor}`,'color':`${promotionRuleStyle.ruleTextColor}`}">
|
<span>感谢您的热情参与！</span>
|
</div>
|
</div>
|
<!-- 我的奖品 抽奖 -->
|
<van-popup class="popContainer" v-model="popupShow">
|
<div class="popup-model-body" :class="
|
stateMy == 1
|
? prizeResult == 1
|
? 'prize'
|
: 'no_prize'
|
: stateMy == 2 || stateMy == 4
|
? 'my-prize-list'
|
: ''
|
">
|
<div v-if="stateMy == 1">
|
<div v-if="prizeResult == 1">
|
<div class="row-center mt20 mb20">
|
<img class="tipPopup_img" :src="
|
prizeResult == 1
|
? promotionPrize.prizeFileId
|
: prizeResult == 2
|
? promotionDetail.promptFileId
|
: '/static/images/blind-box/regret.png'
|
" />
|
</div>
|
<div class="popup-name row-center font600">{{ prizeResultF }}</div>
|
</div>
|
<div v-else>
|
<div class="popup-name row-center font600">{{ prizeResultF }}</div>
|
</div>
|
</div>
|
<div v-if="stateMy == 2">
|
<div class="top">
|
<div class="popup-name row-center">我的奖品</div>
|
<div class="item item_top row-start">
|
<div class="item_v">中奖时间</div>
|
<div>奖品名称</div>
|
</div>
|
</div>
|
<div class="main">
|
<scroll-view scrollY="true" style="min-height:100px;height:110px;">
|
<div class="item row-start" v-for="(item, index) in myPrizeList" :key="index">
|
<div class="item_v">{{ item.createTime }}</div>
|
<div>{{ item.prizeName }}</div>
|
</div>
|
</scroll-view>
|
</div>
|
<div>
|
<div class="pop-button" @click="clickCenter">查看</div>
|
</div>
|
</div>
|
<div v-if="stateMy == 4" class="marquee-Popup">
|
<div class="top">
|
<div class="popup-name row-center">中奖名单</div>
|
</div>
|
<div class="main">
|
<!-- <scroll-view scrollY="true" :style="'height:160px'"> -->
|
<div class="item row-around" v-for="(item, index) in marqueeList" :key="index">
|
<div class="">
|
恭喜
|
<span
|
v-if="/^[1][0-9]{10}$/.test(item.memberName)">{{ item.memberName.replace(/(\d{3})\d*(\d{4})/, "$1****$2") }}</span>
|
<span
|
v-else>{{item.memberName.substring(0, 1) + new Array(item.memberName.length).join('*')}}</span>
|
</div>
|
<div class="">抽中 {{ item.prizeName }}</div>
|
</div>
|
<!-- </scroll-view> -->
|
</div>
|
<div>
|
<div class="pop-button" @click="marqueeCenter">关闭</div>
|
</div>
|
</div>
|
<div class="btn-row" v-if="stateMy == 1">
|
<div class="pop-button flex1 active-pop-btn" @click="clickCenter">
|
{{
|
stateMy == 1
|
? prizeResult == 1
|
? ""
|
: prizeResult == 2
|
? "再试一次"
|
: "遗憾退场"
|
: stateMy == 2
|
? "查看"
|
: ""
|
}}
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
<!-- 我的奖品 -->
|
<div class="my-prize row-end" @click="myPrize">我的奖品></div>
|
<!-- 分享页弹窗 -->
|
|
<!-- <van-popup v-model="sharePopup" round position="bottom">
|
<new-popup-share
|
:itemData="['wx', 'wxpyq', 'copy']"
|
@select="selectItem"
|
></new-popup-share>
|
</van-popup> -->
|
<!-- 下载app -->
|
<div class="download-btn" @click="goApp()" v-if="!getQueryVariable('flag')">
|
下载APP
|
</div>
|
<guide-open :openStatus.sync="openStatus"></guide-open>
|
</div>
|
</template>
|
|
<script>
|
// import newPopupShare from '@/components/pop-up/new-uni-popup-share.vue'
|
import {
|
getPromotionPrizeInfo,
|
getPromotionInfo,
|
lotteryPromotion,
|
getPrizeRecordList
|
} from '@/api/blindBox/index.js'
|
import { Dialog } from 'vant'
|
import guideOpen from '@/components/pop-up/guideOpen.vue'
|
var baseUrl = process.env.VUE_APP_H5_URL
|
export default {
|
components: {
|
// newPopupShare,
|
[Dialog.Component.name]: Dialog.Component,
|
guideOpen
|
},
|
name: 'ActiiveCuostom',
|
created() {
|
this.init()
|
// 开启轮播文字
|
if (!this.timer) {
|
this.timer = setInterval(this.showMarquee, 3000)
|
}
|
},
|
data() {
|
return {
|
promotionId: '',
|
baseUrl: '',
|
// init详情
|
promotionPrizes: [], // 抽奖列表
|
promotionDetail: {},
|
promotionRuleStyle: {}, // 规则信息
|
promotion: {},
|
jurisdiction: 1, // "登录人是否有权限：1有权限，2无权限")
|
// 抽奖
|
prizeResult: 0,
|
promotionPrize: {},
|
prizeRecord: {},
|
lotteryPromotionBoolean: false, // 抽奖状态
|
|
// 控制动效是否开启
|
animate: false,
|
marqueeList: [], // 新闻滚动列表
|
timer: null,
|
// getValueCouponList:[]//优惠卷列表
|
stateMy: 2, // 弹窗状态
|
popupShow: false, // 弹窗show or hide
|
// sharePopup: false, // 分享弹窗
|
myPrizeList: [], // 我的奖品列表
|
// 下载app
|
openStatus: false
|
}
|
},
|
computed: {
|
prizeResultF() {
|
const map = {
|
1: this.promotionPrize.prizeName || '恭喜中奖',
|
2: this.promotionDetail.prompt || '未中奖',
|
3: '奖品已抽完'
|
}
|
return map[this.prizeResult]
|
}
|
},
|
provide() {
|
// 子组件控制
|
return {
|
sharePopupFun: () => {
|
this.sharePopup = false
|
}
|
}
|
},
|
methods: {
|
// 获取url参数
|
getQueryVariable(variable) {
|
var query = window.location.search.substring(1)
|
var vars = query.split('&')
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split('=')
|
if (pair[0] == variable) {
|
return pair[1]
|
}
|
}
|
return false
|
},
|
async init() {
|
// if(this.stateMy != 1){
|
// uni.showLoading({ title: '加载中',mask: true });
|
// }
|
// for (var i = 0; i < 10; i++) {
|
// this.list.push({src:"/static/images/good.png",name:'商品名称'})
|
// };
|
try {
|
this.promotionId = this.getQueryVariable('promotionId')
|
var params = {
|
promotionId: this.promotionId,
|
bizId: 'B02'
|
}
|
// 判断是否存在token（先登录后退出，H5未清除token），进入页面再判断getToken是否存在
|
if (window.wlyxls) {
|
const _token = window.wlyxls.getToken('') || ''
|
window.localStorage.setItem('access_token', _token)
|
}
|
const res = localStorage.getItem('access_token') ? await getPromotionPrizeInfo({ params }) : await getPromotionInfo({ params })
|
// uni.hideLoading();
|
if (res.code == 0) {
|
this.promotionDetail = res.data.promotionDetail
|
this.promotionRuleStyle = JSON.parse(res.data.promotionDetail.promotionRuleStyle)
|
this.marqueeList = res.data.prizeRecords // 文字播报
|
this.promotionPrizes = res.data.promotionPrizes // 奖品列表
|
this.jurisdiction = res.data.jurisdiction // 有没有活动权限
|
this.promotion = res.data.promotion // 促销活动
|
} else {
|
console.log(res.msg)
|
}
|
} catch (e) {
|
// uni.hideLoading();
|
}
|
},
|
async handleClick() {
|
if (this.$route.query.isPreview) return
|
// 没有登录跳转到登录页面
|
if (!localStorage.getItem('access_token')) {
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://login')
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.halfwayToLogin('盲盒抽奖')
|
}
|
}
|
return
|
} else {
|
// 安卓判断是否存在token（安卓先登录后退出，H5未清除token），进入页面再判断getToken是否存在
|
// IOS 退出的时候调用方法已清空token
|
if (window.wlyxls) {
|
const _token = window.wlyxls.getToken('') || ''
|
window.localStorage.setItem('access_token', _token)
|
}
|
}
|
// 抽奖动画
|
if (!this.lotteryPromotionBoolean) {
|
// 是true的时候弹出
|
this.lotteryPromotionBoolean = true
|
// this.showTextmsg = true; //弹窗
|
// uni.showLoading({ title: '抽奖中',mask: true });
|
try {
|
const params = {
|
promotionId: this.promotionId
|
}
|
const res = await lotteryPromotion(params)
|
// uni.hideLoading();
|
if (res.code == 0) {
|
this.stateMy = 3
|
// this.$refs.tipPopup.open()
|
setTimeout(() => {
|
// this.$refs.tipPopup.close()
|
this.handleluckDraw(res)
|
}, 1500)
|
// this.promotionDetail = res.data.promotionDetail //中奖详情
|
} else {
|
this.init()
|
this.$toast(res.msg)
|
this.lotteryPromotionBoolean = false
|
}
|
} catch (e) {
|
this.lotteryPromotionBoolean = false
|
// uni.hideLoading();
|
}
|
}
|
},
|
handleluckDraw(res) {
|
// 抽奖
|
this.stateMy = 1
|
// this.$refs.tipPopup.open()
|
this.popupShow = true
|
this.prizeResult = res.data.prizeResult // 是否中奖
|
this.promotionPrize = res.data.promotionPrize
|
this.prizeRecord = res.data.prizeRecord
|
this.init()
|
this.lotteryPromotionBoolean = false
|
},
|
// 我的奖品
|
myPrize() {
|
if (this.$route.query.isPreview) return
|
// 没有登录跳转到登录页面
|
if (!localStorage.getItem('access_token')) {
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://login')
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.halfwayToLogin('盲盒抽奖')
|
}
|
}
|
} else {
|
this.stateMy = 2
|
this.getMyPrize()
|
this.popupShow = true
|
}
|
},
|
async getMyPrize() {
|
const params = {
|
thePrize: 1, // 是否中奖：1中奖，2未中奖
|
promotionId: this.promotionId
|
}
|
try {
|
const res = await getPrizeRecordList(params)
|
if (res.code == 0) {
|
this.myPrizeList = res.data
|
} else {
|
console.log(res.msg)
|
}
|
} catch (error) { }
|
},
|
clickCenter() {
|
// 领取
|
if (this.stateMy == '2') {
|
// 我的奖品
|
// this.$nRouter.push({
|
// url: '/pages/my/myGift/myGift?index=0'
|
// })
|
// 跳转到我的礼品页面;
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://my_gift')
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toMyGiftPage('')
|
}
|
}
|
return
|
}
|
if (
|
(this.prizeResult == 1 && this.promotionPrize.prizeType == 1) ||
|
this.promotionPrize.prizeType == 2
|
) {
|
// 跳转到我的礼品页面;
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://my_gift')
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toMyGiftPage('')
|
}
|
}
|
// this.$nRouter.push({
|
// url: '/pages/my/myGift/myGift?index=1'
|
// })
|
return
|
}
|
if (this.prizeResult == 2) {
|
// 再来一次
|
this.handleClick()
|
}
|
if (this.promotionPrize.prizeType == 4) {
|
// 兑换码
|
// this.$refs.tipPopup.close()
|
this.popupShow = false
|
Dialog.alert({
|
title: '非常抱歉',
|
message: '当前暂不支持线上兑换，请联系客服',
|
confirmButtonText: '知道了'
|
}).then(() => {
|
// on close
|
})
|
return
|
}
|
if (this.prizeResult == 1 && this.promotionPrize.prizeType == 3) {
|
// 赠品
|
const params = {
|
recordId: this.prizeRecord.id, // 记录id
|
shopSkuId: this.promotionPrize.commonId,
|
skuInfo: [JSON.parse(this.promotionPrize.expInfo)],
|
prizeId: this.promotionPrize.prizeId, // 奖品Id
|
promotionId: this.promotionPrize.promotionId, // 活动Id
|
whetherShopping: false, // 跳转android原生的参数（来源是否是购物车）
|
imgUrl: this.promotionPrize.prizeFileId,
|
spuNmae: this.promotionPrize.prizeName,
|
effectiveStartTime: this.promotionPrize.effectiveStartTime, // 礼品有效开始时间
|
effectiveEndTime: this.promotionPrize.effectiveEndTime, // 礼品有效结束时间
|
buyNum: 1
|
}
|
// 跳转到下单页面
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://submit_order?value=${JSON.stringify(params)}`
|
)
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toConfirmOrderPage(JSON.stringify(params))
|
}
|
}
|
} else {
|
// this.$refs.tipPopup.close()
|
this.popupShow = false
|
}
|
},
|
// 轮播文字
|
showMarquee() {
|
this.animate = true
|
setTimeout(() => {
|
this.marqueeList.push(this.marqueeList[0])
|
this.marqueeList.shift()
|
this.animate = false
|
}, 300)
|
},
|
// 返回
|
// goBack () {
|
// uni.switchTab({
|
// url: '/pages/index/index'
|
// })
|
// },
|
clickLeft() {
|
if (window.wlyxls) {
|
// navigateBack 返回 navigateClose关闭
|
window.wlyxls.navigateBack('')
|
} else if (window.webkit) {
|
window.webkit.messageHandlers.iosBrowserPop.postMessage('')
|
} else {
|
this.$router.go(-1)
|
}
|
},
|
// 打开分享弹窗
|
clickShare() {
|
// this.sharePopup = true
|
const params = {
|
title: `${this.promotion.promotionName}`,
|
description: '五味相谐，人生对味！五粮液新零售APP邀您共品佳酿！',
|
imgurl: `${baseUrl}/frame.png`,
|
url: `${baseUrl}/blindBoxNew?promotionId=${this.promotionId}`
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosShare.postMessage(JSON.stringify(params))
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.openShareWindow(JSON.stringify(params))
|
}
|
}
|
},
|
// 选中某一个分享项
|
// selectItem (data, index) {
|
// const _name = data.item.name
|
// console.log(data, 'data')
|
// switch (_name) {
|
// case 'wx': // 分享到微信
|
// uni.share({
|
// provider: 'weixin',
|
// scene: 'WXSceneSession',
|
// type: 0,
|
// href: 'https://h5uat.wlyxls.com/blindBox',
|
// title: `${this.promotion.promotionName}`,
|
// summary: '五味相谐，人生对味！五粮液新零售APP邀您共品佳酿！',
|
// imageUrl: '/static/images/frame.png',
|
// success: function (res) {
|
// // console.log("success:" + JSON.stringify(res));
|
// },
|
// fail: function (err) {
|
// // console.log("fail:" + JSON.stringify(err));
|
// }
|
// })
|
// break
|
// case 'wxpyq': // 分享到微信朋友圈
|
// uni.share({
|
// provider: 'weixin',
|
// scene: 'WXSenceTimeline',
|
// type: 0,
|
// href: 'https://h5uat.wlyxls.com/blindBox',
|
// title: `${this.promotion.promotionName}`,
|
// summary: '五味相谐，人生对味！五粮液新零售APP邀您共品佳酿！',
|
// imageUrl: '/static/images/frame.png',
|
// success: function (res) {
|
// // console.log("success:" + JSON.stringify(res));
|
// },
|
// fail: function (err) {
|
// // console.log("fail:" + JSON.stringify(err));
|
// }
|
// })
|
// break
|
// case 'copy': // 复制链接
|
// uni.setClipboardData({
|
// data: 'https://h5uat.wlyxls.com/blindBox',
|
// success: function () {
|
// uni.showToast({
|
// title: '链接复制成功',
|
// icon: 'none',
|
// duration: 500
|
// })
|
// }
|
// })
|
// break
|
// default:
|
// }
|
// },
|
// 查看中奖信息
|
handleMarquee() {
|
if (this.$route.query.isPreview) return
|
// 没有登录跳转到登录页面
|
if (!localStorage.getItem('access_token')) {
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://login')
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.halfwayToLogin('盲盒抽奖')
|
}
|
}
|
} else {
|
this.stateMy = 4
|
// this.$refs.tipPopup.open()
|
this.popupShow = true
|
}
|
},
|
// 关闭中奖名单
|
marqueeCenter() {
|
// this.$refs.tipPopup.close()
|
this.popupShow = false
|
},
|
// 下载app
|
goApp() {
|
let url
|
var isWeixin = this.is_weixin()
|
// 判断是否在微信内置浏览器打开
|
if (isWeixin) {
|
this.openStatus = true
|
} else {
|
if (this.$root.isIos) {
|
url = this.$store.getters.iosUrl
|
} else {
|
url = this.$store.getters.androidUrl
|
}
|
location.href = url
|
}
|
},
|
is_weixin() {
|
var ua = window.navigator.userAgent.toLowerCase()
|
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
return true
|
} else {
|
return false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.blind_box {
|
padding-top: 88px;
|
.content {
|
height: 1598px;
|
overflow: hidden;
|
background-size: 100% 100%;
|
}
|
.time_item {
|
margin-top: 860px;
|
width: 100%;
|
text-align: center;
|
font-size: 24px;
|
color: #994d00;
|
.time_text {
|
transform: scale(0.92);
|
transform-origin: 50% 50% 0;
|
}
|
}
|
.item_bg2 {
|
margin-top: 60px;
|
height: 768px;
|
position: relative;
|
.marquee {
|
height: 36px;
|
line-height: 36px;
|
overflow: hidden;
|
color: #994d00;
|
font-size: 24px;
|
text-align: center;
|
font-weight: bold;
|
.marquee_top {
|
transition: all 0.5s;
|
}
|
}
|
.winning-list {
|
margin-top: 25px;
|
.winning-btn {
|
width: 230px;
|
height: 37px;
|
background-image: url("../../assets/images/blindBox/img/see_btn.png");
|
background-size: cover;
|
}
|
}
|
.luck {
|
.luck-btn {
|
width: 349px;
|
height: 57px;
|
background-image: url("../../assets/images/blindBox/img/play_btn.png");
|
background-size: cover;
|
}
|
}
|
.animation {
|
margin: 55px 0;
|
width: 100%;
|
height: 171px;
|
img {
|
width: 100%;
|
height: 171px;
|
margin-left: -12px;
|
}
|
}
|
.text_bottom {
|
padding-top: 20px;
|
text-align: center;
|
font-size: 24px;
|
font-weight: bold;
|
color: #994d00;
|
}
|
}
|
|
/deep/.pop-button {
|
height: 80px;
|
line-height: 80px;
|
text-align: center;
|
}
|
.tipPopup_img {
|
width: 194px;
|
height: 221px;
|
}
|
/deep/ ::-webkit-scrollbar {
|
display: none;
|
}
|
.my-prize {
|
position: fixed;
|
top: 300px;
|
right: 0;
|
height: 48px;
|
line-height: 48px;
|
width: 128px;
|
background: #f4be55;
|
color: #891d22;
|
font-size: 24px;
|
border-top-left-radius: 24px;
|
border-bottom-left-radius: 24px;
|
z-index: 11;
|
}
|
/deep/.van-popup {
|
border-radius: 20px;
|
background: none;
|
}
|
.popup-model-body {
|
width: 674px;
|
height: 814px;
|
position: relative;
|
&.prize {
|
background-image: url(../../assets/images/blindBox/img/win_prize.png);
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
.tipPopup_img {
|
padding-top: 300px;
|
}
|
}
|
&.no_prize {
|
background-image: url(../../assets/images/blindBox/img/no_win_prize.png);
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
.popup-name {
|
padding: 200px 0 330px;
|
}
|
}
|
&.my-prize-list {
|
background: #ffffff;
|
width: 540px;
|
height: 533px;
|
position: relative;
|
.popup-name {
|
color: #333333;
|
font-size: 32px;
|
height: 84px;
|
line-height: 84px;
|
border-bottom: 1px solid #f2f2f2;
|
}
|
.item_top {
|
font-size: 30px;
|
height: 42px;
|
color: #333333;
|
padding: 30px 40px;
|
}
|
.main {
|
width: 100%;
|
position: absolute;
|
top: 187px;
|
left: 40px;
|
height: 218px;
|
overflow-y: scroll;
|
-webkit-overflow-scrolling: touch;
|
.item {
|
padding-bottom: 30px;
|
}
|
}
|
.pop-button {
|
position: absolute;
|
left: 130px;
|
bottom: 30px;
|
width: 280px;
|
height: 68px;
|
line-height: 68px;
|
background: #eb0f17;
|
border-radius: 34px;
|
color: #fff;
|
}
|
}
|
.btn-row {
|
position: absolute;
|
width: 100%;
|
height: 107px;
|
left: 0;
|
bottom: 59px;
|
// margin-top: 80px;
|
}
|
.active-pop-btn {
|
border-radius: 0 0 20px 0;
|
// background: $default-button;
|
color: #ff0100;
|
}
|
|
.item {
|
width: 100%;
|
color: #666666;
|
font-size: 26px;
|
.item_v {
|
width: 50%;
|
padding-right: 50px;
|
}
|
}
|
.marquee-Popup {
|
.main {
|
top: 100px;
|
left: 0;
|
height: 320px;
|
}
|
}
|
}
|
}
|
.right-icon {
|
background: url("../../assets/images/fx.png") no-repeat;
|
background-size: 36px 36px;
|
width: 36px;
|
height: 36px;
|
}
|
.row-center {
|
display: flex;
|
justify-content: center;
|
}
|
.row-start {
|
display: flex;
|
justify-content: flex-start;
|
}
|
.row-end {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.row-around {
|
display: flex;
|
justify-content: space-around;
|
}
|
.txt-center {
|
text-align: center;
|
}
|
|
.download-btn {
|
position: fixed;
|
top: 35px;
|
right: 0;
|
z-index: 101;
|
background: #e49e14;
|
color: #fff;
|
padding: 12px 28px;
|
font-size: 26px;
|
border-top-left-radius: 28px;
|
border-bottom-left-radius: 28px;
|
}
|
.page-bottom-style {
|
padding: 0 20px 100px;
|
position: relative;
|
top: -1px;
|
.page-bottom-tips {
|
height: 84px;
|
line-height: 84px;
|
margin-top: 40px;
|
text-align: center;
|
font-size: 32px;
|
letter-spacing: 2px;
|
font-family: arial, "宋体";
|
}
|
.activity-rules-inner {
|
padding: 80px 40px;
|
.activity-rules-con {
|
padding: 40px 20px 60px;
|
line-height: 50px;
|
font-family: "Times New Roman", Times, serif;
|
}
|
}
|
.desc-style {
|
word-wrap: break-word;
|
white-space: pre-wrap;
|
}
|
}
|
</style>
|
