From 92b59bad3aef7c866b058dc7142c7ef82620c80a Mon Sep 17 00:00:00 2001
From: xuewuerduo <53554701+xuewuerduo@users.noreply.github.com>
Date: Sun, 14 Jul 2024 21:06:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |  7 -------
 src/assets/admin/css/login.css | 36 +++++++++++++++++++++++++++++++++
 src/views/admin/login.vue      | 37 ++++++++++++++++++++++++++++++----
 3 files changed, 69 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/admin/css/login.css

diff --git a/src/App.vue b/src/App.vue
index 973cb91..853dc4d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,4 @@
 <script setup>
-import { useAdminStore } from '@/stores/admin/admin.js'
-
-  const adminStore = useAdminStore()
-
-console.log(adminStore.data)
-
-adminStore.save("李龙龙","www.zh-cc.top","2024-07-14")
 
 </script>
 
diff --git a/src/assets/admin/css/login.css b/src/assets/admin/css/login.css
new file mode 100644
index 0000000..09ea4ab
--- /dev/null
+++ b/src/assets/admin/css/login.css
@@ -0,0 +1,36 @@
+* {
+    margin:0;
+    padding:0;
+}
+.dr-login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+.dr-login .el-form {
+    width: 360px;
+    height: 230px;
+    background: #fff;
+    box-shadow: 0 0 15px #88c7f8;
+}
+
+.dr-login .el-form .title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 60px;
+    font-size: 25px;
+    font-weight: bold;
+    color: #1e9eff;
+}
+
+.dr-login .el-form .el-form-item {
+    margin-left: 30px;
+    width: 300px;
+}
+
+.dr-login .el-form .el-button {
+    width: 300px;
+}
+
diff --git a/src/views/admin/login.vue b/src/views/admin/login.vue
index 4ecf000..3de5ae1 100644
--- a/src/views/admin/login.vue
+++ b/src/views/admin/login.vue
@@ -1,11 +1,40 @@
 <script setup>
+import '@/assets/admin/css/login.css' //导入样式
+import { reactive } from 'vue'
+import { User,Lock } from '@element-plus/icons-vue' //图标
+
+const data = reactive({
+  name: '',
+  password: '',
+})
+const login = () => {
+  console.log(data)
+}
 
 </script>
 <template>
-  <h3>登录页</h3>
-  <el-icon><User /></el-icon>
-  <hr>
-  <el-button type="primary">登录</el-button>
+  <div class="dr-login">
+    <el-form :model='data'>
+      <div class="title">
+        DR_CMS
+      </div>
+
+      <el-form-item>
+        <el-input :prefix-icon="User" v-model="data.name" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-input :prefix-icon="Lock" show-password v-model="data.password" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="login">登录</el-button>
+      </el-form-item>
+
+    </el-form>
+
+
+  </div>
 </template>
 <style scoped>
 </style>