xiongmao/pages/login/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="form-row">
				<input class="input" :password="!flag" value="" placeholder="请输入密码" placeholder-class="placeholder" />
				<image @click="flag=!flag" :src="flag ? '../../static/eye.png' : '../../static/eye-close.png'"
					class="eye-icon" mode="heightFix" />
			</view>
			<view class="msg">
				<text>立即注册</text>
			</view>
			<view class="btn-box">
				<button type="default" class="active">登录</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 {
				//隐藏显示密码
				flag: false,
				
				select:true
			}
		},
		methods: {
			selected: function() {
				this.select = !this.select;
			},
		}
	}
</script>

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