Vue项目的登录界面样式设计
背景图片设置
开始查到的都是直接在div的style中设置background,但是使用了之后并没有效果,最终用下面的方式解决了问题
<div class="background" style="font-family:kaiti">
然后在<style scoped>中设置background
.background{
background: url("../assets/image/5.jfif");
width:100%;
height:100%; /**宽高100%是为了图片铺满屏幕 */
position: fixed;
background-size: 100% 100%;
}
最后就有了这样的背景图片
登录框的设计
<div class="login-box">
.login-box{
border:1px solid #dccfcf;
width: 350px;
margin:180px auto;
padding: 20px 50px 20px 50px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
background-color:rgba(255,255,255,0.7);//这里最后那个0.7就是为了防止背景表单颜色太浅
}
就会得到这样一个登录框
字体的修改
我本人喜欢楷体,所以可以在https://www.ypppt.com/ziti/这个链接下载去下载字体,然后进行引入即可
首先要把下载好的字体放置到vue项目中
然后将字体引入,像我这样设置文件 就是在global.css文件中引入
/*引入字体*/
@font-face {
font-family: 'kaiti';
src: url('./kaiti.ttf');
font-weight: normal;
font-style: normal;
}
引入成功后就可直接在style中进行使用了
图标的设计
样式在element官网上都有https://element-plus.gitee.io/zh-CN/
首先按照官网步骤进行安装导入
然后按照下面语法直接使用即可
<el-input prefix-icon="Avatar" v-model="form.username"/ >
prefix-icon="Avatar"就是使用图标
具体的每个图标的名称在官网都有,粘贴复制即可
就得到这样的登录框