red-packet.vue 26 KB

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