初始化添加登录页面

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>
 

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;
+}
+

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>
+  <div class="dr-login">
-  <el-icon><User /></el-icon>
+    <el-form :model='data'>
-  <hr>
+      <div class="title">
-  <el-button type="primary">登录</el-button>
+        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>