前端登录界面设计

借鉴了别人网页的前端登录页面设计，登录输入框做了透明化处理，个人觉得看起来还可以。

先看整体的效果：

背景用了渐变色，页面中间左侧为登录区域，右侧可以放介绍啥的。

html部分：其中用了element-plus，图片是自己去网上随便找的一张。

<div>
    <div class="login_box">
        <div class="login_left">
            <img src="../assets/123.webp" alt="" class="login_img">
            <div class="input">
                <el-input
                    v-model="username"
                    placeholder="Please input username"
                    clearable
                    class="transparent-input"
                />
                <br>
                <el-input
                    v-model="password"
                    type="password"
                    placeholder="Please input password"
                    show-password
                    clearable
                    class="transparent-input"
                />
                <br>
                <el-button type="primary" round @click="login">登录</el-button>
            </div>
        </div>
        <div class="login_right">
            <div class="introduction" style="font-size: 32px;">hello word</div>
        </div>
    </div>
</div>

最后是css部分：

<style>
body{
    margin: 0;
}
/* 设置登录界面的整体位置为页面中央 */
.login_box{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #e66465, #9198e5);   /* 背景色由上到下做渐变 */
    display: flex;
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
}
/* 登录的左侧区域 */
.login_left{
    position: relative;
    height: 40vh;
    width: 20vw;
    display: flex;
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
}
/* 将图片固定宽高，设置圆角，定位方式相对父组件居中 */
.login_img{
    height: 40vh;
    width: 20vw;
    border-radius: 20px 0px 0px 20px;
    position: absolute;     /* 父相子绝，子级不会占有位置，不会影响其他盒子 */
}
/* 整体输入区域固定宽度，垂直水平居中 */
.input {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* height: 100%; */
  width: 10vw;
}
/* 设置输入框背景透明，固定宽度防止密码输入框会发生长度变化 */
.transparent-input .el-input__wrapper{
    background-color: transparent;
    width: 10vw;
}
/* 改变输入框字体的颜色 */
.transparent-input input {
  border: none;
  color: aqua;
}
/* 设置占位符字体的颜色 */
.transparent-input ::placeholder {
  color: aqua!important; 
}
/* 登录的右侧区域 */
.login_right{
    position: relative;
    height: 40vh;
    width: 30vw;
    border-radius: 0px 20px 20px 0px;
    background-color: rgb(46, 42, 42);
    display: flex;
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
}
/* 设置介绍部分字体颜色 */
.introduction{
    color: antiquewhite;
    
}
</style>

js部分就看个人需求自己写了