From 8d14803ad23fcc764de63855958bf8b5bfe94569 Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Sat, 26 Dec 2020 23:41:23 +0800
Subject: [PATCH] =?UTF-8?q?'admin-20.12.26:=E7=BC=96=E5=86=99=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E7=95=8C=E9=9D=A2'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/login/index.vue                 | 110 ++++++++++++++++++
 .../src/views/login/mock.ts                   |  32 -----
 2 files changed, 110 insertions(+), 32 deletions(-)
 delete mode 100644 vue-admin-wonderful-next/src/views/login/mock.ts

diff --git a/vue-admin-wonderful-next/src/views/login/index.vue b/vue-admin-wonderful-next/src/views/login/index.vue
index 90b3393..07a85b2 100644
--- a/vue-admin-wonderful-next/src/views/login/index.vue
+++ b/vue-admin-wonderful-next/src/views/login/index.vue
@@ -3,6 +3,43 @@
     <div class="login-logo">
       <img src="/@/assets/logo-web-element.svg" />
     </div>
+    <div class="login-content">
+      <div class="login-content-main">
+        <h4 class="login-content-title">vue-admin-wonderful</h4>
+        <el-form class="login-content-form" ref="ruleForm">
+          <el-form-item>
+            <el-input type="text" placeholder="用户名 admin 或 test" prefix-icon="el-icon-user" v-model="ruleForm.userName"
+              clearable autocomplete="off" ref="userName">
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password"
+              clearable autocomplete="off" ref="password">
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-row :gutter="15">
+              <el-col :span="16">
+                <el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
+                  v-model="ruleForm.code" clearable autocomplete="off" ref="code"></el-input>
+              </el-col>
+              <el-col :span="8">
+                <div class="login-content-code">
+                  <span class="login-content-code-img">1234</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" class="login-content-submit" round>
+              <span>登 录</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="text" size="small">第三方登录</el-button>
+        <el-button type="text" size="small">友情链接</el-button>
+      </div>
+    </div>
     <div class="login-copyright">
       <div class="mb5">版权所有：深圳市xxx软件科技有限公司</div>
       <div>Copyright: Shenzhen XXX Software Technology Co. Ltd 粤ICP备05010000号</div>
@@ -11,8 +48,21 @@
 </template>
 
 <script lang="ts">
+import { toRefs, reactive } from "vue";
 export default {
   name: "login",
+  setup() {
+    const state = reactive({
+      ruleForm: {
+        userName: "",
+        password: "",
+        code: "",
+      },
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
 };
 </script>
 
@@ -26,6 +76,66 @@ export default {
     position: absolute;
     top: 30px;
     left: 30px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+  }
+  .login-content {
+    width: 500px;
+    padding: 20px;
+    height: 410px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 2px 12px 0 rgba(179, 202, 233, 1);
+    border-radius: 4px;
+    .login-content-main {
+      margin: 0 auto;
+      width: 80%;
+      .login-content-title {
+        color: #333;
+        font-weight: 500;
+        font-size: 22px;
+        text-align: center;
+        letter-spacing: 4px;
+        margin: 15px 0 30px;
+      }
+      .login-content-form {
+        .login-content-code {
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          .login-content-code-img {
+            width: 100%;
+            height: 40px;
+            background-color: #fdfdfd;
+            border: 1px solid rgb(220, 223, 230);
+            color: #333;
+            font-size: 14px;
+            font-weight: 700;
+            letter-spacing: 5px;
+            line-height: 38px;
+            text-indent: 5px;
+            text-align: center;
+            cursor: pointer;
+            transition: all ease 0.2s;
+            border-radius: 4px;
+            &:hover {
+              border-color: #c0c4cc;
+              transition: all ease 0.2s;
+            }
+          }
+        }
+        .login-content-submit {
+          width: 100%;
+          letter-spacing: 2px;
+          font-weight: 300;
+          margin-top: 15px;
+        }
+      }
+    }
   }
   .login-copyright {
     position: absolute;
diff --git a/vue-admin-wonderful-next/src/views/login/mock.ts b/vue-admin-wonderful-next/src/views/login/mock.ts
deleted file mode 100644
index dc3bbbd..0000000
--- a/vue-admin-wonderful-next/src/views/login/mock.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export const classicQuotationsList: Array<object> = [
-    {
-        name: '颜渊',
-        comeFrom: '论语',
-        content: '自己不喜欢的，就不要强加给别人。饥寒是自己不喜欢的，不要把它强加给别人；耻辱是自己不喜欢的，也不要把它强加给别人。将心比心，推己及人，从自己的利与害想到对别人的利与害，多替别人着想，这是终生应该奉行的原则。'
-    },
-    {
-        name: '荀子',
-        comeFrom: '劝学',
-        content: '木料经过木工用墨线（木工用具）划直线加工以后，就变直了；金属物品在磨刀石上磨砺后，就能锋利。人经过学习磨练，自我反省，就会变得聪慧明智，不犯错误，也越来越坚强。'
-    },
-    {
-        name: '里仁',
-        comeFrom: '论语',
-        content: '见到贤人，就应该想着向他学习；看见不贤的人，便应该自己反省，对不如自己的人喜欢讥笑、轻视，因而沾沾自喜；对比自己强的人喜欢贬低，甚至嫉妒、畏惧退缩，害怕与他们交往：这都是不正确的态度。'
-    },
-    {
-        name: '述而',
-        comeFrom: '论语',
-        content: '君子心地平坦宽广，小人却经常局促忧愁。君子襟怀坦白，安贫乐业，与人为善，知足常乐，所以能坦荡荡。小人欲念太多，患得患失，忧心忡忡，怨天尤人，局促不安，所以常心怀戚戚。'
-    },
-    {
-        name: '老子',
-        comeFrom: '第六十四章',
-        content: '千里遥远的路程是从脚下第一步开始的。任何事情的成功都是从头开始，从小到大逐渐积累的。万事开头难，没有个开头就不会有结果。任何事情都要从一点一滴的小事开始做起。'
-    },
-    {
-        name: '朱熹',
-        comeFrom: '训学斋规',
-        content: '读书有三到，谓心到，眼到，口到。心不在此，则眼看不仔细，心眼既不专一，却只漫浪诵读，决不能记，久也不能久也。三到之中，心到最急，心既到矣，眼口岂不到乎？'
-    }
-]
\ No newline at end of file