✨添加登录页，添加页面加载动画

2025-06-03 08:19:15 +08:00 · 2020-10-04 15:45:08 +08:00 · 2020-10-04 15:45:08 +08:00 · 396e1df0c0
commit 396e1df0c0
parent 6d347324ef
7 changed files with 227 additions and 43 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,17 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta
+      content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档"
+      name="keywords"
+    />
+    <meta
+      content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>"
+      name="description"
+    />
+    <meta content="<%= VUE_APP_AUTHOR %>" name="author" />
+    <link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>
+        We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to continue.
+      </strong>
    </noscript>
-    <div id="app"></div>
+    <div id="app">
+      <div class="first-loading-wrp">
+        <div class="loading-wrp">
+          <span class="dot dot-spin">
+            <i></i>
+            <i></i>
+            <i></i>
+            <i></i>
+          </span>
+        </div>
+        <h1><%= VUE_APP_TITLE %></h1>
+      </div>
+    </div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/public/static/css/loading.css
+++ b/public/static/css/loading.css
@ -0,0 +1,96 @@
+.first-loading-wrp {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 90vh;
+  min-height: 90vh;
+}
+
+.first-loading-wrp > h1 {
+  font-size: 30px;
+  font-weight: bolder;
+}
+
+.first-loading-wrp .loading-wrp {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 98px;
+}
+
+.dot {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+  font-size: 64px;
+  transform: rotate(45deg);
+  animation: antRotate 1.2s infinite linear;
+}
+
+.dot i {
+  position: absolute;
+  display: block;
+  width: 28px;
+  height: 28px;
+  background-color: #1890ff;
+  border-radius: 100%;
+  opacity: 0.3;
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  animation: antSpinMove 1s infinite linear alternate;
+}
+
+.dot i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+
+.dot i:nth-child(2) {
+  top: 0;
+  right: 0;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+
+.dot i:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  -webkit-animation-delay: 1.2s;
+  animation-delay: 1.2s;
+}
+
+@keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+@-webkit-keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
--- a/src/assets/login_images/login_background.png
+++ b/src/assets/login_images/login_background.png
--- a/src/assets/login_images/login_form.png
+++ b/src/assets/login_images/login_form.png
--- a/src/config/settings.js
+++ b/src/config/settings.js
@ -21,7 +21,7 @@ module.exports = {
  //是否显示logo，不显示时设置false，显示时请填写remixIcon图标名称，暂时只支持设置remixIcon
  logo: "vuejs-fill",
  //标题 （包括初次加载雪花屏的标题 页面的标题 浏览器的标题）
-  title: "vue-admin-beautiful",
+  title: "vue-admin-beautiful-antdv",
  //标题分隔符
  titleSeparator: " - ",
  //标题是否反转 如果为false:"page - title"，如果为ture:"title - page"
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -6,6 +6,7 @@
      @click="handleFoldSideBar"
    ></div>
    <a-layout-sider
+      width="250"
      v-model:collapsed="collapse"
      :trigger="null"
      collapsible
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -1,12 +1,13 @@
 <template>
  <div class="login-container">
-    <h3>登录页样式未开发，点击登录即可进入首页</h3>
-    <a-form
-      layout="inline"
-      :model="form"
-      @submit="handleSubmit"
-      @submit.prevent
-    >
+    <a-row>
+      <a-col :xs="24" :md="11" :sm="24" :lg="14" :xl="14"></a-col>
+      <a-col :xs="24" :sm="24" :md="12" :lg="9" :xl="6">
+        <div class="login-container-form">
+          <div class="login-container-title">
+            {{ title }}
+          </div>
+          <a-form :model="form" @submit="handleSubmit" @submit.prevent>
            <a-form-item>
              <a-input v-model:value="form.username" placeholder="Username">
                <template v-slot:prefix>
@ -33,12 +34,22 @@
              >
                登录
              </a-button>
+              <div class="login-container-tips">
+                基于vue{{ dependencies["vue"] }}
+                + ant-design-vue
+                {{ dependencies["ant-design-vue"] }}开发
+              </div>
            </a-form-item>
          </a-form>
        </div>
+      </a-col>
+      <a-col :xs="24" :md="11" :sm="24" :lg="14" :xl="14"></a-col>
+    </a-row>
+  </div>
 </template>
 <script>
-  import { mapActions } from "vuex";
+  import { dependencies, devDependencies } from "*/package.json";
+  import { mapActions, mapGetters } from "vuex";
  import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";

  export default {
@ -54,8 +65,16 @@
          password: "",
        },
        redirect: undefined,
+        dependencies: dependencies,
+        devDependencies: devDependencies,
      };
    },
+    computed: {
+      ...mapGetters({
+        logo: "settings/logo",
+        title: "settings/title",
+      }),
+    },
    watch: {
      $route: {
        handler(route) {
@ -67,6 +86,9 @@
    mounted() {
      this.form.username = "admin";
      this.form.password = "123456";
+      setTimeout(() => {
+        this.handleSubmit();
+      }, 500000);
    },
    methods: {
      ...mapActions({
@ -84,3 +106,43 @@
    },
  };
 </script>
+<style lang="less">
+  .login-container {
+    height: 100vh;
+    background: url("~@/assets/login_images/login_background.png");
+    background-size: cover;
+    &-form {
+      width: calc(100% - 40px);
+      height: 380px;
+      padding: 4vh;
+      margin-top: calc((100vh - 380px) / 2);
+      margin-right: 20px;
+      margin-left: 20px;
+      background: url("~@/assets/login_images/login_form.png");
+      background-size: 100% 100%;
+      border-radius: 10px;
+      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
+    }
+    &-title {
+      margin-bottom: 30px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #fff;
+      text-align: center;
+    }
+    &-tips {
+      margin-top: 10px;
+      color: rgba(255, 255, 255, 0.856);
+      text-align: center;
+    }
+    .ant-input {
+      width: 100%;
+      height: 45px;
+    }
+    .ant-btn {
+      width: 100%;
+      height: 45px;
+      border-radius: 99px;
+    }
+  }
+</style>