og/GamePortrait
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: GamePortrait 竖屏版 - 深色豪华主题

Browse Source
This commit is contained in:
li
2026-01-16 17:47:53 +08:00
commit 40976e4b45
26611 changed files with 2843638 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/OnLinePop.vue
+278
View File
@@ -0,0 +1,278 @@
<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>