登录时获取并保存用户名和角色，但暂时没用；更新Header的样式

components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTextarea: typeof import('element-plus/es')['ElTextarea']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']

src/components/Header.vue

@@ -6,8 +6,8 @@ import {router} from '../router'
 // const searchContent = ref('')
 
 
-const userName = ref()
-userName.value = sessionStorage.getItem("name")
+// const userName = ref()
+// userName.value = sessionStorage.getItem("name")
 
 
 function logout() {
@@ -42,12 +42,13 @@ function search() {
 
 <template>
 
-  <el-header class="customHeader" height="20">
+  <el-header class="custom-header" height="20">
 
-    <el-row :gutter="20" :justify="'space-between'">
-      <el-col :span="4">
-        <router-link to="/allStore" v-slot="{navigate}">
-          <h1 @click="navigate" class="text-xl text-white"> 蓝鲸在线购物 </h1>
+    <el-row :gutter="10" :justify="'space-around'">
+
+      <el-col :span="4" class="header-icon">
+        <router-link to="/allStore" v-slot="{navigate}" class="no-link">
+          <h1 @click="navigate" class="header-text"> 蓝鲸在线购物</h1>
         </router-link>
       </el-col>
 
@@ -55,25 +56,21 @@ function search() {
 
       </el-col>
 
-      <el-col :span="2">
-        <span> {{ userName }}</span>
-      </el-col>
-
-      <el-col :span="2">
+      <el-col :span="1" class="header-icon">
         <router-link to="/manager/createStore" v-slot="{navigate}">
-          <el-icon @click="navigate" :size="30" color="white" ><CirclePlus /></el-icon>
+          <el-icon @click="navigate" :size="35" color="white" ><CirclePlus /></el-icon>
         </router-link>
       </el-col>
 
-      <el-col :span="2">
+      <el-col :span="1" class="header-icon">
         <router-link to="/dashboard" v-slot="{navigate}">
-          <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
+          <el-icon @click="navigate" :size="35" color="white" ><UserFilled /></el-icon>
         </router-link>
       </el-col>
 
-      <el-col :span="2">
+      <el-col :span="1" class="header-icon">
         <a @click="logout">
-          <el-icon :size="30" color="white" ><SwitchButton /></el-icon>
+          <el-icon :size="35" color="white" ><SwitchButton /></el-icon>
         </a>
       </el-col>
 
@@ -87,8 +84,29 @@ function search() {
 
 <style scoped>
 
-.customHeader {
-  background-color: #79bbff;
+.custom-header {
+  background-color: #409eff;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.no-link {
+  text-decoration: none;
+}
+
+.header-text {
+  color:white;
+  font-size: x-large;
+  min-width: max-content;
+}
+
+.header-icon {
+  display: flex;
+  align-items:center;
+  justify-content: center;
 }
 
 </style>

src/components/Login.vue

@@ -37,6 +37,7 @@
 
           userInfo().then(res => {
             sessionStorage.setItem('name', res.result.name)
+            sessionStorage.setItem('role', res.result.role)
             router.push({path: "/allStore"})
           }).catch(e => {
             console.log(e.message)

src/style.css

@@ -19,34 +19,4 @@ html, body {
     min-height: 100vh;
 }
 
-/*@layer components {*/
-/*    .main {*/
-/*        @apply flex grow items-center justify-center h-screen text-center;*/
-/*        height: auto;*/
-/*    }*/
 
-/*    .dropzone-container {*/
-/*        @apply p-16 bg-[#f7fafc] border border-solid border-[#e2e8f0];*/
-/*    }*/
-
-/*    .hidden-input {*/
-/*        @apply opacity-0 overflow-hidden absolute w-1 h-2;*/
-/*    }*/
-
-/*    .file-label {*/
-/*        @apply text-xl block cursor-pointer;*/
-/*        font-size: 10pt;*/
-/*    }*/
-
-/*    .preview-container {*/
-/*        @apply flex mt-8;*/
-/*    }*/
-
-/*    .preview-card {*/
-/*        @apply flex border border-solid border-[#a2a2a2] p-2 ml-2;*/
-/*    }*/
-
-/*    .preview-img {*/
-/*        @apply w-14 h-14 rounded-md border border-solid border-[#a2a2a2] bg-[#a2a2a2];*/
-/*    }*/
-/*}*/