feat:'基本框架'

PersonWeb/index.html

@@ -7,7 +7,7 @@
     <title>Vite App</title>
     <style>
         body {
-          background-image: url('./src//assets//bg/bg.jpg');
+          background-image: url('./src//assets/images/bg.jpg');
           background-repeat: no-repeat;
           background-size: cover;
         }

PersonWeb/package.json

@@ -26,6 +26,7 @@
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.0",
     "autoprefixer": "^10.4.17",
+    "daisyui": "^4.6.0",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "npm-run-all2": "^6.1.1",

PersonWeb/src/views/HomePage.vue

@@ -1,16 +1,47 @@
 <template>
-
-  <header class="text-center text-xl mt-8"> Single's 个人网站</header>
-  <footer class="flex p-3 pb-5 flex-col justify-center absolute bottom-0 w-full h-16 bg-black opacity-70 text-gray-200 text-center text-xs" >
-    <div>Copyright © 2024-2025 Singleeeee. All Rights Reserved.</div>
+  <div class="flex justify-center h-screen w-full">
+    <!-- <header class="text-center text-2xl font-sans pt-3 font-bold"> Single's 个人网站</header> -->
+    <div class=" h-4/5 w-4/5 bg-white  mt-10 rounded-xl overflow-hidden shadow-2xl">
+      <aside class="flex flex-col items-center  pt-2  w-36 bg-pink-300 h-full">
+        <img src="../assets/images/avatar.jpg" class="w-24 h-24 bg-pink-500 rounded-full"/>
+        <div class="w-full">
+          <div class="h-10 first:mt-6 hover:bg-slate-200 cursor-pointer w-full text-sm text-center leading-10 tracking-widest " v-for="(item,index) in setItemList" :key="index">{{ item.text }}</div>
+        </div>
+      </aside>
+      <div class="h-full w-full bg-slate-300">123</div>
+    </div>
+
+
+    <footer class="flex p-3 pb-5 flex-col justify-center absolute bottom-0 w-full h-16 bg-black opacity-70 text-gray-200 text-center text-xs " >
+    <div>Copyright © 2024 - All Singleeeee. All Rights Reserved.</div>
      <a class="hover:text-blue-400" href="http://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">互联网ICP备案:粤ICP备2024172166</a>
     <div>作者：Single | 邮箱：[email protected] </div>
-  </footer>
+    </footer>
+  </div>
+
 
 </template>
 <script lang="ts" setup >
+import { ref } from 'vue'
+const setItemList = ref([
+  {
+    text:'个人信息',
+  },
+  {
+    text:'个人博客'
+  },
+  {
+    text:'项目经历'
+  },
+  {
+    text:'其他网页'
+  },
+  {
+    text:'留言板'
+  },
+  {
+    text:'关于'
+  },
+])
 
-</script>
-<style scoped>
-
-</style>
+</script>

PersonWeb/src/views/PersonInfo/PersonInfo.vue

@@ -0,0 +1,11 @@
+<template>
+
+  <div></div>
+
+</template>
+<script setup>
+
+</script>
+<style scoped>
+
+</style>