md功能实现

src/components/layout/NavBar.vue

@@ -12,13 +12,13 @@
         <el-dropdown-item>删除</el-dropdown-item>
       </el-dropdown-menu>-->
     </el-dropdown>
-    <span>小管</span>
-  </div>
+    <span @click="doLogin">登录</span>  </div>
 </template>
 
 <script setup lang='ts'>
 import $moment from "moment";
 import { ref } from "vue";
+import router from '../../router'
 
 const getTime = () => {
   return $moment().format("YYYY年MM月DD日　HH:mm:ss");
@@ -30,6 +30,12 @@ const timeChange = () => {
   time.value = getTime();
 };
 setInterval(timeChange, 1000);
+
+const doLogin = () => {
+  router.push({
+    path: '/login'
+  })
+}
 </script>
 
 <style>
@@ -37,6 +43,7 @@ setInterval(timeChange, 1000);
   background: url("../../assets/logo.png") center no-repeat;
   background-size: cover;
 }
+
 .nav-main {
   float: right;
 }

src/components/login/login.vue

@@ -1,14 +1,76 @@
 <template>
-  <div class="login">
-    login
-  </div>
+  <div class="yuliu"></div>
+  <el-card class="box-card">
+    <el-form ref="ruleFormRef" :model="userForm" status-icon label-width="120px" class="demo-ruleForm">
+      <el-form-item label="用户名" prop="pass">
+        <el-input v-model="userForm.user_id" type="password" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="用户凭证" prop="checkPass">
+        <el-input v-model="userForm.password" type="password" autocomplete="off" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="dologin">login</el-button>
+      </el-form-item>
+    </el-form>
+    ------------------------------------------------------------
+    <div>
+      微信/支付宝
+    </div>
+    </el-card>
+
 </template>
 
-<script setup lang="ts">
-</script>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { authorize } from '../../api/user';
 
-<style>
-.login {
-  background-color: beige;
+const userForm = reactive({
+  user_id: '',
+  password: ''
+})
+
+
+const dologin = (form: FormInstance | undefined) => {
+
+  if (!form) return
+  form.validate((valid) => {
+    if (valid) {
+      let validForm = {
+      }
+      authorize(validForm).then(response => {
+
+      })
+    } else {
+      return false
+    }
+  })
 }
-</style>
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>
+<style scoped>
+.text {
+  font-size: 14px;
+}
+
+.item {
+  padding: 18px 0;
+}
+
+.box-card {
+  width: 480px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.yuliu {
+  width: 600px;
+  height: 600px;
+  background-color: antiquewhite;
+}
+</style>