|
|
@@ -1,31 +1,43 @@
|
|
|
<template>
|
|
|
<div class="login bodyBG">
|
|
|
<CommonHeader></CommonHeader>
|
|
|
- <div class="login-box pad20 colorF tc">
|
|
|
- <div class="animated zoomIn">
|
|
|
- <h2>{{$t('login.loginBox.title')}}</h2>
|
|
|
- <div class="intro">
|
|
|
- {{$t('login.loginBox.intro')}}
|
|
|
- </div>
|
|
|
+ <!--<div class="login-box pad20 colorF tc">
|
|
|
+ <div class="animated zoomIn">
|
|
|
+ <h2>{{$t('login.loginBox.title')}}</h2>
|
|
|
+ <div class="intro">
|
|
|
+ {{$t('login.loginBox.intro')}}
|
|
|
</div>
|
|
|
- <!--<q-btn unelevated rounded color="primary" :label="$t('login.loginBox.loginWord')" />-->
|
|
|
- <!--<a href="#/board" class="login-btn">-->
|
|
|
- <span @click="handleLogin('login')" class="login-btn">
|
|
|
- {{$t('login.loginBox.loginWord')}}
|
|
|
- <!--<font-awesome-icon icon="long-arrow-alt-right"/>-->
|
|
|
- <font-awesome-icon icon="arrow-alt-circle-right" class="fr login-arrow" />
|
|
|
- </span>
|
|
|
- <!--<span @click="studenthandleLogin('login')" class="login-studentbtn">
|
|
|
- {{$t('login.loginBox.StudentEntrance')}}
|
|
|
- <font-awesome-icon icon="long-arrow-alt-right"/>
|
|
|
- <font-awesome-icon icon="arrow-alt-circle-right" class="fr login-arrow" />
|
|
|
- </span>-->
|
|
|
- <br>
|
|
|
- <!--<!–<!–<br>–>–>-->
|
|
|
- <!--<p><Button type="primary" @click="getTMDToken" ref="btnToken">获取醍摩豆token测试按钮</Button></p>-->
|
|
|
- <!--<!–<!–<br>–>–>-->
|
|
|
- <!--<p><Button type="primary" @click="TMDInfo">获取用户信息</Button></p>-->
|
|
|
</div>
|
|
|
+ <span @click="handleLogin('login')" class="login-btn">
|
|
|
+ {{$t('login.loginBox.loginWord')}}
|
|
|
+ <font-awesome-icon icon="arrow-alt-circle-right" class="fr login-arrow" />
|
|
|
+ </span>
|
|
|
+ <br>
|
|
|
+ </div>-->
|
|
|
+ <div class="loginbox">
|
|
|
+ <Form ref="formInline" :model="formInline" :rules="ruleInline">
|
|
|
+ <FormItem prop="user">
|
|
|
+ <Input type="text" v-model="formInline.user" placeholder="手机号码">
|
|
|
+ <Icon type="ios-phone-portrait" slot="prepend" size="18"></Icon>
|
|
|
+ </Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem prop="securityCode">
|
|
|
+ <Input type="text" v-model="formInline.password" placeholder="验证码" class="yzm"></Input>
|
|
|
+ <div class="yzmimg"><img src="../assets/img/21312.png" /></div>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem prop="phoneCode">
|
|
|
+ <Input type="text" v-model="formInline.password" placeholder="手机验证码" class="phoneyzm"></Input>
|
|
|
+ <div class="btn-code"> <Button type="primary" size="large">点击发送短信</Button></div>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem>
|
|
|
+ <Button type="primary" @click="handleSubmit('formInline')" class="register" size="large">注册</Button>
|
|
|
+ <Button type="primary" @click="handleSubmit('formInline')" size="large" class="loginbtn">登录</Button>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
<div class="footer-logo">
|
|
|
<a href="/"><img src="../assets/img/logo.png" alt=""></a>
|
|
|
</div>
|
|
|
@@ -49,6 +61,19 @@
|
|
|
ticket: '',
|
|
|
name: '',
|
|
|
teamModelId: ''
|
|
|
+ },
|
|
|
+ formInline: {
|
|
|
+ user: '',
|
|
|
+ password: ''
|
|
|
+ },
|
|
|
+ ruleInline: {
|
|
|
+ user: [
|
|
|
+ { required: true, message: '请输出正确的手机号码', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: 'Please fill in the password.', trigger: 'blur' },
|
|
|
+ { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
|
|
|
+ ]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -182,6 +207,16 @@
|
|
|
_isMobile() {
|
|
|
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
|
|
|
return flag;
|
|
|
+ },
|
|
|
+ //CE
|
|
|
+ handleSubmit(name) {
|
|
|
+ this.$refs[name].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$Message.success('Success!');
|
|
|
+ } else {
|
|
|
+ this.$Message.error('Fail!');
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -198,7 +233,48 @@
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style>
|
|
|
+ .ivu-input {
|
|
|
+ height:38px !important;
|
|
|
+ font-size:14px !important;
|
|
|
+ }
|
|
|
+ .ivu-btn-large {
|
|
|
+ padding:7px 15px 8px 15px !important;
|
|
|
+ }
|
|
|
+</style>
|
|
|
<style scoped>
|
|
|
+ .loginbox {width:22%;height:auto;margin:0 auto;padding:3%;border:1px solid #ccc}
|
|
|
+ .yzm {width:62%;margin-right:5%;float:left}
|
|
|
+ .yzmimg {
|
|
|
+ display: inline-block;
|
|
|
+ width: 33%;
|
|
|
+ line-height: 38px;
|
|
|
+ float: left
|
|
|
+ }
|
|
|
+ .yzmimg img {width:100px;height:auto;float:left;}
|
|
|
+ .phoneyzm {
|
|
|
+ width: 62%;
|
|
|
+ float: left;
|
|
|
+ border-top-left-radius: 4px;
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+ border-top-right-radius: 0px !important;
|
|
|
+ border-bottom-right-radius: 0px !important;
|
|
|
+ }
|
|
|
+ .btn-code {
|
|
|
+ width:38%;
|
|
|
+ float:left;
|
|
|
+ }
|
|
|
+ .register {
|
|
|
+ width:40%;
|
|
|
+ margin-right:10%;
|
|
|
+ font-size:14px;
|
|
|
+ float:left;
|
|
|
+ }
|
|
|
+ .loginbtn {
|
|
|
+ width: 40%;
|
|
|
+ font-size: 14px;
|
|
|
+ float:right;
|
|
|
+ }
|
|
|
.login-studentbtn {
|
|
|
margin-top: 20%;
|
|
|
display: inline-block;
|
