0 环境
1 文档
2 前言
geeker admin比较亲民,但在掘金上很少见到有关系统的教程的补充,遂剖它。还有基本的拉取、安装、运行、插件安装、main.ts都有注解等就不重复写了,看官网。一定要确定好需要的环境配置的没问题。
3 解压mock
4 找到登录路由
如下图:找到
routers/modules/staticRouter.ts
,寻找login对应着组件位置@/views/login/index.vue
。
5 登录页解析
1 需要的几个文件的位置以及关键代码
- login/index.vue
xml
<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
js
<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
避免内容超出。
css
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代码,可以自己修改查看效果。还有里面有些代码是多余的,是可以去掉的哦。