123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <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>
|