superstar-dice/_src/components/auction/auction.vue

<template>
  <div>
    <div class="game-auction" @click="handleClick">
      <div class="game-auc-title">
        {{$t('auction.title')}}<i class="explain-icon" @click.stop="modalShow = true"></i>
      </div>
      <div class="game-auc-bd">
        <span class="time">{{timeStr}}</span>
        <img class="eos-icon" src="../../assets/icon_b_eos_mii.png" alt="">
        <p class="price-amount" v-if="auctionInfo">{{auctionInfo.prize / 10000}} EOS</p>
      </div>
      <div class="game-auc-bot">
        <span class="title">{{$t('auction.lastPrice')}}</span>
        <span class="name" v-if="auctionInfo">{{auctionInfo.lastBid.player}}</span>
      </div>
    </div>
    <!-- 解析弹窗 -->
    <div class="modal-mask" v-show="modalShow">
      <div class="overflow-modal">
        <div class="title">{{$t('auction.title')}}</div>
        <i class="close-icon" @click="modalShow = false"></i>
        <div class="game-modal">
          <div class="list-item">
            <span class="order">*.</span>
            <div class="text-wrap">
              <p class="text">{{$t('auction.explain0')}}</p>
            </div>
          </div>
          <div class="list-item">
            <span class="order">1.</span>
            <div class="text-wrap">
              <p class="text">{{$t('auction.explain1')}}</p>
            </div>
          </div>
          <div class="list-item">
            <span class="order">2.</span>
            <div class="text-wrap">
              <p class="text">{{$t('auction.explain2')}}</p>
            </div>
          </div>
          <div class="list-item">
            <span class="order">3.</span>
            <p class="item-text">{{$t('auction.explain3')}}</p>
          </div>
          <div class="list-item">
            <span class="order">4.</span>
            <p class="item-text">{{$t('auction.explain4')}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from '../../js/bus'
export default {
  name: 'auction',
  data () {
    return {
      modalShow: false,
      timeStr: ''
    }
  },
  components: {
    // auctionModal: () => import('./auctionModal')
  },
  computed: {
    auctionInfo () {
      return this.$store.state.auctionInfo
    },
    account () {
      return this.$store.state.account
    }
  },
  methods: {
    handleClick () {
      if (this.account.name) {
        Bus.$emit('update:auctionShow')
      } else {
        this.$store.dispatch('doScatterLogin')
      }
    }
  },
  created () {
    Bus.$on('update:timeAuction', (data) => {
      this.timeStr = data
    })
  },
  beforeDestroy () {
    Bus.$off('update:timeAuction')
  }
}
</script>
<style lang="scss">
.game-auction{
  position: fixed;
  width: px2rem(148);
  right: 0;
  top: px2rem(345);
  cursor: pointer;
  .game-auc-title{
    height: px2rem(40);
    line-height: px2rem(40);
    background-color: #516fb9;
    text-align: center;
    color: #ffffff;
    font-size: px2rem(20);
    border-top-left-radius: 10px;
    position: relative;
  }
  .explain-icon{
    position: absolute;
    top: px2rem(8);
    right: px2rem(10);
    background: url('img/icon_question.png');
    vertical-align: middle;
    width: px2rem(24);
    height: px2rem(24);
    background-size: 100%;
    cursor: pointer;
  }
}
.game-auc-bd{
  background-color: #395497;
  text-align: center;
  overflow: hidden;
  position: relative;
  padding-bottom: px2rem(16);
  .time{
    position: absolute;
    width: px2rem(98);
    height: px2rem(26);
    top: px2rem(10);
    margin-left: -px2rem(49);
    left: 50%;
    background-color: #223871;
    line-height: px2rem(26);
    text-align: center;
    color: #869dd6;
    font-size: px2rem(18);
    border-radius: px2rem(13);
  }
  .eos-icon{
    display: block;
    margin-top: px2rem(20);
    width: 100%;
  }
  .price-amount{
    position: absolute;
    bottom: px2rem(20);
    text-align: center;
    left: 0;
    right: 0;
    font-size: px2rem(18);
    color: #ffffff;
  }
}
.game-auc-bot{
  background-color: #543b68;
  border-bottom-left-radius: 10px;
  padding: px2rem(6) 0;
  span{
    display: block;
    color: #bfb6c6;
    font-size: px2rem(14);
    text-align: center;
    line-height: px2rem(22);
    height: px2rem(22);
  }
}
</style>