更新 登录页

src/router/index.js

@@ -14,7 +14,7 @@ const router = createRouter({
       meta: {
         title: "登录",
       },
-      component: () => import("../views/Login.vue"),
+      component: () => import("../views/login.vue"),
     },
     {
       path: "/digitalEmpowermentCenter",

src/views/login.vue

@@ -1,25 +1,131 @@
 <template>
-  <el-button @click="login">登录</el-button>
+  <div class="login-box df aic jcc">
+    <div class="login">
+      <div class="title mb80">汇很多航运数字经济总控平台</div>
+      <div>
+        <el-form :model="ruleForm" :rules="rules" ref="form" inline>
+          <el-form-item prop="account">
+            <el-input
+              style="width: 380px"
+              placeholder="请输入账号"
+              v-model="ruleForm.account"
+            >
+              <template v-slot:prepend>
+                <el-button icon="el-icon-mobile-phone"></el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              style="width: 380px"
+              type="password"
+              placeholder="请输入密码"
+              v-model="ruleForm.password"
+              @keyup.enter="login"
+            >
+              <template v-slot:prepend>
+                <el-button icon="el-icon-lock"></el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <div class="login-button pointer tac" @click="login('ruleForm')">
+              登录
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { ref, reactive, toRefs } from "vue";
+import { ElNotification } from "element-plus";
 import router from "router/index";
 import store from "store/index";
 
 export default {
   setup() {
-    async function login() {
-      let res = await store.dispatch("Login");
-      if (res == 1) {
-        router.replace("/transportationSafetyCenter");
-      }
+    const form = ref(null);
+    const ruleForm = reactive({
+      ruleForm: {
+        account: "",
+        password: "",
+      },
+    });
+
+    const rules = reactive({
+      rules: {
+        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 1, max: 20, message: "请正确输入密码", trigger: "blur" },
+        ],
+      },
+    });
+    function login() {
+      form.value.validate((valid) => {
+        if (valid) {
+          if (
+            ruleForm.ruleForm.account == "10057421001" &&
+            ruleForm.ruleForm.password == "aiyingshipwd"
+          ) {
+            localStorage.setItem("id", 1);
+            store.commit("changeLogin", true);
+            router.replace("/transportationSafetyCenter");
+          } else {
+            ElNotification({
+              type: "error",
+              title: "账号或密码错误",
+            });
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
     }
+
+    // async function login() {
+    //   let res = await store.dispatch("Login");
+    //   if (res == 1) {
+    //     router.replace("/transportationSafetyCenter");
+    //   }
+    // }
     return {
+      form,
+      ...toRefs(ruleForm),
+      ...toRefs(rules),
       login,
     };
   },
 };
 </script>
+<style lang="scss" scoped>
+.login-box {
+  height: 100%;
+  width: 100%;
+  background: #414e7c;
+}
+.login {
+  box-sizing: border-box;
+}
+.title {
+  font-size: 36px;
+  font-family: PingFang SC;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.login-button {
+  width: 134px;
+  height: 40px;
+  background: #00d093;
+  border-radius: 2px;
+}
 
-<style>
+.mb80 {
+  margin-bottom: 80px;
+}
 </style>