去除了页面的TailwindCSS, 设定使用ElementUI的Container (Header, aside, main, footer)布局

src/App.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <el-container>
+  <el-container direction="vertical">
     <router-view />
   </el-container>
 </template>

src/components/Header.vue

@@ -37,39 +37,49 @@ function search() {
 
 <template>
 
-  <el-header>
+  <el-header class="customHeader" height="20">
 
-    <div>
+    <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>
+        </router-link>
+      </el-col>
 
-      <div>
+      <el-col :span="10">
 
-        <div>
-          <router-link to="/allStore" v-slot="{navigate}">
-            <h1 @click="navigate" class="text-xl text-white"> 蓝鲸在线购物 </h1>
-          </router-link>
-        </div>
+      </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>
+        </router-link>
+      </el-col>
 
-        <div>
-          <router-link to="/manager/createStore" v-slot="{navigate}">
-            <el-icon @click="navigate" :size="30" color="white" ><CirclePlus /></el-icon>
-          </router-link>
+      <el-col :span="2">
+        <router-link to="/dashboard" v-slot="{navigate}">
+          <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
+        </router-link>
+      </el-col>
 
-          <router-link to="/dashboard" v-slot="{navigate}">
-            <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
-          </router-link>
+      <el-col :span="2">
+        <a @click="logout">
+          <el-icon :size="30" color="white" ><SwitchButton /></el-icon>
+        </a>
+      </el-col>
+
+    </el-row>
 
-          <a @click="logout">
-            <el-icon :size="30" color="white" ><SwitchButton /></el-icon>
-          </a>
 
-        </div>
 
-      </div>
-    </div>
   </el-header>
 </template>
 
 
 <style scoped>
+
+.customHeader {
+  background-color: #79bbff;
+}
+
 </style>

src/views/portal/AllStore.vue

@@ -7,7 +7,7 @@ import {useRouter} from "vue-router";
 
 const router = useRouter();
 
-let storeList = ref([])
+let storeList = ref()
 
 getStoreList();
 
@@ -15,6 +15,8 @@ function getStoreList() {
   getAllStore().then(res => {
     storeList.value = res.result;
   })
+
+  console.warn(storeList.value)
 }
 
 function toStoreDetailPage(storeId) {
@@ -23,9 +25,11 @@ function toStoreDetailPage(storeId) {
 </script>
 
 <template>
-  <StoreItem class="store-item-list"
-             v-for="storeVO in storeList" :storeVO="storeVO"
-             @click="toStoreDetailPage(storeVO.id)" />
+  <el-main>
+    <StoreItem class="store-item-list"
+               v-for="storeVO in storeList" :storeVO="storeVO"
+               @click="toStoreDetailPage(storeVO.id)" />
+  </el-main>
 </template>
 
 <style scoped>

src/views/portal/Home.vue

@@ -4,8 +4,9 @@ import Header from "../../components/Header.vue"
 </script>
 
 <template>
+
   <Header/>
-  <router-view></router-view>
+  <router-view />
 
 </template>