|
|
@@ -1,7 +1,83 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- {{JSON.stringify(detail)}}
|
|
|
- </div>
|
|
|
+ <div class="content" :style="{ 'backgroundImage': `url(${this.back_img})` }">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="/svg/icon-logo.svg" alt />
|
|
|
+ </div>
|
|
|
+ <!-- 红包 -->
|
|
|
+ <div class="redPacket">
|
|
|
+ <div class="area" v-show="area_show">
|
|
|
+ <div class="title">
|
|
|
+ <img src="/svg/icon-logo.svg" alt />
|
|
|
+ <span>Giveaways from: Elon Musk</span>
|
|
|
+ </div>
|
|
|
+ <div class="txt">Good Luck!</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <img src="/svg/back-top.svg" alt class="top" />
|
|
|
+ <img src="/svg/back-down.svg" alt class="down" />
|
|
|
+ <img src="/svg/icon-usd.svg" alt class="start" v-show="area_show" />
|
|
|
+ <!-- 内容 -->
|
|
|
+ <div class="head">
|
|
|
+ <div class="head-title">
|
|
|
+ <img src="/svg/icon-logo.svg" alt />
|
|
|
+ <span>Giveaways from: Elon Musk</span>
|
|
|
+ </div>
|
|
|
+ <div class="head-txt">Awesome! You Will Get</div>
|
|
|
+ <div class="head-money">
|
|
|
+ <img src="/svg/icon-usd.svg" alt />
|
|
|
+ <span class="money-txt">1.753</span>
|
|
|
+ <div>
|
|
|
+ <span>USD</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-list-title">
|
|
|
+ <div>0/0 People Got</div>
|
|
|
+ <div>Total $1 isd</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-list">
|
|
|
+ <div class="luck-item">
|
|
|
+ <img alt />
|
|
|
+ <div class="luck-content">
|
|
|
+ <div class="luck-title">123</div>
|
|
|
+ <div class="luck-time">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-money">
|
|
|
+ <img src="/svg/icon-logo.svg" alt />
|
|
|
+ <div class="luck-money-txt">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-king">
|
|
|
+ <img src="/svg/icon-logo.svg" alt />
|
|
|
+ <span>Luckiest Draw</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 安装 -->
|
|
|
+ <div class="install">
|
|
|
+ <div class="title">Withdraw to Wallet</div>
|
|
|
+ <div class="validity">
|
|
|
+ <span>Validity</span>
|
|
|
+ <span style="color: red;">23:57:32</span>
|
|
|
+ </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">Install</div>
|
|
|
+ <div class="area_num">
|
|
|
+ <div class="num">2</div>
|
|
|
+ <span>Complete Tasks by Elon Musk</span>
|
|
|
+ </div>
|
|
|
+ <div class="tip">Follow、Like tweet、Retweet (Just 1-3 minutes)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -9,14 +85,16 @@ import axios from 'axios';
|
|
|
|
|
|
export default {
|
|
|
name: "index",
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
+ back_img: '/svg/back-denet.svg',
|
|
|
+ area_show: true,
|
|
|
detail: {
|
|
|
postId: '',
|
|
|
postBizData: {
|
|
|
imagePath: ''
|
|
|
- }
|
|
|
- },
|
|
|
+ }
|
|
|
+ },
|
|
|
title: '',
|
|
|
twitterTitle: 'deNet',
|
|
|
jumpUrl: 'https://de-net-test.piaoquantv.com/'
|
|
|
@@ -55,17 +133,17 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- async asyncData (params) {
|
|
|
- let {route} = params;
|
|
|
- let {data} = await axios.post('https://denettestapi.piaoquantv.com/denet/post/getDetail', {
|
|
|
+ async asyncData(params) {
|
|
|
+ let { route } = params;
|
|
|
+ let { data } = await axios.post('https://denettestapi.piaoquantv.com/denet/post/getDetail', {
|
|
|
baseInfo: {
|
|
|
token: ''
|
|
|
- },
|
|
|
+ },
|
|
|
params: {
|
|
|
postId: route.params.id || ''
|
|
|
}
|
|
|
})
|
|
|
- if (data.code == 0) {
|
|
|
+ if (data.code == 0) {
|
|
|
if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
|
|
|
data.data.postBizData = JSON.parse(data.data.postBizData)
|
|
|
}
|
|
|
@@ -73,11 +151,366 @@ export default {
|
|
|
return {
|
|
|
detail: data.data,
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //改变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);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.area_show = false
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss" >
|
|
|
+html,
|
|
|
+body,
|
|
|
+#__nuxt,
|
|
|
+#__layout {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: relative;
|
|
|
+ font-family: "SF Pro Display";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ .logo {
|
|
|
+ position: absolute;
|
|
|
+ left: 4rem;
|
|
|
+ top: 1.5rem;
|
|
|
+ img {
|
|
|
+ width: 107px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .redPacket {
|
|
|
+ position: absolute;
|
|
|
+ top: 9rem;
|
|
|
+ left: 50%;
|
|
|
+ width: 37.5rem;
|
|
|
+ margin-left: -18rem;
|
|
|
+ height: 65rem;
|
|
|
+ border-radius: 2rem;
|
|
|
+ // background: red;
|
|
|
+ overflow: hidden;
|
|
|
+ animation: key_packet 3s;
|
|
|
+ animation-delay: 6s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ box-shadow: 0 0 5px #888888;
|
|
|
+ .start {
|
|
|
+ position: absolute;
|
|
|
+ width: 10rem;
|
|
|
+ height: 10rem;
|
|
|
+ bottom: 24rem;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -5rem;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ top: 0;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ animation: key_top 4s;
|
|
|
+ animation-delay: 2s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ bottom: 0;
|
|
|
+ position: absolute;
|
|
|
+ height: 32.3rem;
|
|
|
+ animation: key_down 4s;
|
|
|
+ animation-delay: 2s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ .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;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 3rem;
|
|
|
+ height: 3rem;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ border: 2px solid #fff4db;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ color: #fff2d3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-txt {
|
|
|
+ margin-top: 4.7rem;
|
|
|
+ font-size: 2rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #ef4545;
|
|
|
+ }
|
|
|
+ .head-money {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 4rem;
|
|
|
+ height: 4rem;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 1.3rem;
|
|
|
+ }
|
|
|
+ .money-txt {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 4.8rem;
|
|
|
+ color: #000000;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .luck-list-title {
|
|
|
+ padding: 0 16px;
|
|
|
+ background: #fff;
|
|
|
+ color: #9b9b9b;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .luck-list {
|
|
|
+ background: #fff;
|
|
|
+ .luck-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-top: 1px solid #d1d1d1;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ img:first-child {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .luck-king {
|
|
|
+ position: absolute;
|
|
|
+ top: 36px;
|
|
|
+ right: 16px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .area {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ width: 100%;
|
|
|
+ .title {
|
|
|
+ z-index: 11;
|
|
|
+ margin-top: 8.5rem;
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ width: 3rem;
|
|
|
+ height: 3rem;
|
|
|
+ border: 2px solid #fff4db;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ font-size: 1.6rem;
|
|
|
+ color: #fff2d3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ font-size: 4rem;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.03rem;
|
|
|
+ color: #fff2d3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .install {
|
|
|
+ position: absolute;
|
|
|
+ top: 20rem;
|
|
|
+ right: 28.5rem;
|
|
|
+ opacity: 0;
|
|
|
+ animation: key_install 2s;
|
|
|
+ animation-delay: 6s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ .title {
|
|
|
+ font-size: 4.8rem;
|
|
|
+ color: #000000;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ }
|
|
|
+ .validity {
|
|
|
+ margin-top: 2rem;
|
|
|
+ background: rgba(166, 166, 166, 0.1);
|
|
|
+ width: 40rem;
|
|
|
+ height: 3.3rem;
|
|
|
+ line-height: 3.3rem;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flow {
|
|
|
+ position: absolute;
|
|
|
+ margin-top: 4.6rem;
|
|
|
+ .line {
|
|
|
+ position: absolute;
|
|
|
+ height: 16rem;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ top: 3rem;
|
|
|
+ left: 1.2rem;
|
|
|
+ }
|
|
|
+ .area_num {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .num {
|
|
|
+ width: 2.4rem;
|
|
|
+ height: 2.4rem;
|
|
|
+ background-color: rgba(56, 154, 255, 1);
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 2.4rem;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-left: 1.5rem;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ margin-left: 4rem;
|
|
|
+ margin-top: 0.7rem;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ color: #a4a4a4;
|
|
|
+ }
|
|
|
+ .install_btn {
|
|
|
+ margin-left: 4rem;
|
|
|
+ margin-top: 2rem;
|
|
|
+ margin-bottom: 6.7rem;
|
|
|
+ width: 23rem;
|
|
|
+ height: 5.8rem;
|
|
|
+ background: #389aff;
|
|
|
+ border-radius: 10rem;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 5.8rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes key_install {
|
|
|
+ 0% {
|
|
|
+ opacity: 0.1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes key_packet {
|
|
|
+ 0% {
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ left: 30.6rem;
|
|
|
+ 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>
|
