deming/pageA/login/login.vue

178 lines
3.2 KiB
Vue
Raw Normal View History

2020-06-01 11:41:09 +08:00
<template>
2020-06-02 08:49:13 +08:00
<!-- login页面 -->
<view>
2020-06-02 11:40:14 +08:00
<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">获取验证码</text>
</view>
<!-- 服务协议 -->
<view class="pact">
<view></view>
<text>我已详细阅读并同意</text>
<text class="pact_text">用户协议</text>
<text class="pact_text">隐私协议</text>
<text class="pact_text">使用协议</text>
</view>
2020-06-02 09:27:35 +08:00
</view>
2020-06-02 11:40:14 +08:00
<!-- 注册 -->
<view class="more_Login">
2020-06-02 12:01:13 +08:00
<u-radio-group v-model="value" @change="radioGroupChange">
<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
{{item.name}}
</u-radio>
</u-radio-group>
2020-06-02 11:40:14 +08:00
<text>新用户点击注册</text>
<text class="other">其他方式登录</text>
2020-06-02 09:27:35 +08:00
</view>
</view>
2020-06-02 08:49:13 +08:00
</view>
2020-06-01 11:41:09 +08:00
</template>
<script>
2020-06-02 12:01:13 +08:00
export default {
data() {
return {
list: [{
name: 'apple',
checked: false,
disabled: false
},
{
name: 'banner',
checked: false,
disabled: false
},
{
name: 'orange',
checked: false,
disabled: false
}
],
value: '',
};
},
methods: {
// 选中某个单选框时由radio时触发
radioChange(e) {
// console.log(e);
},
// 选中任一radio时由radio-group触发
radioGroupChange(e) {
// console.log(e);
}
}
};
2020-06-01 11:41:09 +08:00
</script>
2020-06-02 12:01:13 +08:00
<style lang="scss" scoped>
.login {
2020-06-02 11:40:14 +08:00
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
2020-06-02 12:01:13 +08:00
.images {
2020-06-02 11:40:14 +08:00
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
2020-06-02 12:01:13 +08:00
.backes {
background: rgba(0, 0, 0, 0.4);
2020-06-02 11:40:14 +08:00
position: fixed;
width: 100%;
height: 100%;
2020-06-02 12:01:13 +08:00
z-index: -1;
2020-06-02 11:40:14 +08:00
}
2020-06-02 12:01:13 +08:00
text {
2020-06-02 11:40:14 +08:00
z-index: 9;
color: #fff;
}
2020-06-02 12:01:13 +08:00
.more_Login {
2020-06-02 11:40:14 +08:00
overflow: hidden;
zoom: 1;
width: 630rpx;
margin: 0 auto;
}
2020-06-02 12:01:13 +08:00
.more_Login text {
2020-06-02 11:40:14 +08:00
display: inline-block;
width: 50%;
float: left;
2020-06-02 12:01:13 +08:00
font-size: 30rpx;
color: rgba(255, 255, 255, 1);
line-height: 36px;
2020-06-02 11:40:14 +08:00
margin: 97rpx 0;
}
2020-06-02 12:01:13 +08:00
.more_Login .other {
2020-06-02 11:40:14 +08:00
text-align: right;
}
}
2020-06-02 12:01:13 +08:00
.title {
font-size: 36rpx;
font-weight: bold;
2020-06-02 11:40:14 +08:00
margin-bottom: 150rpx;
color: #fff;
}
2020-06-02 12:01:13 +08:00
.content {
2020-06-02 11:40:14 +08:00
width: 630rpx;
z-index: 99999;
margin: 0 auto;
padding-top: 130rpx;
2020-06-02 12:01:13 +08:00
.labales text {
2020-06-02 11:40:14 +08:00
font-size: 30rpx;
}
2020-06-02 12:01:13 +08:00
.labales {
2020-06-02 11:40:14 +08:00
border-bottom: 1px #fff solid;
margin-bottom: 90rpx;
}
2020-06-02 12:01:13 +08:00
.labales {
2020-06-02 11:40:14 +08:00
position: relative;
}
2020-06-02 12:01:13 +08:00
.identifying {
2020-06-02 11:40:14 +08:00
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
2020-06-02 12:01:13 +08:00
font-size: 30rpx;
font-weight: 500;
color: rgba(255, 120, 15, 1);
line-height: 36px;
2020-06-02 11:40:14 +08:00
}
}
2020-06-02 12:01:13 +08:00
.pact text {
font-size: 22rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 36px;
2020-06-02 11:40:14 +08:00
}
2020-06-02 12:01:13 +08:00
.pact_text {
font-size: 22px;
font-weight: 400;
color: rgba(129, 188, 253, 1) !important;
line-height: 36px;
2020-06-02 09:27:35 +08:00
}
2020-06-01 11:41:09 +08:00
</style>