80a80760fb
为越南客户优化筹码显示，将筹码面值改为 K 后缀格式： - 10K, 20K, 50K, 100K, 200K, 500K (默认显示) - 1,000K, 2,000K, 5,000K, 10,000K, 20,000K, 50,000K, 100,000K 修改内容： - config.js: 更新 chipArry 配置数组 - PlayChip.vue: 更新筹码选择组件样式映射 - chipView.vue: 更新下注区域筹码显示样式 - base.scss: 更新筹码设置弹窗样式 - 新增 13 个 K 格式筹码图片 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
103 lines
3.0 KiB
Vue
103 lines
3.0 KiB
Vue
<template>
|
|
<div class="playchip">
|
|
<div
|
|
class="chip"
|
|
:class="[`chip_${item.key}`, { active: chooseChip.key == item.key }]"
|
|
v-for="item in chipArry"
|
|
:key="item.key"
|
|
@click="chooseFn(item)"
|
|
>
|
|
<span class="chip-value">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from "vue"
|
|
import { useStore } from "vuex"
|
|
import { audioMp3 } from "@/assets/js/sound.js"
|
|
export default {
|
|
name: "PlayChip",
|
|
components: {},
|
|
setup() {
|
|
const store = useStore()
|
|
const chipArry = computed(() =>
|
|
store.state.config.chipArry.filter((v) => v.show == true && v.value != 20)
|
|
)
|
|
const chooseChip = computed(() => store.state.app.chooseChip)
|
|
const chooseFn = (item) => {
|
|
store.commit("app/updateChooseChip", item)
|
|
audioMp3(["check"]).Play()
|
|
}
|
|
return {
|
|
chipArry,
|
|
chooseChip,
|
|
chooseFn
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.playchip {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start; /* Left align for scroll */
|
|
gap: 12px;
|
|
padding: 0 16px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(5px);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
overflow-x: auto;
|
|
z-index: 10;
|
|
|
|
/* Hide scrollbar */
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.chip {
|
|
flex: 0 0 auto;
|
|
width: 48px;
|
|
height: 48px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
&.active {
|
|
transform: scale(1.1); /* Slight scale for emphasis, consistent with modern UI */
|
|
box-shadow: 0 0 10px 2px #fceabb; /* Gold Glow */
|
|
border-radius: 50%; /* Ensure glow is circular */
|
|
background-color: transparent;
|
|
|
|
/* Remove the misaligned image overlay */
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.chip-value {
|
|
display: none; /* Hide text, use image text */
|
|
}
|
|
|
|
/* Map classes to images - Vietnam K format */
|
|
&.chip_10k { background-image: url("~@/assets/images/chip/10k.png"); }
|
|
&.chip_20k { background-image: url("~@/assets/images/chip/20k.png"); }
|
|
&.chip_50k { background-image: url("~@/assets/images/chip/50k.png"); }
|
|
&.chip_100k { background-image: url("~@/assets/images/chip/100k.png"); }
|
|
&.chip_200k { background-image: url("~@/assets/images/chip/200k.png"); }
|
|
&.chip_500k { background-image: url("~@/assets/images/chip/500k.png"); }
|
|
&.chip_1000k { background-image: url("~@/assets/images/chip/1000k.png"); }
|
|
&.chip_2000k { background-image: url("~@/assets/images/chip/2000k.png"); }
|
|
&.chip_5000k { background-image: url("~@/assets/images/chip/5000k.png"); }
|
|
&.chip_10000k { background-image: url("~@/assets/images/chip/10000k.png"); }
|
|
&.chip_20000k { background-image: url("~@/assets/images/chip/20000k.png"); }
|
|
&.chip_50000k { background-image: url("~@/assets/images/chip/50000k.png"); }
|
|
&.chip_100000k { background-image: url("~@/assets/images/chip/100000k.png"); }
|
|
}
|
|
}
|
|
</style>
|