red-packet.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178
  1. <template>
  2. <div class="content">
  3. <!-- open -->
  4. <div v-if="data.status == 'opened'" class="opened">
  5. <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
  6. <div class="title">Awesome! You Will Get</div>
  7. <div class="money">
  8. <img :src="require('../assets/svg/icon-dollar.svg')" alt />
  9. <span class="big">{{ data.money / 100 }}</span>
  10. <span class="small">{{ data.detail.amountCurrencyCode || '' }}</span>
  11. </div>
  12. </div>
  13. <div class="list">
  14. <div class="item" v-for="item, i in data.detail.taskCondition" v-bind:key="i">
  15. <template v-if="item.type == 1 && item.relatedUser && item.relatedUsers.length > 0">
  16. <div class="item-content">
  17. <div class="item-follow-title">
  18. <img :src="require('../assets/svg/icon-follow.svg')" alt />
  19. <div class="item-title">Follow</div>
  20. <img v-if="data.done.follow" :src="require('../assets/svg/icon-true.svg')" alt />
  21. <div v-else class="btn" @click="clickFollowAll(item.relatedUsers)">Follow All</div>
  22. </div>
  23. <div class="item-follow-area">
  24. <div class="item-follow" v-for="item2, i in item.relatedUsers" v-bind:key="i">
  25. <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
  26. <img v-if="item2.finished" :src="require('../assets/svg/icon-true-ed.svg')" alt />
  27. <img v-else :src="require('../assets/svg/icon-add.svg')" alt />
  28. </div>
  29. </div>
  30. </div>
  31. </template>
  32. <template v-if="item.type == 2">
  33. <img :src="require('../assets/svg/icon-like.svg')" alt />
  34. <div class="item-content">
  35. <div class="item-title">Like</div>
  36. </div>
  37. <img v-if="data.done.like" :src="require('../assets/svg/icon-true.svg')" alt />
  38. <div v-else class="btn" @click="clickLickBtn">Like</div>
  39. </template>
  40. <template v-if="item.type == 3">
  41. <img :src="require('../assets/svg/icon-retweet.svg')" alt />
  42. <div class="item-content">
  43. <div class="item-title">Retweet</div>
  44. </div>
  45. <img v-if="data.done.retweet" :src="require('../assets/svg/icon-true.svg')" alt />
  46. <div v-else class="btn" @click="clickRetweetBtn">Retweet</div>
  47. </template>
  48. </div>
  49. </div>
  50. <div class="people" @click="clickRoad">
  51. <div class="txt">Total ${{ data.detail.amountValue }} USD,{{ data.detail.receiveCount || 0 }}/{{
  52. data.detail.totalCount || 0
  53. }} People Got</div>
  54. <div class="right">
  55. <template v-for="item, i in data.detail.allReceived.slice(0, 3)" v-bind:key="i">
  56. <img :src="item.simpleUserInfoVO.avatarUrl" alt :style="{ right: `${i * 16 + 14}px` }"
  57. v-if="item.simpleUserInfoVO.avatarUrl" />
  58. <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt :style="{ right: `${i * 16 + 14}px` }" />
  59. </template>
  60. <img :src="require('../assets/svg/icon-right.svg')" alt class="road" />
  61. </div>
  62. </div>
  63. <div class="footer">
  64. <div class="first">
  65. <div class="validity">Validity</div>
  66. <div class="time">{{ data.detail.validity || '' }}</div>
  67. </div>
  68. <div class="btn" @click="clickGetGiveways">Get Giveaways</div>
  69. </div>
  70. </div>
  71. <!-- success -->
  72. <div v-else-if="data.status == 'success'" class="success">
  73. <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
  74. <div class="money">
  75. <img :src="require('../assets/svg/icon-dollar.svg')" alt />
  76. <span class="big">{{ data.money / 100 }}</span>
  77. <span class="small">USD</span>
  78. </div>
  79. <div class="done" @click="clickDone">
  80. <img :src="require('../assets/svg/icon-done.svg')" alt class="icon-done" />
  81. <span>Giveaways transferred to Wallet</span>
  82. <img :src="require('../assets/svg/icon-right.svg')" alt class="icon-right" />
  83. </div>
  84. </div>
  85. <div class="luck-list-title">
  86. <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
  87. <div>Total ${{ data.detail.amountValue || '' }} {{ data.detail.amountCurrencyCode || '' }}</div>
  88. </div>
  89. <div class="luck-list" @scroll="handleScroll($event)">
  90. <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
  91. <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
  92. <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
  93. <div class="luck-content">
  94. <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
  95. <div class="luck-title" v-else>Twitter User</div>
  96. <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
  97. </div>
  98. <div class="luck-money">
  99. <img :src="require('../assets/svg/icon-dollar.svg')" alt />
  100. <div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) || 0 }}</div>
  101. </div>
  102. <div class="luck-king" v-if="item.maxAmount">
  103. <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
  104. <span>Luckiest Draw</span>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <!-- no-open -->
  110. <div v-else-if="data.status == 'not-open'" class="not-open">
  111. <img :src="require('../assets/img/up.png')" alt class="up" />
  112. <img :src="require('../assets/img/down.png')" alt class="down" />
  113. <div class="open" @click="clickOpenRedPacket">OPEN</div>
  114. </div>
  115. <!-- 领取列表 -->
  116. <div v-else-if="data.status == 'luck-peopel-list'" class="luck-peopel-list">
  117. <div class="head">
  118. <img :src="require('../assets/svg/icon-back.svg')" alt @click="clickBack" />
  119. </div>
  120. <div class="luck-list-title">
  121. <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
  122. <div>Total ${{ data.detail.amountValue || 0 }} {{ data.detail.amountCurrencyCode || '' }}</div>
  123. </div>
  124. <div class="luck-list" @scroll="handleScroll">
  125. <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
  126. <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
  127. <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
  128. <div class="luck-content">
  129. <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
  130. <div class="luck-title" v-else>Twitter User</div>
  131. <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
  132. </div>
  133. <div class="luck-money">
  134. <img :src="require('../assets/svg/icon-dollar.svg')" alt />
  135. <div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) }}</div>
  136. </div>
  137. <div class="luck-king" v-if="item.maxAmount">
  138. <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
  139. <span>Luckiest Draw</span>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. <!-- 红包被领完了 -->
  145. <div v-else-if="data.status == 'close'" class="close">
  146. <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
  147. <div class="close-title">{{ data.close_title }}</div>
  148. </div>
  149. <div class="luck-list-title">
  150. <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
  151. <div>Total ${{ data.detail.amountValue || 0 }} {{ data.detail.amountCurrencyCode || '' }}</div>
  152. </div>
  153. <div class="luck-list" @scroll="handleScroll">
  154. <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
  155. <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
  156. <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
  157. <div class="luck-content">
  158. <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
  159. <div class="luck-title" v-else>Twitter User</div>
  160. <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
  161. </div>
  162. <div class="luck-money">
  163. <img :src="require('../assets/svg/icon-dollar.svg')" alt />
  164. <div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) || 0 }}</div>
  165. </div>
  166. <div class="luck-king" v-if="item.maxAmount">
  167. <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
  168. <span>Luckiest Draw</span>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. <!-- error -->
  174. <div v-else-if="data.status == 'error'" class="error">
  175. <img :src="require('../assets/svg/icon-error.svg')" alt />
  176. <div class="txt">
  177. {{ data.error_txt }}
  178. </div>
  179. </div>
  180. <!-- loading -->
  181. <div v-show="data.loading_show" class="loading">
  182. <img :src="require('../assets/svg/icon-loading.svg')" alt />
  183. </div>
  184. </div>
  185. </template>
  186. <script>
  187. export default {
  188. name: 'redPacket',
  189. }
  190. </script>
  191. <script setup>
  192. import { onMounted, reactive } from "vue";
  193. import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList } from '../http/redPacket.js'
  194. import { getQueryString } from '../uilts/help.js'
  195. import { getChromeStorage } from '../uilts/chromeExtension.js'
  196. var moment = require('moment');
  197. let data = reactive({
  198. status: '',
  199. loading_show: false,
  200. detail: {},
  201. luck_list_end: false,
  202. page_index: 1,
  203. page_size: 20,
  204. srcContentId: '',
  205. close_title: 'Better luck next time!',
  206. error_txt: `oops, new accounts cannot participate in this event,`,
  207. receiveAmount: 0,
  208. money: 0,
  209. // 状态
  210. done: {
  211. follow: false,
  212. like: false,
  213. retweet: false
  214. }
  215. })
  216. async function clickLickBtn() {
  217. let _userInfo = await checkIsLogin()
  218. if (!_userInfo) {
  219. return
  220. }
  221. data.loading_show = true
  222. oneKeyLike({
  223. params: {
  224. tweetId: data.srcContentId
  225. }
  226. }).then((res) => {
  227. data.loading_show = false
  228. if (res.code == 0) {
  229. if (res.data.result) {
  230. data.done.like = true
  231. } else {
  232. data.done.like = false
  233. }
  234. } else {
  235. data.done.like = false
  236. console.log(res)
  237. }
  238. })
  239. }
  240. function clickDone() {
  241. window.open(`${chrome.runtime.getURL('/iframe/home.html')}`)
  242. }
  243. function handleScroll(e) {
  244. if (data.luck_list_end) {
  245. return
  246. }
  247. e = e.target
  248. if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
  249. data.luck_list_end = true
  250. data.page_index++
  251. getReceivedList({
  252. params: {
  253. pageNum: data.page_index,
  254. pageSize: data.page_size,
  255. postId: data.postId
  256. }
  257. }).then((res) => {
  258. if (res.code == 0) {
  259. if (res.data.length > 0) {
  260. data.detail.allReceived = data.detail.allReceived.concat(res.data)
  261. data.luck_list_end = false
  262. } else {
  263. data.luck_list_end = true
  264. }
  265. } else {
  266. console.log('getReceivedList', res)
  267. }
  268. })
  269. }
  270. }
  271. async function clickRetweetBtn() {
  272. let _userInfo = await checkIsLogin()
  273. if (!_userInfo) {
  274. return
  275. }
  276. data.loading_show = true
  277. oneKeyReTweet({
  278. params: {
  279. tweetId: data.srcContentId
  280. }
  281. }).then((res) => {
  282. data.loading_show = false
  283. if (res.code == 0) {
  284. if (res.data.result) {
  285. data.done.retweet = true
  286. } else {
  287. data.done.retweet = false
  288. }
  289. } else {
  290. data.done.retweet = false
  291. console.log(res)
  292. }
  293. })
  294. }
  295. function getValidity() {
  296. let _d1, _d2, _d3, _h, _m, _s
  297. if (!data.detail.myReceived.taskEndTimestamp) {
  298. return
  299. }
  300. let timer = setInterval(() => {
  301. let _time = new Date().getTime()
  302. _d3 = data.detail.myReceived.taskEndTimestamp - _time
  303. if (_d3 > 0) {
  304. _d1 = moment(data.detail.myReceived.taskEndTimestamp)
  305. _d2 = moment(_time)
  306. _h = moment.duration(_d1.diff(_d2)).hours()
  307. _m = moment.duration(_d1.diff(_d2)).minutes()
  308. _s = moment.duration(_d1.diff(_d2)).seconds()
  309. data.detail.validity = `${_h}:${_m}:${_s}`
  310. } else {
  311. clearInterval(timer)
  312. }
  313. }, 1000)
  314. }
  315. async function clickFollowAll(item) {
  316. let _userInfo = await checkIsLogin()
  317. if (!_userInfo) {
  318. return
  319. }
  320. data.loading_show = true
  321. let arr_name = []
  322. for (let i in item) {
  323. arr_name.push(item[i].name)
  324. }
  325. oneKeyFollow({
  326. params: {
  327. names: arr_name
  328. }
  329. }).then((res) => {
  330. data.loading_show = false
  331. if (res.code == 0) {
  332. res.data.forEach((item1) => {
  333. data.detail.taskCondition[0].relatedUsers.forEach(item2 => {
  334. if (item1.name == item2.name) {
  335. item2.finished = true
  336. }
  337. });
  338. })
  339. let _len = data.detail.taskCondition[0].relatedUsers.filter((item) => { return item.finished == false }).length
  340. if (_len > 0) {
  341. data.done.follow = false
  342. } else {
  343. data.done.follow = true
  344. }
  345. } else {
  346. data.detail.taskCondition[0].relatedUsers.forEach(item => {
  347. item.finished = false
  348. });
  349. }
  350. })
  351. }
  352. function showLastTwoPlace(n) {
  353. return n / 100
  354. }
  355. function init() {
  356. getPostDetail({
  357. params: {
  358. postId: data.postId
  359. }
  360. }).then((res) => {
  361. switch (res.code.toString()) {
  362. case "0":
  363. data.srcContentId = res.data.srcContentId
  364. // if (data.tweetId != data.srcContentId) {
  365. // data.error_txt = 'Giveways link Error'
  366. // data.status = 'error'
  367. // return
  368. // }
  369. data.detail = JSON.parse(res.data.postBizData)
  370. console.log(data.detail)
  371. // 未开始
  372. if (data.detail.status == 0) {
  373. data.status = 'not-open'
  374. // 进行中
  375. } else if (data.detail.status == 1) {
  376. if (data.detail.myReceived) {
  377. data.status = 'opened'
  378. data.money = data.detail.myReceived.amountValue
  379. if (data.detail.myReceived.taskFinishStatus == 1) {
  380. data.status = 'success'
  381. }
  382. if (data.detail.myReceived.taskFinishStatus == 2) {
  383. data.status = 'close'
  384. data.close_title = res.msg
  385. }
  386. initTaskDetail()
  387. getValidity()
  388. } else if (data.detail.totalCount == data.detail.receiveCount) {
  389. data.status = 'close'
  390. data.close_title = 'Better luck next time!'
  391. } else {
  392. data.status = 'not-open'
  393. }
  394. data.detail.taskCondition = JSON.parse(data.detail.taskCondition)
  395. data.detail.amountValue = showLastTwoPlace(data.detail.amountValue)
  396. data.detail.receiveAmountValue = showLastTwoPlace(data.detail.receiveAmountValue)
  397. // 已结束
  398. } else if (data.detail.status == 2) {
  399. data.status = 'close'
  400. }
  401. break
  402. }
  403. })
  404. }
  405. function initTaskDetail() {
  406. // 任务详情
  407. getTaskDetail({
  408. params: {
  409. postId: data.postId
  410. }
  411. }).then((res) => {
  412. if (res.code == 0) {
  413. for (let i in res.data) {
  414. switch (res.data[i].type) {
  415. case 1:
  416. data.done.follow = res.data[i].finished
  417. data.detail.taskCondition[0].relatedUsers = res.data[i].detail
  418. break
  419. case 2:
  420. data.done.like = res.data[i].finished
  421. break
  422. case 3:
  423. data.done.retweet = res.data[i].finished
  424. break
  425. }
  426. }
  427. } else {
  428. console.log(res.msg)
  429. }
  430. })
  431. }
  432. onMounted(() => {
  433. data.postId = getQueryString('postId')
  434. data.tweetId = getQueryString('tweetId')
  435. init()
  436. // data.loading_show = true
  437. })
  438. // 点击领取
  439. function clickOpenRedPacket() {
  440. // getChromeStorage("userInfo", (_res) => {
  441. // // 1.没有登陆
  442. // if (!_res) {
  443. // // 2.查看cookie里是否有
  444. // getChromeCookie(LANDING_PAGE, (res_arr) => {
  445. // //
  446. // // if (res_arr.length > 0) {
  447. // // let _res = res_arr.filter((item) => { return item.postId == data.postId })[0] || null
  448. // // if (_res) {
  449. // // data.status = 'opened'
  450. // // data.money = _res.receiveAmount
  451. // // }
  452. // // } else {
  453. // // }
  454. // // handleRedPacket()
  455. // })
  456. // } else {
  457. // handleRedPacket()
  458. // }
  459. // })
  460. handleRedPacket()
  461. }
  462. function handleRedPacket() {
  463. getRedPacket({
  464. params: {
  465. postId: data.postId
  466. }
  467. }).then((res) => {
  468. switch (res.code.toString()) {
  469. case "0":
  470. data.status = 'opened'
  471. data.money = res.data.receiveAmount
  472. init()
  473. break
  474. case "2008":
  475. data.status = 'close'
  476. data.close_title = 'Better luck next time!'
  477. break
  478. }
  479. })
  480. }
  481. chrome.storage.onChanged.addListener(changes => {
  482. if (changes.userInfo) {
  483. // let item = JSON.parse(changes.userInfo.newValue)
  484. data.loading_show = false
  485. }
  486. })
  487. // 校验是否封路
  488. function checkIsLogin() {
  489. return new Promise((resolve) => {
  490. getChromeStorage('userInfo', (_userInfo) => {
  491. if (!_userInfo) {
  492. data.loading_show = true
  493. chrome.runtime.sendMessage(
  494. { method: "POPUP_LOGIN", data: "" },
  495. (response) => {
  496. console.log("res", response);
  497. }
  498. )
  499. resolve(_userInfo)
  500. } else {
  501. resolve(_userInfo)
  502. }
  503. })
  504. })
  505. }
  506. async function clickGetGiveways() {
  507. let _userInfo = await checkIsLogin()
  508. if (_userInfo) {
  509. handleFinishRedPacket()
  510. }
  511. }
  512. function handleFinishRedPacket() {
  513. data.loading_show = true
  514. finishRedPacket({
  515. params: {
  516. postId: data.postId
  517. }
  518. }).then((res) => {
  519. data.loading_show = false
  520. switch (res.code.toString()) {
  521. case '0':
  522. if (res.data.finished) {
  523. data.status = 'success'
  524. data.receiveAmount = res.data.receiveAmount
  525. init()
  526. } else {
  527. let _data = res.data.conditionResult
  528. for (let i in _data) {
  529. switch (_data[i].type.toString()) {
  530. case '1':
  531. if (_data[i].finished) {
  532. data.detail.taskCondition[0].relatedUsers = _data[i].detail
  533. data.done.follow = true
  534. } else {
  535. alert('关注未完成')
  536. }
  537. break
  538. case '2':
  539. if (_data[i].finished) {
  540. data.done.like = true
  541. } else {
  542. alert('like未完成')
  543. }
  544. break
  545. case '3':
  546. if (_data[i].finished) {
  547. data.done.retweet = true
  548. } else {
  549. alert('转推未完成')
  550. }
  551. break
  552. }
  553. }
  554. }
  555. break
  556. case "2009":
  557. data.error_txt = `oops, new accounts cannot participate in this event,`
  558. data.status = 'error'
  559. break
  560. default:
  561. alert(res.msg)
  562. }
  563. })
  564. }
  565. function clickBack() {
  566. data.status = 'opened'
  567. }
  568. function clickRoad() {
  569. data.status = 'luck-peopel-list'
  570. }
  571. </script>
  572. <style lang="scss">
  573. html,
  574. body {
  575. margin: 0;
  576. padding: 0;
  577. }
  578. .content {
  579. width: 375px;
  580. height: 500px;
  581. background: #fafafa;
  582. border-radius: 11px;
  583. font-family: "SF Pro Display";
  584. font-style: normal;
  585. .loading {
  586. background: #FFFFFF;
  587. opacity: 0.8;
  588. z-index: 222;
  589. text-align: center;
  590. width: 375px;
  591. height: 500px;
  592. position: fixed;
  593. top: 0;
  594. left: 0;
  595. img {
  596. margin-top: 216px;
  597. width: 70px;
  598. height: 70px;
  599. }
  600. }
  601. .error {
  602. text-align: center;
  603. img {
  604. width: 160px;
  605. height: 160px;
  606. margin-top: 80px;
  607. }
  608. .txt {
  609. font-weight: 500;
  610. font-size: 22px;
  611. line-height: 26px;
  612. text-align: center;
  613. letter-spacing: 0.3px;
  614. color: #a8a8a8;
  615. margin: 34px 44px 0 44px;
  616. }
  617. }
  618. .success,
  619. .close,
  620. .luck-peopel-list {
  621. filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
  622. width: 100%;
  623. height: 100%;
  624. border-radius: 11px;
  625. background: #fff;
  626. overflow: hidden;
  627. display: flex;
  628. flex-direction: column;
  629. .close-title {
  630. font-weight: 600;
  631. font-size: 27px;
  632. line-height: 32px;
  633. text-align: center;
  634. letter-spacing: 0.3px;
  635. color: #ffffff;
  636. }
  637. .head {
  638. padding: 14px 16px;
  639. img {
  640. cursor: pointer;
  641. width: 24px;
  642. height: 24px;
  643. }
  644. }
  645. .header {
  646. text-align: center;
  647. height: 120px;
  648. width: 100%;
  649. background: #fff;
  650. padding-top: 30px;
  651. background-size: 100% 100%;
  652. position: relative;
  653. .done {
  654. cursor: pointer;
  655. position: absolute;
  656. top: 107px;
  657. left: 50%;
  658. margin-left: -150px;
  659. width: 300px;
  660. height: 60px;
  661. display: flex;
  662. align-items: center;
  663. border-radius: 100px;
  664. background: #ffffff;
  665. box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  666. span {
  667. color: #000000;
  668. font-size: 14px;
  669. }
  670. .icon-done {
  671. width: 24px;
  672. height: 24px;
  673. margin-left: 28px;
  674. margin-right: 10px;
  675. }
  676. .icon-right {
  677. margin-left: 5px;
  678. width: 7px;
  679. height: 14px;
  680. }
  681. }
  682. .title {
  683. color: #fff7e4;
  684. opacity: 0.6;
  685. font-weight: 700;
  686. font-size: 18px;
  687. line-height: 21px;
  688. letter-spacing: -0.3px;
  689. }
  690. .money {
  691. margin-top: 16px;
  692. img {
  693. width: 40px;
  694. height: 40px;
  695. margin-right: 9px;
  696. }
  697. .big {
  698. font-weight: 700;
  699. font-size: 46px;
  700. line-height: 55px;
  701. /* identical to box height */
  702. letter-spacing: 0.3px;
  703. color: #fff8e6;
  704. }
  705. .small {
  706. margin-left: 4px;
  707. font-weight: 700;
  708. font-size: 13px;
  709. line-height: 16px;
  710. /* identical to box height */
  711. letter-spacing: 0.5px;
  712. color: #fff8e6;
  713. }
  714. }
  715. }
  716. .luck-list-title {
  717. /* margin-top: 47px;*/
  718. padding: 0 16px;
  719. background: #fff;
  720. color: #9b9b9b;
  721. display: flex;
  722. justify-content: space-between;
  723. }
  724. .luck-list {
  725. background: #fff;
  726. overflow: auto;
  727. .luck-item {
  728. display: flex;
  729. padding: 12px 16px;
  730. border-top: 1px solid #d1d1d1;
  731. justify-content: space-between;
  732. position: relative;
  733. img:first-child {
  734. border-radius: 50%;
  735. }
  736. .luck-king {
  737. position: absolute;
  738. top: 36px;
  739. right: 16px;
  740. display: flex;
  741. align-items: center;
  742. img {
  743. width: 22px;
  744. height: 19px;
  745. margin: 0;
  746. }
  747. span {
  748. font-weight: 500;
  749. font-size: 12px;
  750. line-height: 14px;
  751. letter-spacing: 0.3px;
  752. color: #f5b945;
  753. }
  754. }
  755. img {
  756. width: 42px;
  757. height: 42px;
  758. margin-right: 12px;
  759. }
  760. .luck-content {
  761. flex: auto;
  762. .luck-title {
  763. font-weight: 500;
  764. font-size: 16px;
  765. letter-spacing: 0.3px;
  766. color: #444444;
  767. }
  768. .luck-time {
  769. font-weight: 400;
  770. font-size: 12px;
  771. line-height: 14px;
  772. color: #9b9b9b;
  773. }
  774. }
  775. .luck-money {
  776. display: flex;
  777. height: 17px;
  778. align-items: center;
  779. img {
  780. width: 14px;
  781. height: 14px;
  782. margin-right: 6px;
  783. }
  784. .luck-money-txt {
  785. font-weight: 500;
  786. font-size: 14px;
  787. /* identical to box height */
  788. text-align: right;
  789. letter-spacing: 0.3px;
  790. color: #444444;
  791. }
  792. }
  793. }
  794. }
  795. }
  796. .success {
  797. .luck-list-title {
  798. margin-top: 47px;
  799. }
  800. }
  801. .opened {
  802. filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
  803. width: 100%;
  804. height: 100%;
  805. display: flex;
  806. flex-direction: column;
  807. justify-content: space-between;
  808. .header {
  809. text-align: center;
  810. height: 120px;
  811. width: 100%;
  812. background: #fff;
  813. padding-top: 30px;
  814. background-size: 100% 100%;
  815. .title {
  816. color: #fff7e4;
  817. opacity: 0.6;
  818. font-weight: 700;
  819. font-size: 18px;
  820. line-height: 21px;
  821. letter-spacing: -0.3px;
  822. }
  823. .money {
  824. margin-top: 16px;
  825. img {
  826. margin-right: 9px;
  827. width: 40px;
  828. height: 40px;
  829. }
  830. .big {
  831. font-weight: 700;
  832. font-size: 46px;
  833. line-height: 55px;
  834. /* identical to box height */
  835. letter-spacing: 0.3px;
  836. color: #fff8e6;
  837. }
  838. .small {
  839. margin-left: 4px;
  840. font-weight: 700;
  841. font-size: 13px;
  842. line-height: 16px;
  843. /* identical to box height */
  844. letter-spacing: 0.5px;
  845. color: #fff8e6;
  846. }
  847. }
  848. }
  849. .list {
  850. padding: 0 16px 0 16px;
  851. background: #ffffff;
  852. flex: 1;
  853. .item {
  854. display: flex;
  855. align-items: center;
  856. min-height: 50px;
  857. border-bottom: 1px solid #f0f0f0;
  858. img {
  859. width: 24px;
  860. height: 24px;
  861. }
  862. .item-content {
  863. width: 100%;
  864. flex: 1;
  865. .item-follow-title {
  866. display: flex;
  867. align-items: center;
  868. margin-top: 20px;
  869. margin-bottom: 11px;
  870. position: relative;
  871. .btn {
  872. position: absolute;
  873. right: 0;
  874. }
  875. }
  876. .item-title {
  877. flex: 1;
  878. margin-left: 10px;
  879. font-weight: 500;
  880. font-size: 16px;
  881. letter-spacing: 0.3px;
  882. color: #000000;
  883. }
  884. .item-follow-area {
  885. display: flex;
  886. margin-bottom: 13px;
  887. .item-follow {
  888. cursor: pointer;
  889. border: 1px solid #ebebeb;
  890. border-radius: 1000px;
  891. height: 28px;
  892. margin-right: 5px;
  893. display: flex;
  894. align-items: center;
  895. .finished {
  896. text-decoration: line-through;
  897. color: #949494;
  898. }
  899. span {
  900. margin-left: 8px;
  901. margin-right: 2px;
  902. color: #389aff;
  903. opacity: 1;
  904. }
  905. img {
  906. width: 16px;
  907. height: 16px;
  908. margin-right: 7px;
  909. }
  910. }
  911. }
  912. span {
  913. font-weight: 400;
  914. font-size: 11px;
  915. line-height: 13px;
  916. letter-spacing: 0.3px;
  917. color: #000000;
  918. opacity: 0.4;
  919. }
  920. }
  921. .btn {
  922. width: 72px;
  923. height: 29px;
  924. line-height: 29px;
  925. background: rgba(56, 154, 255, 0.1);
  926. border-radius: 500px;
  927. text-align: center;
  928. letter-spacing: 0.3px;
  929. color: #389aff;
  930. cursor: pointer;
  931. }
  932. }
  933. }
  934. .people {
  935. cursor: pointer;
  936. padding-left: 16px;
  937. height: 44px;
  938. line-height: 44px;
  939. background: #fff;
  940. border-bottom: 1px solid #f0f0f0;
  941. box-shadow: 0px 1px 0px #f2f2f2;
  942. display: flex;
  943. align-items: center;
  944. justify-content: space-between;
  945. .txt {
  946. font-weight: 400;
  947. font-size: 12px;
  948. line-height: 14px;
  949. letter-spacing: 0.3px;
  950. color: #000000;
  951. opacity: 0.4;
  952. }
  953. .right {
  954. flex: 1;
  955. cursor: pointer;
  956. margin-right: 22px;
  957. display: flex;
  958. align-items: center;
  959. position: relative;
  960. img {
  961. position: absolute;
  962. width: 22px;
  963. height: 22px;
  964. border: 2px solid #fff;
  965. border-radius: 50%;
  966. }
  967. .road {
  968. right: 0;
  969. width: 7px;
  970. height: 14px;
  971. }
  972. }
  973. }
  974. .footer {
  975. background: #ffffff;
  976. display: flex;
  977. padding: 20px 22px 20px 17px;
  978. .first {
  979. flex: 1;
  980. .validity {
  981. font-weight: 400;
  982. font-size: 12px;
  983. line-height: 14px;
  984. letter-spacing: 0.3px;
  985. color: #000000;
  986. opacity: 0.4;
  987. margin: 2px 0 8px 0;
  988. }
  989. .time {
  990. font-weight: 500;
  991. font-size: 13px;
  992. line-height: 16px;
  993. /* identical to box height */
  994. color: #000000;
  995. }
  996. }
  997. .btn {
  998. background: #ef4545;
  999. border-radius: 100px;
  1000. color: #fff;
  1001. width: 258px;
  1002. height: 52px;
  1003. font-weight: 600;
  1004. font-size: 18px;
  1005. line-height: 52px;
  1006. text-align: center;
  1007. cursor: pointer;
  1008. }
  1009. }
  1010. }
  1011. .not-open {
  1012. filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
  1013. position: relative;
  1014. img {
  1015. width: 100%;
  1016. }
  1017. .up {
  1018. position: absolute;
  1019. top: 0;
  1020. box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
  1021. z-index: 1;
  1022. }
  1023. .down {
  1024. position: absolute;
  1025. top: 253px;
  1026. }
  1027. .open {
  1028. width: 110px;
  1029. height: 110px;
  1030. text-align: center;
  1031. font-size: 26px;
  1032. font-weight: 600;
  1033. background: #ffe9b5;
  1034. color: #ef4545;
  1035. cursor: pointer;
  1036. border-radius: 50%;
  1037. line-height: 110px;
  1038. position: absolute;
  1039. top: 235px;
  1040. left: 50%;
  1041. margin-left: -55px;
  1042. z-index: 2;
  1043. }
  1044. }
  1045. }
  1046. </style>