33 登陆页面布局开发 - udo-bit/naive_admin_pro GitHub Wiki

目标

完成登录页面的开发

截屏2022-11-23 21.32.03.png

开发

切到pages/login/index.vue中，首先为了兼容naive-ui的样式系统，我们直接在根节点包一个n-el标签，并定义tag为div。

<script lang="ts" setup>

</script>

<template>
  <n-el tag="div">
    登录页
  </n-el>
</template>

<style scoped>

</style>

背景开发

我们先来开发一下我们的背景图片。

<template>
    <n-el tag="div" class="pro-admin-login-container h-screen">
      
    </n-el>
</template>


<style scoped>
.pro-admin-login-container{
  background-image: url("~@/assets/images/bg.svg");
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;
}
</style>

开发底部版权信息

<template>
  <n-el ...>
    <div flex="~ shrink-0" class="items-center justify-center my-2">
      <span>Naive Admin Pro</span>
      &copy; 2022 后台管理系统模板
    </div>
  </n-el>
</template>

开发logo和描述部分

描述的部分我们还是使用多语言的方式开发，我们在locales下面创建一个pages的目录，然后再创建两个文件分别是：zh-CN.ts和en-US.ts 然后我们先来实现一下描述的多语言如下这里我们将所有与登录页相关的多语言全部罗列出来： en-US.ts

export default {
  'login.admin.desc': 'A front-end and back-end solution based on Naive UI',
  'login.account.tab': 'Account Login',
  'login.mobile.tab': 'Mobile Login',
  'login.username.placeholder': 'Username: admin',
  'login.username.required': 'Please enter username!',
  'login.username.length': 'Username length should be 5 to 20 characters',
  'login.password.placeholder': 'Password: admin',
  'login.password.required': 'Please enter password!',
  'login.password.length': 'Password length should be 5 to 20 characters',
  'login.mobile.placeholder': 'Mobile number',
  'login.mobile.required': 'Please enter mobile number!',
  'login.mobile.verification-code.placeholder': 'Verification code',
  'login.mobile.verification-code.required': 'Please enter the verification code!',
  'login.mobile.verification-code.rule': 'The verification code format is incorrect!',
  'login.mobile.verification-code.get-verification-code': 'Get code',
  'login.mobile.resend': 'Resend',
  'login.remember-me': 'Remember me',
  'login.forgot-password': 'Forgot your password?',
  'login.sign-in-with': 'Sign in with:',
  'login.signup': 'Sign up',
  'login.login': 'Login',
}

zh-CN.ts

export default {
  'login.admin.desc': '一个基于Naive UI的前端中后台的解决方案',
  'login.account.tab': '账户密码登录',
  'login.mobile.tab': '手机号登录',
  'login.username.placeholder': '用户名: admin',
  'login.username.required': '请输入用户名!',
  'login.username.length': '用户名长度在 5 到 20 个字符',
  'login.password.placeholder': '密码: admin',
  'login.password.required': '请输入密码！',
  'login.password.length': '密码长度在 5 到 20 个字符',
  'login.mobile.placeholder': '手机号',
  'login.mobile.required': '请输入手机号！',
  'login.mobile.rule': '手机号格式错误！',
  'login.mobile.verification-code.rule': '验证码格式错误！',
  'login.mobile.verification-code.placeholder': '验证码',
  'login.mobile.verification-code.required': '请输入验证码！',
  'login.mobile.verification-code.get-verification-code': '获取验证码',
  'login.mobile.resend': '重新获取',
  'login.remember-me': '自动登录',
  'login.forgot-password': '忘记密码',
  'login.sign-in-with': '其他登录方式：',
  'login.signup': '注册账户',
  'login.login': '登录',
}

然后在login/index.vue中

<template>
    <n-el tag="div" flex="~ col" class="pro-admin-login-container h-screen">
      <div class="flex-1">
        <div flex="~ col" class="py-20px items-center justify-center">
          <div class="flex items-center">
            <img src="~@/assets/vue.svg" class="h-40px w-40px">
            <span class="ml-3 text-33px font-600">
              Naive Admin Pro
            </span>
          </div>
          <div class="flex items-center mt-12px mb-40px text-[var(--text-color-3)]">
            {{ $t('login.admin.desc') }}
          </div>
        </div>
   	 </div>
    	...
    </n-el>
</template>

实现登录页

<n-tabs default-value="username" type="line" justify-content="space-evenly">
  <n-tab-pane name="username" :tab="$t('login.account.tab')">
    <n-form label-placement="left" label-align="left">
      <n-form-item-row>
        <n-input :placeholder="$t('login.username.placeholder')">
          <template #prefix>
            <n-icon :component="UserOutlined" />
          </template>
        </n-input>
      </n-form-item-row>
      <n-form-item-row>
        <n-input :placeholder="$t('login.password.placeholder')">
          <template #prefix>
            <n-icon :component="LockOutlined" />
          </template>
        </n-input>
      </n-form-item-row>
      <n-form-item-row>
        <div class="w-100% flex items-center justify-between">
          <n-checkbox>
            {{ $t("login.remember-me") }}
          </n-checkbox>
          <a class="cursor-pointer text-[var(--primary-color)]">
            {{ $t("login.forgot-password") }}
          </a>
        </div>
      </n-form-item-row>
    </n-form>
    <n-button type="primary" block secondary strong>
      {{ $t("login.login") }}
    </n-button>
  </n-tab-pane>
  <n-tab-pane name="signup" :tab="$t('login.mobile.tab')">
    <n-form label-align="left" label-placement="left">
      <n-form-item-row>
        <n-input :placeholder="$t('login.mobile.placeholder')">
          <template #prefix>
            <n-icon :component="MobileOutlined" />
          </template>
        </n-input>
      </n-form-item-row>
      <n-form-item-row>
        <n-input-group>
          <n-input :placeholder="$t('login.mobile.verification-code.placeholder')">
            <template #prefix>
              <n-icon :component="LockOutlined" />
            </template>
          </n-input>
          <n-button>
            {{ $t("login.mobile.verification-code.get-verification-code") }}
          </n-button>
        </n-input-group>
      </n-form-item-row>
      <n-form-item-row>
        <div class="w-100% flex items-center justify-between">
          <n-checkbox>
            {{ $t("login.remember-me") }}
          </n-checkbox>
          <a class="cursor-pointer text-[var(--primary-color)]">
            {{ $t("login.forgot-password") }}
          </a>
        </div>
      </n-form-item-row>
    </n-form>
    <n-button type="primary" block secondary strong>
      {{ $t("login.login") }}
    </n-button>
  </n-tab-pane>
</n-tabs>

我们来看一下整个的布局效果。

第三方登录部分

接下来我们来实现一下第三方登录的部分。 第三方登录我们可以不跟着tab进行切换，我们直接放到tabs的下面。我们以github为例子。

<div class="flex mt-24px items-center">
  {{ $t("login.sign-in-with") }}
  <n-icon
    size="24"
    class="cursor-pointer text-[var(--text-color-3)] hover:text-[var(--primary-color)]"
    :component="GithubOutlined"
  />
</div>

布局抽离

接下来我们来看一下，我们整个的背景这一部分，是可以单独的抽离出来进行复用，所以接下来我们来抽离一下这一部分的布局。 在layouts中创建一个blank-layout的目录并创建一个index.vue的文件。

<template>
  <n-el tag="div" flex="~ col" class="pro-admin-login-container h-screen">
    <slot name="prefix" />
    <div class="flex-1">
      <slot />
    </div>
    <slot name="suffix">
      <div flex="~ shrink-0 basis-auto col" class="items-center">
        <div class="my-2">
          <span>Naive Admin Pro</span>
          &copy; 2022 后台管理系统模板
        </div>
      </div>
    </slot>
  </n-el>
</template>

<style scoped>
.pro-admin-login-container{
  background-image: url("~@/assets/images/bg.svg");
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;
}
</style>

在layouts/index.ts中注册组件：

import Layout from './base-layout/index.vue'
+ import BlankLayout from './blank-layout/index.vue'

export {
  Layout,
+  BlankLayout,
}

在pages/login/index.vue中使用

<script lang="ts" setup>
import { GithubOutlined, LockOutlined, MobileOutlined, UserOutlined } from '@vicons/antd'
import { BlankLayout } from '~/layouts'
</script>

<template>
  <BlankLayout>
    <div flex="~ col" class="py-20px items-center justify-center">
      <div class="flex items-center">
        <img src="~@/assets/vue.svg" class="h-40px w-40px">
        <span class="ml-3 text-33px font-600">
          Naive Admin Pro
        </span>
      </div>
      <div class="flex items-center mt-12px mb-40px text-[var(--text-color-3)]">
        {{ $t('login.admin.desc') }}
      </div>
      <div class="w-350px mx-auto">
        <!--          -->
        <n-tabs default-value="username" type="line" justify-content="space-evenly">
          <n-tab-pane name="username" :tab="$t('login.account.tab')">
            <n-form label-placement="left" label-align="left">
              <n-form-item-row>
                <n-input :placeholder="$t('login.username.placeholder')">
                  <template #prefix>
                    <n-icon :component="UserOutlined" />
                  </template>
                </n-input>
              </n-form-item-row>
              <n-form-item-row>
                <n-input :placeholder="$t('login.password.placeholder')">
                  <template #prefix>
                    <n-icon :component="LockOutlined" />
                  </template>
                </n-input>
              </n-form-item-row>
              <n-form-item-row>
                <div class="w-100% flex items-center justify-between">
                  <n-checkbox>
                    {{ $t("login.remember-me") }}
                  </n-checkbox>
                  <a class="cursor-pointer text-[var(--primary-color)]">
                    {{ $t("login.forgot-password") }}
                  </a>
                </div>
              </n-form-item-row>
            </n-form>
            <n-button type="primary" block secondary strong>
              {{ $t("login.login") }}
            </n-button>
          </n-tab-pane>
          <n-tab-pane name="signup" :tab="$t('login.mobile.tab')">
            <n-form label-align="left" label-placement="left">
              <n-form-item-row>
                <n-input :placeholder="$t('login.mobile.placeholder')">
                  <template #prefix>
                    <n-icon :component="MobileOutlined" />
                  </template>
                </n-input>
              </n-form-item-row>
              <n-form-item-row>
                <n-input-group>
                  <n-input :placeholder="$t('login.mobile.verification-code.placeholder')">
                    <template #prefix>
                      <n-icon :component="LockOutlined" />
                    </template>
                  </n-input>
                  <n-button>
                    {{ $t("login.mobile.verification-code.get-verification-code") }}
                  </n-button>
                </n-input-group>
              </n-form-item-row>
              <n-form-item-row>
                <div class="w-100% flex items-center justify-between">
                  <n-checkbox>
                    {{ $t("login.remember-me") }}
                  </n-checkbox>
                  <a class="cursor-pointer text-[var(--primary-color)]">
                    {{ $t("login.forgot-password") }}
                  </a>
                </div>
              </n-form-item-row>
            </n-form>
            <n-button type="primary" block secondary strong>
              注册
            </n-button>
          </n-tab-pane>
        </n-tabs>
        <div class="flex mt-24px items-center">
          {{ $t("login.sign-in-with") }}
          <n-icon
            size="24"
            class="cursor-pointer text-[var(--text-color-3)] hover:text-[var(--primary-color)]"
            :component="GithubOutlined"
          />
        </div>
      </div>
    </div>
  </BlankLayout>
</template>

最后我们来看一下实现后的效果。

⚠️ **GitHub.com Fallback** ⚠️