luckdraw.vue 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407
  1. <!-- 红包玩法落地页 -->
  2. <template>
  3. <div class="content">
  4. <template v-if="isLoading">
  5. <img class="loading" src="../static/svg/icon-loading.svg" />
  6. </template>
  7. <template v-else>
  8. <template v-if="isMobile">
  9. <!-- 手机端 -->
  10. <div class="small" :class="{
  11. bg: status === 'not-open',
  12. custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
  13. }">
  14. <template v-if="status === 'not-open'">
  15. <template
  16. v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
  17. <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
  18. </template>
  19. <template v-else>
  20. <template v-if="isMoneyPrize">
  21. <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
  22. <div class="head">
  23. <img :src="detail.postBizData.postUserInfo.avatarUrl" />
  24. <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
  25. </div>
  26. <div class="price">
  27. <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
  28. <div class="money">
  29. <img :src="detail.postBizData.currencyIconPath" />
  30. <font-amount :fontSize="60" :amount="detail.postBizData.amountValue">
  31. </font-amount>
  32. </div>
  33. </div>
  34. <div class="time">
  35. <img class="img" :src=" require('../static/svg/icon-time.svg') " />
  36. {{ validity || '00:00:00' }}
  37. </div>
  38. <div class="box">
  39. <img src="../static/subject/icon-box.png" />
  40. </div>
  41. </template>
  42. <template v-else>
  43. <custom-card-cover :totalCount="detail.postBizData.totalCount"
  44. :amountValue="detail.postBizData.amountValue"
  45. :tokenSymbol="detail.postBizData.tokenSymbol"
  46. :currencyIconUrl="detail.postBizData.iconPath" :playType="2" :validity="validity"
  47. :userInfo="{
  48. nickName: detail.postBizData.postUserInfo.nickName,
  49. avatarUrl: detail.postBizData.postUserInfo.avatarUrl
  50. }" :rewardType="detail.postBizData.rewardType"
  51. :customizedReward="detail.postBizData.customizedReward" :showBottomInfo="false">
  52. </custom-card-cover>
  53. </template>
  54. </template>
  55. </template>
  56. <template v-else>
  57. <div class="succTop">
  58. <template v-if="status === 'opened'">
  59. <img class="img" :src=" require('../static/svg/icon-luck-rabbit.svg') " />
  60. <p class="tips">Good Luck Next Time!</p>
  61. </template>
  62. <template v-else-if="status === 'expire'">
  63. <!-- <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
  64. <p class="tips">This Draw is Complete</p> -->
  65. <p class="expire">This Giveaways<br />expired on {{
  66. formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</p>
  67. </template>
  68. <template v-else>
  69. <p class="win">🎉 Awesome! You Will Get</p>
  70. <div class="win-money">
  71. <img :src="detail.postBizData.currencyIconPath" />
  72. <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
  73. </div>
  74. </template>
  75. </div>
  76. <div class="succTitle">
  77. <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }}
  78. Winners</span>
  79. <span v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{
  80. detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || ''
  81. }}</span>
  82. </div>
  83. <div class="luck-list" @scroll="handleScroll($event)">
  84. <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
  85. <div class="userLogo">
  86. <img class="medal" v-if="i < 2"
  87. :src=" require('../static/svg/icon-medal-' + i + '.svg') " />
  88. <img class="header" v-if="item.simpleUserInfoVO.avatarUrl"
  89. :src="item.simpleUserInfoVO.avatarUrl" alt />
  90. <img class="header" v-else src="/svg/icon-twitter.svg" alt />
  91. </div>
  92. <div class="luck-content">
  93. <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
  94. <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
  95. </div>
  96. <div class="luck-money" v-if="isMoneyPrize">
  97. <img :src="item.currencyIconPath" alt />
  98. <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
  99. </div>
  100. <div class="luck-custom-prize" v-else>winner</div>
  101. <div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
  102. <img src="/svg/icon-king-hat.svg" alt />
  103. <span>Luckiest Draw</span>
  104. </div>
  105. </div>
  106. </div>
  107. </template>
  108. <div class="area-cp-link">
  109. <div class="area-list">
  110. <div class="item">
  111. <div class="icon"><img :src=" require('../static/subject/01.svg') " /></div>
  112. <div class="font">Complete the tasks on tweet</div>
  113. </div>
  114. <div class="item">
  115. <div class="icon"><img :src=" require('../static/subject/02.svg') " /></div>
  116. <div class="font">Open link on PC to draw</div>
  117. <div class="pc"><img :src=" require('../static/subject/pc.svg') " /></div>
  118. </div>
  119. </div>
  120. <div class="area-content">
  121. {{ linkHref }}
  122. </div>
  123. <div class="area-btn">
  124. <div class="btn" :data-clipboard-text="linkHref" @click="copyLinkHandle">Copy Link</div>
  125. </div>
  126. </div>
  127. <div class="layer" v-show="layer_show">
  128. <div class="layer-box">
  129. <div class="layer-txt">Unable to copy, please enter the link manually</div>
  130. <div class="layer-btn" @click="layer_show = false">Done</div>
  131. </div>
  132. </div>
  133. </div>
  134. </template>
  135. <!-- PC端 -->
  136. <template v-else>
  137. <div class="logo">
  138. <img src="/img/icon-logo.png" />
  139. </div>
  140. <div class="show">
  141. <div class="center">
  142. <div class="head-in-custom" v-if="!isMoneyPrize">
  143. <img :src="detail.postBizData.postUserInfo.avatarUrl" />
  144. <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
  145. </div>
  146. <div class="giveaway" :class="{
  147. bg: status === 'not-open',
  148. custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
  149. 'auto-height': !isMoneyPrize
  150. }">
  151. <div v-if="status === 'not-open'">
  152. <template
  153. v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
  154. <!-- <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
  155. <div class="customBottom">
  156. <div class="theme">
  157. <img class="icon" :src="require('../static/svg/icon-last-time.svg')"/>
  158. <span class="time2">{{ validity || '00:00:00' }}</span>
  159. <span class="info">Left</span>
  160. </div>
  161. <div class="winner-info">
  162. <span class="count">{{detail.postBizData.totalCount}} Winners</span>
  163. <span>to Share </span>
  164. <span class="prize-name">{{detail.postBizData.amountValue + ' ' + detail.postBizData.currencySymbol}}</span>
  165. </div>
  166. </div> -->
  167. <custom-card-cover :totalCount="detail.postBizData.totalCount"
  168. :amountValue="detail.postBizData.amountValue"
  169. :tokenSymbol="detail.postBizData.tokenSymbol"
  170. :currencyIconUrl="detail.postBizData.iconPath" :playType="2" :posterType="2"
  171. :customPosterInstalled="detail.postBizData.customPosterInstalled"
  172. :validity="validity" :userInfo="{
  173. nickName: detail.postBizData.postUserInfo.nickName,
  174. avatarUrl: detail.postBizData.postUserInfo.avatarUrl
  175. }" :rewardType="detail.postBizData.rewardType"
  176. :customizedReward="detail.postBizData.customizedReward" :showBottomInfo="true">
  177. </custom-card-cover>
  178. </template>
  179. <template v-else>
  180. <!-- 旧版 样式,后续更新时在 custom-card-cover 公共组件内维护-->
  181. <template v-if="isMoneyPrize">
  182. <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
  183. <div class="head">
  184. <img :src="detail.postBizData.postUserInfo.avatarUrl" />
  185. <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
  186. </div>
  187. <div class="price">
  188. <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
  189. <div class="money">
  190. <img :src="detail.postBizData.currencyIconPath" />
  191. <font-amount :fontSize="60" :amount="detail.postBizData.amountValue">
  192. </font-amount>
  193. </div>
  194. </div>
  195. <div class="time">
  196. <img class="img" :src=" require('../static/svg/icon-time.svg') " />
  197. {{ validity || '00:00:00' }}
  198. </div>
  199. <div class="box">
  200. <img src="../static/subject/icon-box.png" />
  201. </div>
  202. </template>
  203. <template v-else>
  204. <custom-card-cover :totalCount="detail.postBizData.totalCount"
  205. :amountValue="detail.postBizData.amountValue"
  206. :tokenSymbol="detail.postBizData.tokenSymbol"
  207. :currencyIconUrl="detail.postBizData.iconPath" :playType="2"
  208. :validity="validity" :userInfo="{
  209. nickName: detail.postBizData.postUserInfo.nickName,
  210. avatarUrl: detail.postBizData.postUserInfo.avatarUrl
  211. }" :rewardType="detail.postBizData.rewardType"
  212. :customizedReward="detail.postBizData.customizedReward"
  213. :showBottomInfo="true"></custom-card-cover>
  214. </template>
  215. </template>
  216. </div>
  217. <template v-else>
  218. <div class="succTop">
  219. <template v-if="status === 'opened'">
  220. <img class="img" :src=" require('../static/svg/icon-luck-rabbit.svg') " />
  221. <p class="tips">Good Luck Next Time!</p>
  222. </template>
  223. <template v-else-if="status === 'expire'">
  224. <!-- <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
  225. <p class="tips">This Draw is Complete</p> -->
  226. <p class="expire">This Giveaways<br />expired on {{
  227. formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</p>
  228. </template>
  229. <template v-else>
  230. <p class="win">🎉 Awesome! You are Winner!</p>
  231. <div class="win-money">
  232. <img :src="detail.postBizData.currencyIconPath" />
  233. <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
  234. </div>
  235. </template>
  236. </div>
  237. <div class="succTitle">
  238. <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount ||
  239. 0 }} Winners</span>
  240. <span v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{
  241. detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol ||
  242. '' }}</span>
  243. </div>
  244. <div class="luck-list" @scroll="handleScroll($event)">
  245. <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
  246. <div class="userLogo">
  247. <img class="medal" v-if="i < 2"
  248. :src=" require('../static/svg/icon-medal-' + i + '.svg') " />
  249. <img class="header" v-if="item.simpleUserInfoVO.avatarUrl"
  250. :src="item.simpleUserInfoVO.avatarUrl" alt />
  251. <img class="header" v-else src="/svg/icon-twitter.svg" alt />
  252. </div>
  253. <div class="luck-content">
  254. <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User'
  255. }}</div>
  256. <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm')
  257. }}</div>
  258. </div>
  259. <div class="luck-money" v-if="isMoneyPrize">
  260. <img :src="item.currencyIconPath" alt />
  261. <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
  262. </div>
  263. <div class="luck-custom-prize" v-else>winner</div>
  264. <div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
  265. <img src="/svg/icon-king-hat.svg" alt />
  266. <span>Luckiest Draw</span>
  267. </div>
  268. </div>
  269. </div>
  270. </template>
  271. </div>
  272. <div class="desc">
  273. <template v-if="isChrome">
  274. <template v-if="status === 'not-open'">
  275. <div class="title">Install DeNet Plugin<br />to Draw Prizes</div>
  276. <div class="issue">DeNet will detect task situation to issue Giveaway</div>
  277. </template>
  278. <template v-else>
  279. <div class="title">Install the Denet plugin<br />to not miss the next draw</div>
  280. </template>
  281. <img class="button" @click="installExtension"
  282. src="../static/svg/icon-install-nft-plugin.svg" />
  283. </template>
  284. <template v-else>
  285. <div class="title">Get Giveaway<br />with chrome</div>
  286. <div class="issue">Only supports getting Giveaways through chrome</div>
  287. <img class="button" @click="clickOpenChrome"
  288. src="../static/svg/icon-install-nft-chrome.svg" />
  289. </template>
  290. </div>
  291. </div>
  292. </div>
  293. </template>
  294. </template>
  295. </div>
  296. </template>
  297. <script>
  298. import axios from 'axios'
  299. import Cookies from 'js-cookie'
  300. import { Toast } from 'vant';
  301. import { isBrowser, appType, appVersionCode, formatSecondsAsDaysOrTime } from '../utils/help.js'
  302. import FontAmount from '../components/FontAmount.vue'
  303. import CustomCardCover from '../components/CustomCardCover.vue'
  304. import Report from "../log-center/log"
  305. import { RewardType } from '../types';
  306. var moment = require('moment');
  307. var ClipboardJS = require('clipboard')
  308. const api = {
  309. prod: 'https://api.denetme.net',
  310. pre: 'https://preapi.denetme.net',
  311. test: 'https://testapi.denetme.net'
  312. }
  313. const page = {
  314. prod: "https://h5.denetme.net",
  315. pre: "https://preh5.denetme.net",
  316. test: 'https://testh5.denetme.net'
  317. }
  318. const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
  319. const baseURL = api[process.env.NUXT_ENV.MODE]
  320. export default {
  321. name: 'luckdraw',
  322. components: {
  323. FontAmount,CustomCardCover
  324. },
  325. head() {
  326. return {
  327. type: '',
  328. title: this.title,
  329. appVersionCode: appVersionCode,
  330. meta: [
  331. // facebook
  332. {
  333. name: 'og:url',
  334. content: this.jumpUrl + 'luckdraw/' + this.detail.postId
  335. },
  336. {
  337. name: 'og:title',
  338. content: this.metaTitle
  339. },
  340. {
  341. name: 'og:image',
  342. content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
  343. },
  344. // twitter
  345. {
  346. name: 'twitter:card',
  347. content: 'summary_large_image'
  348. },
  349. {
  350. name: 'twitter:url',
  351. content: this.jumpUrl + 'luckdraw/' + this.detail.postId
  352. },
  353. {
  354. name: 'twitter:title',
  355. content: this.metaTitle
  356. },
  357. {
  358. name: 'twitter:image',
  359. content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
  360. }
  361. ]
  362. }
  363. },
  364. data() {
  365. return {
  366. detail: {
  367. postId: '',
  368. postBizData: {
  369. imagePath: '',
  370. postUserInfo: {},
  371. amountValue: '0',
  372. }
  373. },
  374. luck_list: [],
  375. luck_list_end: false,
  376. layer_show: false,
  377. isLoading: true,
  378. isMobile: false,
  379. isChrome: false,
  380. config: {},
  381. mid: '',
  382. status: '', // not-open->未打开 opened->没有抽中 success->抽中了 expire->过期
  383. page_index: 1,
  384. page_size: 20,
  385. validity: '',
  386. receiveAmount: '0',
  387. title: 'DeNet Giveaway',
  388. jumpUrl: jumpUrl,
  389. metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
  390. reportStatus: 'normal',
  391. customCover: '',
  392. customGiveaway: '',
  393. }
  394. },
  395. computed: {
  396. // 货币类型的奖品
  397. isMoneyPrize() {
  398. return this.detail.postBizData.rewardType === RewardType.money;
  399. }
  400. },
  401. mounted() {
  402. this.getConfig()
  403. this.setCookieMid()
  404. this.checkBrowser()
  405. this.handleStatusPage()
  406. this.isLoading = false;
  407. // 复制链接
  408. var clipboard = new ClipboardJS('.btn');
  409. clipboard.on('success', function (e) {
  410. Toast('copy success');
  411. e.clearSelection();
  412. });
  413. clipboard.on('error', function (e) {
  414. this.layer_show = true
  415. });
  416. },
  417. async asyncData(params) {
  418. let { route } = params;
  419. let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
  420. baseInfo: {
  421. appVersionCode: appVersionCode,
  422. mid: function () {
  423. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
  424. var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
  425. return v.toString(16);
  426. });
  427. }()
  428. },
  429. params: {
  430. postId: route.params.id || ''
  431. }
  432. })
  433. if (data.code == 0) {
  434. if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
  435. data.data.postBizData = JSON.parse(data.data.postBizData)
  436. }
  437. if (data.data.postBizData === null) {
  438. data.data.postBizData = {
  439. postUserInfo: {}
  440. }
  441. }
  442. return {
  443. detail: data.data,
  444. customCover: data.data.postBizData && data.data.postBizData.posterType == 2 ? 1 : 0,
  445. customGiveaway: data.data.postBizData && data.data.postBizData.rewardType == 2 ? 1 : 0,
  446. }
  447. }
  448. },
  449. methods: {
  450. checkBrowser() {
  451. this.linkHref = window.location.href;
  452. this.isChrome = isBrowser() == 'chrome';
  453. this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
  454. if (!this.isChrome) {
  455. this.status = 'no-chrome'
  456. } else {
  457. this.setPickupInfo()
  458. }
  459. // report
  460. setTimeout(() => {
  461. this.reportData()
  462. }, 500)
  463. },
  464. async getConfig() {
  465. let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
  466. baseInfo: {
  467. appVersionCode: appVersionCode,
  468. mid: this.mid
  469. },
  470. params: {}
  471. })
  472. if (data.code == 0) {
  473. this.config = data.data;
  474. }
  475. },
  476. setCookieMid() {
  477. let _cookie_mid_arr = Cookies.get('mid') || []
  478. if (_cookie_mid_arr.length > 0) {
  479. this.mid = JSON.parse(_cookie_mid_arr)[0].mid
  480. } else {
  481. this.mid = this.guid()
  482. Cookies.set('mid', JSON.stringify([{ mid: this.mid }]), { expires: 1000 })
  483. }
  484. },
  485. guid() {
  486. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
  487. var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
  488. return v.toString(16);
  489. });
  490. },
  491. clickOpenChrome() {
  492. window.open('https://www.google.com/chrome')
  493. let extParams = this.isMobile ? {} : { status: this.reportStatus }
  494. Report.reportLog({
  495. baseInfo: {
  496. appVersionCode: appVersionCode,
  497. mid: this.mid,
  498. pageSource: Report.pageSource.newUserLandingPage,
  499. appType,
  500. machineCode: this.mid
  501. },
  502. params: {
  503. eventData: {
  504. businessType: Report.businessType.buttonClick,
  505. objectType: Report.objectType.installButton,
  506. postId: this.detail.postId,
  507. srcContentId: this.detail.srcContentId,
  508. senderId: this.detail.srcUserId,
  509. redPacketType: 1,
  510. customCover: this.customCover,
  511. customGiveaway: this.customGiveaway,
  512. },
  513. extParams: extParams
  514. }
  515. })
  516. },
  517. installExtension() {
  518. let { extensionsInstallChannel, extensionsInstallUrl } = this.config;
  519. let extParams = this.isMobile ? {} : { status: this.reportStatus }
  520. Report.reportLog({
  521. baseInfo: {
  522. appVersionCode: appVersionCode,
  523. mid: this.mid,
  524. pageSource: Report.pageSource.newUserLandingPage,
  525. appType,
  526. machineCode: this.mid
  527. },
  528. params: {
  529. eventData: {
  530. businessType: Report.businessType.buttonClick,
  531. objectType: Report.objectType.installButton,
  532. postId: this.detail.postId,
  533. srcContentId: this.detail.srcContentId,
  534. senderId: this.detail.srcUserId,
  535. redPacketType: 1,
  536. customCover: this.customCover,
  537. customGiveaway: this.customGiveaway,
  538. },
  539. extParams: extParams,
  540. }
  541. })
  542. switch (extensionsInstallChannel) {
  543. case "officeDownload":
  544. location.href = url;
  545. this.$router.push({
  546. path: '/install'
  547. })
  548. break;
  549. case "chromeAppStore":
  550. window.open(extensionsInstallUrl)
  551. break;
  552. }
  553. },
  554. setPickupInfo() {
  555. let pickupInfo = {
  556. srcContentId: this.detail.srcContentId || '',
  557. postNickName: this.detail.postBizData.postUserInfo.nickName || '',
  558. createTime: Date.now(),
  559. jump_type: 'luck_draw',
  560. };
  561. Cookies.set('jump_info', JSON.stringify(pickupInfo), { expires: 100 });
  562. },
  563. formatTime(time, _type = 'MM-DD HH:mm:ss') {
  564. return moment(time).format(_type)
  565. },
  566. getValidity(end_time) {
  567. let timer = setInterval(() => {
  568. let time = moment(new Date().getTime())
  569. let endTime = moment(end_time + 5000)
  570. let downTime = (endTime - time) || 0
  571. if (downTime > 0) {
  572. this.validity = formatSecondsAsDaysOrTime(downTime / 1000);
  573. } else {
  574. this.validity = `00:00:00`
  575. this.getDetail(() => {
  576. this.handleStatusPage()
  577. })
  578. clearInterval(timer)
  579. }
  580. }, 1000)
  581. },
  582. handleScroll(e) {
  583. e = e.target
  584. if (this.luck_list_end) {
  585. return
  586. }
  587. if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
  588. this.luck_list_end = false
  589. this.page_index++
  590. this.getReceivedList()
  591. }
  592. },
  593. handleStatusPage() {
  594. // 如果 我领取过了
  595. // taskFinishStatus 任务完成状态(0:未完成,1:已完成,2:已过期)
  596. if (this.detail.postBizData.myReceived) {
  597. this.receiveAmount = this.detail.postBizData.myReceived.amountValue || 0
  598. // 如果 任务完成状态 = 未完成
  599. if (this.detail.postBizData.myReceived.taskFinishStatus == 0) {
  600. // 显示任务未完成页面
  601. this.status = `opened`
  602. } else if (this.detail.postBizData.myReceived.taskFinishStatus == 1) {
  603. //如果 任务完成状态 = 已经完成
  604. if (this.receiveAmount == 0) {
  605. // 领取到空红包
  606. this.status = `opened`
  607. this.reportStatus = `empty`
  608. } else {
  609. // 显示成功页面
  610. this.status = `success`
  611. }
  612. } else {
  613. // 如果 任务完成状态 = 已经过期
  614. if (this.detail.postBizData.status == 1) {
  615. // 显示未打开页面
  616. this.status = 'not-open'
  617. } else {
  618. // 显示已经过期页面
  619. this.status = 'expire'
  620. this.reportStatus = `empty`
  621. }
  622. }
  623. } else {
  624. // 如果 我没有领取过
  625. // 如果 红包状态 = 进行中
  626. if (this.detail.postBizData.status == 1) {
  627. // 如果 过了红包的领取截止时间 = true
  628. if (this.detail.postBizData.receiveTimeExpired) {
  629. // 显示过期页面
  630. this.status = 'expire'
  631. this.reportStatus = `empty`
  632. } else {
  633. // 如果 过了红包的领取截止时间 = false
  634. // 显示未打开页面
  635. this.status = 'not-open'
  636. }
  637. } else {
  638. // 红包状态 = 已经结束了 | 已经终止 | 终止退款中
  639. // 显示过期页面
  640. this.status = 'expire'
  641. this.reportStatus = `empty`
  642. }
  643. }
  644. // getList
  645. if (this.status !== 'not-open') {
  646. this.getReceivedList()
  647. } else {
  648. this.getValidity(this.detail.postBizData.endTimestamp)
  649. }
  650. },
  651. async getDetail(fn) {
  652. let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
  653. baseInfo: {
  654. appVersionCode: appVersionCode,
  655. mid: this.mid
  656. },
  657. params: {
  658. postId: this.detail.postId
  659. }
  660. })
  661. if (data.code == 0) {
  662. this.detail.postBizData = JSON.parse(data.data.postBizData)
  663. this.customCover = this.detail.postBizData && this.detail.postBizData.posterType == 2 ? 1 : 0;
  664. this.customGiveaway = this.detail.postBizData && this.detail.postBizData.rewardType == 2 ? 1 : 0;
  665. if (fn) fn();
  666. }
  667. },
  668. async getReceivedList() {
  669. let { data } = await axios.post(`${baseURL}/denet/post/luckdrop/getReceivedList`, {
  670. baseInfo: {
  671. appVersionCode: appVersionCode,
  672. mid: this.mid
  673. },
  674. params: {
  675. pageNum: this.page_index,
  676. pageSize: this.page_size,
  677. postId: this.detail.postId || ''
  678. }
  679. })
  680. if (data.code == 0) {
  681. if (data.data.length > 0) {
  682. this.luck_list = this.luck_list.concat(data.data)
  683. this.luck_list_end = false
  684. } else {
  685. this.luck_list_end = true
  686. }
  687. }
  688. },
  689. copyLinkHandle() {
  690. Report.reportLog({
  691. baseInfo: {
  692. appVersionCode: appVersionCode,
  693. mid: this.mid,
  694. pageSource: Report.pageSource.mobileLandingPage,
  695. appType,
  696. machineCode: this.mid
  697. },
  698. params: {
  699. eventData: {
  700. businessType: Report.businessType.buttonClick,
  701. objectType: Report.objectType.copyLinkButton,
  702. postId: this.detail.postId || '',
  703. srcContentId: this.detail.srcContentId || '',
  704. senderId: this.detail.srcUserId || '',
  705. redPacketType: 1,
  706. customCover: this.customCover,
  707. customGiveaway: this.customGiveaway,
  708. }
  709. }
  710. })
  711. },
  712. reportData() {
  713. if (this.isMobile) {
  714. // 手机端
  715. Report.reportLog({
  716. baseInfo: {
  717. appVersionCode: appVersionCode,
  718. mid: this.mid,
  719. pageSource: Report.pageSource.mobileLandingPage,
  720. appType,
  721. machineCode: this.mid
  722. },
  723. params: {
  724. eventData: {
  725. businessType: Report.businessType.pageView,
  726. postId: this.detail.postId,
  727. srcContentId: this.detail.srcContentId,
  728. senderId: this.detail.srcUserId,
  729. redPacketType: 1,
  730. customCover: this.customCover,
  731. customGiveaway: this.customGiveaway,
  732. }
  733. }
  734. })
  735. } else if (this.isChrome) {
  736. // pc端
  737. Report.reportLog({
  738. baseInfo: {
  739. appVersionCode: appVersionCode,
  740. mid: this.mid,
  741. pageSource: Report.pageSource.newUserLandingPage,
  742. appType,
  743. machineCode: this.mid
  744. },
  745. params: {
  746. eventData: {
  747. businessType: Report.businessType.pageView,
  748. postId: this.detail.postId,
  749. srcContentId: this.detail.srcContentId,
  750. senderId: this.detail.srcUserId,
  751. redPacketType: 1,
  752. customCover: this.customCover,
  753. customGiveaway: this.customGiveaway,
  754. },
  755. extParams: {
  756. status: this.reportStatus,
  757. }
  758. }
  759. });
  760. } else {
  761. Report.reportLog({
  762. baseInfo: {
  763. appVersionCode: appVersionCode,
  764. mid: this.mid,
  765. pageSource: Report.pageSource.newUserLandingPage,
  766. appType,
  767. machineCode: this.mid
  768. },
  769. params: {
  770. eventData: {
  771. businessType: Report.businessType.pageView,
  772. postId: this.detail.postId,
  773. srcContentId: this.detail.srcContentId,
  774. senderId: this.detail.srcUserId,
  775. redPacketType: 1,
  776. customCover: this.customCover,
  777. customGiveaway: this.customGiveaway,
  778. },
  779. extParams: {
  780. status: 'not-chrome',
  781. }
  782. }
  783. })
  784. }
  785. }
  786. }
  787. }
  788. </script>
  789. <style lang="scss">
  790. html,
  791. body,
  792. #__nuxt,
  793. #__layout {
  794. width: 100%;
  795. height: 100%;
  796. padding: 0;
  797. margin: 0;
  798. }
  799. .content {
  800. overflow: hidden;
  801. width: 100%;
  802. height: 100%;
  803. background: #fff;
  804. .loading {
  805. position: absolute;
  806. transform: translate(-50%, -50%);
  807. top: 50%;
  808. left: 50%;
  809. margin: auto;
  810. width: 40px;
  811. border-radius: 50%;
  812. }
  813. .logo {
  814. display: flex;
  815. align-items: center;
  816. height: 70px;
  817. margin-left: 25px;
  818. img {
  819. width: 99px;
  820. height: 32px;
  821. }
  822. }
  823. .show {
  824. display: flex;
  825. align-items: center;
  826. height: calc(100% - 70px);
  827. .center {
  828. display: flex;
  829. margin: -50px auto 0;
  830. justify-content: space-between;
  831. width: 1000px;
  832. position: relative;
  833. .head-in-custom {
  834. position: absolute;
  835. bottom: 100%;
  836. left: 0;
  837. background: #fff;
  838. display: flex;
  839. align-items: center;
  840. font-weight: 500;
  841. font-size: 15px;
  842. color: #000;
  843. height: 54px;
  844. img {
  845. width: 30px;
  846. height: 30px;
  847. border-radius: 50%;
  848. margin-right: 10px;
  849. }
  850. }
  851. .giveaway {
  852. position: relative;
  853. overflow: hidden;
  854. width: 375px;
  855. height: 500px;
  856. border-radius: 20px;
  857. background-color: #fff;
  858. box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
  859. &.bg {
  860. background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
  861. }
  862. &.custom {
  863. background: unset;
  864. height: auto!important;
  865. }
  866. &.auto-height {
  867. height: auto;
  868. }
  869. .lottery {
  870. position: absolute;
  871. top: 0;
  872. right: 0;
  873. width: 110px;
  874. height: 94px;
  875. }
  876. .head {
  877. display: flex;
  878. height: 50px;
  879. align-items: center;
  880. img {
  881. width: 20px;
  882. height: 20px;
  883. border-radius: 50%;
  884. margin: 0 10px 0 15px;
  885. border: solid 2px #fff;
  886. }
  887. span {
  888. color: #fff;
  889. font-size: 13px;
  890. font-weight: 700;
  891. line-height: 16px;
  892. letter-spacing: 0.005em;
  893. }
  894. }
  895. .price {
  896. text-align: center;
  897. .usdt {
  898. margin: 10px 0;
  899. color: #FFFFFF;
  900. font-weight: bold;
  901. font-size: 16px;
  902. line-height: 20px;
  903. text-align: center;
  904. letter-spacing: 0.3px;
  905. }
  906. .money {
  907. display: flex;
  908. align-items: center;
  909. justify-content: center;
  910. img {
  911. width: 46px;
  912. height: 46px;
  913. margin-right: 15px;
  914. border-radius: 50%;
  915. border: solid 3px #fff;
  916. }
  917. span {
  918. color: #fff;
  919. font-size: 60px;
  920. font-weight: 800;
  921. line-height: 76px;
  922. }
  923. }
  924. }
  925. .time {
  926. display: flex;
  927. height: 46px;
  928. color: #FFCC4D;
  929. align-items: center;
  930. justify-content: center;
  931. font-weight: bold;
  932. font-size: 26px;
  933. line-height: 33px;
  934. text-align: center;
  935. background: rgba($color: #000000, $alpha: .15);
  936. .img {
  937. width: 26px;
  938. margin-right: 10px;
  939. }
  940. }
  941. .box {
  942. margin: auto;
  943. width: 200px;
  944. height: 200px;
  945. margin-top: 27px;
  946. img {
  947. width: 100%;
  948. height: 100%;
  949. }
  950. }
  951. }
  952. .desc {
  953. width: 520px;
  954. .title {
  955. color: #2C2C2C;
  956. font-size: 36px;
  957. line-height: 40px;
  958. font-weight: 900;
  959. margin-top: 90px;
  960. margin-bottom: 20px;
  961. }
  962. .issue {
  963. font-size: 15px;
  964. color: #A4A4A4;
  965. }
  966. .button {
  967. cursor: pointer;
  968. height: 64px;
  969. margin-top: 30px;
  970. }
  971. }
  972. }
  973. }
  974. }
  975. .small {
  976. width: 100%;
  977. height: 100%;
  978. position: relative;
  979. background-color: #fff;
  980. &.bg {
  981. background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
  982. }
  983. &.custom {
  984. background: #111214!important;
  985. }
  986. .lottery {
  987. position: absolute;
  988. top: 0;
  989. right: 0;
  990. width: 110px;
  991. height: 94px;
  992. }
  993. .luck-list {
  994. height: calc(100% - 430px);
  995. }
  996. .head {
  997. display: flex;
  998. height: 50px;
  999. align-items: center;
  1000. img {
  1001. width: 20px;
  1002. height: 20px;
  1003. border-radius: 50%;
  1004. margin: 0 10px 0 15px;
  1005. border: solid 2px #fff;
  1006. }
  1007. span {
  1008. color: #fff;
  1009. font-size: 13px;
  1010. font-weight: 700;
  1011. line-height: 16px;
  1012. letter-spacing: 0.005em;
  1013. }
  1014. }
  1015. .price {
  1016. text-align: center;
  1017. .usdt {
  1018. margin: 10px 0;
  1019. color: #FFFFFF;
  1020. font-weight: bold;
  1021. font-size: 16px;
  1022. line-height: 20px;
  1023. text-align: center;
  1024. letter-spacing: 0.3px;
  1025. }
  1026. .money {
  1027. display: flex;
  1028. align-items: center;
  1029. justify-content: center;
  1030. img {
  1031. width: 46px;
  1032. height: 46px;
  1033. margin-right: 15px;
  1034. border-radius: 50%;
  1035. border: solid 3px #fff;
  1036. }
  1037. span {
  1038. color: #fff;
  1039. font-size: 60px;
  1040. font-weight: 800;
  1041. line-height: 76px;
  1042. }
  1043. }
  1044. }
  1045. .time {
  1046. display: flex;
  1047. height: 46px;
  1048. color: #FFCC4D;
  1049. align-items: center;
  1050. justify-content: center;
  1051. font-weight: bold;
  1052. font-size: 26px;
  1053. line-height: 33px;
  1054. text-align: center;
  1055. background: rgba($color: #000000, $alpha: .15);
  1056. .img {
  1057. width: 26px;
  1058. margin-right: 10px;
  1059. }
  1060. }
  1061. .box {
  1062. margin: auto;
  1063. width: 200px;
  1064. height: 200px;
  1065. margin-top: 27px;
  1066. img {
  1067. width: 100%;
  1068. height: 100%;
  1069. }
  1070. }
  1071. .area-cp-link {
  1072. position: absolute;
  1073. bottom: 0;
  1074. background: #fff;
  1075. overflow: hidden;
  1076. width: 100%;
  1077. flex-wrap: wrap;
  1078. height: 238px;
  1079. box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
  1080. border-top-left-radius: 10px;
  1081. border-top-right-radius: 10px;
  1082. .area-list {
  1083. clear: both;
  1084. margin: 15px;
  1085. .item {
  1086. clear: both;
  1087. overflow: hidden;
  1088. margin: 7px 0;
  1089. font-size: 16px;
  1090. font-weight: 500;
  1091. .icon {
  1092. float: left;
  1093. margin-right: 8px;
  1094. margin-top: -2px;
  1095. }
  1096. .font {
  1097. float: left;
  1098. margin-right: 8px;
  1099. }
  1100. .pc {
  1101. float: left;
  1102. margin-top: -2px;
  1103. }
  1104. }
  1105. }
  1106. .area-content {
  1107. margin: 0 15px;
  1108. color: #4B4B4B;
  1109. padding: 7px 10px;
  1110. font-size: 13px;
  1111. border-radius: 5px;
  1112. background: #F4F4F4;
  1113. word-break: break-all;
  1114. }
  1115. .area-btn {
  1116. flex: 1;
  1117. display: flex;
  1118. justify-content: center;
  1119. .btn {
  1120. margin: 15px 15px 0 15px;
  1121. display: inline-block;
  1122. width: 100%;
  1123. height: 47px;
  1124. font-size: 18px;
  1125. line-height: 34px;
  1126. color: #FFFFFF;
  1127. border-radius: 100px;
  1128. background: #389AFF;
  1129. }
  1130. }
  1131. }
  1132. }
  1133. .layer {
  1134. position: fixed;
  1135. width: 100%;
  1136. height: 100%;
  1137. top: 0;
  1138. left: 0;
  1139. background: rgba(0, 0, 0, .5);
  1140. .layer-box {
  1141. width: 300px;
  1142. height: 170px;
  1143. background: #FFFFFF;
  1144. border-radius: 11px;
  1145. opacity: 1;
  1146. position: absolute;
  1147. top: 250px;
  1148. left: 50%;
  1149. margin-left: -150px;
  1150. .layer-txt {
  1151. margin: 30px 0;
  1152. width: 100%;
  1153. padding: 0 27px;
  1154. font-weight: 600;
  1155. font-size: 18px;
  1156. text-align: center;
  1157. }
  1158. .layer-btn {
  1159. width: 190px;
  1160. height: 40px;
  1161. background: #389AFF;
  1162. border-radius: 100px;
  1163. margin: 0 auto;
  1164. text-align: center;
  1165. line-height: 40px;
  1166. color: #fff;
  1167. font-weight: 600;
  1168. font-size: 18px;
  1169. }
  1170. }
  1171. }
  1172. .luck-list {
  1173. flex: 1;
  1174. width: 100%;
  1175. height: 310px;
  1176. overflow-y: auto;
  1177. .luck-item {
  1178. display: flex;
  1179. padding: 12px 0;
  1180. margin: 0 16px;
  1181. border-bottom: 1px solid #F2F2F2;
  1182. justify-content: space-between;
  1183. position: relative;
  1184. .header {
  1185. border-radius: 50%;
  1186. }
  1187. .luck-king {
  1188. position: absolute;
  1189. top: 36px;
  1190. right: 0px;
  1191. display: flex;
  1192. align-items: center;
  1193. img {
  1194. width: 22px;
  1195. height: 19px;
  1196. margin: 0;
  1197. }
  1198. span {
  1199. font-weight: 500;
  1200. font-size: 12px;
  1201. line-height: 14px;
  1202. letter-spacing: 0.3px;
  1203. color: #f5b945;
  1204. }
  1205. }
  1206. .userLogo {
  1207. position: relative;
  1208. width: 42px;
  1209. height: 42px;
  1210. margin-right: 12px;
  1211. .medal {
  1212. position: absolute;
  1213. right: -5px;
  1214. bottom: -5px;
  1215. width: 18px;
  1216. height: 18px;
  1217. }
  1218. img {
  1219. width: 100%;
  1220. height: 100%;
  1221. }
  1222. }
  1223. .luck-content {
  1224. flex: auto;
  1225. .luck-title {
  1226. font-weight: 500;
  1227. font-size: 16px;
  1228. letter-spacing: 0.3px;
  1229. color: #444444;
  1230. }
  1231. .luck-time {
  1232. font-weight: 400;
  1233. font-size: 12px;
  1234. line-height: 14px;
  1235. color: #9b9b9b;
  1236. }
  1237. }
  1238. .luck-money {
  1239. display: flex;
  1240. height: 17px;
  1241. align-items: center;
  1242. img {
  1243. width: 14px;
  1244. height: 14px;
  1245. margin-right: 6px;
  1246. }
  1247. .luck-money-txt {
  1248. font-weight: 500;
  1249. font-size: 14px;
  1250. /* identical to box height */
  1251. text-align: right;
  1252. letter-spacing: 0.3px;
  1253. color: #444444;
  1254. }
  1255. }
  1256. .luck-custom-prize {
  1257. font-weight: 500;
  1258. font-size: 14px;
  1259. letter-spacing: 0.3px;
  1260. color: #F5B945;
  1261. }
  1262. }
  1263. .luck-item:last-child {
  1264. border: 0;
  1265. }
  1266. }
  1267. .succTop {
  1268. display: flex;
  1269. align-items: center;
  1270. flex-direction: column;
  1271. justify-content: center;
  1272. height: 150px;
  1273. margin-bottom: 13px;
  1274. background: #7D52FD;
  1275. border-radius: 0 586px 586px/0 0 104px 104px;
  1276. .img {
  1277. height: 62px;
  1278. }
  1279. .expire {
  1280. color: #FFFFFF;
  1281. font-size: 22px;
  1282. font-weight: 800;
  1283. line-height: 36px;
  1284. margin-top: 15px;
  1285. text-align: center;
  1286. }
  1287. .tips {
  1288. color: #FFFFFF;
  1289. font-size: 22px;
  1290. font-weight: 800;
  1291. line-height: 26px;
  1292. margin-top: 15px;
  1293. }
  1294. .win {
  1295. font-size: 21px;
  1296. font-weight: 800;
  1297. color: #fff;
  1298. }
  1299. .win-money {
  1300. display: flex;
  1301. margin-top: -10px;
  1302. align-items: center;
  1303. justify-content: center;
  1304. img {
  1305. width: 44px;
  1306. height: 44px;
  1307. margin-right: 15px;
  1308. border-radius: 50%;
  1309. border: solid 3px #fff;
  1310. }
  1311. span {
  1312. color: #fff;
  1313. font-size: 60px;
  1314. font-weight: 800;
  1315. line-height: 76px;
  1316. }
  1317. }
  1318. }
  1319. .succTitle {
  1320. display: flex;
  1321. padding: 5px 0;
  1322. justify-content: space-between;
  1323. box-shadow: inset 0px -1px 0px #F2F2F2;
  1324. span {
  1325. margin: 0 16px;
  1326. font-size: 12px;
  1327. color: #B0B0B0;
  1328. &:last-child {
  1329. text-align: right;
  1330. }
  1331. }
  1332. }
  1333. .customImg {
  1334. width: 100%;
  1335. min-height: 373px;
  1336. }
  1337. .customBottom {
  1338. width: 100%;
  1339. background:#111214;
  1340. padding: 10px 16px;
  1341. font-weight: 500;
  1342. font-size: 12px;
  1343. line-height: 14px;
  1344. letter-spacing: 0.3px;
  1345. color: #838383;
  1346. line-height: 20px;
  1347. .theme {
  1348. display: flex;
  1349. height: 20px;
  1350. align-items: center;
  1351. justify-content: flex-start;
  1352. .icon {
  1353. width: 12px;
  1354. }
  1355. .time2 {
  1356. margin: 0 4px;
  1357. color: #1D9BF0;
  1358. }
  1359. }
  1360. .winner-info {
  1361. display: flex;
  1362. height: 20px;
  1363. align-items: center;
  1364. justify-content: flex-start;
  1365. .count{
  1366. color: #1D9BF0;
  1367. margin-right: 4px;
  1368. }
  1369. .prize-name {
  1370. color: #1D9BF0;
  1371. margin-left: 4px;
  1372. }
  1373. }
  1374. }
  1375. </style>