de-net/src/view/red-packet.vue

<template>
  <div class="content">
    <!-- open -->
    <div v-if="data.status == 'opened'" class="opened">
      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
        <div class="seat"></div>
        <div class="title">Awesome! You Will Get</div>
        <div class="money">
          <img :src="require('../assets/svg/icon-dollar.svg')" alt />
          <span class="big">{{ data.money / 100 }}</span>
          <span class="small">{{ data.detail.amountCurrencyCode || '' }}</span>
        </div>
      </div>

      <div class="list">
        <div class="item" v-for="item, i in data.detail.taskCondition" v-bind:key="i">
          <template v-if="item.type == 1 && item.relatedUsers && item.relatedUsers.length > 0">
            <div class="item-content">
              <div class="item-follow-title">
                <img :src="require('../assets/svg/icon-follow.svg')" alt />
                <div class="item-title">Follow</div>
                <img v-if="data.done.follow" :src="require('../assets/svg/icon-true.svg')" alt />
                <div v-else class="btn" @click="clickFollowAll(item.relatedUsers)">Follow All</div>
              </div>
              <div class="item-follow-area">
                <div class="item-follow" v-for="item2, i in item.relatedUsers" v-bind:key="i">
                  <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
                  <img v-if="item2.finished" :src="require('../assets/svg/icon-true-ed.svg')" alt />
                  <img v-else :src="require('../assets/svg/icon-add.svg')" alt />
                </div>
              </div>
            </div>
          </template>
          <template v-if="item.type == 2">
            <img :src="require('../assets/svg/icon-like.svg')" alt />
            <div class="item-content">
              <div class="item-title">Like</div>
            </div>
            <img v-if="data.done.like" :src="require('../assets/svg/icon-true.svg')" alt />

            <div v-else class="btn" @click="clickLickBtn">Like</div>
          </template>
          <template v-if="item.type == 3">
            <img :src="require('../assets/svg/icon-retweet.svg')" alt />
            <div class="item-content">
              <div class="item-title">Retweet</div>
            </div>
            <img v-if="data.done.retweet" :src="require('../assets/svg/icon-true.svg')" alt />
            <div v-else class="btn" @click="clickRetweetBtn">Retweet</div>
          </template>
        </div>
      </div>
      <div class="people" @click="clickRoad">
        <div class="txt">Total ${{ data.detail.amountValue }} USD，{{ data.detail.receiveCount || 0 }}/{{
          data.detail.totalCount || 0
        }} People Got</div>
        <div class="right">
          <template v-for="item, i in data.detail.allReceived.slice(0, 3)" v-bind:key="i">
            <img :src="item.simpleUserInfoVO.avatarUrl" alt :style="{ right: `${i * 16 + 14}px` }"
              v-if="item.simpleUserInfoVO.avatarUrl" />
            <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt :style="{ right: `${i * 16 + 14}px` }" />
          </template>
          <img :src="require('../assets/svg/icon-right.svg')" alt class="road" />
        </div>
      </div>
      <div class="footer">
        <div class="first">
          <div class="validity">Validity</div>
          <div class="time">{{ data.detail.validity || '' }}</div>
        </div>
        <div class="btn" @click="clickGetGiveaways">Get Giveaways</div>
      </div>
    </div>


    <!-- success -->
    <div v-else-if="data.status == 'success'" class="success">
      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
        <div class="seat"></div>
        <div class="money">
          <img :src="require('../assets/svg/icon-dollar.svg')" alt />
          <span class="big">{{ data.money / 100 }}</span>
          <span class="small">USD</span>
        </div>
        <div class="done" @click="clickDone">
          <img :src="require('../assets/svg/icon-done.svg')" alt class="icon-done" />
          <span>Giveaways transferred to Wallet</span>
          <img :src="require('../assets/svg/icon-right.svg')" alt class="icon-right" />
        </div>
      </div>
      <div class="luck-list-title">
        <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
        <div>Total ${{ data.detail.amountValue || '' }} {{ data.detail.amountCurrencyCode || '' }}</div>
      </div>
      <div class="luck-list" @scroll="handleScroll($event)">
        <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
          <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
          <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
          <div class="luck-content">
            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
            <div class="luck-title" v-else>Twitter User</div>

            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD hh:mm:ss') }}</div>
          </div>
          <div class="luck-money">
            <img :src="require('../assets/svg/icon-dollar.svg')" alt />
            <div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) || 0 }}</div>
          </div>
          <div class="luck-king" v-if="item.maxAmount">
            <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
            <span>Luckiest Draw</span>
          </div>
        </div>
      </div>
    </div>


    <!-- no-open -->
    <div v-else-if="data.status == 'not-open'" class="not-open">
      <img :src="require('../assets/img/up.png')" alt class="up" />
      <img :src="require('../assets/img/down.png')" alt class="down" />
      <div class="open" @click="clickOpenRedPacket">OPEN</div>
    </div>


    <!-- 领取列表 -->
    <div v-else-if="data.status == 'luck-peopel-list'" class="luck-peopel-list">
      <div class="head">
        <img :src="require('../assets/svg/icon-back.svg')" alt @click="clickBack" />
      </div>
      <div class="luck-list-title">
        <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
        <div>Total ${{ data.detail.amountValue || 0 }} {{ data.detail.amountCurrencyCode || '' }}</div>
      </div>
      <div class="luck-list" @scroll="handleScroll">
        <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
          <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
          <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
          <div class="luck-content">
            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
            <div class="luck-title" v-else>Twitter User</div>
            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD hh:mm:ss') }}</div>
          </div>
          <div class="luck-money">
            <img :src="require('../assets/svg/icon-dollar.svg')" alt />
            <div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) }}</div>
          </div>

          <div class="luck-king" v-if="item.maxAmount">
            <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
            <span>Luckiest Draw</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 红包被领完了 -->
    <div v-else-if="data.status == 'close'" class="close">
      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
        <div class="seat"></div>
        <div class="close-title">{{ data.close_title }}</div>
        <div class="close-title" v-if="data.close_text">{{ data.close_text }}</div>
      </div>
      <div class="luck-list-title">
        <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
        <div>Total ${{ data.detail.amountValue || 0 }} {{ data.detail.amountCurrencyCode || '' }}</div>
      </div>
      <div class="luck-list" @scroll="handleScroll">
        <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
          <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
          <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
          <div class="luck-content">
            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
            <div class="luck-title" v-else>Twitter User</div>
            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD hh:mm:ss') }}</div>
          </div>
          <div class="luck-money">
            <img :src="require('../assets/svg/icon-dollar.svg')" alt />
            <div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) || 0 }}</div>
          </div>
          <div class="luck-king" v-if="item.maxAmount">
            <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
            <span>Luckiest Draw</span>
          </div>
        </div>
      </div>
    </div>


    <!-- error -->
    <div v-else-if="data.status == 'error'" class="error">
      <img :src="require('../assets/svg/icon-error.svg')" alt />
      <div class="txt">
        {{ data.error_txt }}
      </div>
    </div>


    <!-- loading -->
    <div v-show="data.loading_show" class="loading">
      <img :src="require('../assets/svg/icon-loading.svg')" alt />
    </div>
  </div>
</template>

<script>
export default {
  name: 'redPacket',
}
</script>
<script setup>
import { onMounted, reactive } from "vue";
import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList } from '../http/redPacket.js'
import { getQueryString } from '../uilts/help.js'
import { getChromeStorage } from '../uilts/chromeExtension.js'
var moment = require('moment');

let data = reactive({
  status: '',
  loading_show: false,
  detail: {},
  luck_list_end: false,
  page_index: 1,
  page_size: 20,
  srcContentId: '',
  close_title: 'Better luck next time!',
  error_txt: `oops, new accounts cannot participate in this event,`,
  receiveAmount: 0,
  money: 0,
  // 状态
  done: {
    follow: false,
    like: false,
    retweet: false
  }
})
async function clickLickBtn() {
  let _userInfo = await checkIsLogin()
  if (!_userInfo) {
    return
  }
  data.loading_show = true
  oneKeyLike({
    params: {
      tweetId: data.srcContentId
    }
  }).then((res) => {
    data.loading_show = false
    if (res.code == 0) {
      if (res.data.result) {
        data.done.like = true
      } else {
        data.done.like = false
      }
    } else {
      data.done.like = false
      console.log(res)
    }
  })
}
function clickDone() {
  window.open(`${chrome.runtime.getURL('/iframe/home.html')}`)
}
function handleScroll(e) {
  if (data.luck_list_end) {
    return
  }
  e = e.target
  if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
    data.luck_list_end = true
    data.page_index++
    getReceivedList({
      params: {
        pageNum: data.page_index,
        pageSize: data.page_size,
        postId: data.postId
      }
    }).then((res) => {
      if (res.code == 0) {
        if (res.data.length > 0) {
          data.detail.allReceived = data.detail.allReceived.concat(res.data)
          data.luck_list_end = false
        } else {
          data.luck_list_end = true
        }
      } else {
        console.log('getReceivedList', res)
      }
    })
  }
}


async function clickRetweetBtn() {
  let _userInfo = await checkIsLogin()
  if (!_userInfo) {
    return
  }

  data.loading_show = true
  oneKeyReTweet({
    params: {
      tweetId: data.srcContentId
    }
  }).then((res) => {
    data.loading_show = false
    if (res.code == 0) {
      if (res.data.result) {
        data.done.retweet = true
      } else {
        data.done.retweet = false
      }
    } else {
      data.done.retweet = false
      console.log(res)
    }
  })
}


function getValidity() {
  let _d1, _d2, _d3, _h, _m, _s
  if (!data.detail.myReceived.taskEndTimestamp) {
    return
  }
  let timer = setInterval(() => {
    let _time = new Date().getTime()
    _d3 = data.detail.myReceived.taskEndTimestamp - _time
    if (_d3 > 0) {
      _d1 = moment(data.detail.myReceived.taskEndTimestamp)
      _d2 = moment(_time)
      _h = moment.duration(_d1.diff(_d2)).hours()
      _m = moment.duration(_d1.diff(_d2)).minutes()
      _s = moment.duration(_d1.diff(_d2)).seconds()
      data.detail.validity = `${_h}:${_m}:${_s}`
    } else {
      clearInterval(timer)
    }
  }, 1000)
}

async function clickFollowAll(item) {
  let _userInfo = await checkIsLogin()
  if (!_userInfo) {
    return
  }
  data.loading_show = true
  let arr_name = []
  for (let i in item) {
    arr_name.push(item[i].name)
  }
  oneKeyFollow({
    params: {
      names: arr_name
    }
  }).then((res) => {
    data.loading_show = false
    if (res.code == 0) {
      res.data.forEach((item1) => {
        data.detail.taskCondition[0].relatedUsers.forEach(item2 => {
          if (item1.name == item2.name) {
            item2.finished = true
          }
        });
      })
      let _len = data.detail.taskCondition[0].relatedUsers.filter((item) => { return item.finished == false }).length
      if (_len > 0) {
        data.done.follow = false
      } else {
        data.done.follow = true
      }
    } else {
      data.detail.taskCondition[0].relatedUsers.forEach(item => {
        item.finished = false
      });
    }
  })
}
// 我领取了的状态
function myReceivedState() {
  data.status = 'opened'
  data.money = data.detail.myReceived.amountValue

  // 我的红包已经过期了 and 大红包可以领取
  if (data.detail.myReceived.taskFinishStatus == 2 && !data.detail.receiveTimeExpired) {
    data.status = 'not-open'

    // 任务已经被领完了
    if (data.detail.totalCount == data.detail.receiveCount) {
      data.status = 'close'
      data.close_title = 'Better luck next time!'
    }
  }
  // 我领取未完成 and 大红包可以领取
  if (data.detail.myReceived.taskFinishStatus == 0 && !data.detail.receiveTimeExpired) {
    initTaskDetail()
    getValidity()
    data.detail.taskCondition = JSON.parse(data.detail.taskCondition)
    data.detail.amountValue = showLastTwoPlace(data.detail.amountValue)
    data.detail.receiveAmountValue = showLastTwoPlace(data.detail.receiveAmountValue)
  }

  // 大红包不能领取了
  if (data.detail.receiveTimeExpired) {
    data.status = 'close'
    data.close_title = `This Giveaways`
    data.close_text = `expired on ${moment(data.detail.endTimestamp).format('MM-DD')}`
  }

  // 我领取成功了
  if (data.detail.myReceived.taskFinishStatus == 1) {
    data.status = 'success'
  }
}

function showLastTwoPlace(n) {
  return n / 100
}

function init() {
  getPostDetail({
    params: {
      postId: data.postId
    }
  }).then((res) => {
    switch (res.code.toString()) {
      case "0":
        data.srcContentId = res.data.srcContentId
        // if (data.tweetId != data.srcContentId) {
        //   data.error_txt = 'Giveaways link Error'
        //   data.status = 'error'
        //   return
        // }
        data.detail = JSON.parse(res.data.postBizData)
        console.log(data.detail)

        // 红包未开始
        if (data.detail.status == 0) {
          data.status = 'not-open'

          // 任务进行中
        } else if (data.detail.status == 1) {
          data.status = 'not-open'
          // 我领取过的状态
          if (data.detail.myReceived) {
            myReceivedState()
          } else {
            // 大红包不可以领取了
            if (data.detail.receiveTimeExpired) {
              data.status = 'close'
              data.close_title = `This Giveaways`
              data.close_text = `expired on ${moment(data.detail.endTimestamp).format('MM-DD')}`
            }
            // 任务已经被领完了
            if (data.detail.totalCount == data.detail.receiveCount) {
              data.status = 'close'
              data.close_title = 'Better luck next time!'
            }
          }

          // 任务已经结束了
        } else if (data.detail.status == 2) {
          // 我领取过的状态
          if (data.detail.myReceived) {
            myReceivedState()
          } else {
            data.status = 'close'
            data.close_title = `This Giveaways`
            data.close_text = `expired on ${moment(data.detail.endTimestamp).format('MM-DD')}`
          }
        }
        break
    }
  })
}
function initTaskDetail() {
  // 任务详情
  getTaskDetail({
    params: {
      postId: data.postId
    }
  }).then((res) => {
    if (res.code == 0) {
      for (let i in res.data) {
        switch (res.data[i].type) {
          case 1:
            data.done.follow = res.data[i].finished
            data.detail.taskCondition[0].relatedUsers = res.data[i].detail
            break
          case 2:
            data.done.like = res.data[i].finished
            break
          case 3:
            data.done.retweet = res.data[i].finished
            break
        }
      }
    } else {
      console.log(res.msg)
    }
  })
}
onMounted(() => {
  data.postId = getQueryString('postId')
  data.tweetId = getQueryString('tweetId')
  init()
  // data.loading_show = true
})

// 点击领取
function clickOpenRedPacket() {
  handleRedPacket()
}

function handleRedPacket() {
  getRedPacket({
    params: {
      postId: data.postId
    }
  }).then((res) => {
    switch (res.code.toString()) {
      case "0":
        data.status = 'opened'
        data.money = res.data.receiveAmount
        init()
        break
      case "2008":
        data.status = 'close'
        data.close_title = 'Better luck next time!'
        break
    }
  })
}

chrome.storage.onChanged.addListener(changes => {
  if (changes.userInfo) {
    // let item = JSON.parse(changes.userInfo.newValue)
    data.loading_show = false
    init()
  }
})

// 校验是否封路
function checkIsLogin() {

  return new Promise((resolve) => {
    getChromeStorage('userInfo', (_userInfo) => {
      if (!_userInfo) {
        data.loading_show = true
        chrome.runtime.sendMessage(
          { method: "POPUP_LOGIN", data: "" },
          (response) => {
            console.log("res", response);
          }
        )
        resolve(_userInfo)
      } else {
        resolve(_userInfo)
      }
    })
  })
}

async function clickGetGiveaways() {
  let _userInfo = await checkIsLogin()
  if (_userInfo) {
    handleFinishRedPacket()
  }
}

function handleFinishRedPacket() {
  data.loading_show = true
  finishRedPacket({
    params: {
      postId: data.postId
    }
  }).then((res) => {
    data.loading_show = false
    switch (res.code.toString()) {
      case '0':
        if (res.data.finished) {
          data.status = 'success'
          data.receiveAmount = res.data.receiveAmount
          init()
        } else {
          let _data = res.data.conditionResult
          for (let i in _data) {
            switch (_data[i].type.toString()) {
              case '1':
                data.detail.taskCondition[0].relatedUsers = _data[i].detail
                if (_data[i].finished) {
                  data.done.follow = true
                } else {
                  alert('Please complete the task: follow')
                }
                break
              case '2':
                if (_data[i].finished) {
                  data.done.like = true
                } else {
                  alert('Please complete the task: like tweet')
                }
                break
              case '3':
                if (_data[i].finished) {
                  data.done.retweet = true
                } else {
                  alert('Please complete the task: Retweet')
                }
                break
            }
          }
        }
        break
      case "2009":
        data.error_txt = `oops, new accounts cannot participate in this event,`
        data.status = 'error'
        break
      case "-106":
        alert('Clicking too often, wait a moment and click again')
        break
      default:
        console(res)
    }
  })
}

function clickBack() {
  data.status = 'opened'
}

function clickRoad() {
  data.status = 'luck-peopel-list'
}
</script>
 
<style  lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}

.content {
  width: 375px;
  height: 500px;
  background: #fafafa;
  border-radius: 11px;
  font-family: "SF Pro Display";
  font-style: normal;

  .loading {
    background: #FFFFFF;
    opacity: 0.8;
    z-index: 222;
    text-align: center;
    width: 375px;
    height: 500px;
    position: fixed;
    top: 0;
    left: 0;

    img {
      margin-top: 216px;
      width: 70px;
      height: 70px;
    }
  }

  .error {
    text-align: center;

    img {
      width: 160px;
      height: 160px;
      margin-top: 80px;
    }

    .txt {
      font-weight: 500;
      font-size: 22px;
      line-height: 26px;
      text-align: center;
      letter-spacing: 0.3px;
      color: #a8a8a8;
      margin: 34px 44px 0 44px;
    }
  }

  .success,
  .close,
  .luck-peopel-list {
    filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
    width: 100%;
    height: 100%;
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .close-title {
      font-weight: 600;
      font-size: 27px;
      line-height: 32px;
      text-align: center;
      letter-spacing: 0.3px;

      color: #ffffff;
    }

    .head {
      padding: 14px 16px;

      img {
        cursor: pointer;
        width: 24px;
        height: 24px;
      }
    }

    .header {
      text-align: center;
      height: 150px;
      width: 100%;
      background: #fff;
      // padding-top: 30px;
      background-size: 100% 100%;
      position: relative;

      .seat {
        width: 100%;
        height: 30px;
      }

      .done {
        cursor: pointer;
        position: absolute;
        top: 107px;
        left: 50%;
        margin-left: -150px;
        width: 300px;
        height: 60px;
        display: flex;
        align-items: center;
        border-radius: 100px;
        background: #ffffff;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

        span {
          color: #000000;
          font-size: 14px;
        }

        .icon-done {
          width: 24px;
          height: 24px;
          margin-left: 28px;
          margin-right: 10px;
        }

        .icon-right {
          margin-left: 5px;
          width: 7px;
          height: 14px;
        }
      }

      .title {
        margin-top: 30px;
        color: #fff7e4;
        opacity: 0.6;

        font-weight: 700;
        font-size: 18px;
        line-height: 21px;
        letter-spacing: -0.3px;
      }

      .money {
        margin-top: 16px;

        img {
          width: 40px;
          height: 40px;
          margin-right: 9px;
        }

        .big {
          font-weight: 700;
          font-size: 46px;
          line-height: 55px;
          /* identical to box height */

          letter-spacing: 0.3px;

          color: #fff8e6;
        }

        .small {
          margin-left: 4px;

          font-weight: 700;
          font-size: 13px;
          line-height: 16px;
          /* identical to box height */

          letter-spacing: 0.5px;

          color: #fff8e6;
        }
      }
    }

    .luck-list-title {
      /*      margin-top: 47px;*/
      padding: 0 16px;
      background: #fff;
      color: #9b9b9b;
      display: flex;
      justify-content: space-between;
    }

    .luck-list {
      background: #fff;
      overflow: auto;

      .luck-item {
        display: flex;
        padding: 12px 16px;
        border-top: 1px solid #d1d1d1;
        justify-content: space-between;
        position: relative;

        img:first-child {
          border-radius: 50%;
        }

        .luck-king {
          position: absolute;
          top: 36px;
          right: 16px;
          display: flex;
          align-items: center;

          img {
            width: 22px;
            height: 19px;
            margin: 0;
          }

          span {
            font-weight: 500;
            font-size: 12px;
            line-height: 14px;
            letter-spacing: 0.3px;
            color: #f5b945;
          }
        }

        img {
          width: 42px;
          height: 42px;
          margin-right: 12px;
        }

        .luck-content {
          flex: auto;

          .luck-title {
            font-weight: 500;
            font-size: 16px;
            letter-spacing: 0.3px;
            color: #444444;
          }

          .luck-time {
            font-weight: 400;
            font-size: 12px;
            line-height: 14px;

            color: #9b9b9b;
          }
        }

        .luck-money {
          display: flex;
          height: 17px;
          align-items: center;

          img {
            width: 14px;
            height: 14px;
            margin-right: 6px;
          }

          .luck-money-txt {
            font-weight: 500;
            font-size: 14px;
            /* identical to box height */

            text-align: right;
            letter-spacing: 0.3px;

            color: #444444;
          }
        }
      }
    }
  }

  .success {
    .luck-list-title {
      margin-top: 47px;
    }
  }

  .opened {
    filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .header {
      text-align: center;
      height: 150px;
      width: 100%;
      background: #fff;
      // padding-top: 30px;
      background-size: 100% 100%;

      .seat {
        width: 100%;
        height: 30px;
      }

      .title {
        color: #fff7e4;
        opacity: 0.6;

        font-weight: 700;
        font-size: 18px;
        line-height: 21px;
        letter-spacing: -0.3px;
      }

      .money {
        margin-top: 16px;

        img {
          margin-right: 9px;
          width: 40px;
          height: 40px;
        }

        .big {
          font-weight: 700;
          font-size: 46px;
          line-height: 55px;
          /* identical to box height */

          letter-spacing: 0.3px;

          color: #fff8e6;
        }

        .small {
          margin-left: 4px;
          font-weight: 700;
          font-size: 13px;
          line-height: 16px;
          /* identical to box height */

          letter-spacing: 0.5px;

          color: #fff8e6;
        }
      }
    }

    .list {
      padding: 0 16px 0 16px;
      background: #ffffff;
      flex: 1;

      .item {
        display: flex;
        align-items: center;
        min-height: 50px;
        border-bottom: 1px solid #f0f0f0;

        img {
          width: 24px;
          height: 24px;
        }

        .item-content {
          width: 100%;
          flex: 1;

          .item-follow-title {
            display: flex;
            align-items: center;
            margin-top: 20px;
            margin-bottom: 11px;
            position: relative;

            .btn {
              position: absolute;
              right: 0;
            }
          }

          .item-title {
            flex: 1;
            margin-left: 10px;
            font-weight: 500;
            font-size: 16px;
            letter-spacing: 0.3px;
            color: #000000;
          }

          .item-follow-area {
            display: flex;
            margin-bottom: 4px;
            // flex-wrap: wrap;

            .item-follow {
              cursor: pointer;
              border: 1px solid #ebebeb;
              border-radius: 1000px;
              height: 26px;
              margin-right: 5px;
              margin-bottom: 5px;
              display: flex;
              align-items: center;

              .finished {
                text-decoration: line-through;
                color: #949494;
              }

              span {
                margin-left: 8px;
                margin-right: 2px;
                color: #389aff;
                opacity: 1;
              }

              img {
                width: 16px;
                height: 16px;
                margin-right: 7px;
              }
            }
          }

          span {
            font-weight: 400;
            font-size: 11px;
            line-height: 13px;
            letter-spacing: 0.3px;

            color: #000000;

            opacity: 0.4;
          }
        }

        .btn {
          width: 72px;
          height: 29px;
          line-height: 29px;
          background: rgba(56, 154, 255, 0.1);
          border-radius: 500px;
          text-align: center;
          letter-spacing: 0.3px;
          color: #389aff;
          cursor: pointer;
        }
      }
    }

    .people {
      cursor: pointer;
      padding-left: 16px;
      height: 38px;
      line-height: 38px;
      background: #fff;
      border-bottom: 1px solid #f0f0f0;
      box-shadow: 0px 1px 0px #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .txt {
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: 0.3px;
        color: #000000;
        opacity: 0.4;
      }

      .right {
        flex: 1;
        cursor: pointer;
        margin-right: 22px;
        display: flex;
        align-items: center;
        position: relative;

        img {
          position: absolute;
          width: 22px;
          height: 22px;
          border: 2px solid #fff;
          border-radius: 50%;
        }

        .road {
          right: 0;
          width: 7px;
          height: 14px;
        }
      }
    }

    .footer {
      background: #ffffff;
      display: flex;
      padding: 19px 22px 19px 17px;

      .first {
        flex: 1;

        .validity {
          font-weight: 400;
          font-size: 12px;
          line-height: 14px;
          letter-spacing: 0.3px;
          color: #000000;
          opacity: 0.4;
          margin: 2px 0 8px 0;
        }

        .time {
          font-weight: 500;
          font-size: 13px;
          line-height: 16px;
          /* identical to box height */

          color: #000000;
        }
      }

      .btn {
        background: #ef4545;
        border-radius: 100px;
        color: #fff;
        width: 258px;
        height: 52px;
        font-weight: 600;
        font-size: 18px;
        line-height: 52px;
        text-align: center;
        cursor: pointer;
      }
    }
  }

  .not-open {
    filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
    position: relative;

    img {
      width: 100%;
    }

    .up {
      position: absolute;
      top: 0;
      box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
      z-index: 1;
    }

    .down {
      position: absolute;
      top: 253px;
    }

    .open {
      width: 110px;
      height: 110px;
      text-align: center;
      font-size: 26px;
      font-weight: 600;
      background: #ffe9b5;
      color: #ef4545;
      cursor: pointer;
      border-radius: 50%;
      line-height: 110px;
      position: absolute;
      top: 235px;
      left: 50%;
      margin-left: -55px;
      z-index: 2;
    }
  }
}
</style>