Vue项目登录界面

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"就是使用图标

具体的每个图标的名称在官网都有，粘贴复制即可

就得到这样的登录框