Fixed #app flex style, add footer file, implemented dashboard basic UI

components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElMain: typeof import('element-plus/es')['ElMain']
+    Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']

src/components/Dashboard.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+  import { ref } from 'vue';
+
+  const name = ref('haha')
 
 </script>
 
@@ -9,39 +12,101 @@
 
 <!--    </el-card>-->
 <!--  </div>-->
+  <div id="updateProductModal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden absolute justify-center items-center w-full h-full">
 
-  <div class="flex items-center justify-center p-8 full-height">
-        <el-container  class="flex flex-col min-w-0 bg-gray-50 h-full w-full shadow-md rounded-lg">
-            <el-aside width="200px" class="bg-gray-200 rounded-l-lg flex flex-col items-center justify-between p-8">
-              <el-avatar :size="120">
-                头像
-              </el-avatar>
-
-              <el-descriptions :column="1" border class="">
-
-                <el-descriptions-item>
-                  <template #label>
-                    <div class="flex items-center">
-                      Username
-                    </div>
-                  </template>
-                  kooriookami
-                </el-descriptions-item>
-
-              </el-descriptions>
-            </el-aside>
-
-            <el-main class="p-8">
-              <span class="text-3xl font-semibold">修改信息</span>
-            </el-main>
-        </el-container>
+  </div>
+
+  <div class="flex items-center justify-center p-8 h-full overflow-y-clip">
+    <el-aside width="20%" class="mr-5 h-full bg-gray-100  rounded-lg flex flex-col items-center justify-between">
+
+      <div class="h-1/3 w-full flex items-center justify-center border-b-2 border-gray-200">
+        <el-avatar :size="150" class="block">
+          <span class="text-3xl"> 头像 </span>
+        </el-avatar>
+      </div>
+
+      <div class="bg-gray-50 h-2/3 w-full flex flex-col items-center justify-center shadow-md space-y-20">
+        <span class="w-full text-4xl text-center">用户名</span>
+        <span class="w-full text-2xl text-center">电话</span>
+        <span class="w-full text-2xl text-center">邮箱</span>
+      </div>
+
+    </el-aside>
+
+
+    <div  class="flex flex-col h-full w-full  rounded-lg space-y-4">
+
+      <div class="h-auto bg-gray-50 rounded-2xl">
+
+        <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
+          <span class="text-2xl font-semibold text-center">个人信息</span>
+          <button type="submit"
+                  class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-2xl text-xs px-4 py-2 text-center">更新</button>
+        </div>
+
+        <form class="m-3">
+          <div class="grid gap-6 mb-6 grid-cols-3 mx-4">
+            <div>
+              <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">昵称</label>
+              <input type="text" id="name" v-model="name"
+                     class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            </div>
+
+            <div>
+              <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">手机号</label>
+              <input type="tel" id="phone" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            </div>
+
+            <div>
+              <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">邮箱</label>
+              <input type="email" id="email" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            </div>
+          </div>
+        </form>
+      </div>
+
+      <div class="h-auto bg-gray-50 rounded-2xl">
+
+        <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
+          <span class="text-2xl font-semibold text-center">密码</span>
+          <button type="submit"
+                  class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl  text-xs px-4 py-2 text-center">更新</button>
+        </div>
+
+        <form class="m-3">
+          <div class="grid grid-cols-2 gap-10 mb-6 mx-4">
+            <div>
+              <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码</label>
+              <input type="password" id="password" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="•••••••••" required>
+            </div>
+            <div>
+              <label for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">确认密码</label>
+              <input type="password" id="confirm_password" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="•••••••••" required>
+            </div>
+          </div>
+        </form>
+
+      </div>
+
+      <div class="h-full bg-gray-50 rounded-2xl">
+
+        <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
+          <span class="text-2xl font-semibold text-center">地址信息</span>
+          <button id="updateProductButton" data-modal-target="updateProductModal" data-modal-toggle="updateProductModal"
+                  class="block text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-3xl text-xs px-4 py-2 text-center" type="button">
+            添加地址
+          </button>
+        </div>
+
+      </div>
+
+
+    </div>
   </div>
 
 
 </template>
 
 <style scoped>
-.full-height{
-  min-height: calc(100vh - 68.5px);
-}
+
 </style>

src/components/Footer.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="bg-gray-50 min-w-full bottom-0 shadow">
+    <span class="text-sm px-5">
+      蓝鲸购物系统
+    </span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/Header.vue

@@ -5,17 +5,33 @@ import {UserFilled, SwitchButton} from "@element-plus/icons-vue";
 <template>
   <div class="bg-primary-500 min-w-full top-0 shadow-md flex-shrink-0 rounded-b-xl">
 
-    <div class="mx-auto p-4">
+    <div class="mx-4 p-4">
       <div class="flex items-center justify-between">
 
         <div class="flex items-center space-x-4">
           <router-link to="/home" v-slot="{navigate}">
-            <h1 @click="navigate" class="text-xl text-white"> Blue Whale Shopping Online </h1>
+            <h1 @click="navigate" class="text-xl text-white"> 蓝鲸在线购物 </h1>
           </router-link>
 
         </div>
 
-        <div class="flex items-center space-x-4">
+        <form class="w-3/4">
+
+          <div class="relative">
+
+            <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+              <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+              </svg>
+            </div>
+
+            <input type="search" id="search" class="block w-full p-4 ps-10 text-gray-900 border border-gray-300 rounded-3xl bg-gray-50 focus:ring-blue-500 focus:border-blue-500" placeholder="国货好物" required>
+            <button type="submit" class="text-white absolute end-5 bottom-2.5 bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl text-sm px-4 py-2">搜索商品</button>
+          </div>
+
+        </form>
+
+        <div class="flex items-center space-x-4 mx-3">
           <router-link to="/dashboard" v-slot="{navigate}">
             <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
           </router-link>

src/style.css

@@ -12,11 +12,13 @@ html, body {
   margin: 0;
   padding: 0;
   height: 100%;
-  flex: auto;
 }
 
 #app {
   margin: 0;
   padding: 0;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 }

src/views/Home.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
   import Header from "../components/Header.vue"
+  // import Footer from "../components/Footer.vue";
 </script>
 
 <template>
 
   <Header/>
   <router-view />
+<!--  <Footer />-->
 
 </template>