5 changed files with 220 additions and 6 deletions
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<view> |
|||
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#010101" class="select"></uni-segmented-control> |
|||
<view class="body"> |
|||
<view class="login" v-show="current==0"> |
|||
<uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData"> |
|||
<uni-forms-item label="" name="email"> |
|||
<input type="text" class="login_input" placeholder="eamil address"> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="" name="pwd"> |
|||
<input type="text" class="login_input" placeholder="password"> |
|||
</uni-forms-item> |
|||
</uni-forms> |
|||
<view class="tips">Forgot your Password?</view> |
|||
<button class="login_submit">sign in</button> |
|||
<view class="agreement"> |
|||
<img src="../../static/img/select2.png" mode="" class="agreement_image"></img> |
|||
<view class=""> |
|||
by continuong, you agree to be <text class="text"> terms of use</text> and <text class="text">privacy policy</text>. |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="" v-show="current==1"> |
|||
|
|||
</view> |
|||
|
|||
<view class="mode"> |
|||
<view class="mode_title">or continue with</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
items: ['SIGN IN', 'REGISTER'], |
|||
current: 0, |
|||
dynamicFormData:{ |
|||
email:'', |
|||
pwd:'' |
|||
}, |
|||
dynamicRules: { |
|||
email: { |
|||
rules: [{ |
|||
required: false, |
|||
errorMessage: '域名不能为空' |
|||
}, { |
|||
format: 'email', |
|||
errorMessage: '域名格式错误' |
|||
}] |
|||
} |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
onClickItem(e) { |
|||
if (this.current != e.currentIndex) { |
|||
this.current = e.currentIndex; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.select{ |
|||
margin-top: 145.33rpx; |
|||
font-size: 33.33rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 80rpx; |
|||
} |
|||
.body{ |
|||
padding: 0 32rpx; |
|||
} |
|||
.login{ |
|||
|
|||
.login_input{ |
|||
height: 97.33rpx; |
|||
border: 1px solid #323333; |
|||
border-radius: 48.67rpx; |
|||
font-size: 22.67rpx; |
|||
padding-left: 33.33rpx; |
|||
} |
|||
.tips{ |
|||
font-size: 22.67rpx; |
|||
color: #666666; |
|||
margin-top: 73.33rpx; |
|||
text-align: right; |
|||
margin-bottom: 34.67rpx; |
|||
} |
|||
.login_submit{ |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background-color: #000000; |
|||
color: white; |
|||
border-radius: 6.67rpx; |
|||
margin-bottom: 52rpx; |
|||
font-weight: bold; |
|||
} |
|||
.agreement{ |
|||
display: flex; |
|||
// align-items: center; |
|||
// padding: 0 33.33rpx; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
|
|||
.agreement_image{ |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
margin-right: 13.33rpx; |
|||
} |
|||
.text{ |
|||
color: #4F92F1; |
|||
} |
|||
} |
|||
} |
|||
.mode{ |
|||
position: fixed; |
|||
bottom: 138.67rpx; |
|||
width: 100%; |
|||
.mode_title{ |
|||
font-size: 26.67rpx; |
|||
color: #666666; |
|||
position: relative; |
|||
text-align: center; |
|||
width: 100%; |
|||
&:before{ |
|||
content: ""; |
|||
height: 1px; |
|||
width: 89.33rpx; |
|||
background-color: #BCBCBC; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue