|
|
|
|
@ -1,24 +1,53 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="container">
|
|
|
|
|
<view class="left-bottom-sign"></view>
|
|
|
|
|
<view class="bottom-sign">
|
|
|
|
|
<image v-if="theme" :src="`/static/public/login_bg_${theme}.png`"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
|
|
|
|
|
<view class="right-top-sign"></view>
|
|
|
|
|
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
|
|
|
|
|
<view class="wrapper">
|
|
|
|
|
<view class="empty">
|
|
|
|
|
|
|
|
|
|
<view class="tips">
|
|
|
|
|
<view class="tips_title">{{tips.title}}</view>
|
|
|
|
|
<view class="tips_text">{{tips.text}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="input_box">
|
|
|
|
|
<view class="area_select">
|
|
|
|
|
<view class="area">+86</view>
|
|
|
|
|
<image class="icon_down" src="@/static/icons/icon_down.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<input type="number" maxlength="11" placeholder="输入手机号" />
|
|
|
|
|
<image class="icon_clear" src="@/static/icons/icon_clear.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<button class="confirm-btn">获取短信验证码</button>
|
|
|
|
|
<view class="checkbox_box">
|
|
|
|
|
<label class="radio">
|
|
|
|
|
<radio value="r1" checked="true" />已阅读并同意《用户协议》、《隐私政策》
|
|
|
|
|
</label>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="login_icon">
|
|
|
|
|
<image class="wechat" src="@/static/icons/icon_wechat.png"></image>
|
|
|
|
|
<image class="apple" src="@/static/icons/icon_apple.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
mapState
|
|
|
|
|
} from 'vuex';
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {}
|
|
|
|
|
return {
|
|
|
|
|
tips: {
|
|
|
|
|
title: '注册/登录',
|
|
|
|
|
text: '输入手机号，开启雀乐；未注册手机，将自动注册'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState(['theme'])
|
|
|
|
|
},
|
|
|
|
|
onLoad() {},
|
|
|
|
|
methods: {
|
|
|
|
|
navBack() {
|
|
|
|
|
uni.navigateBack();
|
|
|
|
|
@ -28,110 +57,150 @@
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang='scss'>
|
|
|
|
|
page {
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
padding-bottom: 100upx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
width: 420upx;
|
|
|
|
|
height: 420upx;
|
|
|
|
|
margin-bottom: 30upx;
|
|
|
|
|
}
|
|
|
|
|
.empty-tips {
|
|
|
|
|
display: flex;
|
|
|
|
|
font-size: $font-sm+16upx;
|
|
|
|
|
color: $font-color-disabled;
|
|
|
|
|
|
|
|
|
|
.navigator {
|
|
|
|
|
color: $uni-color-primary;
|
|
|
|
|
margin-left: 0upx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
.container {
|
|
|
|
|
padding-top: 115px;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 90;
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding-bottom: 40upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-btn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 40upx;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
padding-top: var(--status-bar-height);
|
|
|
|
|
top: 40upx;
|
|
|
|
|
font-size: 40upx;
|
|
|
|
|
color: $font-color-dark;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left-top-sign {
|
|
|
|
|
font-size: 120upx;
|
|
|
|
|
color: $page-color-base;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: -16upx;
|
|
|
|
|
}
|
|
|
|
|
.bottom-sign {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vw;
|
|
|
|
|
|
|
|
|
|
.right-top-sign {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 80upx;
|
|
|
|
|
right: -30upx;
|
|
|
|
|
z-index: 95;
|
|
|
|
|
|
|
|
|
|
&:before,
|
|
|
|
|
&:after {
|
|
|
|
|
display: block;
|
|
|
|
|
content: "";
|
|
|
|
|
width: 400upx;
|
|
|
|
|
height: 80upx;
|
|
|
|
|
background: #b4f3e2;
|
|
|
|
|
image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
|
transform: rotate(50deg);
|
|
|
|
|
border-radius: 0 50px 0 0;
|
|
|
|
|
.back-btn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 40upx;
|
|
|
|
|
padding-top: var(--status-bar-height);
|
|
|
|
|
top: 40upx;
|
|
|
|
|
font-size: 40upx;
|
|
|
|
|
color: $font-color-dark;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -198upx;
|
|
|
|
|
top: 0;
|
|
|
|
|
transform: rotate(-50deg);
|
|
|
|
|
border-radius: 50px 0 0 0;
|
|
|
|
|
/* background: pink; */
|
|
|
|
|
.wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-top: 200upx;
|
|
|
|
|
|
|
|
|
|
.tips {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 136upx;
|
|
|
|
|
padding: 0 48rpx;
|
|
|
|
|
|
|
|
|
|
.tips_title {
|
|
|
|
|
font-size: 64upx;
|
|
|
|
|
margin-bottom: 26upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tips_text {
|
|
|
|
|
font-size: 28upx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input_box {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 88upx 48upx;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.area_select {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.area {
|
|
|
|
|
font-size: 34upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon_down {
|
|
|
|
|
width: 48upx;
|
|
|
|
|
height: 48upx;
|
|
|
|
|
margin: 0 23upx 0 14upx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
font-size: 34upx;
|
|
|
|
|
border-left: 2upx solid rgba(0, 0, 0, 0.4);
|
|
|
|
|
padding-left: 54upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon_clear {
|
|
|
|
|
width: 48upx;
|
|
|
|
|
height: 48upx;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 48upx;
|
|
|
|
|
top: 50%;
|
|
|
|
|
margin-top: -24upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.confirm-btn {
|
|
|
|
|
width: 566upx;
|
|
|
|
|
height: 88upx;
|
|
|
|
|
line-height: 88upx;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
background: #C43737;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: $font-lg;
|
|
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
|
border-radius: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checkbox_box {
|
|
|
|
|
padding: 42upx;
|
|
|
|
|
|
|
|
|
|
.radio {
|
|
|
|
|
font-size: 24upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
radio {
|
|
|
|
|
transform: scale(0.7)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login_icon {
|
|
|
|
|
padding-top: 32upx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
width: 92upx;
|
|
|
|
|
height: 92upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
image.wechat {
|
|
|
|
|
margin-right: 24upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
image.apple {
|
|
|
|
|
margin-left: 24upx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left-bottom-sign {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: -270upx;
|
|
|
|
|
bottom: -320upx;
|
|
|
|
|
border: 100upx solid #d0d1fd;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
padding: 180upx;
|
|
|
|
|
/* 暗黑模式 */
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
.container {
|
|
|
|
|
.wrapper .input_box input {
|
|
|
|
|
border-left: 2upx solid #fff;
|
|
|
|
|
}
|
|
|
|
|
.back-btn {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</style>
|
