279 lines
7.4 KiB
Vue
279 lines
7.4 KiB
Vue
<template>
|
||
<Transition
|
||
name="custom-classes"
|
||
enter-active-class="animate__animated animate__zoomIn"
|
||
leave-active-class="animate__animated animate__zoomOut"
|
||
>
|
||
<div class="online-pop" v-if="showOnLine">
|
||
<div class="online-view">
|
||
<div class="title">
|
||
<small class="small">{{ Lang[Type].nearly_20 }}</small>
|
||
{{ Lang[Type].player_list }}
|
||
<van-icon class="close" name="cross" @click="closeOnLine" />
|
||
</div>
|
||
<div class="view">
|
||
<div class="list" v-for="(item, index) in list" :key="item">
|
||
<div class="ranking" :class="[Type]">
|
||
{{ index != 0 ? index + 1 : "" }}
|
||
</div>
|
||
<div class="head" :class="[`head_${item.head}`]">
|
||
<span class="frame" :class="[`frame_${item.frame}`]"></span>
|
||
</div>
|
||
<div class="box">
|
||
<div class="name">{{ item.name }}</div>
|
||
<div class="money">{{ item.money }}</div>
|
||
</div>
|
||
<div class="box">
|
||
<div class="item down">
|
||
<span class="lab">{{ Lang[Type].place_bet }}</span>
|
||
<span>{{ item.win }}</span>
|
||
</div>
|
||
<div class="item time">
|
||
<span class="lab">{{ Lang[Type].to_win }}</span>
|
||
<span>{{ item.time }}{{ Lang[Type].games }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</template>
|
||
|
||
<script>
|
||
import { computed } from "vue"
|
||
import { useStore } from "vuex"
|
||
export default {
|
||
name: "OnLinePop",
|
||
props: {},
|
||
setup() {
|
||
const store = useStore()
|
||
const showOnLine = computed(() => store.state.config.showOnLine)
|
||
const Type = computed(() => store.state.config.$Type)
|
||
const Lang = computed(() => store.state.config.$lang)
|
||
let list = []
|
||
const getRndInteger = (min, max) => {
|
||
return Math.floor(Math.random() * (max - min)) + min
|
||
}
|
||
const genUid = () => {
|
||
const length = 9
|
||
const soupLength = genUid.soup_.length
|
||
let id = []
|
||
for (let i = 0; i < length; i++) {
|
||
id[i] = genUid.soup_.charAt(Math.random() * soupLength)
|
||
}
|
||
return `EZ` + id.join("")
|
||
}
|
||
genUid.soup_ = "0123456789"
|
||
|
||
for (let i = 0; i < 20; i++) {
|
||
const time = getRndInteger(5, 20)
|
||
const money = getRndInteger(4000, 99999)
|
||
const drop = getRndInteger(1, 99) / 100
|
||
const item = {
|
||
name: genUid(),
|
||
head: getRndInteger(1, 7),
|
||
frame: getRndInteger(1, 5),
|
||
time: time,
|
||
win: parseInt(time * 3.14 * 800) + drop,
|
||
money: (money + drop + parseInt(time * 3.14 * 800)).toFixed(2)
|
||
}
|
||
list.push(item)
|
||
}
|
||
const compare = (key, desc) => {
|
||
//key: 用于排序的数组的key值
|
||
//desc： 布尔值，为true是升序排序，false是降序排序
|
||
return function (a, b) {
|
||
let value1 = a[key]
|
||
let value2 = b[key]
|
||
if (desc == true) {
|
||
// 升序排列
|
||
return value1 - value2
|
||
} else {
|
||
// 降序排列
|
||
return value2 - value1
|
||
}
|
||
}
|
||
}
|
||
list = list.sort(compare("money", false))
|
||
const closeOnLine = () => {
|
||
store.commit("config/showOnLine")
|
||
}
|
||
return { Type, Lang, list, showOnLine, closeOnLine }
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.online-pop {
|
||
position: absolute;
|
||
transform: rotateX(0deg);
|
||
z-index: 36;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
.online-view {
|
||
width: 13.5rem;
|
||
border: 1px solid #ddd;
|
||
margin-top: 1.5rem;
|
||
border-radius: 0.5rem;
|
||
background: #fff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
left: 50%;
|
||
margin-left: -6.75rem;
|
||
padding-bottom: 0rem;
|
||
font-size: 0.35rem;
|
||
.title {
|
||
font-size: 0.5rem;
|
||
font-weight: 600;
|
||
color: #333;
|
||
text-align: center;
|
||
width: 100%;
|
||
margin-top: 0.5rem;
|
||
margin-bottom: 0.52rem;
|
||
position: relative;
|
||
z-index: 2;
|
||
transform: rotateX(0deg);
|
||
.small {
|
||
position: absolute;
|
||
left: 0.4rem;
|
||
font-size: 0.36rem;
|
||
top: 0.1rem;
|
||
}
|
||
.close {
|
||
position: absolute;
|
||
right: 0.25rem;
|
||
top: -0.2rem;
|
||
font-size: 1rem;
|
||
color: #999;
|
||
z-index: 2;
|
||
&:active {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
.view {
|
||
height: 7.3rem;
|
||
overflow-y: auto;
|
||
}
|
||
.list {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.3rem 0.4rem;
|
||
border-bottom: 1px solid #eee;
|
||
&:first-child .ranking {
|
||
background-image: url("~@/assets/images/cn_no_1.png");
|
||
&.en,
|
||
&.kr,
|
||
&.yn {
|
||
background-image: url("~@/assets/images/en_no_1.png");
|
||
padding-left: 2rem;
|
||
}
|
||
&.tw {
|
||
background-image: url("~@/assets/images/tw_no_1.png");
|
||
}
|
||
}
|
||
.ranking {
|
||
padding-left: 1.7rem;
|
||
background: url("~@/assets/images/cn_no_x.png") left center no-repeat;
|
||
background-size: 2rem auto;
|
||
height: 1rem;
|
||
line-height: 1rem;
|
||
font-size: 0.65rem;
|
||
font-weight: bold;
|
||
color: #e2900a;
|
||
-webkit-text-stroke: 1px #000;
|
||
text-stroke: 1px #000;
|
||
min-width: 1.1rem;
|
||
&.en,
|
||
&.kr,
|
||
&.yn {
|
||
background-image: url("~@/assets/images/en_no_x.png");
|
||
padding-left: 2rem;
|
||
}
|
||
&.tw {
|
||
background-image: url("~@/assets/images/tw_no_x.png");
|
||
}
|
||
}
|
||
.head {
|
||
width: 1.1rem;
|
||
height: 1.1rem;
|
||
background: url("~@/assets/images/user.png") no-repeat;
|
||
background-size: 1.1rem auto;
|
||
position: relative;
|
||
margin: 0.2rem;
|
||
|
||
@for $i from 1 through 7 {
|
||
&.head_#{$i} {
|
||
background-position: 0 -#{1.12 * $i}rem;
|
||
}
|
||
}
|
||
.frame {
|
||
width: 1.6rem;
|
||
height: 1.5rem;
|
||
position: absolute;
|
||
top: -0.21rem;
|
||
left: -0.25rem;
|
||
background: url("~@/assets/images/frame.png") no-repeat;
|
||
background-size: 1.6rem auto;
|
||
@for $i from 1 through 5 {
|
||
&.frame_#{$i} {
|
||
background-position: 0 -#{1.6 * $i}rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.box {
|
||
min-width: 3.2rem;
|
||
.name {
|
||
font-size: 0.38rem;
|
||
font-weight: 600;
|
||
color: #333;
|
||
line-height: 1;
|
||
}
|
||
.money {
|
||
border: 1px solid #eeefef;
|
||
color: #c56718;
|
||
border-radius: 0.5rem;
|
||
margin-top: 0.2rem;
|
||
padding: 0.1rem 0.1rem 0.1rem 0.7rem;
|
||
line-height: 1;
|
||
background: url("~@/assets/images/icon/money.png") no-repeat 0.13rem
|
||
center;
|
||
background-size: 0.4rem auto;
|
||
}
|
||
}
|
||
.down {
|
||
color: #c56718;
|
||
font-weight: bold;
|
||
.lab {
|
||
background: linear-gradient(#f0ab5b, #c56718);
|
||
color: #fff;
|
||
padding: 0.05rem 0.1rem;
|
||
line-height: 1;
|
||
border-radius: 0.05rem;
|
||
font-weight: normal;
|
||
margin-right: 0.1rem;
|
||
}
|
||
}
|
||
.time {
|
||
color: #338d5f;
|
||
font-weight: bold;
|
||
margin-top: 0.2rem;
|
||
.lab {
|
||
background: linear-gradient(#3caf81, #338d5f);
|
||
color: #fff;
|
||
padding: 0.05rem 0.1rem;
|
||
line-height: 1;
|
||
border-radius: 0.05rem;
|
||
font-weight: normal;
|
||
margin-right: 0.1rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|