<template>
<view class="login-page">
<view class="title">密码登录</view>
<view class="form">
<view class="form-item">
<view class="form-item-label">账号</view>
<view class="form-item-inout-box">
<input
class="form-item-input"
placeholder="请输入账号/手机号/邮箱"
placeholder-style="color: rgba(35, 44, 59, 0.5)"
/>
<view class="help-text">请输入账号/手机号/邮箱</view>
</view>
</view>
<view class="form-item">
<view class="form-item-label">密码</view>
<view class="form-item-inout-box">
<input
class="form-item-input"
placeholder="请输入密码"
placeholder-style="color: rgba(35, 44, 59, 0.5)"
:type="passwordShow ? 'text' : 'password'"
/>
<view class="help-text">请输入密码</view>
</view>
<view
@touchstart="handleChangePasswordShow($event, true)"
@touchend="handleChangePasswordShow($event, false)"
>
<image
class="password-visible"
mode="aspectFit"
:src="passwordShow ? iconShow : iconHidden"
@touchcancel="handleChangePasswordShow($event, false)"
/>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import iconShow from './assets/password-show.svg';
import iconHidden from './assets/password-hidden.svg';
const passwordShow = ref(false);
function handleChangePasswordShow(event: Event, show: boolean) {
passwordShow.value = show;
event.preventDefault();
event.stopPropagation();
}
</script>
<style scoped lang="scss">
.login-page {
padding: 74px 30px 0;
width: calc(100vw - 60px);
min-height: 100vh;
background: #fff;
.title {
line-height: 24px;
font-size: 24px;
font-weight: 600;
color: #232c3b;
}
.form {
margin-top: 20px;
.form-item {
padding: 15px 0;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
border-bottom: 1px solid #e5e5e5;
.form-item-label {
margin-right: 12px;
font-size: 16px;
line-height: 24px;
color: #86909c;
}
.form-item-inout-box {
flex: auto;
.form-item-input {
font-size: 16px;
color: rgba(35, 44, 59, 0.5);
}
.help-text {
font-size: 12px;
line-height: 24px;
color: #ee0a24;
}
}
.password-visible {
margin: 2px 0 0 8px;
width: 20px;
height: 20px;
}
}
}
}
</style>