|
|
@@ -1,60 +1,144 @@
|
|
|
<template>
|
|
|
- <div class="content" :style="{ 'background': `#F5FAFF` }" v-show="home_show" 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 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' }">
|
|
|
+ <!-- 红包打开 -->
|
|
|
+ <div class="redPacket" v-show="status != 'not-open'"
|
|
|
+ :class="{ redPacket2: status != 'open', key_packet: status == 'open' }">
|
|
|
|
|
|
- <!-- 内容 -->
|
|
|
- <div class="head">
|
|
|
- <div class="head-title">
|
|
|
- <img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
|
|
|
- <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
- </div>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <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-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 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-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 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">{{ 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>
|
|
|
+
|
|
|
|
|
|
- <!-- 非chrome浏览器 -->
|
|
|
- <div class="head-area expire" v-if="status == 'no-chrome'">
|
|
|
- <div class="txt">Get Giveaways</div>
|
|
|
- <div class="titme">with chrome</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="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 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>
|
|
|
|
|
|
+ <!-- 过期 -->
|
|
|
+ <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>
|
|
|
+ }} {{ 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">
|
|
|
@@ -74,59 +158,29 @@
|
|
|
</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">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" @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 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>
|
|
|
|
|
|
@@ -135,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',
|
|
|
@@ -154,10 +209,12 @@ export default {
|
|
|
name: "index",
|
|
|
data() {
|
|
|
return {
|
|
|
+ cp_link: '',
|
|
|
appVersionCode: 1,
|
|
|
mid: '',
|
|
|
- area_show: true,
|
|
|
- home_show: false,
|
|
|
+ show_moblie: false,
|
|
|
+ show_home: false,
|
|
|
+ layer_show: false,
|
|
|
validity: '',
|
|
|
receiveAmount: 0,
|
|
|
validity_state: true,
|
|
|
@@ -215,6 +272,10 @@ 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;
|
|
|
@@ -261,7 +322,7 @@ export default {
|
|
|
postId: this.detail.postId || ''
|
|
|
}
|
|
|
})
|
|
|
- this.home_show = true
|
|
|
+ this.show_home = true
|
|
|
switch (data.code.toString()) {
|
|
|
case '0':
|
|
|
if (data.data.newReceived) {
|
|
|
@@ -289,7 +350,7 @@ export default {
|
|
|
break
|
|
|
default:
|
|
|
console.log('getRedPacket', data)
|
|
|
- this.home_show = false
|
|
|
+ this.show_home = false
|
|
|
break;
|
|
|
}
|
|
|
// 领取列表分页
|
|
|
@@ -376,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'
|
|
|
}
|
|
|
}
|
|
|
@@ -415,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%;
|
|
|
@@ -455,6 +777,8 @@ body,
|
|
|
animation-fill-mode: forwards;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
.redPacket {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
@@ -883,5 +1207,4 @@ body,
|
|
|
margin-left: -18rem;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|
