queyue-miniapp/pages/public/register.vue

<template>
	<view class="container">
		<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="wrapper">
			<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 {
				tips: {
					title: '注册/登录',
					text: '输入手机号，开启雀乐；未注册手机，将自动注册'
				}
			}
		},
		computed: {
			...mapState(['theme'])
		},
		onLoad() {},
		methods: {
			navBack() {
				uni.navigateBack();
			},
		},

	}
</script>

<style lang='scss' scoped>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.bottom-sign {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100vw;
			height: 100vw;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.back-btn {
			position: absolute;
			left: 40upx;
			padding-top: var(--status-bar-height);
			top: 40upx;
			font-size: 40upx;
			color: $font-color-dark;
		}

		.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;
				}
			}
		}


	}

	/* 暗黑模式 */
	@media (prefers-color-scheme: dark) {
		.container {
			 .wrapper .input_box input {
				border-left: 2upx solid #fff;
			}
			.back-btn {
				color: #fff;
			}
		}
	}
</style>