hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.12.16:优化登录页、添加开发文档连接'

Browse Source
This commit is contained in:
lyt 2021-12-16 21:10:17 +08:00
parent 646eac1c88
commit ec5911a987
6 changed files with 92 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -68,19 +68,10 @@ cnpm run dev
cnpm run build
```
#### 🍉 git 命令
- 在本地新建一个分支：`git branch newBranch`
- 切换到你的新分支：`git checkout newBranch`
- 将新分支发布在 github、gitee 上：`git push origin newBranch`
- 在本地删除一个分支：`git branch -d newBranch`
- 在 github 远程端删除一个分支：`git push origin :newBranch (分支名前的冒号代表删除)`
- 注意删除远程分支后，如果有对应的本地分支，本地分支并不会同步删除！
#### 💯 学习交流加 QQ 群
- 若加群了没同意（一般不会超过一天），那就是群满了，请换一个群试试
- 查看开发文档、<a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank">vue-next-admin</a> 开发文档正在编写中...
- 查看开发文档：<a href="https://lyt-top.gitee.io/vue-next-admin-doc-preview" target="_blank">vue-next-admin-doc</a>
- 群号码：
1 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
2 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">766356862</a>
@ -92,6 +83,11 @@ cnpm run build
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/user/qq2.png" width="220" height="220" alt="vue-next-admin 讨论群" title="vue-next-admin 讨论群2"/>
</a>
#### 💒 集成后端
- <a target="_blank" href="https://github.com/PandaGoAdmin/PandaX">@熊猫 PandaGoAdmin</a>
- <a target="_blank" href="https://www.gnet.top/public">@甜蜜蜜 GoPro 平台</a>
#### ❤️ 鸣谢列表
- <a href="https://github.com/vuejs/vue" target="_blank">vue</a>

14
src/layout/lockScreen/index.vue
View File

@ -20,7 +20,7 @@
<div class="layout-lock-screen-date-box-info">{{ time.mdq }}</div>
</div>
<div class="layout-lock-screen-date-top">
<i class="el-icon-top"></i>
<SvgIcon name="elementTop" />
<div class="layout-lock-screen-date-top-text">上滑解锁</div>
</div>
</div>
@ -39,15 +39,19 @@
@keyup.enter.native.stop="onLockScreenSubmit()"
>
<template #append>
<el-button icon="el-icon-right" @click="onLockScreenSubmit"></el-button>
<el-button @click="onLockScreenSubmit">
<el-icon class="el-input__icon">
<elementRight />
</el-icon>
</el-button>
</template>
</el-input>
</div>
</div>
<div class="layout-lock-screen-login-icon">
<i class="el-icon-microphone"></i>
<i class="el-icon-alarm-clock"></i>
<i class="el-icon-switch-button"></i>
<SvgIcon name="elementMicrophone" />
<SvgIcon name="elementAlarmClock" />
<SvgIcon name="elementSwitchButton" />
</div>
</div>
</transition>

38
src/views/login/component/account.vue
View File

@ -1,13 +1,13 @@
<template>
<el-form class="login-content-form">
<el-form-item>
<el-form-item class="login-animation-one">
<el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.userName" clearable autocomplete="off">
<template #prefix>
<el-icon class="el-input__icon"><elementUser /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-form-item class="login-animation-two">
<el-input
:type="isShowPassword ? 'text' : 'password'"
:placeholder="$t('message.account.accountPlaceholder2')"
@ -27,7 +27,7 @@
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-form-item class="login-animation-three">
<el-row :gutter="15">
<el-col :span="16">
<el-input
@ -50,11 +50,15 @@
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-form-item class="login-animation-four">
<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
<span>{{ $t('message.account.accountBtnText') }}</span>
</el-button>
</el-form-item>
<el-form-item class="login-animation-five">
<el-button type="text" size="small">{{ $t('message.link.one3') }}</el-button>
<el-button type="text" size="small">{{ $t('message.link.two4') }}</el-button>
</el-form-item>
</el-form>
</template>
@ -179,6 +183,32 @@ export default defineComponent({
<style scoped lang="scss">
.login-content-form {
margin-top: 20px;
.login-animation-one,
.login-animation-two,
.login-animation-three,
.login-animation-four,
.login-animation-five {
opacity: 0;
animation-name: error-num;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.login-animation-one {
animation-delay: 0.1s;
}
.login-animation-two {
animation-delay: 0.2s;
}
.login-animation-three {
animation-delay: 0.3s;
}
.login-animation-four {
animation-delay: 0.4s;
margin-bottom: 5px;
}
.login-animation-five {
animation-delay: 0.5s;
}
.login-content-password {
display: inline-block;
width: 25px;

33
src/views/login/component/mobile.vue
View File

@ -1,13 +1,13 @@
<template>
<el-form class="login-content-form">
<el-form-item>
<el-form-item class="login-animation-one">
<el-input type="text" :placeholder="$t('message.mobile.placeholder1')" v-model="ruleForm.userName" clearable autocomplete="off">
<template #prefix>
<i class="iconfont icon-dianhua el-input__icon"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-form-item class="login-animation-two">
<el-row :gutter="15">
<el-col :span="16">
<el-input type="text" maxlength="4" :placeholder="$t('message.mobile.placeholder2')" v-model="ruleForm.code" clearable autocomplete="off">
@ -21,11 +21,15 @@
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-form-item class="login-animation-three">
<el-button type="primary" class="login-content-submit" round>
<span>{{ $t('message.mobile.btnText') }}</span>
</el-button>
</el-form-item>
<el-form-item class="login-animation-four">
<el-button type="text" size="small">{{ $t('message.link.one3') }}</el-button>
<el-button type="text" size="small">{{ $t('message.link.two4') }}</el-button>
</el-form-item>
</el-form>
</template>
@ -50,6 +54,29 @@ export default defineComponent({
<style scoped lang="scss">
.login-content-form {
margin-top: 20px;
.login-animation-one,
.login-animation-two,
.login-animation-three,
.login-animation-four,
.login-animation-five {
opacity: 0;
animation-name: error-num;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.login-animation-one {
animation-delay: 0.1s;
}
.login-animation-two {
animation-delay: 0.2s;
}
.login-animation-three {
animation-delay: 0.3s;
margin-bottom: 5px;
}
.login-animation-four {
animation-delay: 0.4s;
}
.login-content-code {
width: 100%;
padding: 0;

12
src/views/login/component/scan.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="login-scan-container">
<div class="login-scan-qrcode" ref="qrcodeRef"></div>
<div ref="qrcodeRef"></div>
</div>
</template>
@ -36,11 +36,9 @@ export default defineComponent({
<style scoped lang="scss">
.login-scan-container {
.login-scan-qrcode {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -40%);
}
padding: 20px;
display: flex;
justify-content: center;
animation: logoAnimation 0.3s ease;
}
</style>

33
src/views/login/index.vue
View File

@ -3,28 +3,20 @@
<div class="login-logo">
<span>{{ getThemeConfig.globalViceTitle }}</span>
</div>
<div class="login-content" :class="{ 'login-content-mobile': tabsActiveName === 'mobile' }">
<div class="login-content">
<div class="login-content-main">
<h4 class="login-content-title">{{ getThemeConfig.globalTitle }}后台模板</h4>
<div v-if="!isScan">
<el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
<el-tab-pane :label="$t('message.label.one1')" name="account" :disabled="tabsActiveName === 'account'">
<transition name="el-zoom-in-center">
<Account v-show="isTabPaneShow" />
</transition>
<el-tabs v-model="tabsActiveName">
<el-tab-pane :label="$t('message.label.one1')" name="account">
<Account />
</el-tab-pane>
<el-tab-pane :label="$t('message.label.two2')" name="mobile" :disabled="tabsActiveName === 'mobile'">
<transition name="el-zoom-in-center">
<Mobile v-show="!isTabPaneShow" />
</transition>
<el-tab-pane :label="$t('message.label.two2')" name="mobile">
<Mobile />
</el-tab-pane>
</el-tabs>
<div class="mt10">
<el-button type="text" size="small">{{ $t('message.link.one3') }}</el-button>
<el-button type="text" size="small">{{ $t('message.link.two4') }}</el-button>
</div>
</div>
<Scan v-else />
<Scan v-if="isScan" />
<div class="login-content-main-sacn" @click="isScan = !isScan">
<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
<div class="login-content-main-sacn-delta"></div>
@ -58,12 +50,7 @@ export default {
const getThemeConfig = computed(() => {
return store.state.themeConfig.themeConfig;
});
// 切换密码、手机登录
const onTabsClick = () => {
state.isTabPaneShow = !state.isTabPaneShow;
};
return {
onTabsClick,
getThemeConfig,
...toRefs(state),
};
@ -100,8 +87,7 @@ export default {
background-color: rgba(255, 255, 255, 0.99);
border: 5px solid var(--color-primary-light-8);
border-radius: 4px;
transition: height 0.2s linear;
height: 480px;
transition: all 0.3s ease;
overflow: hidden;
z-index: 1;
.login-content-main {
@ -155,9 +141,6 @@ export default {
}
}
}
.login-content-mobile {
height: 418px;
}
.login-copyright {
position: absolute;
left: 50%;