onecric_h5/pages/Game/compontent/tournamentList.vue

<template>
  <div class="tournament">
    <div class="box" v-if="list.length">
      <div class="title">
        <!-- Top Creators -->
        <div class="fadeInRight">{{ $t("game.lab") }}</div>
        <div class="all fadeInLeft" @click="$toUrl('./top-creators')">
        <!-- See More -->
        {{ $t('live.more1') }}
        </div>
      </div>
      <div class="tag-box fadeInLeft">
        <div class="list-box">
          <div
            class="item"
            v-for="item in list"
            :key="item.id"
            @click="toUrlLive(item)"
          >
            <div class="img-box">
              <u--image
                class="avatar"
                :src="item.avatar"
                shape="circle"
                width="104rpx"
                height="104rpx"
              ></u--image>
						  <img v-if="item.islive == 1" class="img" src="/static/image/match/live-actives.png" alt="">
              <img v-else class="img" src="/static/image/match/live.png" alt="">
            </div>
            <div class="name text-clamp">{{ item.user_nickname }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { numberToK } from "@/utils/util";
import animationMixin from '@/pages/mixins/animation'
export default {
  props: ['list'],
  mixins: [animationMixin],
  data() {
    return {
      activeInfo: {},
      timer: null,
    };
  },
  deactivated() {
  },
  created() {
  },
  activated() {
  },
  methods: {
    toUrlLive(item) {
      uni.navigateTo({
        url: `/pages/Match/member/usermanger?id=${item.id}`,
      });
    },
    numberToK(v) {
      return numberToK(v);
    },
    formaScore(v) {
      if (!v) {
        return "-";
      }
      if (v == "0/0（0）") {
        return "Yet To Bat";
      }
      let s = v.replace("（", "(");
      let index = v.indexOf("(");
      return s.substring(index);
    },
    formaScore1(v) {
      if (!v) {
        return "";
      }
      let s = v.replace("（", "(");
      let index = v.indexOf("(");
      return s.substring(0, index);
    },
    watchLiveAt(value) {
      if (!value) {
        return "";
      }
      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
      var hours = date.getHours();
      var minutes = date.getMinutes();
      if (hours != 12) {
        hours = hours % 12;
      }
      if (hours == 12 && minutes) {
        hours = hours % 12;
      }
      minutes = minutes < 10 ? "0" + minutes : minutes;
      hours = hours < 10 ? "0" + hours : hours;
      var strTime = hours + ":" + minutes;
      return strTime;
    },
    watchLiveAt1(value) {
      if (!value) {
        return "";
      }
      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var ampm = hours >= 12 ? "PM" : "AM";
      var strTime = ampm;
      if (minutes && hours == 12) {
        strTime = "PM";
      }
      return strTime;
    },
    countdownFun(value) {
      if (!value) {
        return "";
      }
      var h = parseInt(value / 3600);
      var m = parseInt((value % 3600) / 60);
      var str = "";
      if (h > 0) {
        str += h + "hrs";
        if (m < 10) {
          m = "0" + m;
        }
        str += " " + m + "min";
        return str;
      } else {
        if (m > 0) {
          if (m < 10) {
            m = "0" + m;
          }
          str += m + "min";
        }
      }

      var s = parseInt((value % 3600) % 60);
      if (s < 10) {
        s = "0" + s;
      }
      str += " " + s + "s";
      return str;
    },
  },
};
</script>
<style lang="scss">
.box {
  padding-top: 30px;
  padding-bottom: 6rpx;
  .title {
    font-size: 15px;
    padding-right: 14px;
    font-weight: bold;
    color: #242424;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20rpx;
    padding-left: 29rpx;
    .icon {
      height: 4.08vw;
      margin-right: 14rpx;
    }
    .all {
        color: #FF3300;
    }
  }
}
.tag-box {
  width: 100%;
  overflow: hidden;
  position: relative;
  .left-tag,
  .right-tag {
    position: absolute;
    z-index: 5;
    bottom: 0;
    height: 19rpx;
    width: 42rpx;
    background-color: #f3f3f7;
  }
  .left-tag {
    left: 0;
  }
  .right-tag {
    right: 0;
  }
}
.list-box {
  padding-top: 13rpx;
  padding-left: 17rpx;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  .item {
    min-width: 124rpx;
    max-width: 124rpx;
    position: relative;
    padding-bottom: 19rpx;
    overflow: hidden;
  }
  .img-box {
    position: relative;
    padding: 10rpx;
    &.active {
      background-image: url("/static/image/live/icon5.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .img {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
    }
    .avatar {
      width: 104rpx;
      height: 104rpx;
    }
  }
  .name {
    padding: 1.4vw 16rpx 0;
    font-size: 3.27vw;
    font-weight: 400;
    color: #242424;
    line-height: 1;
    text-align: center;
  }
  .active-box {
    position: absolute;
    z-index: 2;
    border: 2rpx solid #ff3300;
    width: 10px;
    height: 10px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
    background-color: #fff;
    transform: rotate(45deg);
  }
}
</style>