Vue3之登录界面

废话不多说上截图

这是一个基于Vue3的项目

首先

引入两个库

@import url('/public/fontawesome-free-6.4.0-web/css/all.min.css');这里是引入第三方库

fontawesome-free-6.4.0-web.zip官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘

将第三方库解压放到public文件夹下面

 

完整代码来了

<template>
    <div class="title">
        <i v-on:click="this.$router.go(-1);" class="fa-solid fa-chevron-left title-1" style="font-size: 30px;"></i>
        <div class="title-0">
            喜乐安康电商UI
        </div>
    </div>
    <div class="Main">
        <div class="Input1">
            <div class="Img1">
               
            </div>
            <input type="text" v-model="username" placeholder="账号">
        </div>
        <div class="Input2">
            <div class="Img2">
              
            </div>
            <input type="text" v-model="password" placeholder="密码">
            <div class="A">
                <i class="fa-regular fa-eye"></i>
            </div>
        </div>
        <div class="B">
            <input type="radio" name="" id="" :value="true" v-model="remember" v-on:click="this.remember=!remember">
            <div style="color: rgb(255, 0, 0);">
                记住密码
            </div>
            <div class="C">
                忘记密码?
            </div>
        </div>
        <div class="D" >
            <input type="radio" name="" id="" :value="true" v-model="agreement" v-on:click="this.agreement=!agreement">
            同意<div style="color:rgb(43, 170, 164);">《平台协议》</div>和<div style="color:rgb(43, 170, 164);">《隐私协议》</div>
        </div>
        <button class="E">
            登录
        </button>
        <div class="F">
            <div>
                 使用验证码注册
            </div>
           
            <div style="flex-grow: 1;text-align: right;" v-on:click="this.$router.push('/home')">
               游客登录
            </div>
        </div>
    </div>

</template>
<script>
export default {
    data() {
        return {
            remember:false,
            agreement:false,
            username:null,
            password:null,
            code:null,
        }
    },
}
</script>
<style scoped>
.lef-1{
    width: 100%;
    height: 100%;
    flex-grow: 1;
    background-color: rgb(28, 143, 104);

}
.title-0 {
  
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    flex-grow: 1;
}

.title {
    width: 90%;
    height: 60px;
    object-fit: cover;
    /* 调整图片适应方式，保持图片比例并覆盖整个容器 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /* 将图片放置在底层，使其成为背景 */
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    /*默认横向排布*/
    align-items: center;
    /* 垂直居中 */
}

.F {
    width: 90%;
    height: 40px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    color: rgb(12, 170, 117);
}

.E {
    background-color: aquamarine;
    width: 90%;
    height: 40px;
    border: none;
    outline: none;
}

.D {
    margin-top: 10px;
    width: 90%;
    height: 40px;
    display: flex;
    /*默认横向排布*/
    align-items: center;
    /* 垂直居中 */

}

.C {
    flex-grow: 1;
    text-align: right;
    margin-right: 3px;
    color: rgb(43, 170, 164);
}

@import url('/public/fontawesome-free-6.4.0-web/css/all.min.css');

.B {
    margin-top: 10px;
    width: 90%;
    height: 40px;
    display: flex;
    /*默认横向排布*/
    align-items: center;
    /* 垂直居中 */
}

.A {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.Input2 input {
    width: 78%;
    border: none;
    outline: none;
    background-color: transparent;
}

.Img2 {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-left: 6px;
}

.Input1 input {
    width: 90%;
    border: none;
    outline: none;
    background-color: transparent;
}

.Img1 {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-left: 6px;
}

.Input1 {
    width: 90%;
    height: 50px;
    background-color: aliceblue;
    border-radius: 50px 50px 50px 50px;
    display: flex;
}

.Input2 {
    width: 90%;
    height: 50px;
    background-color: aliceblue;
    margin-top: 20px;
    border-radius: 50px 50px 50px 50px;
    display: flex;
}

.Main {
    background-color: rgb(241, 239, 236);
    width: 98vw;
    height: 95vh;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    overflow: hidden;
    flex-direction: column;

    /*纵向排布*/
    ::-webkit-scrollbar {
        display: none;
    }

}</style>