geeker admin登录页笔记 -- scss样式简单解释

0 环境

• Node.js 16.x+
• pnpm 7.x+
• Git

1 文档

官方文档

2 前言

3 解压mock

4 找到登录路由

如下图：找到routers/modules/staticRouter.ts，寻找login对应着组件位置@/views/login/index.vue。

5 登录页解析

1 需要的几个文件的位置以及关键代码

• login/index.vue

<template>
  <div class="login-container flx-center">
    <div class="login-box">
      <SwitchDark class="dark" />
      <div class="login-left">
        <img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
      </div>
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="@/assets/images/logo1.svg" alt="" />
          <h2 class="logo-text">xxx-Admin</h2>
        </div>
        <LoginForm />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="login">
import LoginForm from "./components/LoginForm.vue";
import SwitchDark from "@/components/SwitchDark/index.vue";
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>

• login/index.scss，主要是它
• src/styles/common.scss这里用到了flx-center
• login/components/LoginForm.vue

<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
  <el-form-item prop="username">
    <el-input v-model="loginForm.username" placeholder="用户名：admin / user">
      <template #prefix>
        <el-icon class="el-input__icon">
          <user />
        </el-icon>
      </template>
    </el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="loginForm.password" type="password" placeholder="密码：123456" show-password autocomplete="new-password">
      <template #prefix>
        <el-icon class="el-input__icon">
          <lock />
        </el-icon>
      </template>
    </el-input>
  </el-form-item>
</el-form>
<div class="login-btn">
  <el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)"> 重置 </el-button>
  <el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="login(loginFormRef)">
    登录
  </el-button>
</div>

2 css解释

1 login/index.vue

如上代码：flx-center在common.scss中，是水平垂直居中的意思，login-container设置最小高度以及高度为100%，设置背景色+背景图片以及设置背景图片大小，效果如下图。

如下图：.login-box里相对定位是为了.dark的背景色按钮绝对定位在其右上角，box-sizing避免内容超出。

display: flex;
align-items: center;
justify-content: space-around;

把login-left和login-form分置两侧。其它的就是设置宽高以及边框和边框色等。

参考上图：.login-left设置左侧的图片、宽度，以及图片的大小。 login-form设置宽度，设置边框、背景色、阴影等，注意这里需要加padding填充，不然边框会和会和输入框它们挤在一起。

这里.login-logo看上图：为了图标和文本垂直居中，与下面输入框距离45px，.login-icon设置图标大小，.logo-text设置边距为0，是为了将h2自带的margin样式去除，如下图。padding是因为文字与左侧图标的太近了，需要给个间距。其它的就是字体大小、前景色、不换行等。

2 login/components/LoginForm.vue，login的子组件

进入LoginForm.vue，.el-form-item是两个输入框，设置了一个向下的间距，距离产生美。这里.login-btn将重置和登录按钮，排在两侧，文字内容不换行等。为了两个按钮变的好看些，加个width: 185px;，感觉按钮长度还不够美观，自己手调即可。 还有两个自适应css，@media screen，在宽度小于某个值时，只展示表单，还有一个是设置表单宽度。

6 总结

运行项目前，一定要确定好运行的环境没问题。还有对于index.scss代码，可以自己修改查看效果。还有里面有些代码是多余的，是可以去掉的哦。