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

README.md

@@ -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>

src/layout/lockScreen/index.vue

@@ -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>
+						<SvgIcon name="elementMicrophone" />
-						<i class="el-icon-alarm-clock"></i>
+						<SvgIcon name="elementAlarmClock" />
-						<i class="el-icon-switch-button"></i>
+						<SvgIcon name="elementSwitchButton" />
 					</div>
 				</div>
 			</transition>

src/views/login/component/account.vue

@@ -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;

src/views/login/component/mobile.vue

@@ -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;

src/views/login/component/scan.vue

@@ -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 {
+	padding: 20px;
-		position: absolute;
+	display: flex;
-		left: 50%;
+	justify-content: center;
-		top: 50%;
+	animation: logoAnimation 0.3s ease;
-		transform: translate(-50%, -40%);
-	}
 }
 </style>

src/views/login/index.vue

@@ -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-tabs v-model="tabsActiveName">
-						<el-tab-pane :label="$t('message.label.one1')" name="account" :disabled="tabsActiveName === 'account'">
+						<el-tab-pane :label="$t('message.label.one1')" name="account">
-							<transition name="el-zoom-in-center">
+							<Account />
-								<Account v-show="isTabPaneShow" />
-							</transition>
 						</el-tab-pane>
-						<el-tab-pane :label="$t('message.label.two2')" name="mobile" :disabled="tabsActiveName === 'mobile'">
+						<el-tab-pane :label="$t('message.label.two2')" name="mobile">
-							<transition name="el-zoom-in-center">
+							<Mobile />
-								<Mobile v-show="!isTabPaneShow" />
-							</transition>
 						</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-if="isScan" />
-				<Scan v-else />
 				<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;
+		transition: all 0.3s ease;
-		height: 480px;
 		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%;