更新登录注册页的样式，登录时获取并保存用户名，让Header显示用户名

src/components/Header.vue

@@ -3,7 +3,12 @@ import {CirclePlus, UserFilled, SwitchButton} from "@element-plus/icons-vue";
 import {ref} from 'vue';
 import {router} from '../router'
 
-const searchContent = ref('')
+// const searchContent = ref('')
+
+
+const userName = ref()
+userName.value = sessionStorage.getItem("name")
+
 
 function logout() {
   ElMessageBox.confirm(
@@ -50,6 +55,10 @@ function search() {
 
       </el-col>
 
+      <el-col :span="2">
+        <span> {{ userName }}</span>
+      </el-col>
+
       <el-col :span="2">
         <router-link to="/manager/createStore" v-slot="{navigate}">
           <el-icon @click="navigate" :size="30" color="white" ><CirclePlus /></el-icon>

src/components/Login.vue

@@ -35,7 +35,28 @@
           const token = res.result
           sessionStorage.setItem('token', token)
 
-          router.push({ path: "/allStore"})
+          userInfo().then(res => {
+            sessionStorage.setItem('name', res.result.name)
+            router.push({path: "/allStore"})
+          }).catch(e => {
+            console.log(e.message)
+            ElMessageBox.alert(
+                e.message,
+                '错误提示',
+                {
+                  customClass: "customDialog",
+                  confirmButtonText: '好的',
+                  type: "error",
+                  showClose: false,
+                  roundButton: true,
+                  center: true
+                }
+            ).then(() => {
+              // 清空用户密码
+              password.value = ''
+            })
+          })
+
         })
         .catch(e => {
           console.log(e.message)
@@ -62,9 +83,9 @@
 
 <template>
 
-  <el-main>
+  <el-main class="main-frame bgimage">
 
-    <el-card>
+    <el-card class="login-card">
 
       <div>
 
@@ -74,11 +95,11 @@
 
           <el-form-item>
             <label v-if="!hasTelInput" for="tel">注册手机号</label>
-            <label v-else-if="!telLegal" for="tel" >手机号不合法</label>
+            <label v-else-if="!telLegal" for="tel" class="error-warn">手机号不合法</label>
             <label v-else for="tel">注册手机号</label>
 
-            <el-input id="tel" type="tel" v-model="tel"
-                   required
+            <el-input id="tel" type="text" v-model="tel"
+                   required :class="{'error-warn-input' :(hasTelInput && !telLegal)}"
                    placeholder="请输入手机号" />
           </el-form-item>
 
@@ -89,10 +110,11 @@
                    placeholder="••••••••"/>
           </el-form-item>
 
-          <el-form-item>
+          <span class="button-group">
 
               <el-button @click.prevent="handleLogin"
-                      :disabled="loginDisabled">
+                         :disabled="loginDisabled"
+                         type="primary">
                 登入
               </el-button>
 
@@ -102,7 +124,7 @@
                 </el-button>
               </router-link>
 
-          </el-form-item>
+          </span>
 
         </el-form>
 
@@ -121,13 +143,36 @@
   background-image: url("../assets/shopping-1s-1084px.svg");
 }
 
-.input {
-  .selected {
+.main-frame {
+  width: 100%;
+  height: 100%;
 
-  }
-  .error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  }
+.login-card {
+  width: 60%;
+  padding: 10px;
 }
 
+.error-warn {
+  color: red;
+}
+
+.error-warn-input {
+  --el-input-focus-border-color: red;
+}
+
+.button-group {
+  padding-top: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  align-items: center;
+  justify-content: right;
+}
+
+
 </style>

src/components/Register.vue

@@ -42,7 +42,7 @@
     }
 
     userRegister(payload)
-        .then(res => {
+        .then(() => {
           ElMessageBox.alert(
               `${name.value}，感谢您的注册！`,
               '注册成功',
@@ -81,9 +81,9 @@
 
 <template>
 
-  <el-main>
+  <el-main class="main-frame bgimage">
 
-    <el-card>
+    <el-card class="login-card">
 
       <div>
 
@@ -97,13 +97,14 @@
 
             <el-col :span="15">
               <el-form-item>
-                <label for="name" >昵称</label>
+                <label for="name">昵称</label>
                 <el-input id="name"
                        v-model="name"
                        placeholder="请输入昵称" />
               </el-form-item>
             </el-col>
 
+            <el-col :span="1"></el-col>
 
             <el-col :span="8">
               <el-form-item>
@@ -127,19 +128,21 @@
                 <label v-if="!hasTelInput" for="tel">
                   注册手机号
                 </label>
-                <label v-else-if="!telLegal" for="tel">
+                <label v-else-if="!telLegal" for="tel" class="error-warn">
                   手机号不合法
                 </label>
                 <label v-else for="tel">
                   注册手机号
                 </label>
 
-                <el-input type="tel" id="tel"
-                       v-model="tel"
+                <el-input id="tel"
+                       v-model="tel" :class="{'error-warn-input' :(hasTelInput && !telLegal)}"
                        placeholder="请输入手机号" />
               </el-form-item>
             </el-col>
 
+            <el-col :span="1"></el-col>
+
             <el-col :span="15">
               <el-form-item>
 
@@ -167,11 +170,11 @@
 
           <el-form-item>
             <label v-if="!hasConfirmPasswordInput">确认密码</label>
-            <label v-else-if="!isPasswordIdentical">密码不一致</label>
+            <label v-else-if="!isPasswordIdentical" class="error-warn">密码不一致</label>
             <label v-else>确认密码</label>
 
             <el-input type="password" id="confirm-password"
-                   v-model="confirmPassword"
+                   v-model="confirmPassword" :class="{'error-warn-input' :(hasConfirmPasswordInput && !isPasswordIdentical)}"
                    placeholder="••••••••" />
           </el-form-item>
 
@@ -192,9 +195,10 @@
 <!--          </el-form-item>-->
 
 
-          <el-form-item>
+          <span class="button-group">
             <el-button @click.prevent="handleRegister"
-                    :disabled="registerDisabled">
+                    :disabled="registerDisabled"
+                    type="primary">
               创建账户
             </el-button>
 
@@ -203,7 +207,7 @@
                 返回登录
               </el-button>
             </router-link>
-          </el-form-item>
+          </span>
 
         </el-form>
       </div>
@@ -216,4 +220,39 @@
 
 <style scoped>
 
+.bgimage {
+  background-image: url("../assets/shopping-1s-1084px.svg");
+}
+
+.main-frame {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-card {
+  width: 60%;
+  padding: 10px;
+}
+
+.error-warn {
+  color: red;
+}
+
+.error-warn-input {
+  --el-input-focus-border-color: red;
+}
+
+.button-group {
+  padding-top: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  align-items: center;
+  justify-content: right;
+}
+
 </style>