|
|
@@ -1,122 +1,186 @@
|
|
|
<template>
|
|
|
- <div class="content" :style="{ 'backgroundImage': `url(${this.back_img})` }" v-show="home_show" v-if="detail">
|
|
|
- <div class="logo">
|
|
|
- <img src="/svg/icon-logo.svg" alt />
|
|
|
- </div>
|
|
|
- <!-- 红包 -->
|
|
|
- <div class="redPacket" :class="{ redPacket2: status != 'open', key_packet: status == 'open' }"
|
|
|
- v-show="status != 'error'">
|
|
|
- <div class="area" :class="{ key_area: status == 'open' }"
|
|
|
- v-show="status == 'open' || status == 'no-chrome'">
|
|
|
- <div class="title">
|
|
|
- <img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
|
|
|
- <span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
- </div>
|
|
|
- <div class="txt">Good Luck!</div>
|
|
|
+ <div style="width: 100%; height: 100%;">
|
|
|
+ <div class="content" :style="{ 'background': `#F5FAFF` }" v-show="show_home" v-if="detail">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="/svg/icon-logo.svg" alt />
|
|
|
</div>
|
|
|
+ <!-- 未开始 -->
|
|
|
+ <div class="not-open" v-show="status == 'not-open'">
|
|
|
+ <img src="/subject/001.gif">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 红包打开 -->
|
|
|
+ <div class="redPacket" v-show="status != 'not-open'"
|
|
|
+ :class="{ redPacket2: status != 'open', key_packet: status == 'open' }">
|
|
|
|
|
|
- <img src="/svg/back-top.svg" alt class="top" v-show="status == 'open' || status == 'no-chrome'"
|
|
|
- :class="{ key_top: status == 'open' }" />
|
|
|
- <img src="/svg/back-down.svg" alt class="down" v-show="status == 'open' || status == 'no-chrome'"
|
|
|
- :class="{ key_down: status == 'open' }" />
|
|
|
- <img src="/svg/icon-usd.svg" alt class="start" v-show="status == 'no-chrome'" />
|
|
|
- <img src="/git/icon-start.gif" alt class="start" v-show="status == 'open'" />
|
|
|
-
|
|
|
- <!-- 内容 -->
|
|
|
- <div class="head">
|
|
|
- <div class="head-title">
|
|
|
- <img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
|
|
|
- <span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <div class="head">
|
|
|
+ <div class="head-title">
|
|
|
+ <img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
|
|
|
+ <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="head-txt" v-if="status == 'open' || status == 'opened'">Awesome! You Will Get</div> -->
|
|
|
+ <!-- <div class="head-area" v-else-if="status == 'opened'">opened!</div> -->
|
|
|
+
|
|
|
+ <!-- 红包被领完了 -->
|
|
|
+ <div class="head-area" v-if="status == 'nothing'">
|
|
|
+ <div class="txt">Better luck next time!</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 过期 -->
|
|
|
+ <div class="head-area expire" v-if="status == 'expire'">
|
|
|
+ <div class="txt">This Giveaways</div>
|
|
|
+ <div class="titme">expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 非chrome浏览器 -->
|
|
|
+ <div class="head-area expire" v-if="status == 'no-chrome'">
|
|
|
+ <div class="txt">Get Giveaways</div>
|
|
|
+ <div class="titme">with chrome</div>
|
|
|
+ </div>
|
|
|
+ <!-- 领取成功 -->
|
|
|
+ <div class="head-area head-money" v-if="status == 'open' || status == 'opened'">
|
|
|
+ <div class="txt">AWESOME! YOU Will GET</div>
|
|
|
+ <div class="head-money-area">
|
|
|
+ <img :src="currencyIconUrl" alt />
|
|
|
+ <span class="money-txt">{{ receiveAmount / 100 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="head-txt" v-if="status == 'open' || status == 'opened'">Awesome! You Will Get</div>
|
|
|
- <!-- <div class="head-area" v-else-if="status == 'opened'">opened!</div> -->
|
|
|
- <div class="head-area" v-else-if="status == 'nothing'">Better luck next time!</div>
|
|
|
- <div class="head-area" v-else-if="status == 'expire'">
|
|
|
- <div>This Giveaways</div>
|
|
|
- <div>expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</div>
|
|
|
+
|
|
|
+ <!-- 领取列表 -->
|
|
|
+ <div class="luck-list-title">
|
|
|
+ <div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Got</div>
|
|
|
+ <div> {{ detail.postBizData.receiveAmountValue / 100 }} / {{
|
|
|
+ detail.postBizData.amountValue / 100 || ''
|
|
|
+ }} {{ detail.postBizData.amountCurrencyCode || '' }}</div>
|
|
|
</div>
|
|
|
- <div class="head-money" v-if="status == 'open' || status == 'opened'">
|
|
|
- <img src="/svg/icon-usd.svg" alt />
|
|
|
- <span class="money-txt">{{ receiveAmount / 100 }}</span>
|
|
|
- <div>
|
|
|
- <span>USD</span>
|
|
|
+ <div class="luck-list" @scroll="handleScroll($event)">
|
|
|
+ <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
|
|
|
+ <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
+ <img v-else src="/svg/icon-twitter.svg" alt />
|
|
|
+ <div class="luck-content">
|
|
|
+ <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
|
|
|
+ <div class="luck-time">{{ formatTime(item.receiveTimestamp) }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-money">
|
|
|
+ <img :src="item.currencyIconUrl" alt />
|
|
|
+ <div class="luck-money-txt">{{ item.amountValue / 100 || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-king" v-if="item.maxAmount">
|
|
|
+ <img src="/svg/icon-king-hat.svg" alt />
|
|
|
+ <span>Luckiest Draw</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="luck-list-title">
|
|
|
- <div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} People Got
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 安装 -->
|
|
|
+ <div class="install" v-if="status == 'open' || status == 'opened'"
|
|
|
+ :class="{ key_install: status == 'open' }">
|
|
|
+ <div class="title">Withdraw to Wallet</div>
|
|
|
+ <div class="validity">
|
|
|
+ <template v-if="validity_state">
|
|
|
+ <span>Validity</span>
|
|
|
+ <span style="color: red;">{{ validity }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span style="color: red;">Giveaways Validity</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flow">
|
|
|
+ <div class="line"></div>
|
|
|
+
|
|
|
+ <div class="area_num">
|
|
|
+ <div class="num">1</div>
|
|
|
+ <span>Install DeNet</span>
|
|
|
+ </div>
|
|
|
+ <div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
|
|
|
+ <div class="install_btn" @click="installExtension">Install</div>
|
|
|
+ <div class="area_num">
|
|
|
+ <div class="num">2</div>
|
|
|
+ <span>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="tip">Follow、Like tweet、Retweet (Just 1-3 minutes)</div>
|
|
|
</div>
|
|
|
- <div>Total ${{ detail.postBizData.amountValue / 100 || '' }} {{
|
|
|
- detail.postBizData.amountCurrencyCode ||
|
|
|
- ''
|
|
|
- }}</div>
|
|
|
</div>
|
|
|
- <div class="luck-list" @scroll="handleScroll" ref="list">
|
|
|
+
|
|
|
+ <!-- 过期 -->
|
|
|
+ <div class="install install-error" v-if="status == 'nothing' || status == 'expire'">
|
|
|
+ <div class="title">Install DeNet</div>
|
|
|
+ <div class="title">Don't miss the next Giveaway</div>
|
|
|
+ <div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
|
|
|
+ <div class="install_btn" @click="installExtension">Install</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 非chrome 浏览器状态 -->
|
|
|
+ <div class="install install-error" v-if="status == 'no-chrome'">
|
|
|
+ <div class="title">Open Giveaways</div>
|
|
|
+ <div class="title">with chrome</div>
|
|
|
+ <div class="tip">Only supports getting Giveaways through chrome</div>
|
|
|
+ <div class="install_chrome">
|
|
|
+ <img src="/svg/icon-chrome.svg" alt />
|
|
|
+ Install Chrome
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="status == 'error'"></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="show_moblie" class="moblie">
|
|
|
+ <div class="head-area">
|
|
|
+ <div class="txt">GET GIVEAWAY</div>
|
|
|
+ </div>
|
|
|
+ <!-- 领取列表 -->
|
|
|
+ <div class="luck-list-title">
|
|
|
+ <div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Got</div>
|
|
|
+ <div> {{ detail.postBizData.receiveAmountValue / 100 }} / {{
|
|
|
+ detail.postBizData.amountValue / 100 || ''
|
|
|
+ }} {{ detail.postBizData.amountCurrencyCode || '' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-list" @scroll="handleScroll($event)">
|
|
|
<div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
|
|
|
<img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
<img v-else src="/svg/icon-twitter.svg" alt />
|
|
|
<div class="luck-content">
|
|
|
<div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
|
|
|
- <div class="luck-time" v-if="item.receiveTimestamp == -1">刚刚</div>
|
|
|
<div class="luck-time">{{ formatTime(item.receiveTimestamp) }}</div>
|
|
|
</div>
|
|
|
<div class="luck-money">
|
|
|
- <img src="/svg/icon-usd.svg" alt />
|
|
|
- <div class="luck-money-txt">{{ item.amountValue / 100 }}</div>
|
|
|
+ <img :src="item.currencyIconUrl" alt />
|
|
|
+ <div class="luck-money-txt">{{ item.amountValue / 100 || 0 }}</div>
|
|
|
</div>
|
|
|
-
|
|
|
<div class="luck-king" v-if="item.maxAmount">
|
|
|
<img src="/svg/icon-king-hat.svg" alt />
|
|
|
<span>Luckiest Draw</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 安装 -->
|
|
|
- <div class="install" v-if="status == 'open' || status == 'opened'" :class="{ key_install: status == 'open' }">
|
|
|
- <div class="title">Withdraw to Wallet</div>
|
|
|
- <div class="validity">
|
|
|
- <template v-if="validity_state">
|
|
|
- <span>Validity</span>
|
|
|
- <span style="color: red;">{{ validity }}</span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span style="color: red;">Giveaways Validity</span>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flow">
|
|
|
- <div class="line"></div>
|
|
|
-
|
|
|
- <div class="area_num">
|
|
|
- <div class="num">1</div>
|
|
|
- <span>Install DeNet</span>
|
|
|
+ <div class="area-cp-link">
|
|
|
+ <div class="area-title">
|
|
|
+ <img src="/svg/icon-mobile.svg" alt="">
|
|
|
+ <div class="right">
|
|
|
+ <div class="right-title">Get Giveaway on PC</div>
|
|
|
+ <div class="right-content">You need to use a computer to complete tasks, and Get Giveaways (Just
|
|
|
+ 2-3 minutes)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
|
|
|
- <div class="install_btn" @click="installExtension">Install</div>
|
|
|
- <div class="area_num">
|
|
|
- <div class="num" style="background: #E0E0E0;">2</div>
|
|
|
- <span>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
+ <div class="area-content">
|
|
|
+ {{ cp_link }}
|
|
|
+ </div>
|
|
|
+ <div class="area-btn">
|
|
|
+ <div class="btn" :data-clipboard-text="cp_link">Copy Link</div>
|
|
|
</div>
|
|
|
- <div class="tip">Follow、Like tweet、Retweet (Just 1-3 minutes)</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="install install-error" v-if="status == 'nothing' || status == 'expire'">
|
|
|
- <div class="title">Install DeNet</div>
|
|
|
- <div class="title">Don't miss the next Giveaway</div>
|
|
|
- <div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
|
|
|
- <div class="install_btn">Install</div>
|
|
|
- </div>
|
|
|
- <div class="install install-error" v-if="status == 'no-chrome'">
|
|
|
- <div class="title">Open Giveaways</div>
|
|
|
- <div class="title">with chrome</div>
|
|
|
- <div class="tip">Only supports getting Giveaways through chrome</div>
|
|
|
- <div class="install_chrome">
|
|
|
- <img src="/svg/icon-chrome.svg" alt />
|
|
|
- Install Chrome
|
|
|
+ <div class="layer" v-show="layer_show">
|
|
|
+ <div class="layer-box">
|
|
|
+ <div class="layer-txt">Unable to copy, please enter the link manually</div>
|
|
|
+ <div class="layer-btn" @click="layer_show = false">Done</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="status == 'error'"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -125,6 +189,7 @@ import axios from 'axios';
|
|
|
import Cookies from 'js-cookie'
|
|
|
import { isBrowser } from '../utils/help.js'
|
|
|
var moment = require('moment');
|
|
|
+var ClipboardJS = require('clipboard')
|
|
|
|
|
|
const api = {
|
|
|
prod: 'https://api.denetme.net',
|
|
|
@@ -136,7 +201,7 @@ const page = {
|
|
|
pre: "https://preh5.denetme.net",
|
|
|
test: 'https://testh5.denetme.net'
|
|
|
}
|
|
|
-const jumpUrl = page[process.env.NUXT_ENV.MODE]
|
|
|
+const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
|
|
|
const baseURL = api[process.env.NUXT_ENV.MODE]
|
|
|
|
|
|
|
|
|
@@ -144,11 +209,12 @@ export default {
|
|
|
name: "index",
|
|
|
data() {
|
|
|
return {
|
|
|
+ cp_link: '',
|
|
|
appVersionCode: 1,
|
|
|
mid: '',
|
|
|
- back_img: '/svg/back-denet.svg',
|
|
|
- area_show: true,
|
|
|
- home_show: false,
|
|
|
+ show_moblie: false,
|
|
|
+ show_home: false,
|
|
|
+ layer_show: false,
|
|
|
validity: '',
|
|
|
receiveAmount: 0,
|
|
|
validity_state: true,
|
|
|
@@ -160,6 +226,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ currencyIconUrl: '',
|
|
|
title: '',
|
|
|
twitterTitle: 'deNet',
|
|
|
jumpUrl: jumpUrl,
|
|
|
@@ -205,12 +272,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ isMobile() {
|
|
|
+ let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
|
|
|
+ return flag;
|
|
|
+ },
|
|
|
installExtension() {
|
|
|
let url = 'https://d3d9wvhy948gxx.cloudfront.net/extensions/chrome/denet.zip'
|
|
|
+ location.href = url;
|
|
|
this.$router.push({
|
|
|
path: '/install'
|
|
|
})
|
|
|
- location.href = url;
|
|
|
},
|
|
|
formatTime(time, _type = 'MM-DD HH:mm:ss') {
|
|
|
return moment(time).format(_type)
|
|
|
@@ -222,10 +293,11 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
handleScroll(e) {
|
|
|
+ e = e.target
|
|
|
if (this.luck_list_end) {
|
|
|
return
|
|
|
}
|
|
|
- if ((this.$refs.list.clientHeight + this.$refs.list.scrollTop) / this.$refs.list.scrollHeight > .8) {
|
|
|
+ if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
|
|
|
this.luck_list_end = false
|
|
|
this.page_index++
|
|
|
this.getReceivedList()
|
|
|
@@ -250,11 +322,14 @@ export default {
|
|
|
postId: this.detail.postId || ''
|
|
|
}
|
|
|
})
|
|
|
- this.home_show = true
|
|
|
+ this.show_home = true
|
|
|
switch (data.code.toString()) {
|
|
|
case '0':
|
|
|
if (data.data.newReceived) {
|
|
|
- this.status = 'open'
|
|
|
+ this.status = 'not-open'
|
|
|
+ setTimeout(() => {
|
|
|
+ this.status = 'open'
|
|
|
+ }, 3000)
|
|
|
this.receiveAmount = data.data.receiveAmount
|
|
|
} else {
|
|
|
this.status = 'opened'
|
|
|
@@ -275,7 +350,7 @@ export default {
|
|
|
break
|
|
|
default:
|
|
|
console.log('getRedPacket', data)
|
|
|
- this.home_show = false
|
|
|
+ this.show_home = false
|
|
|
break;
|
|
|
}
|
|
|
// 领取列表分页
|
|
|
@@ -362,28 +437,49 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
//改变font-size
|
|
|
- (function (doc, win) {
|
|
|
- var docEI = doc.documentElement,
|
|
|
- resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
|
|
|
- recalc = function () {
|
|
|
- var clientWidth = docEI.clientWidth;
|
|
|
- if (!clientWidth) return;
|
|
|
- //100是字体大小，1510是开发时浏览器窗口的宽度，等比计算
|
|
|
- docEI.style.fontSize = 10 * (clientWidth / 1510) + 'px';
|
|
|
- }
|
|
|
-
|
|
|
- if (!doc.addEventListener) return;
|
|
|
- win.addEventListener(resizeEvt, recalc, false);
|
|
|
- doc.addEventListener('DOMContentLoaded', recalc, false);
|
|
|
- })(document, window);
|
|
|
+ // (function (doc, win) {
|
|
|
+ // var docEI = doc.documentElement,
|
|
|
+ // resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
|
|
|
+ // recalc = function () {
|
|
|
+ // var clientWidth = docEI.clientWidth;
|
|
|
+ // if (!clientWidth) return;
|
|
|
+ // //100是字体大小，1510是开发时浏览器窗口的宽度，等比计算
|
|
|
+ // docEI.style.fontSize = 10 * (clientWidth / 1510) + 'px';
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (!doc.addEventListener) return;
|
|
|
+ // win.addEventListener(resizeEvt, recalc, false);
|
|
|
+ // doc.addEventListener('DOMContentLoaded', recalc, false);
|
|
|
+ // })(document, window);
|
|
|
+
|
|
|
+ document.documentElement.style.fontSize = '62.5%'
|
|
|
+ if (this.isMobile()) {
|
|
|
+ this.show_moblie = true
|
|
|
+ this.cp_link = window.location.href
|
|
|
+ // 复制链接
|
|
|
+ var clipboard = new ClipboardJS('.btn');
|
|
|
+ clipboard.on('success', function (e) {
|
|
|
+ console.info('Action:', e.action);
|
|
|
+ console.info('Text:', e.text);
|
|
|
+ console.info('Trigger:', e.trigger);
|
|
|
+
|
|
|
+ e.clearSelection();
|
|
|
+ });
|
|
|
|
|
|
- if (isBrowser() == 'chrome') {
|
|
|
+ clipboard.on('error', function (e) {
|
|
|
+ this.layer_show = true
|
|
|
+ console.error('Action:', e.action);
|
|
|
+ console.error('Trigger:', e.trigger);
|
|
|
+ });
|
|
|
+ // 领取列表分页
|
|
|
+ this.getReceivedList()
|
|
|
+ } else if (isBrowser() == 'chrome') {
|
|
|
// 领取任务红包
|
|
|
this.setCookieMid()
|
|
|
this.getRedPacket()
|
|
|
this.setPickupInfo()
|
|
|
} else {
|
|
|
- this.home_show = true
|
|
|
+ this.show_home = true
|
|
|
this.status = 'no-chrome'
|
|
|
}
|
|
|
}
|
|
|
@@ -401,6 +497,246 @@ body,
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
+.moblie {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: 100%;
|
|
|
+ align-content: flex-start;
|
|
|
+ flex-direction: column;
|
|
|
+ .layer {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, .5);
|
|
|
+
|
|
|
+ .layer-box {
|
|
|
+ width: 30rem;
|
|
|
+ height: 17rem;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 11px;
|
|
|
+ opacity: 1;
|
|
|
+ position: absolute;
|
|
|
+ top: 25rem;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -15rem;
|
|
|
+
|
|
|
+ .layer-txt {
|
|
|
+ margin: 3rem 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 2.7rem;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer-btn {
|
|
|
+ width: 19rem;
|
|
|
+ height: 4rem;
|
|
|
+ background: #389AFF;
|
|
|
+ border-radius: 100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 4rem;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-area {
|
|
|
+ width: 100%;
|
|
|
+ height: 8rem;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ font-size: 2rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #389AFF;
|
|
|
+ border-radius: 0 586px 586px/0 0 104px 104px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .luck-list-title {
|
|
|
+ /* margin-top: 47px;*/
|
|
|
+ margin: 0 16px;
|
|
|
+ padding: 14px 0 11px 0;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #B0B0B0;
|
|
|
+ border-bottom: 1px solid #D1D1D1;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .luck-list {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .luck-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 0;
|
|
|
+ margin: 0 16px;
|
|
|
+ border-bottom: 1px solid #d1d1d1;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img:first-child {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .luck-king {
|
|
|
+ position: absolute;
|
|
|
+ top: 36px;
|
|
|
+ right: 0px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 19px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #f5b945;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .luck-content {
|
|
|
+ flex: auto;
|
|
|
+
|
|
|
+ .luck-title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+
|
|
|
+ .luck-time {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+
|
|
|
+ color: #9b9b9b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .luck-money {
|
|
|
+ display: flex;
|
|
|
+ height: 17px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .luck-money-txt {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ /* identical to box height */
|
|
|
+
|
|
|
+ text-align: right;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .luck-item:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-cp-link {
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ height: 20rem;
|
|
|
+ box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ border-top-left-radius: 2rem;
|
|
|
+ border-top-right-radius: 2rem;
|
|
|
+
|
|
|
+ .area-title {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 6.4rem;
|
|
|
+ height: 6.4rem;
|
|
|
+ margin: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+
|
|
|
+ .right-title {
|
|
|
+ font-size: 1.7rem;
|
|
|
+ color: #000000;
|
|
|
+ margin-top: 1.7rem;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-content {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #989898;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-content {
|
|
|
+ background: #F4F4F4;
|
|
|
+ height: 4.6rem;
|
|
|
+ padding: 0 1rem;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-btn {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 34.3rem;
|
|
|
+ height: 4rem;
|
|
|
+ background: #389AFF;
|
|
|
+ border-radius: 100px;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -411,23 +747,38 @@ body,
|
|
|
font-style: normal;
|
|
|
font-weight: 600;
|
|
|
|
|
|
+ .not-open {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20rem;
|
|
|
+ height: 20rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.logo {
|
|
|
position: absolute;
|
|
|
left: 4rem;
|
|
|
top: 1.5rem;
|
|
|
|
|
|
img {
|
|
|
- width: 107px;
|
|
|
- height: 40px;
|
|
|
+ width: 10.7rem;
|
|
|
+ height: 4rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.key_packet {
|
|
|
animation: key_packet 3s;
|
|
|
- animation-delay: 6s;
|
|
|
+ animation-delay: 0s;
|
|
|
animation-fill-mode: forwards;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
.redPacket {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
@@ -442,22 +793,9 @@ body,
|
|
|
// background: red;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 0 5px #888888;
|
|
|
+ background: #fff;
|
|
|
|
|
|
- .start {
|
|
|
- position: absolute;
|
|
|
- width: 10rem;
|
|
|
- height: 10rem;
|
|
|
- bottom: 24rem;
|
|
|
- left: 50%;
|
|
|
- margin-left: -5rem;
|
|
|
- z-index: 13;
|
|
|
- }
|
|
|
|
|
|
- .key_top {
|
|
|
- animation: key_top 4s;
|
|
|
- animation-delay: 2s;
|
|
|
- animation-fill-mode: forwards;
|
|
|
- }
|
|
|
|
|
|
.top {
|
|
|
top: 0;
|
|
|
@@ -473,33 +811,33 @@ body,
|
|
|
z-index: 11;
|
|
|
}
|
|
|
|
|
|
- .key_down {
|
|
|
- animation: key_down 4s;
|
|
|
- animation-delay: 2s;
|
|
|
- animation-fill-mode: forwards;
|
|
|
- }
|
|
|
|
|
|
.head {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
.head-title {
|
|
|
- height: 9.7rem;
|
|
|
- line-height: 9.7rem;
|
|
|
- background: #ef4545;
|
|
|
- text-align: center;
|
|
|
- border-radius: 0 586px 586px/0 0 104px 104px;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 0 5px #888888;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 3.6rem;
|
|
|
+ background: rgba(255, 255, 255, .1);
|
|
|
+
|
|
|
|
|
|
img {
|
|
|
- width: 3rem;
|
|
|
- height: 3rem;
|
|
|
+ width: 1.8rem;
|
|
|
+ height: 1.8rem;
|
|
|
border-radius: 50%;
|
|
|
|
|
|
- border: 2px solid #fff4db;
|
|
|
+ border: 1px solid #fff;
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
- font-size: 1.4rem;
|
|
|
- color: #fff2d3;
|
|
|
+ margin-left: .8rem;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -507,59 +845,75 @@ body,
|
|
|
margin-top: 4.7rem;
|
|
|
font-size: 2rem;
|
|
|
text-align: center;
|
|
|
- color: #ef4545;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
.head-area {
|
|
|
- height: 10rem;
|
|
|
+ height: 19rem;
|
|
|
text-align: center;
|
|
|
letter-spacing: 0.3px;
|
|
|
font-size: 2rem;
|
|
|
text-align: center;
|
|
|
- color: #ef4545;
|
|
|
+ color: #fff;
|
|
|
+ background: #389AFF;
|
|
|
+ border-radius: 0 586px 586px/0 0 104px 104px;
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ padding-top: 8.5rem;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.head-money {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 3.2rem;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 4rem;
|
|
|
- height: 4rem;
|
|
|
+ .txt {
|
|
|
+ padding-top: 6.8rem;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
}
|
|
|
|
|
|
- span {
|
|
|
- font-size: 1.3rem;
|
|
|
- }
|
|
|
+ .head-money-area {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .money-txt {
|
|
|
- font-weight: 700;
|
|
|
- font-size: 4.8rem;
|
|
|
- color: #000000;
|
|
|
- letter-spacing: 0.3px;
|
|
|
+ img {
|
|
|
+ width: 4rem;
|
|
|
+ height: 4rem;
|
|
|
+ border: 2px solid #FFFFFF;
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-left: 1.3rem;
|
|
|
+ font-size: 4.6rem;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.luck-list-title {
|
|
|
- padding: 0 16px;
|
|
|
+ /* margin-top: 47px;*/
|
|
|
+ margin: 0 16px;
|
|
|
+ padding: 14px 0 11px 0;
|
|
|
background: #fff;
|
|
|
- color: #9b9b9b;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ color: #B0B0B0;
|
|
|
+ border-bottom: 1px solid #D1D1D1;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
.luck-list {
|
|
|
background: #fff;
|
|
|
- flex: 1;
|
|
|
- overflow: scroll;
|
|
|
+ overflow: auto;
|
|
|
|
|
|
.luck-item {
|
|
|
display: flex;
|
|
|
- padding: 12px 16px;
|
|
|
- border-top: 1px solid #d1d1d1;
|
|
|
+ padding: 12px 0;
|
|
|
+ margin: 0 16px;
|
|
|
+ border-bottom: 1px solid #d1d1d1;
|
|
|
justify-content: space-between;
|
|
|
position: relative;
|
|
|
|
|
|
@@ -570,7 +924,7 @@ body,
|
|
|
.luck-king {
|
|
|
position: absolute;
|
|
|
top: 36px;
|
|
|
- right: 16px;
|
|
|
+ right: 0px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
@@ -637,6 +991,10 @@ body,
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .luck-item:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.area {
|
|
|
@@ -686,7 +1044,7 @@ body,
|
|
|
.key_install {
|
|
|
opacity: 0;
|
|
|
animation: key_install 2s;
|
|
|
- animation-delay: 6s;
|
|
|
+ animation-delay: 0s;
|
|
|
animation-fill-mode: forwards;
|
|
|
}
|
|
|
|
|
|
@@ -702,22 +1060,20 @@ body,
|
|
|
}
|
|
|
|
|
|
.validity {
|
|
|
- padding-left: 1.5rem;
|
|
|
- margin-top: 2rem;
|
|
|
- background: rgba(166, 166, 166, 0.1);
|
|
|
+ margin-top: 1rem;
|
|
|
+ color: #FF0000;
|
|
|
width: 40rem;
|
|
|
height: 3.3rem;
|
|
|
line-height: 3.3rem;
|
|
|
|
|
|
span {
|
|
|
- color: #000000;
|
|
|
font-size: 1.4rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.flow {
|
|
|
position: absolute;
|
|
|
- margin-top: 4.6rem;
|
|
|
+ margin-top: 4rem;
|
|
|
|
|
|
.line {
|
|
|
position: absolute;
|
|
|
@@ -805,6 +1161,7 @@ body,
|
|
|
letter-spacing: 0.3px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ background: #FFFFFF;
|
|
|
border: 1px solid #e8e8e8;
|
|
|
border-radius: 10rem;
|
|
|
margin-top: 3.3rem;
|
|
|
@@ -850,32 +1207,4 @@ body,
|
|
|
margin-left: -18rem;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-@keyframes key_top {
|
|
|
- 0% {
|
|
|
- top: 0;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- top: -30rem;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- top: -36rem;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes key_down {
|
|
|
- 0% {
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- bottom: -28.3rem;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- bottom: -32.3rem;
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
