deming/pageA/login/login.vue
2020-06-11 08:43:51 +08:00

321 lines
6.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- login页面 -->
<view>
<view class="login">
<image class="images" src="../../static/pageA/loginbackground.png"></image>
<view class="backes"></view>
<view class="content">
<view class="title">手机登录</view>
<view class="labales">
<!-- <text></text> -->
<input type="tel" placeholder="手机号" />
</view>
<view class="labales">
<!-- <text></text> -->
<input type="tel" placeholder="请输入验证码" />
<text class="identifying" @click="getCode">{{text}}</text>
</view>
<!-- 服务协议 -->
<view class="pact">
<view></view>
<text>我已详细阅读并同意</text>
<text class="pact_text">用户协议</text>
<text class="pact_text">隐私协议</text>
<text class="pact_text">使用协议</text>
<u-checkbox-group @change="checkboxGroupChange" size="27">
<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name"
shape="circle" size="14" active-color="#19BE6B"></u-checkbox>
</u-checkbox-group>
</view>
</view>
<!-- 注册 -->
<view class="more_Login">
<text>新用户点击注册</text>
<text class="other" @click="mask_u">其他方式登录</text>
</view>
<!-- denglu QQ weixin -->
<u-button>{{login}}</u-button>
<u-mask :show="show" @click="show = false">
<view class="warp">
<view class="rect" @tap.stop>
<view class="rect_view">
<image src="../../static/pageA/qq.png" class="image"></image>
<view>QQ登录</view>
</view>
<view class="rect_view">
<image src="../../static/pageA/weixin.png" class="image" ></image>
<view>微信登录</view>
</view>
<view class="rect_butoon" @click="show = false">取消</view>
</view>
</view>
</u-mask>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
checked: false,
disabled: false
}],
value: '',
text : '获取验证码',
login: '登录',
show: false
};
},
methods: {
// 选中某个复选框时由checkbox时触发
checkboxChange(e) {
//console.log(e);
},
// 选中任一checkbox时由checkbox-group触发
checkboxGroupChange(e) {
// console.log(e);
},
mask_u(){
this.show = !this.show
},
// 获取验证码倒计时
getCode(){
console.log("11")
this.loading()
},
loading(){
}
}
};
</script>
<style lang="scss" scoped>
.login {
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
.images {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.backes {
background: rgba(0, 0, 0, 0.4);
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
text {
z-index: 9;
color: #fff;
}
.more_Login {
overflow: hidden;
zoom: 1;
width: 630rpx;
margin: 0 auto;
}
.more_Login text {
display: inline-block;
width: 50%;
float: left;
font-size: 30rpx;
color: rgba(255, 255, 255, 1);
line-height: 36px;
margin: 97rpx 0;
}
.more_Login .other {
text-align: right;
}
}
.title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 150rpx;
color: #fff;
}
.content {
width: 630rpx;
z-index: 99999;
margin: 0 auto;
padding-top: 130rpx;
.labales text {
font-size: 30rpx;
}
.labales {
border-bottom: 1px #fff solid;
margin-bottom: 90rpx;
height: 70rpx;
line-height: 70rpx;
}
.labales:nth-child(3) {
position: relative;
margin-bottom: 10px;
}
.identifying {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 30rpx;
font-weight: 500;
color: rgba(255, 120, 15, 1);
line-height: 20px;
}
}
.uni-input-input, .uni-input-placeholder{
color:#fff!important;
letter-spacing: 2rpx;
}
.pact text {
font-size: 22rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 36px;
}
.pact_text {
font-size: 22px;
font-weight: 400;
color: rgba(129, 188, 253, 1) !important;
line-height: 36px;
}
//单选框的样式
.pact {
position: relative;
padding-left: 40rpx;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
}
.u-checkbox-group {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.u-checkbox__icon--square {
border-radius: 50rpx !important;
width: 22rpx;
height: 22rpx;
}
.u-btn {
width: 628rpx;
height: 98rpx;
background: rgba(255, 120, 15, 1) !important;
border-radius: 49rpx;
margin: 0 auto;
font-size: 36rpx;
color: rgba(255, 255, 255, 1) !important;
line-height: 36px;
border: 1px #ff780f solid;
outline: none;
border-color: rgba(255, 120, 15, 1) !important;
}
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 558rpx;
height: 300rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
zoom: 1;
position: relative;
display: flex;
flex-wrap:wrap;
display: -webkit-flex; /* Safari */
.rect_view{
width: 100rpx;
height: 100rpx;
.image{
width: 45rpx;
height: 53rpx;
display: inline-block;
}
flex:1;
margin-top: 77rpx;
}
.rect_view:nth-child(2) image{
width: 57rpx;
height: 45rpx;
}
.rect_butoon{
width: 100%;
position: absolute;
bottom: 0;
height: 85rpx;
text-align: center;
line-height: 85rpx;
border-top: 1px #999999 solid;
}
view{
color: #666;
font-size:24rpx;
margin-top: 30rpx;
}
}
.rect_view:nth-child(1) image,.rect_view:nth-child(1) view{
float: right;
}
.rect_view:nth-child(1) image{
margin-right: 20rpx;
}
.rect_view:nth-child(1){
position: relative;
margin-right: 79rpx;
}
.rect_view:nth-child(1) view{
position: absolute;
bottom: 0;
right: 0;
}
.rect_view:nth-child(2) image,.rect_view:nth-child(2) view{
float: left;
}
.rect_view:nth-child(2) image{
margin-left: 20rpx;
}
.rect_view:nth-child(2){
position: relative;
}
.rect_view:nth-child(2) view{
position: absolute;
bottom: 0;
left: 0;
}
</style>