Skip to content

E
eslotsys-game-nuxt
Commit 1be52495 authored by 毛线's avatar 毛线
Browse files
Options

登录页面

parent 34b48862
Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 10 deletions
components/dialog/user-dialog/tab.vue
View file @ 1be52495
......@@ -5,7 +5,7 @@
<img v-if="tabIndex === index" class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png" alt="">
<img v-else class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png" alt="">
<div class="text">{{ text }}</div>
<div v-if="index === 0" class="version">{{ `1.0.027` }}</div>
<div v-if="index === 0" class="version">{{ `1.0.028` }}</div>
</div>
</div>
</div>
......
pages/loading/data/images.json
View file @ 1be52495
......@@ -93,5 +93,6 @@
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop_up_bg.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/logout_sel_zh.png"
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/logout_sel_zh.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/loginBg1.png"
]
pages/login.vue
View file @ 1be52495
<template>
<div>
<input v-model="form.username" type="text" >
<input v-model="form.password" type="text" >
<button v-audio @click="click().login()">登录</button>
<button v-audio>音乐</button>
<!-- <div style="color: white;">version: 1.0.002</div> -->
<div class="layout">
<div class="form-box">
<div class="left-box">
<div class="wel">
<div>欢迎回来</div>
<div>{{ username }}</div>
</div>
<div style="text-align: center;">
<span class="server">server1</span>
</div>
<div class="form">
<div class="tip">
在下方输入你的资料
</div>
<div class="input-box">
<input v-model="form.username" class="input" type="text" placeholder="账号">
</div>
<div class="input-box pwd">
<input v-model="form.password" :type="show_pwd ? 'text' : 'password'" class="input" placeholder="密码">
<div class="icon btn" @click="show_pwd = !show_pwd">
<img v-if="!show_pwd" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/Hide.png" alt="">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/Unhide.png" alt="">
</div>
</div>
<div class="remember btn" @click="remember = !remember">
记住账号<input v-model="remember" class="checkbox" type="checkbox" name="fruit">
</div>
<div v-audio class="login-btn btn" @click="click().login()">登入</div>
</div>
</div>
<div class="line"/>
<div class="right-box">
<el-carousel
:autoplay="false"
trigger="click"
class="carousel"
indicator-position="outside">
<el-carousel-item v-for="item in carousel" :key="item">
<img :src="item.img" class="" alt="">
<div class="title">{{ item.title }}</div>
<div class="des">{{ item.des }}</div>
</el-carousel-item>
</el-carousel>
<!-- <button v-audio>音乐</button> -->
</div>
</div>
</div>
</template>
......@@ -12,11 +52,33 @@
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
data() {
const username = localStorage.getItem('username')
const carousel = [
{
title: '欢迎来到现实的老虎机世界！',
des: '拥抱已来的未来，您现在可以在世界任何一个角落，躺在沙发上玩真实的老虎机！',
img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/InstructionBg1.png',
},
{
title: '单人或多人游戏，爱玩什么玩什么！',
des: '从您最爱的赌场提供的所有游戏中选择最经典和最喜爱的游戏。若达到VIP等级，还可有预约功能，强霸你最爱的那台机器！',
img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/InstructionBg2.png',
},
{
title: '群人兴奋欢呼万岁！',
des: '每日、每周的比赛和全天候的神秘头奖等着您。快来成为下一个大赢家……',
img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/InstructionBg3.png',
},
]
return {
form: {
username: process.env.NODE_ENV === 'development' ? 'Hb' : '',
password: process.env.NODE_ENV === 'development' ? '123456' : '',
username,
password: '',
},
username,
carousel,
show_pwd: false,
remember: true,
}
},
methods: {
......@@ -40,6 +102,11 @@ export default {
// })
this.Login(data).then((res) => {
this.GetBaseInfo().then(({ data }) => {
if (this.remember) {
localStorage.setItem('username', this.form.username)
} else {
localStorage.setItem('username', '')
}
this.$router.replace({ path: '/device' })
this.loading = false
}).catch(() => {
......@@ -55,3 +122,128 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.layout {
height: 100%;
display: flex;
color: white;
.form-box {
width: 734px;
height: 380px;
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/loginBg1.png);
margin: auto;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
.left-box {
flex: 1;
.wel {
margin-top: 24px;
text-align: center;
font-size: 24px;
line-height: 24px;
font-weight: bold;
}
.server {
display: block;
margin: 12px auto;
border-radius: 100px;
background-color: #0076ff;
display: inline-block;
/* padding: 2px 12px; */
width: 120px;
font-size: 14px;
}
.form {
text-align: center;
width: 240px;
margin: auto;
.tip {
font-size: 12px;
}
.input-box {
margin: 12px auto;
background: #000071;
border-radius: 4px;
height: 24px;
position: relative;
.icon {
position: absolute;
right: 4px;
top: 3px;
img {
width: 18px;
}
}
input {
background-color: transparent;
outline: none;
border: none;
width: 100%;
color: white;
height: 24px;
line-height: 24px;
padding: 0 8px;
font-size: 12px;
&::placeholder {
color: #0062ff;
}
}
}
.remember {
font-size: 12px;
text-align: right;
.checkbox {
margin: 0 0 0 4px;
vertical-align: text-top;
}
}
$color: #dac9e2;
.login-btn {
text-align: center;
margin: 20px 12px;
color: $color;
border-radius: 100px;
border: 1px solid $color;
font-size: 12px;
padding: 4px;
font-weight: bold;
background-image: linear-gradient(#851d9a, #552095);
&:active {
opacity: .8;
}
}
}
}
.right-box {
flex: 1;
.carousel {
padding: 20px 20px 0;
img {
width: 100%;
}
.title{
font-size: 16px;
margin: 12px auto;
text-align: center;
font-weight: bold;
}
.des{
font-size: 12px;
margin: 12px auto;
text-align: center;
line-height: 16px;
zoom: 0.9;
}
}
}
.line {
flex: none;
width: 1px;
background: #cccccc39;
}
}
}
</style>
plugins/plugins.js
View file @ 1be52495
......@@ -10,10 +10,14 @@ import {
Message,
Loading,
Slider,
Carousel,
CarouselItem,
} from 'element-ui'
Vue.use(Loading.directive)
Vue.use(Slider)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.prototype.$message = Message
Vue.prototype.$loading = Loading.service
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment