shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: i18n,add en and zh-cn language.

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-11-22 14:53:36 +08:00
parent 8e6eff54f4
commit 391142223f
18 changed files with 189 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/Config/Global/FaceConfig.vue
View File

@@ -10,7 +10,7 @@ import 'vue3-colorpicker/style.css';
import { isRgbOrRgba, isHex } from '@/utils/color'
import PatternSetting from './components/PatternSetting.vue'
import {languageList} from '@/locales/i18n'
import {Language} from '@/locales/i18n'
import i18n from '@/locales/i18n'
const globalConfig = useStore().globalConfig
const personConfig = useStore().personConfig
const prizeConfig= useStore().prizeConfig
@@ -44,11 +44,11 @@ const formErr = ref({
const schema = zod.object({
rowCount: zod.number({
required_error: '必填项',
invalid_type_error: '必须填入数字',
required_error: i18n.global.t('error.require'),
invalid_type_error: i18n.global.t('error.requireNumber'),
})
.min(1, '最小为1')
.max(100, '最大为100')
.min(1, i18n.global.t('error.minNumber1'))
.max(100, i18n.global.t('error.maxNumber100'))
// 格式化
@@ -169,7 +169,7 @@ onMounted(() => {
</div>
</dialog>
<div>
<h2>全局配置</h2>
<h2>{{$t('viewTitle.globalSetting')}}</h2>
<div class="mb-8">
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">{{$t('button.resetAllData')}}</button>
</div>
@@ -178,7 +178,7 @@ onMounted(() => {
<div class="label">
<span class="label-text">{{$t('table.title')}}</span>
</div>
<input type="text" v-model="topTitleValue" placeholder="输入标题"
<input type="text" v-model="topTitleValue" :placeholder="$t('placeHolder.enterTitle')"
class="w-full max-w-xs input input-bordered" />
</div>
</label>

6
src/views/Config/Global/ImageConfig.vue
View File

@@ -69,13 +69,13 @@ watch(() => imgUploadToast.value, (val) => {
<template>
<div class="toast toast-top toast-end">
<div class="alert alert-error" v-if="imgUploadToast == 2">
<span>上传失败</span>
<span>{{ $t('error.uploadFail') }}</span>
</div>
<div class="alert alert-success" v-if="imgUploadToast == 1">
<span>上传成功</span>
<span>{{ $t('error.uploadSuccess') }}</span>
</div>
<div class="alert alert-error" v-if="imgUploadToast == 3">
<span>不是图片</span>
<span>{{ $t('error.notImage') }}</span>
</div>
</div>

44
src/views/Config/Person/PersonAll.vue
View File

@@ -8,7 +8,7 @@ import * as XLSX from 'xlsx'
import { readFileBinary } from '@/utils/file'
import { addOtherInfo } from '@/utils'
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
import i18n from '@/locales/i18n'
const personConfig = useStore().personConfig
const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
const limitType = '.xlsx,.xls'
@@ -38,9 +38,9 @@ const exportData = () => {
delete data[i].prizeId
// 修改字段名称
if (data[i].isWin) {
data[i].isWin = '是'
data[i].isWin = i18n.global.t('data.yes')
} else {
data[i].isWin = '否'
data[i].isWin = i18n.global.t('data.no')
}
// 格式化数组为
data[i].prizeTime = data[i].prizeTime.join(',')
@@ -48,13 +48,13 @@ const exportData = () => {
}
let dataString = JSON.stringify(data)
dataString = dataString
.replaceAll(/uid/g, '编号')
.replaceAll(/isWin/g, '是否中奖')
.replaceAll(/department/g, '部门')
.replaceAll(/name/g, '姓名')
.replaceAll(/identity/g, '身份')
.replaceAll(/prizeName/g, '获奖')
.replaceAll(/prizeTime/g, '获奖时间')
.replaceAll(/uid/g, i18n.global.t('data.number'))
.replaceAll(/isWin/g, i18n.global.t('data.isWin'))
.replaceAll(/department/g, i18n.global.t('data.department'))
.replaceAll(/name/g, i18n.global.t('data.name'))
.replaceAll(/identity/g, i18n.global.t('data.identity'))
.replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
.replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
data = JSON.parse(dataString)
@@ -80,30 +80,30 @@ const delPersonItem = (row: IPersonConfig) => {
const tableColumns = [
{
label: '编号',
label: i18n.global.t('data.number'),
props: 'uid',
},
{
label: '姓名',
label: i18n.global.t('data.name'),
props: 'name',
},
{
label: '部门',
label: i18n.global.t('data.department'),
props: 'department',
},
{
label: '身份',
label: i18n.global.t('data.identity'),
props: 'identity',
},
{
label: '是否已中奖',
label: i18n.global.t('data.isWin'),
props: 'isWin',
formatValue(row: IPersonConfig) {
return row.isWin ? '是' : '否'
return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
}
},
{
label: '操作',
label: i18n.global.t('data.operation'),
actions: [
// {
// label: '编辑',
@@ -113,7 +113,7 @@ const tableColumns = [
// }
// },
{
label: '删除',
label: i18n.global.t('data.delete'),
type: 'btn-error',
onClick: (row: IPersonConfig) => {
delPersonItem(row)
@@ -156,12 +156,12 @@ onMounted(() => {
</dialog>
<div class="min-w-1000px">
<h2>人员管理</h2>
<h2>{{ $t('viewTitle.personManagement') }}</h2>
<div class="flex gap-3">
<button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">{{ $t('button.allDelete') }}</button>
<div class="tooltip tooltip-bottom" :data-tip="$t('tooltip.downloadTemplateTip')">
<a class="no-underline btn btn-secondary btn-sm" download="人口登记表.xlsx" target="_blank"
href="/log-lottery/人口登记表.xlsx">{{ $t('button.downloadTemplate') }}</a>
<a class="no-underline btn btn-secondary btn-sm" :download="$t('data.xlsxName')" target="_blank"
:href="'/log-lottery/'+$t('data.xlsxName')">{{ $t('button.downloadTemplate') }}</a>
</div>
<div class="">
<label for="explore">
@@ -173,8 +173,6 @@ onMounted(() => {
<span class="btn btn-primary btn-sm">{{ $t('button.importData') }}</span>
</div>
</label>
<!-- <button class="btn btn-primary btn-sm">上传excel</button> -->
</div>
<button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">{{ $t('button.resetData') }}</button>
<button class="btn btn-accent btn-sm" @click="exportData">{{ $t('button.exportResult') }}</button>

33
src/views/Config/Person/PersonAlready.vue
View File

@@ -5,7 +5,7 @@ import useStore from '@/store'
import { IPersonConfig } from '@/types/storeType';
import { storeToRefs } from 'pinia';
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
import i18n from '@/locales/i18n'
const personConfig = useStore().personConfig
const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
@@ -25,32 +25,32 @@ const handleMoveNotPerson = (row: IPersonConfig) => {
const tableColumnsList = [
{
label: '编号',
label: i18n.global.t('data.number'),
props: 'uid',
sort: true
},
{
label: '姓名',
label: i18n.global.t('data.number'),
props: 'name',
},
{
label: '部门',
label: i18n.global.t('data.department'),
props: 'department',
},
{
label: '身份',
label: i18n.global.t('data.identity'),
props: 'identity',
},
{
label: '奖品',
label: i18n.global.t('data.prizeName'),
props: 'prizeName',
sort: true
},
{
label: '操作',
label: i18n.global.t('data.operation'),
actions: [
{
label: '移入未中奖名单',
label: i18n.global.t('data.removePerson'),
type: 'btn-info',
onClick: (row: IPersonConfig) => {
handleMoveNotPerson(row)
@@ -61,37 +61,37 @@ const tableColumnsList = [
]
const tableColumnsDetail = [
{
label: '编号',
label: i18n.global.t('data.number'),
props: 'uid',
sort: true
},
{
label: '姓名',
label: i18n.global.t('data.number'),
props: 'name',
},
{
label: '部门',
label: i18n.global.t('data.department'),
props: 'department',
},
{
label: '身份',
label: i18n.global.t('data.identity'),
props: 'identity',
},
{
label: '奖品',
label: i18n.global.t('data.prizeName'),
props: 'prizeName',
sort: true
},
{
label: '中奖时间',
label: i18n.global.t('data.prizeTime'),
props: 'prizeTime',
},
{
label: '操作',
label: i18n.global.t('data.operation'),
actions: [
{
label: '移入未中奖名单',
label: i18n.global.t('data.removePerson'),
type: 'btn-info',
onClick: (row: IPersonConfig) => {
handleMoveNotPerson(row)
@@ -108,7 +108,6 @@ const tableColumnsDetail = [
<h2>{{ $t('viewTitle.winnerManagement') }}</h2>
<div class="flex items-center justify-start gap-10">
<!-- <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button> -->
<div>
<span>{{$t('table.luckyPeopleNumber')}}：</span>
<span>{{ alreadyPersonList.length }}</span>

19
src/views/Config/Prize/PrizeConfig.vue
View File

@@ -5,7 +5,7 @@ import { IPrizeConfig } from '@/types/storeType'
import { storeToRefs } from 'pinia'
import localforage from 'localforage'
import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
import i18n from '@/locales/i18n'
const imageDbStore = localforage.createInstance({
name: 'imgStore'
})
@@ -22,7 +22,7 @@ const selectedPrize = ref<IPrizeConfig | null>()
const addPrize = () => {
const defaultPrizeCOnfig: IPrizeConfig = {
id: new Date().getTime().toString(),
name: '奖项',
name: i18n.global.t('data.prizeName'),
sort: 0,
isAll: false,
count: 1,
@@ -178,7 +178,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
<div class="label">
<span class="label-text">{{ $t('table.prizeName') }}</span>
</div>
<input type="text" v-model="item.name" placeholder="名称"
<input type="text" v-model="item.name" :placeholder="$t('placeHolder.name')"
class="w-full max-w-xs input-sm input input-bordered" />
</label>
<label class="w-1/2 max-w-xs mb-10 form-control">
@@ -192,19 +192,12 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
<div class="label">
<span class="label-text">{{ $t('table.numberParticipants') }}</span>
</div>
<input type="number" v-model="item.count" placeholder="获奖人数" @change="changePrizePerson(item)"
<input type="number" v-model="item.count" :placeholder="$t('placeHolder.winnerCount')" @change="changePrizePerson(item)"
class="w-full max-w-xs p-0 m-0 input-sm input input-bordered" />
<div class="tooltip tooltip-bottom" :data-tip="$t('table.isDone') + item.isUsedCount + '/' + item.count">
<progress class="w-full progress" :value="item.isUsedCount" :max="item.count"></progress>
</div>
</label>
<!-- <label class="w-1/2 max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">已获奖人数</span>
</div>
<input disabled type="number" v-model="item.isUsedCount" placeholder="获奖人数"
class="w-full max-w-xs input-sm input input-bordered" />
</label> -->
<label class="w-1/2 max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">{{ $t('table.isDone') }}</span>
@@ -218,7 +211,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
</div>
<select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
<option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span></option>
<option disabled selected>选择一张图片</option>
<option disabled selected>{{ $t('table.selectPicture') }}</option>
<option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
</option>
</select>
@@ -233,7 +226,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
<li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
v-for="se in item.separateCount.countList" :key="se.id">
<div class="flex items-center justify-center w-full h-full tooltip"
:data-tip="'已抽取:' + se.isUsedCount + '/' + se.count">
:data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
<div class="absolute left-0 z-50 h-full bg-blue-300/80"
:style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
<span>{{ se.count }}</span>

3
src/views/Config/Readme/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang='ts'>
import {ref,onMounted} from 'vue'
import markdownit from 'markdown-it'
import i18n from '@/locales/i18n'
const md = markdownit()
const readmeHtml=ref('')
const readMd=()=>{
fetch('/log-lottery/readme.md')
fetch('/log-lottery/'+i18n.global.t('data.readmeName'))
.then(res=>res.text())
.then(res=>{
readmeHtml.value = md.render(res)

43
src/views/Home/PrizeList.vue
View File

@@ -9,6 +9,7 @@ import { IPrizeConfig } from '../../types/storeType';
import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
import i18n from '@/locales/i18n'
const prizeConfig = useStore().prizeConfig
const globalConfig = useStore().globalConfig
const system = useStore().system
@@ -41,7 +42,7 @@ const deleteTemporaryPrize = () => {
}
const submitTemporaryPrize = () => {
if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
alert('请填写完整信息')
alert(i18n.global.t('error.completeInformation'))
return
}
@@ -94,18 +95,18 @@ onMounted(() => {
<div class="flex items-center">
<dialog id="my_modal_1" ref="temporaryPrizeRef" class="border-none modal">
<div class="modal-box">
<h3 class="text-lg font-bold">增加临时抽奖</h3>
<h3 class="text-lg font-bold">{{$t('dialog.titleTemporary')}}</h3>
<div class="flex flex-col gap-3">
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">名称:</span>
<span class="label-text">{{$t('table.name')}}:</span>
</div>
<input type="text" v-model="temporaryPrize.name" placeholder="名称"
<input type="text" v-model="temporaryPrize.name" :placeholder="$t('placeHolder.name')"
class="max-w-xs input-sm input input-bordered" />
</label>
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">是否全员参加</span>
<span class="label-text">{{$t('table.fullParticipation')}}</span>
</div>
<input type="checkbox" :checked="temporaryPrize.isAll"
@change="temporaryPrize.isAll = !temporaryPrize.isAll"
@@ -113,21 +114,21 @@ onMounted(() => {
</label>
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">获奖人数</span>
<span class="label-text">{{$t('table.setLuckyNumber')}}</span>
</div>
<input type="number" v-model="temporaryPrize.count" @change="changePersonCount" placeholder="获奖人数"
<input type="number" v-model="temporaryPrize.count" @change="changePersonCount" :placeholder="$t('placeHolder.winnerCount')"
class="max-w-xs input-sm input input-bordered" />
</label>
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">已获奖人数</span>
<span class="label-text">{{$t('table.luckyPeopleNumber')}}</span>
</div>
<input disabled type="number" v-model="temporaryPrize.isUsedCount" placeholder="获奖人数"
<input disabled type="number" v-model="temporaryPrize.isUsedCount" :placeholder="$t('placeHolder.winnerCount')"
class="max-w-xs input-sm input input-bordered" />
</label>
<label class="flex w-full max-w-xs" v-if="temporaryPrize.separateCount">
<div class="label">
<span class="label-text">单次抽取个数</span>
<span class="label-text">{{$t('table.onceNumber ')}}</span>
</div>
<div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
<ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
@@ -135,24 +136,24 @@ onMounted(() => {
<li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
v-for="se in temporaryPrize.separateCount.countList" :key="se.id">
<div class="flex items-center justify-center w-full h-full tooltip"
:data-tip="'已抽取:' + se.isUsedCount + '/' + se.count">
:data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
<div class="absolute left-0 z-50 h-full bg-blue-300/80"
:style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
<span>{{ se.count }}</span>
</div>
</li>
</ul>
<button v-else class="btn btn-secondary btn-xs">设置</button>
<button v-else class="btn btn-secondary btn-xs">{{$t('button.setting')}}</button>
</div>
</label>
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">图片</span>
<span class="label-text">{{$t('table.image')}}</span>
</div>
<select class="flex-1 w-12 select select-warning select-sm" v-model="temporaryPrize.picture">
<option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span>
</option>
<option disabled selected>选择一张图片</option>
<option disabled selected>{{$t('table.selectPicture')}}</option>
<option class="w-auto" v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{
picItem.name }}
</option>
@@ -161,8 +162,8 @@ onMounted(() => {
</div>
<div class="modal-action">
<form method="dialog" class="flex gap-3">
<button class="btn btn-sm" @click="submitTemporaryPrize">确定</button>
<button class="btn btn-sm">取消</button>
<button class="btn btn-sm" @click="submitTemporaryPrize">{{ $t('button.confirm') }}</button>
<button class="btn btn-sm">{{ $t('button.cancel') }}</button>
</form>
</div>
</div>
@@ -190,12 +191,12 @@ onMounted(() => {
<!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
</div>
<div class="flex flex-col gap-1 mr-2">
<div class="tooltip tooltip-left" data-tip="编辑">
<div class="tooltip tooltip-left" :data-tip="$t('tooltip.edit')">
<div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
<svg-icon name="edit"></svg-icon>
</div>
</div>
<div class="tooltip tooltip-left" data-tip="删除">
<div class="tooltip tooltip-left" :data-tip="$t('tooltip.delete')">
<div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
<svg-icon name="delete"></svg-icon>
</div>
@@ -234,13 +235,13 @@ onMounted(() => {
</li>
</ul>
<div class="flex flex-col gap-3">
<div class="tooltip tooltip-right" data-tip="奖项列表">
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')">
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
@click="prizeShow = !prizeShow">
<svg-icon name="arrow_left" class="w-full h-full"></svg-icon>
</div>
</div>
<div class="tooltip tooltip-right" data-tip="添加抽奖">
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.addActivity')">
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
@click="addTemporaryPrize">
<svg-icon name="add" class="w-full h-full"></svg-icon>
@@ -252,7 +253,7 @@ onMounted(() => {
</div>
<transition name="prize-operate" :appear="true">
<div class="tooltip tooltip-right" data-tip="奖项列表" v-show="!prizeShow">
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')" v-show="!prizeShow">
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
@click="prizeShow = !prizeShow">
<svg-icon name="arrow_right" class="w-full h-full"></svg-icon>

22
src/views/Home/index.vue
View File

@@ -5,6 +5,7 @@ import { useElementStyle, useElementPosition } from '@/hooks/useElement'
import StarsBackground from '@/components/StarsBackground/index.vue'
import confetti from 'canvas-confetti'
import { filterData, selectCard } from '@/utils'
import i18n from '@/locales/i18n'
import { rgba } from '@/utils/color'
import { IPersonConfig } from '@/types/storeType'
// import * as THREE from 'three'
@@ -375,7 +376,7 @@ const startLottery = () => {
// 验证是否已抽完全部奖项
if (currentPrize.value.isUsed || !currentPrize.value) {
toast.open({
message: '抽奖抽完了',
message: i18n.global.t('error.personIsAllDone'),
type: 'warning',
position: 'top-right',
duration: 10000
@@ -387,7 +388,7 @@ const startLottery = () => {
// 验证抽奖人数是否还够
if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
toast.open({
message: '抽奖人数不够',
message: i18n.global.t('error.personNotEnough'),
type: 'warning',
position: 'top-right',
duration: 10000
@@ -417,7 +418,8 @@ const startLottery = () => {
}
}
toast.open({
message: `现在抽取${currentPrize.value.name} ${leftover}人`,
// message: `现在抽取${currentPrize.value.name} ${leftover}人`,
message:i18n.global.t('error.startDraw',{count:currentPrize.value.name,leftover:leftover}),
type:'default',
position: 'top-right',
duration: 8000
@@ -637,19 +639,19 @@ onUnmounted(() => {
:style="{ fontSize: textSize * 1.5 + 'px', color: textColor }">{{ topTitle }}</h2>
<div class="flex gap-3">
<button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
@click="router.push('config')">暂无人员信息，前往导入</button>
@click="router.push('config')">{{$t('button.noInfoAndImport')}}</button>
<button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
@click="setDefaultPersonList">使用默认数据</button>
@click="setDefaultPersonList">{{$t('button.useDefault')}}</button>
</div>
</div>
<div id="container" ref="containerRef" class="3dContainer">
<!-- 选中菜单结构 start-->
<div id="menu">
<button class="btn-end " @click="enterLottery" v-if="currentStatus == 0 && tableData.length > 0">进入抽奖</button>
<button class="btn-end " @click="enterLottery" v-if="currentStatus == 0 && tableData.length > 0">{{$t('button.enterLottery')}}</button>
<div class="start" v-if="currentStatus == 1">
<button class="btn-start" @click="startLottery"><strong>开始</strong>
<button class="btn-start" @click="startLottery"><strong>{{$t('button.start')}}</strong>
<div id="container-stars">
<div id="stars"></div>
</div>
@@ -661,11 +663,11 @@ onUnmounted(() => {
</button>
</div>
<button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">抽取幸运儿</button>
<button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">{{$t('button.selectLucky')}}</button>
<div v-if="currentStatus == 3" class="flex justify-center gap-6 enStop">
<div class="start">
<button class="btn-start" @click="continueLottery"><strong>继续！</strong>
<button class="btn-start" @click="continueLottery"><strong>{{$t('button.continue')}}</strong>
<div id="container-stars">
<div id="stars"></div>
</div>
@@ -678,7 +680,7 @@ onUnmounted(() => {
</div>
<div class="start">
<button class="btn-cancel" @click="quitLottery"><strong>取消</strong>
<button class="btn-cancel" @click="quitLottery"><strong>{{$t('button.cancel')}}</strong>
<div id="container-stars">
<div id="stars"></div>
</div>