12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025 |
- <template>
- <view>
- <view class="box">
- <view class="index" :style="{ top: statusHeight + 'px' }">
- <view class="barrage">
- <!-- 背景 -->
- <image class="barrage-bg" src="../../static/index/barrage_bg.png" mode=""></image>
- <!-- 中奖信息轮播 -->
- <swiper class="barrage-swiper" :interval="2000" :autoplay="true" :vertical="true" :circular="true">
- <swiper-item v-for="(item, index) in prizeNewsListOne" :key="index">
- <view class="barrage-swiper-item flex">
- <view class="barrage-swiper-item-content flex">
- <image :src="item.avatar" mode="" />
- <view class="title ells-one">{{ item.nickName }} {{ item.type == 1 ? '刮出了' : '兑换了' }} {{ item.prizeInfo }}</view>
- </view>
- </view>
- </swiper-item>
- </swiper>
- <view class="barrage-none"></view>
- </view>
-
- <!-- 查看规则 -->
- <view class="rule">
- <view class="rule-content flex" @click="toRule">
- <image src="../../static/index/index_tip.png" mode=""></image>
- <text>查看规则</text>
- </view>
- </view>
-
- <!-- 盲票轮播 -->
- <view class="ticket">
- <swiper class="ticket-swiper" :current="ticketIndex" :autoplay="false" :circular="true" :duration="200" @change="changeTicket">
- <swiper-item v-for="(item, index) in ticketList" :key="index" @click="toTicketBox(item)">
- <view class="ticket-swiper-item flex">
- <image class="ticket-swiper-item-box" :src="item.picUrl[2]" mode="scaleToFill"></image>
- <image class="ticket-swiper-item-prize" :src="item.picUrl[1]" mode="scaleToFill"></image>
- </view>
- </swiper-item>
- </swiper>
- </view>
-
- <!-- 投诉建议 -->
- <view class="proposal flex">
- <view class="proposal-time flex" v-if="activityTime && activityTime > 0" @click="toActivity">
- <image src="../../static/index/index_time_top.png" mode="scaleToFill"></image>
- <view class="time">
- <u-count-down :time="activityTime" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down>
- </view>
- </view>
- <view v-else></view>
- <view class="proposal-progress">
- <u-line-progress :percentage="percentage" height="3" :showText="false" inactiveColor="rgba(255, 255, 255, .36)" activeColor="#fff" />
- </view>
- <view class="proposal-tip" @click="contactService">
- <image src="../../static/index/index_tip_bg.png" mode=""></image>
- <text>投诉建议</text>
- </view>
- </view>
-
- <!-- 中奖概率 -->
- <view class="chance flex">
- <view class="chance-title">中奖概率:</view>
- <view class="chance-hitRate flex">
- <view class="chance-hitRate-content flex" v-for="(item, index) in ticketInfo.ticketAwardsLabelList" :key="index">
- <image :src="item.picUrl" mode="scaleToFill"></image>
- <text>{{ item.hitRate }}%</text>
- </view>
- </view>
- </view>
-
- <!-- 盲票名称轮播 -->
- <view class="ticket-title" flex>
- <swiper class="ticket-title-swiper flex" :duration="0" :current="ticketTitleIndex" previous-margin="110px" next-margin="110px" :autoplay="false" :circular="true" @change="changeTicketTitle">
- <swiper-item v-for="(item, index) in ticketList" :key="index" @click="clickTicketTitle(index)">
- <view class="ticket-title-swiper-item flex" :class="{ 'action': ticketTitleIndex == index }">
- <text>{{ item.title }}</text>
- </view>
- </swiper-item>
- </swiper>
- </view>
-
- <!-- 刮开盲票 -->
- <view class="ticket-btn flex">
- <view class="ticket-btn-left flex" @click="toRollingGame">
- <image src="../../static/index/index_btn_left.png" mode="scaleToFill"></image>
- <view class="ticket-btn-left__title">试玩</view>
- </view>
- <view class="ticket-btn-center flex" @click="payment">
- <view class="image-wrap flex">
- <image class="btn" src="../../static/index/index_btn.png" mode="scaleToFill"></image>
- <image class="shadow" src="../../static/index/index_btn_shadow.png" mode="scaleToFill"></image>
- </view>
- <view class="ticket-btn-center-wrap flex">
- <view class="ticket-btn-center-wrap__title">刮开<br />盲票</view>
- </view>
- </view>
- <view class="ticket-btn-right flex" @click="toTicket">
- <image src="../../static/index/index_btn_right.png" mode="scaleToFill"></image>
- <view class="ticket-btn-right__title">更多盲票</view>
- </view>
- </view>
-
- <!-- 盲票价格 -->
- <view class="ticket-price flex">
- <!-- <view class="ticket-price-checkbox flex">
- <image src="../../static/index/index_price_checkout.png" mode="scaleToFill"></image>
- </view> -->
- <view class="ticket-price-amt flex">
- <view class="num">{{ $numberFormat(ticketInfo.salePrice) }}</view>
- <view class="txt">元</view>
- </view>
- <view class="ticket-price-discount flex" v-if="ticketInfo.originPrice != 0">
- <view class="num">原价¥{{ $numberFormat(ticketInfo.originPrice) }}</view>
- </view>
- </view>
- </view>
-
- </view>
- <!-- tabbar组件 -->
- <custom-tab-bar :activeValue="'index'" />
- <!-- 支付弹框组件 -->
- <pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" v-if="payShow" />
- </view>
- </template>
- <script>
- import env from '../../config/env.js'
- import $http from '@/utils/request.js'
- import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
- import PayPopup from '../../components/pay-popup/pay-popup.vue'
- export default {
- components: {
- CustomTabBar,
- PayPopup,
- },
- data() {
- return {
- loginState: false, // 登录状态
- ticketList: [], // 盲票列表
- prizeList: [], // 奖品列表
- prizeNewsListOne: [], // 弹幕列表
- prizeNewsListTwo: [], // 弹幕列表
- payShow: false, // 支付弹框显示
- payInfo: {}, // 支付详情
- currentIndex: 0, // 盲票选中下标
- statusHeight: 20,
- ticketIndex: 0, // 盲票选中下标
- ticketTitleIndex: 0, // 盲票标题选中下边
- list: [1,2,3,4,5],
- percentage: 0,
- checkStatus: true,
- filterActivityList: [],
- activityTime: null,
- ticketInfo: {},
- clickLoading: true
- };
- },
- onLoad(opthios) {
-
- /**
- * 票赢天下小程序分享盲票跳转接受的参数
- * shareUid: 用户ID
- * shareType: 分享类型
- * */
- if (opthios.scene) {
- let sceneStr = decodeURIComponent(opthios.scene)
- this.sceneArr = sceneStr.split('&')
- uni.setStorageSync('shareUid', this.sceneArr[0])
- uni.setStorageSync('shareType', this.sceneArr[1])
- }
-
- // #ifdef MP-WEIXIN
- const res = uni.getMenuButtonBoundingClientRect()
- this.statusHeight = res.top //胶囊距离顶部
- // #endif
-
- let num = Math.round(100 / this.list.length)
- this.percentage = num
- this.getList()
- },
- onShow(opthios) {
- this.loginState = uni.getStorageSync('token') ? true : false
- this.getPrizeNews()
- this.getActivityList()
- },
- methods: {
- // 切换盲票
- changeTicket({ detail }) {
- if(this.clickLoading) {
- this.clickLoading = false
- this.ticketIndex = detail.current
- this.ticketTitleIndex = detail.current
- this.getTicketDetail(this.ticketList[detail.current].boxId)
- this.setNum(detail.current)
- setTimeout(()=> {
- this.clickLoading = true
- }, 200)
- }
- },
-
- // 切换盲票名称
- changeTicketTitle({ detail }) {
- if(this.clickLoading) {
- this.clickLoading = false
- this.ticketIndex = detail.current
- this.ticketTitleIndex = detail.current
- this.getTicketDetail(this.ticketList[detail.current].boxId)
- this.setNum(detail.current)
- setTimeout(()=> {
- this.clickLoading = true
- }, 200)
- }
- },
-
- // 点击名称
- clickTicketTitle(index) {
- this.ticketIndex = index
- this.ticketTitleIndex = index
- this.getTicketDetail(this.ticketList[index].boxId)
- this.setNum(index)
- },
-
- setNum(index) {
- let num = Math.round(100 / this.list.length)
- if (index == 0) {
- this.percentage = uni.$u.range(0, 100, num)
- } else if (index == this.list.length - 1) {
- this.percentage = uni.$u.range(0, 100, 100)
- } else {
- this.percentage = uni.$u.range(0, 100, num * (index + 1))
- }
- },
-
- // 投诉建议
- contactService() {
- // #ifdef MP-WEIXIN
- wx.openCustomerServiceChat({
- extInfo: {
- url: 'https://work.weixin.qq.com/kfid/kfc36c0d90028adbd24'
- },
- corpId: 'ww02da63d80c66284b',
- })
- // #endif
- },
-
- // 活动
- getActivityList() {
- $http.post(`/api/v1/mp/user/marketing/recent`, {}).then(res => {
- if(res && res.data) {
- let data = res && res.data
- let timestamp = parseInt(new Date().getTime())
- this.activityTime = data.endTime - timestamp
- }
- })
- },
-
- // 获取盲票列表
- getList() {
- uni.showLoading({
- title: '加载中'
- });
- let data = {
- categoryId: '',
- tagId: '',
- type: 'online',
- noToken: true
- }
- $http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
- res => {
- uni.hideLoading();
- if (res.code == 0) {
- res.rows.forEach(item => item.picUrl = item.picUrl.split(',').map(item => env.filePublic + item + '?imageView2/2/w/750'))
- this.ticketList = res.rows
- this.getTicketDetail(this.ticketList[0].boxId)
- }
- }).catch(() => {
- uni.hideLoading();
- })
- },
- // 获取弹幕列表
- getPrizeNews() {
- $http.post('/api/v1/mp/user/ticket/hitPrizeBarrage', {}).then(res => {
- const {
- listOne,
- listTwo
- } = res && res.data
- listOne.forEach(item => {
- item.avatar = item.avatar ? env.filePublic + item.avatar : env.filePublic +
- '70/EJ305PQR2IBE45O9AFAI'
- item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo
- .substring(0, 15) + '...' : item.prizeInfo
- })
- listTwo.forEach(item => {
- item.avatar = item.avatar ? env.filePublic + item.avatar : env.filePublic +
- '70/EJ305PQR2IBE45O9AFAI'
- item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo
- .substring(0, 15) + '...' : item.prizeInfo
- })
- this.prizeNewsListOne = listOne
- this.prizeNewsListTwo = listTwo
- })
- },
- // 获取当前盲票的详情
- getTicketDetail(id) {
- this.prizeList = []
- $http.post('/api/v1/mp/user/mall/ticket/detail', {
- boxId: id,
- noToken: true
- }).then(res => {
- uni.hideLoading();
- if (res.code == 0) {
- this.ticketInfo = {
- ...res.data,
- ticketAwardsLabelList: res.data.ticketAwardsLabelList.map(item => {
- return { ...item, picUrl: env.filePublic + item.picUrl }
- })
- }
- this.payInfo = this.ticketList[this.ticketIndex]
- }
- }).catch(() => {
- uni.hideLoading();
- })
- },
- // 立即开刮
- payment() {
- this.payInfo = this.ticketList[this.ticketIndex]
- let data = {
- userCouponIds: [],
- autoCoupon: 1,
- boxId: this.payInfo.boxId,
- orderNum: 1
- }
- $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
- if (res.code == 0) {
- let info = {
- ...res.data,
- ...this.payInfo,
- picUrl: this.payInfo.picUrl[0],
- couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
- .data.couponList[0].title,
- couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
- .couponList[0].id
- }
- this.payInfo = info
- this.payShow = true
- }
- }).catch(() => {
- uni.$u.toast('开刮失败,请重试!');
- })
- },
- // 关闭支付弹框
- close() {
- this.payShow = false
- },
- changeList() {
- let data = {
- categoryId: '',
- tagId: '',
- type: 'online',
- noToken: true
- }
- $http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
- res => {
- const boxIdStr = this.ticketList.map(item => item.boxId).join()
- let boxIdStrNew = res && res.rows && res.rows.map(item => item.boxId).join()
- if (boxIdStr != boxIdStrNew) {
- this.currentIndex = 0
- this.getList()
- }
- })
- },
- // 盲票向左箭头
- ticketLeft() {
- if ((this.currentIndex >= 0) && (this.currentIndex < (this.ticketList.length - 1))) {
- this.currentIndex++
- } else if (this.currentIndex == (this.ticketList.length - 1)) {
- this.currentIndex = 0
- }
- this.changeList()
- },
- // 盲票向右箭头
- ticketRight() {
- if (this.currentIndex > 0) {
- this.currentIndex--
- } else if (this.currentIndex == 0) {
- this.currentIndex = this.ticketList.length - 1
- }
- this.changeList()
- },
-
- toRollingGame() {
- if (!uni.getStorageSync('token')) {
- uni.navigateTo({
- url: '/pages/login/index'
- })
- return
- }
- uni.navigateTo({
- url: `/packagePrize/rolling/index?boxId=${ this.ticketInfo.boxId }&isTry=1`
- })
- },
- // 线上立即刮票成功,跳转到刮奖过程
- toProcess(id) {
- this.payShow = false
- uni.navigateTo({
- url: `/packagePrize/rolling/index?boxId=${ this.ticketInfo.boxId }&orderId=${ id }&isTry=0`
- })
- },
- // 点击盲票,跳转盲票详情
- toTicketBox(item) {
- uni.navigateTo({
- url: `/pages/ticketBox/detail?boxId=${ item.boxId }`
- })
- },
- // 点击奖品,跳转到奖品详情
- toPrizeGoods(item) {
- if (item.prizeType == "goods") {
- uni.navigateTo({
- url: `/packagePrize/goods/detail?id=${ item.refId }`
- })
- }
- //门店优惠券
- if (item.prizeType == "coupon") {
- // if (item.couponType == "1") {
- // uni.navigateTo({
- // url: `/packagePrize/goods/detail?id=426`
- // })
- // }
- // if (item.couponType == "2") {
- // uni.navigateTo({
- // url: `/packagePrize/goods/detail?id=425`
- // })
- // }
- uni.navigateTo({
- url: `/packagePrize/goods/detail?id=425`
- })
- }
- // 盲豆
- if (item.prizeType == "coin") {
- uni.navigateTo({
- url: `/packagePrize/goods/detail?id=424`
- })
- }
- },
-
- toActivity() {
- uni.switchTab({
- url: '/pages/activity/index'
- })
- },
- // 点击所有盲票
- toTicket() {
- uni.navigateTo({
- url: '/packageGoods/ticket/index'
- })
- },
- // 点击仓库
- toPrize() {
- if (!this.loginState) {
- uni.navigateTo({
- url: "/pages/login/index"
- })
- return
- }
- uni.navigateTo({
- url: '/packagePrize/prize/index'
- })
- },
- // 点击规则说明
- toRule() {
- uni.navigateTo({
- url: '/packageOther/rule/index'
- })
- }
- },
- onShareAppMessage(res) {
- return {
- title: '盲票,玩的就是有趣',
- path: '/pages/index/index'
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .status_bar {
- width: 100%;
- height: var(--status-bar-height);
- }
- /deep/ .u-tabbar__placeholder {
- display: none;
- }
- </style>
- <style lang="scss" scoped>
- .box {
- position: relative;
- width: 100%;
- height: calc(100vh - 50px);
- background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/front_bk.png) center center no-repeat;
- background-size: 100vw calc(100vh - 50px);
-
- .index {
- position: absolute;
- width: 100%;
- }
- }
- // 中奖信息
- .barrage {
- position: relative;
- width: 518rpx;
- height: 70rpx;
-
- border-radius: 42rpx;
- margin-bottom: 16rpx;
- margin-left: 34rpx;
-
- &-bg {
- position: absolute;
- width: 518rpx;
- height: 70rpx;
- }
-
- &-swiper {
- position: absolute;
- z-index: 10;
- width: 100%;
- height: 100%;
- border-radius: 42rpx;
- overflow: hidden;
-
- &-item {
- width: 100%;
- height: 100%;
-
- &-content {
- display: flex;
- align-items: center;
- width: 510rpx;
- height: 70rpx;
-
- image {
- width: 58rpx;
- height: 58rpx;
- border-radius: 50%;
- margin-right: 14rpx;
- border: 1px solid #fff;
- margin-left: 8rpx;
- }
-
- .title {
- flex: 1;
- font-size: 26rpx;
- font-weight: 500;
- color: #fff;
- }
- }
- }
- }
-
- &-none {
- position: absolute;
- width: 518rpx;
- height: 70rpx;
- z-index: 20;
- }
- }
-
- // 查看规则
- .rule {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- height: 34rpx;
- padding-right: 34rpx;
- margin-bottom: 24rpx;
-
- &-content {
- image {
- width: 34rpx;
- height: 34rpx;
- margin-right: 14rpx;
- }
-
- text {
- font-size: 40rpx;
- font-family: 'YouSheBiaoTiHei';
- font-weight: 400;
- color: #FFFFFF;
- }
- }
- }
-
- // 盲票
- .ticket {
- height: 36vh;
-
- &-swiper {
- height: 100%;
-
- &-item {
- position: relative;
- height: 100%;
-
- &-box {
- position: absolute;
- bottom: 0;
- width: 75vw;
- height: 75%;
- }
-
- &-prize {
- position: absolute;
- top: 0;
- width: 85vw;
- height: 75%;
- animation: movePrize 2s linear infinite;
- }
- }
- }
- }
-
- // 投诉建议
- .proposal {
- position: relative;
- height: 66rpx;
- margin-bottom: 30rpx;
-
- &-time {
- position: absolute;
- left: 30rpx;
- bottom: 0;
- flex-direction: column;
- align-items: flex-start;
-
- image {
- width: 140rpx;
- height: 78rpx;
- margin-bottom: 12rpx;
- animation: scaleTime 3s linear infinite;
- }
-
- .time {
- animation: moveTime 0.5s linear infinite;
-
- /deep/ .u-count-down__text {
- line-height: 30rpx;
- font-size: 30rpx;
- font-family: YouSheBiaoTiHei;
- font-weight: 400;
- color: #FFFFFF;
- }
- }
- }
-
- &-progress {
- position: absolute;
- bottom: 0;
- width: 140rpx;
- }
-
- &-tip {
- display: flex;
- align-items: center;
- position: absolute;
- right: 0;
- bottom: 0;
- width: 212rpx;
- height: 66rpx;
-
- image {
- position: absolute;
- right: 0;
- bottom: 0;
- width: 212rpx;
- height: 66rpx;
- }
-
- text {
- position: absolute;
- right: 16rpx;
- font-size: 40rpx;
- font-family: YouSheBiaoTiHei;
- font-weight: 400;
- color: #FFFFFF;
- }
- }
- }
-
- // 中奖概率
- .chance {
- justify-content: flex-start;
- height: 44rpx;
- margin: 0 34rpx 26rpx;
- background-color: rgba(000, 000, 000, .36);
- border-radius: 22rpx;
- color: #FFFFFF;
- font-family: YouSheBiaoTiHei;
- font-size: 14px;
-
- &-title {
- margin-left: 8rpx;
- }
-
- &-hitRate {
- flex: 1;
- justify-content: space-evenly;
-
- &-content {
-
- image {
- width: 56rpx;
- height: 50rpx;
- }
- }
- }
- }
-
- // 盲票名称轮播
- .ticket-title {
- height: 66rpx;
- padding: 0 34rpx;
-
- &-swiper {
- width: calc(100vw - 34px);
- height: 100%;
-
- &-item {
- height: 100%;
- background: rgba(255, 255, 255, .16);
- margin: 0 17rpx;
- color: #fff;
- font-size: 34rpx;
- }
-
- .action {
- background: #FFAE00;
- box-shadow: 0px 3px 3px 0px rgba(220, 145, 107, 0.57);
- }
- }
- }
-
- // 刮开盲票
- .ticket-btn {
- justify-content: space-between;
- height: 20vh;
- padding: 0 30rpx;
-
- &-left {
- flex-direction: column;
-
- image {
- width: 142rpx;
- height: 142rpx;
- margin-bottom: 16rpx;
- }
-
- &__title {
- line-height: 30rpx;
- font-size: 30rpx;
- font-family: YouSheBiaoTiHei;
- font-weight: 400;
- color: #FFFFFF;
- }
- }
-
- &-center {
- position: relative;
- flex-direction: column;
- height: 100%;
-
- .image-wrap {
- position: absolute;
- width: 310rpx;
- height: 90%;
- border-radius: 50%;
- overflow: hidden;
- box-shadow: 2px 2px 10px rgba(255, 189, 24, .8), -2px -2px 10px rgba(255, 189, 24, .8), 2px -2px 10px rgba(255, 189, 24, .8), -2px 2px 10px rgba(255, 189, 24, .8);
-
- .btn {
- width: 310rpx;
- height: 100%;
- }
-
- .shadow {
- position: absolute;
- width: 310rpx;
- height: 130%;
- left: 0;
- animation: shadowMove 1.5s linear infinite;
- }
- }
-
- &-wrap {
- width: 300rpx;
- position: absolute;
- animation: scaleBtn 1.5s linear infinite;
-
- &__title {
- width: 300rpx;
- text-align: center;
- font-size: 84rpx;
- font-family: YouSheBiaoTiHei;
- font-weight: 400;
- color: #FFFFFF;
- line-height: 72rpx;
- animation: shadowBtn 1.5s linear infinite;
- }
- }
- }
-
- &-right {
- flex-direction: column;
-
- image {
- width: 142rpx;
- height: 142rpx;
- margin-bottom: 16rpx;
- }
-
- &__title {
- line-height: 30rpx;
- font-size: 30rpx;
- font-family: YouSheBiaoTiHei;
- font-weight: 400;
- color: #FFFFFF;
- }
- }
- }
-
- // 盲票价格
- .ticket-price {
- height: 44rpx;
-
- &-checkbox {
- width: 44rpx;
- height: 44rpx;
- background-color: #fff;
- border-radius: 50%;
- overflow: hidden;
- margin-right: 20rpx;
-
- image {
- width: 44rpx;
- height: 44rpx;
- }
- }
-
- &-amt {
- height: 44rpx;
- font-family: YouSheBiaoTiHei;
- font-weight: 400;
- align-items: flex-end;
- color: #FFFFFF;
- margin-right: 20rpx;
-
- .num {
- font-size: 56rpx;
- line-height: 40rpx;
- }
-
- .txt {
- line-height: 36rpx;
- font-size: 40rpx;
- }
- }
-
- &-discount {
- height: 44rpx;
- align-items: flex-end;
-
- .num {
- line-height: 26rpx;
- font-size: 26rpx;
- text-decoration: line-through;
- font-style: italic;
- color: #FFFEFE;
- }
- }
- }
-
- // 奖品移动动画
- @keyframes movePrize {
- 0% {
- transform: translate(0, 10px)
- }
-
- 25% {
- transform: translate(0, 5px)
- }
-
- 50% {
- transform: translate(0, 0px)
- }
-
- 75% {
- transform: translate(0, 5px)
- }
-
- 100% {
- transform: translate(0, 10px)
- }
- }
-
- // 倒计时移动动画
- @keyframes moveTime {
- 0% {
- transform: translate(2px, 0)
- }
-
- 25% {
- transform: translate(0, 0)
- }
-
- 50% {
- transform: translate(1px, 0)
- }
-
- 75% {
- transform: translate(0, 0)
- }
-
- 100% {
- transform: translate(2px, 0)
- }
- }
-
- // 放大缩小动画
- @keyframes scaleTime {
- 0% {
- transform: scale(1.05)
- }
-
- 25% {
- transform: scale(1.02)
- }
-
- 50% {
- transform: scale(0.9)
- }
-
- 75% {
- transform: scale(1.02)
- }
-
- 100% {
- transform: scale(1.05)
- }
- }
-
- // 刮开刮票呼吸动画
- @keyframes scaleBtn {
- 0% {
- transform: scale(1.04)
- }
-
- 25% {
- transform: scale(1.02)
- }
-
- 50% {
- transform: scale(1)
- }
-
- 75% {
- transform: scale(1.02)
- }
-
- 100% {
- transform: scale(1.04)
- }
- }
-
- // 刮开刮票阴影动画
- @keyframes shadowBtn {
- 0% {
- text-shadow: 2px -2px 3px #fff;
- }
-
- 25% {
- text-shadow: none;
- }
-
- 50% {
- text-shadow: none;
- }
-
- 75% {
- text-shadow: none;
- }
-
- 100% {
- text-shadow: 2px -2px 3px #fff;
- }
- }
-
- // 刮开盲票光影移动动画
- @keyframes shadowMove {
- 0% {
- left: -100%;
- }
-
- 100% {
- left: 110%;
- }
- }
- </style>
|