Skip to content

H
hls-xcmg-vue-app
Commit 484f664f authored by wjc's avatar wjc
Browse files
Options

登录及首页

parent fbd77cd9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 464 additions and 573 deletions
src/assets/login/background.png deleted 100644 → 0
View file @ fbd77cd9
This diff is collapsed.
src/assets/login/passwordConfirm.png 100755 → 100644
View replaced file @ fbd77cd9 View file @ 484f664f
src/assets/login/passwordConfirm.png

963 Bytes | W: | H:

src/assets/login/passwordConfirm.png

2.48 KB | W: | H:

src/assets/login/passwordConfirm.png
src/assets/login/passwordConfirm.png
src/assets/login/passwordConfirm.png
src/assets/login/passwordConfirm.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/login/phone.png 100755 → 100644
View replaced file @ fbd77cd9 View file @ 484f664f
src/assets/login/phone.png

985 Bytes | W: | H:

src/assets/login/phone.png

1.89 KB | W: | H:

src/assets/login/phone.png
src/assets/login/phone.png
src/assets/login/phone.png
src/assets/login/phone.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/home/home-page.vue
View file @ 484f664f
This diff is collapsed.
src/pages/login.vue
View file @ 484f664f
......@@ -11,9 +11,11 @@
</div>
</div>
</transition>
<div class="bird-icon" />
<div class="bird-icon">
<h2>Hello!</h2>
<h3>欢迎使用租赁通～</h3>
</div>
<div class="login-wrap">
<img class="title" src="../assets/login/right-title.png" >
<div class="pwd">
<div class="pwd-input">
<input
......@@ -24,7 +26,7 @@
<img src="../assets/login/login-delete.png" >
</div>
</div>
<div class="pwd">
<div class="pwd" style="margin-top: 15px">
<div class="pwd-input">
<input
id="passwordInput" v-model="password" :type="pwdType" placeholder="请输入密码"
......@@ -38,11 +40,9 @@
<div class="register" @click="registerNew">注册</div>
<div class="pwd-forgotten" @click="pwdForgotten">忘记密码？</div>
</div>
<div class="both-button">
<div class="button submit" @click="access">登录</div>
<div class="button submit" @click="goHome">游客体验</div>
</div>
<div class="login-btn">
<div class="button submit" @click="access">登录</div>
</div>
</scroll>
</template>
......@@ -104,10 +104,10 @@ export default {
methods: {
async goHome () {
hlsPopup.showLongCenter('游客体验暂不可用！')
/*let flag = await this.getAccessToken()
/* let flag = await this.getAccessToken()
if (flag) {
this.$router.push('tab')
}*/
} */
},
changeType () {
this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
......@@ -143,12 +143,12 @@ export default {
window.localStorage.setItem('user_phone', vm.username)
window.localStorage.setItem('app_user_id', res.info.app_user_id)
// vm.$router.push('tab')
vm.$router.push('/choose-user');
vm.$router.push('/choose-user')
let tagOption = {
'username': isNaN(Number(vm.username)) ? '11111111111': vm.username
'username': isNaN(Number(vm.username)) ? '11111111111' : vm.username,
}
let phone = isNaN(Number(vm.username)) ? '11111111111': vm.username;
vm.Jpush._jpush_config(tagOption, phone);
let phone = isNaN(Number(vm.username)) ? '11111111111' : vm.username
vm.Jpush._jpush_config(tagOption, phone)
} else {
hlsPopup.hideLoading()
hlsPopup.showLongCenter(res.message)
......@@ -313,7 +313,7 @@ export default {
opacity: 0;
}
#login {
background: url("../assets/login/background.png") no-repeat;
background: url("../assets/login/background@3x.png") no-repeat;
background-size: 100% 100%;
background-position-x: 0px;
color: #ffffff;
......@@ -386,23 +386,28 @@ export default {
}
}
.bird-icon {
padding-top: 30%;
background-size: 51px 25px;
padding-top: 35%;
h2,h3{
font-family: AlibabaPuHuiTi_2_85_Bold;
font-size: 27px;
color: #007BC7;
font-weight: 700;
margin-left: 10%;
}
h3{
font-size: 20px;
margin-top: 5px;
}
}
.login-wrap {
width: 87%;
height: 355px;
height: auto;
margin: 0 auto;
background-color: #fff;
border-radius: 8px;
// margin-top: 15%;
margin-top: 6%;
padding: 32px 24px;
.title {
width: 227px;
height: 71px;
margin-left: -10px;
}
margin-top: 18%;
padding: 0 24px 20px 24px;
box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
border-radius: 10px;
}
.pwd {
position: relative;
......@@ -410,6 +415,7 @@ export default {
margin: 0 auto;
display: flex;
display: -webkit-flex;
.pwd-icon {
margin-top: 2px;
margin-right: 6px;
......@@ -439,7 +445,7 @@ export default {
line-height: 35px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(42, 42, 42, 0.4);
border-bottom: 1px solid rgba(226,226,226,1);
margin-top: 30px;
border-top:1px solid #FFF;
border-left: 1px solid #FFF;
......@@ -472,21 +478,21 @@ export default {
display: flex;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #1d3fff;
margin-top: 8px;
color: #007BC7;
margin-top: 15px;
font-weight: 500;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.both-button{
.login-btn {
display: flex;
justify-content: space-around;
}
.submit {
background: #1d3fff;
border-radius: 4px;
width: 130px;
background: #007BC7;
border-radius: 50px;
width: 70%;
margin-top: 32px;
height: 45px;
font-size: 16px;
......
src/pages/pwd-forgotten.vue
View file @ 484f664f
......@@ -15,7 +15,7 @@
<input slot="content" v-model="phone_number" placeholder="请输入手机号码">
</item>
<item>
<img slot="left-icon" src="../assets/login/phone_code.png" class="left-icon">
<img slot="left-icon" src="../assets/login/check@3x.png" class="left-icon">
<div slot="name" class="required">验证码</div>
<input slot="content" v-model="verifiedCode" type="text" placeholder="请填写验证码">
<div slot="right-icon" class="verified-code">
......
src/pages/regiester2.vue
View file @ 484f664f
......@@ -5,11 +5,13 @@
<img src="@/assets/login/return.png" @click="returnLogin">
</div>
<div class="box">
<div class="box-content">
<img class="register-title" src="../assets/login/right-title.png" >
<div class="welcome">
<h2>欢迎注册！</h2>
</div>
<div class="register-content">
<div class="reg-item">
<img src="../assets/login/reg-user.png" class="left-icon" >
<input v-model="phone_number" placeholder="请输入手机号码" >
<img src="../assets/login/phone.png" class="left-icon">
<input v-model="phone_number" placeholder="请输入手机号码">
<img
v-if="phone_number"
class="right-icon"
......@@ -18,15 +20,15 @@
>
</div>
<div class="reg-item">
<img src="../assets/login/check.png" class="left-icon" >
<input v-model="verifiedCode" type="text" placeholder="请填写验证码" >
<img src="../assets/login/check@3x.png" class="left-icon">
<input v-model="verifiedCode" type="text" placeholder="请填写验证码">
<div class="verified-code">
<div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">点击获取</div>
<div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">获取验证码</div>
<span v-if="showTimer" class="verified-code-des">{{ timerCount }}{{ text }}</span>
</div>
</div>
<div class="reg-item">
<img src="../assets/login/pass.png" class="left-icon" >
<img src="@/assets/login/passwordConfirm.png" class="left-icon">
<input
v-model="user_password"
:type="pwdType"
......@@ -35,15 +37,19 @@
oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
>
<img v-if="user_password" :src="openEye" class="right-icon" @click="changeType" >
<img v-if="user_password" :src="openEye" class="right-icon" @click="changeType">
</div>
<div class="reg-item">
<img src="../assets/login/pass.png" class="left-icon" >
<img src="../assets/login/passwordConfirm.png" class="left-icon">
<input
v-model="confirm" :type="pwdType" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" placeholder="请重新输入密码"
v-model="confirm" :type="pwdType" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
placeholder="请重新输入密码"
>
<img v-if="confirm" :src="openEye" class="right-icon" @click="changeType" >
<img v-if="confirm" :src="openEye" class="right-icon" @click="changeType">
</div>
</div>
<div class="register-btn">
<div class="button submit" @click="submit">注册</div>
</div>
</div>
......@@ -133,7 +139,6 @@ export default {
},
getPhoneCode () {
let vm = this
debugger
if (!vm.showTimer) {
if (
hlsUtil.phoneNumber(vm.phone_number) ||
......@@ -251,40 +256,57 @@ export default {
</script>
<style lang="less">
@import "../styles/mixin";
@import "../styles/vue-1px";
@import "../styles/mixin";
@import "../styles/vue-1px";
#register {
#register {
.content {
background: url("../assets/login/background.png");
background: url("../assets/login/register-back@3x.png") no-repeat;
background-size: 100% 100%;
}
.box {
width: 327px;
height: 512px;
margin: 0 auto;
margin-top:80px;
background: #1d3fff;
border-radius: 8px;
.box-content {
width: 279px;
margin: 0 auto;
.register-title {
width: 156px;
width: 100%;
height: auto;
padding-top: 35%;
.welcome {
//margin-top: 35%;
h2 {
margin-left: 10%;
font-family: AlibabaPuHuiTi_2_85_Bold;
font-size: 27px;
color: @theme-color;;
font-weight: 700;
}
}
.register-content {
width: 87%;
margin: 0 auto;
background: #FFFFFF;
box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
border-radius: 10px;
padding: 20px 24px 30px 24px;
margin-top: 60px;
.reg-item {
position: relative;
width: 100%;
height: 40px;
margin-top: 30px;
line-height: 30px;
&:first-child {
margin-top: 6px;
}
img {
width: 28px;
height: 28px;
}
.left-icon {
position: absolute;
}
.right-icon {
width: 24px;
height: 24px;
......@@ -292,124 +314,88 @@ export default {
right: 0px;
top: 5px;
}
.verified-code {
position: absolute;
right: 0px;
top: 0px;
.verified-code-box {
padding-left: 12px;
border-left: 1px solid #ffffff;
color: #fff;
font-family: PingFangSC-Regular;
color: @theme-color;;
font-size: 14px;
line-height: 30px;
}
.verified-code-des {
font-size: 10px;
color: #fff;
}
}
input {
width: 100%;
text-indent: 30px;
background-color: #1d3fff;
font-family: PingFangSC-Regular;
padding-bottom: 8px;
font-size: 14px;
color: #ffffff;
line-height: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
border-bottom: 1px solid rgba(226,226,226,1);
}
input:focus {
border-bottom: 1px solid #fff;
}
border-bottom: 1px solid #1d3fff;
}
input::-webkit-input-placeholder {
font-size: 14px;
color: rgba(75, 74, 75, 0.4);
}
}
.right-logo {
width: 327px;
margin: 0 auto;
margin-top:10%;
img:last-child{
float: right;
width: 50px;
}
img:first-child{
float:left;
width: 20px;
}
// img {
// width: 50px;
// }
}
.register-title {
margin-top: 16%;
// margin-left: 10%;
img {
width: 180px;
}
}
.hls-list-item {
width: 90%;
margin-left: 8%;
margin-top: 6%;
background: #1d3fff;
}
.hls-item .contents {
//.setBottomLine(rgba(29,63,255,0.25))
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.right-logo {
width: 327px;
margin: 0 auto;
margin-top: 10%;
.hls-item .contents .add-name .left-icon {
width: 26px;
img:last-child {
float: right;
width: 50px;
}
.hls-item .contents .add-content input {
text-align: left;
background-color: #1d3fff;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #ffffff;
}
.hls-item .contents .add-content input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.add-content {
.right-icon {
width: 14px;
img:first-child {
float: left;
width: 20px;
}
}
.register-btn{
margin-top: 30px;
display: flex;
justify-content: center;
.submit {
background: #ffffff;
border-radius: 4px;
color: @headerColor;
width: 279px;
height: 40px;
margin-top: 50px;
color: #fff;
background: @theme-color;
height: 44px;
border-radius: 50px;
width: 70%;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
.return {
opacity: 1;
background: #fff;
......@@ -424,11 +410,12 @@ float:left;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
}
</style>
src/styles/variables.less
View file @ 484f664f
......@@ -15,14 +15,14 @@
/**
* 颜色
*/
@theme-color:#1D3FFF;
@theme-color:#007BC7;
@font-color:#666666;
@mainColor: #000;
@baseColor: white;
@hintColor:rgb(181,181,181);
@headerColor: #1D3FFF;
@headerColor: #007BC7;
@background-color-gray: #fafafa;
@activated-color: #1D3FFF;
@activated-color: #0263c7;
@divider-color:#fafafa;
@check-box-bg:#48D2A0;
......
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