更新 登录页样式

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@cloudbase/js-sdk": "^1.7.1",
     "@element-plus/icons": "^0.0.11",
-    "@element-plus/icons-vue": "^2.0.6",
+    "@element-plus/icons-vue": "^2.0.10",
     "axios": "^0.21.1",
     "copy-to-clipboard": "^3.3.1",
     "element-plus": "^2.2.25",

src/views/index/Login.vue

@@ -14,8 +14,8 @@
           <el-form :model="ruleForm" :rules="rules" ref="form">
             <el-form-item prop="phone">
               <el-input placeholder="请输入手机号" v-model="ruleForm.phone">
-                <template v-slot:prepend>
-                  <el-button icon="el-icon-mobile-phone"></el-button>
+                <template #prepend>
+                  <el-button :icon="Iphone" />
                 </template>
               </el-input>
             </el-form-item>
@@ -25,8 +25,8 @@
                 placeholder="请输入密码"
                 v-model="ruleForm.password"
               >
-                <template v-slot:prepend>
-                  <el-button icon="el-icon-lock"></el-button>
+                <template #prepend>
+                  <el-button :icon="Lock" />
                 </template>
               </el-input>
             </el-form-item>
@@ -54,89 +54,74 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import { ref, reactive, toRefs } from "vue";
 import { ElNotification } from "element-plus";
 import store from "../../store";
 import router from "../../router";
+import { Iphone, Lock } from "@element-plus/icons-vue";
 
 import md5 from "md5";
 import api from "../../apis/fetch";
 
-export default {
-  setup() {
-    const form = ref(null);
-    const ruleForm = reactive({
-      ruleForm: {
-        phone: "",
-        password: "",
-      },
-    });
-
-    const rules = reactive({
-      rules: {
-        phone: [
-          { required: true, message: "请输入手机号", trigger: "blur" },
-          { min: 11, max: 11, message: "请正确输入手机号", trigger: "blur" },
-        ],
-        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-      },
-    });
-    function check() {
-      // form.value.validate((valid) => {});
-    }
-    async function login() {
-      // let res = await cloudConfig.doc("18ed09686196068205eeb77612d641c6").get();
-      // let { version } = res.data[0];
-      // localStorage.setItem("version", version);
-      form.value.validate(async (valid) => {
-        if (valid) {
-          let { phone, password } = ruleForm.ruleForm;
-          let { data } = await api.login({
-            phone,
-            password,
-            // password: md5(password).toUpperCase(),
-          });
-          if (data.status == 0) {
-            ElNotification.success({
-              title: "成功",
-              duration: 2000,
-              message: data.msg,
-              type: "success",
-            });
-            Object.keys(data.result).forEach((key) => {
-              localStorage.setItem(key, data.result[key]);
-            });
-
-            store.commit("changeLogin", true);
-            router.replace({ path: "/index" });
-          } else {
-            ElNotification.error({
-              title: "错误",
-              duration: 3000,
-              message: data.msg,
-            });
-          }
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
+const form = ref(null);
+const ruleForm = ref({
+  phone: "",
+  password: "",
+});
+
+const rules = ref({
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { min: 11, max: 11, message: "请正确输入手机号", trigger: "blur" },
+  ],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+});
+function check() {
+  // form.value.validate((valid) => {});
+}
+async function login() {
+  // let res = await cloudConfig.doc("18ed09686196068205eeb77612d641c6").get();
+  // let { version } = res.data[0];
+  // localStorage.setItem("version", version);
+  form.value.validate(async (valid) => {
+    if (valid) {
+      let { phone, password } = ruleForm.value;
+      let { data } = await api.login({
+        phone,
+        password,
+        // password: md5(password).toUpperCase(),
       });
+      if (data.status == 0) {
+        ElNotification.success({
+          title: "成功",
+          duration: 2000,
+          message: data.msg,
+          type: "success",
+        });
+        Object.keys(data.result).forEach((key) => {
+          localStorage.setItem(key, data.result[key]);
+        });
+
+        store.commit("changeLogin", true);
+        router.replace({ path: "/index" });
+      } else {
+        ElNotification.error({
+          title: "错误",
+          duration: 3000,
+          message: data.msg,
+        });
+      }
+    } else {
+      console.log("error submit!!");
+      return false;
     }
+  });
+}
 
-    function goBeian() {
-      window.open("https://beian.miit.gov.cn/");
-    }
-
-    return {
-      form,
-      ...toRefs(ruleForm),
-      ...toRefs(rules),
-      login,
-      goBeian,
-    };
-  },
-};
+function goBeian() {
+  window.open("https://beian.miit.gov.cn/");
+}
 </script>
 <style scoped>
 .container {