语言切换

This commit is contained in:
2023-11-27 10:48:26 +08:00
parent 059b4d35be
commit 2bc55bdf66
15 changed files with 427 additions and 143 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="login-container">
<div class="login-container" :class="{'enClass': selectType === 'en-us'}">
<div class="login-header">
<div class="login_logo"></div>
</div>
@@ -7,12 +7,12 @@
<div class="login-wraper">
<div class="navs-wraper">
<button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">{{ $t('login.passwordlogin') }}</button>
<button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">配置</button>
<button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">{{ $t('login.configuration') }}</button>
</div>
<div v-show="tab === 0" class="login-content_wraper">
<div class="login-items-wraper">
<div class="login-item">
<div class="login-label" @click="toFocus(1)">用户名</div>
<div class="login-label" @click="toFocus(1)">{{ $t('common.username') }}</div>
<!-- <input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal"> -->
<div class="login_value">
<keyboard-input
@@ -25,33 +25,33 @@
</div>
</div>
<div class="login-item">
<div class="login-label" @click="toFocus(2)">密码</div>
<div class="login-label" @click="toFocus(2)">{{ $t('login.password') }}</div>
<div class="login_value">
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
</div>
</div>
</div>
<div class="login-buttons-wraper">
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>{{ $t('login.login') }}</p></button>
</div>
</div>
<div v-show="tab === 1" class="login-content_wraper">
<div class="login-items-wraper">
<div class="login-item">
<div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
<div class="login-label" @click="toFocus(3)">{{ $t('login.domainnameaddress') }}</div>
<div class="login_value login_value_1">
<input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal" data-next="1">
</div>
</div>
<div class="login-item">
<div class="login-label login-label_1" @click="toFocus(4)">刷新时间</div>
<div class="login-label" @click="toFocus(4)">{{ $t('login.refreshtime') }}</div>
<div class="login_value login_value_1">
<input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
</div>
</div>
</div>
<div class="login-buttons-wraper">
<button class="button_control" @click="saveSetup"><p>配置</p></button>
<button class="button_control" @click="saveSetup"><p>{{ $t('login.configuration') }}</p></button>
</div>
</div>
</div>
@@ -69,6 +69,7 @@ export default {
},
data () {
return {
selectType: '',
tab: 0,
username: '',
password: '',
@@ -84,6 +85,13 @@ export default {
}
}
},
created () {
if (this.$i18n.locale === 'zh-cn') {
this.selectType = 'zh-cn'
} else if (this.$i18n.locale === 'en-us') {
this.selectType = 'en-us'
}
},
mounted () {
// 点对点项目分辨率 1024 * 768
// alert(document.body.clientWidth, 'a')
@@ -246,14 +254,11 @@ export default {
width 100%
margin-bottom 40px
.login-label
width 115px
_font(30px, 80px, #AFBED8,,right)
.login-label_1
width 215px
_font(30px, 35px, #AFBED8,,)
.login_value
width calc(100% - 140px)
width calc(100% - 120px)
.login_value_1
width calc(100% - 240px)
width calc(100% - 225px)
.login-input
width 100%
_font(30px, 78px, #fff,,)
@@ -295,4 +300,12 @@ export default {
background-color #EEE
box-shadow 0px -3px 10px rgba(black, 0.3)
border-radius 10px
.enClass
.login_value
width calc(100% - 165px)
.login_value_1
width calc(100% - 255px)
.button_control
p
font-size 40px
</style>