deming/pageA/bindinges/bindinges.vue
zmr900709 82babef77f v
2020-06-08 11:32:07 +08:00

287 lines
5.0 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">
<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">获取验证码</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>
<!-- denglu QQ weixin -->
<u-button>{{login}}</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
checked: false,
disabled: false
}],
value: '',
login: '注册',
show: true
};
},
methods: {
// 选中某个复选框时由checkbox时触发
checkboxChange(e) {
//console.log(e);
},
// 选中任一checkbox时由checkbox-group触发
checkboxGroupChange(e) {
// console.log(e);
},
mask_u(){
this.show = !this.show
},
}
};
</script>
<style lang="scss" scoped>
.uni-page-wrapper{
background: #fff;
}
.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: #333;
}
.content {
width: 630rpx;
z-index: 99999;
margin: 0 auto;
padding-top: 130rpx;
.labales text {
font-size: 30rpx;
color: #999;
}
.labales {
border-bottom: 1px #BFBFBF solid;
margin-bottom: 90rpx;
}
.labales {
position: relative;
}
.identifying {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 30rpx;
font-weight: 500;
color: #FF780F!important;
}
}
.pact text {
font-size: 22rpx;
font-weight: 400;
color: #333;
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: 38rpx;
}
.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;
margin-top: 225rpx;
}
.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;
}
u-button{
margin-top: 225rpx;
}
</style>