109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
<template>
|
||
<view class="page">
|
||
<image class="bj" src="/static/signIn/signInbj.png" mode="aspectFill"></image>
|
||
<view class="box">
|
||
<image class="title" src="/static/signIn/title.png" mode="aspectFit"></image>
|
||
<view class="desc">欢迎登录！很高兴再次见到你</view>
|
||
<view class="from">
|
||
<view class="input" :class="{on:isname}">
|
||
<image src="/static/signIn/2.png"></image>
|
||
<input cursor-spacing='15' @focus="isname=true" @blur="isname=false" placeholder="请填写账号"/>
|
||
</view>
|
||
<view class="input" :class="{on:ispassword}">
|
||
<image src="/static/signIn/1.png"></image>
|
||
<input cursor-spacing='15' v-model="password" @focus="ispassword=true" @blur="ispassword=false" :type="!showpassword?'password':'text'" placeholder="请填密码"/>
|
||
<view @click="showpassword=!showpassword" v-if="password.length">
|
||
<uni-icons type="eye-slash-filled" v-if="!showpassword" size="16rpx"></uni-icons>
|
||
<uni-icons type="eye-filled" v-else size="16rpx"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="checkbox">
|
||
<checkbox value="cb" activeBackgroundColor='#4D7BFF' :checked="true" color="#ffffff" style="transform:scale(0.7)" />
|
||
记住密码
|
||
</view>
|
||
<view class="submit">登录</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
|
||
const isname=ref(false);
|
||
const ispassword=ref(false);
|
||
const showpassword=ref(false)
|
||
const name=ref("");
|
||
const password=ref("")
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
.bj{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.box{
|
||
position: fixed;
|
||
|
||
top: 50%;
|
||
right: 110rpx;
|
||
transform: translate(0%,-50%);
|
||
.title{
|
||
height: 40rpx;
|
||
width: 230rpx;
|
||
}
|
||
.desc{
|
||
text-align: center;
|
||
color: #667085;
|
||
font-size: 15rpx;
|
||
margin: 0rpx 0 20rpx 0;
|
||
}
|
||
.from{
|
||
margin-top: 34rpx;
|
||
.input{
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #D0D5DD;
|
||
padding:7rpx 10rpx;
|
||
border-radius: 5rpx;
|
||
margin-bottom: 9rpx;
|
||
background: #fff;
|
||
&.on{
|
||
border: 1px solid #4D7BFF;
|
||
}
|
||
input{
|
||
font-size: 12rpx;
|
||
margin-right: 7rpx;
|
||
}
|
||
image{
|
||
width: 10rpx;
|
||
height: 13rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
.checkbox{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #667085;
|
||
margin: 15rpx 0;
|
||
font-size: 11rpx;
|
||
}
|
||
.submit{
|
||
text-align: center;
|
||
background: #4D7BFF;
|
||
color: #fff;
|
||
line-height: 33rpx;
|
||
font-size: 13rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |