xiongmao/pages/login/message-login/message-login.vue

<!-- 短信登录 -->
<template>
	<view class="wrap">
		<view class="title-row">
			<view>登录携手熊猫</view>
			<view>登录以使用更多服务</view>
		</view>
		<view class="form-box">
			<view class="form-row">
				<view class="num-row">
					+86 <image src="../../../static/sanjiao.png" class="sanjiao" mode="widthFix"></image>
				</view>
				<input type="text" value="" class="input" placeholder="请输入手机号" placeholder-class="placeholder" />
			</view>
			<view class="msg">
				<text>立即注册</text>
			</view>
			<view class="btn-box">
				<button type="default" class="active">186****3352</button>
			</view>
			<view class="login-box">
				<view>密码登录</view>
				<view>一键登录</view>
			</view>
			<view class="type-box">
				<button type="default">
					<image src="../../../static/type-2.png" mode=""></image>
				</button>
				<button type="default">
					<image src="../../../static/type-1.png" mode=""></image>
				</button>
			</view>
			<view class="login-bottom-row">
				<view class="select-btn" @tap="selected">
					<image :src="select ? '../../../static/circle-active.png' : '../../../static/circle.png'" />
				</view>
				登录即同意《中国移动认证服务条款》和《携手熊猫用户协议》
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: true,
				params: {
					phone: "--",  // 手机号
					code: "--",  // 手机验证码
					verify: "--",  // 图形验证码
					uniqid: "--",  // 生成验证码图形时返回的uniqid
				},
			}
		},
		methods: {
			selected: function() {
				this.select = !this.select;
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./message-login.css";
</style>