界面初步修改

Front/vue-unilife/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "@vue/shared": "^3.5.13",
     "axios": "^1.8.3",
     "element-plus": "^2.9.7",

Front/vue-unilife/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@element-plus/icons-vue':
+        specifier: ^2.3.1
+        version: 2.3.1(vue@3.5.13(typescript@5.7.3))
       '@vue/shared':
         specifier: ^3.5.13
         version: 3.5.13

Front/vue-unilife/src/components/LogPage.vue

@@ -137,7 +137,7 @@ const onLoginSubmit = () => {
         if(login_password_email.value == testEmail.value && login_password.value == testPassword.value) {
             console.log('测试登录成功')
             console.log(router)
-            router.push({name:'Personal'})
+            router.push({name:'Home'})
         } else {
         login().then((res) => {
             if(res.code === 200) {
@@ -314,7 +314,7 @@ async function login(){
         padding: 0;
     }
 
-    body{
+    :global(body){
         height: 100vh;;
         /*弹性布局，水平垂直居中*/
         display:flex;

Front/vue-unilife/src/components/Personal/AcountManager.vue

@@ -1,17 +1,190 @@
 <script set lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   name: 'Manager',
+  setup() {
+    const email = ref('test@example.com');
+    const username = ref('测试员');
+    return{
+      email,
+      username
+    }
+  }
 });
 </script>
 
 <template>
-    <h1>测试样例</h1>
+    <div class = "box">
-    <p>
+      <el-container class = "box-container">
-      测试样例2
+        <el-main class = "profile">
-    </p>
+          <el-container class = "personal">
+            <el-header>
+              <h2>个人信息</h2>
+            </el-header>
+            <el-main>
+              <ul>
+                <li><label>昵称</label>
+                  <input v-model = "username">
+                </li>
+                <li><label>昵称</label>
+                  <input v-model = "username">
+                </li>
+                <li>
+                  <input type = "checkbox">
+                </li>
+              </ul>
+            </el-main>
+          </el-container>
+        </el-main>
+        <el-aside class = "layout">
+          <el-avatar src = "../../../public/images/默认头像.jpg"
+                     size = "large"
+                     fit = 'fill'/>
+          <label class = "showemail">{{ email }}</label>
+          <el-input
+                    class = "self-introduce"
+                    maxlength = "30"
+                    placeholder="这是一个个人简介"
+                    size = "large"
+                    type = "textarea"/>
+        </el-aside>
+      </el-container>
+    </div>
 </template>
 
-<sytle scoped>
+<style scoped>
-</sytle>
+  .box
+  {
+    position:absolute;  
+    background-color:transparent;
+    left:0;
+    top:2%;
+    width:100%;
+    height: 96%;
+  }
+
+  .box-container
+  {
+    position:relative;
+    width:94%;
+    left:104px;
+    right:20px;
+    height:100%;
+    gap:20px;
+  }
+
+  .profile,
+  .layout
+  {
+    text-align:center;
+    border-radius:20px;
+    box-shadow:0px 4px 10px rgba(0,0,0,0.1);
+  }
+
+  /*密码，昵称，性别，生日修改区域 */
+  .profile
+  {
+    background-color: #fff;
+    padding-left:70px;
+    padding-top:50px;
+    display:flex;
+    align-items:right;
+  }
+
+  .profile .personal h2
+  {
+    display:flex;
+    align-items:right;
+  }
+
+  .profile ul
+  {
+    list-style: none;
+    display:block;
+    align-items:right;
+    margin:0;
+  }
+
+  .profile li
+  {
+    display:flex;
+    align-self:right;
+    font-size:22px;
+    padding-top:20px;
+  }
+
+  .profile label
+  {
+    padding-right:20px;
+  }
+
+  .profile input
+  {
+    background-color: transparent;
+    width:200px;
+    height:30px;
+    color:black;
+    /* 下边框样式 */
+    border-bottom:1px solid black;
+    padding-left:10px;
+    text-indent:10px;
+    font-size:19px;
+    letter-spacing:2px;
+  }
+
+  .profile input::placeholder
+  {
+    font-size:20px;
+  }
+
+
+  /*头像和个人简介修改区域 */
+  .layout
+  {
+    background-color: #ead1fb;
+    width:30%;
+    height:100%;
+    padding-top:150px;
+    padding-left:80px;
+    padding-right:80px;
+    align-items: center;
+  }
+
+  .showemail
+  {
+    position:relative;
+    top:20px;
+    font-size:24px;
+  }
+
+  .self-introduce:deep(.el-textarea__inner)
+  {
+    border:2px solid black;
+  }
+
+  .self-introduce
+  {
+    position: relative;
+    top:50px;
+    left:10px;
+    width:400px;
+    min-height:90px;
+    font-size:22px;
+    align-items: center;
+  }
+
+
+  .el-avatar
+  {
+    width:200px;
+    height:200px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .layout-description
+  {
+    width:100%;
+  }
+
+</style>

Front/vue-unilife/src/components/Personal/Personal.vue

@@ -99,17 +99,17 @@ export default defineComponent({
     justify-content:center;
     align-items:center;
     font:900 100px '';
-    color:rgba(110,90,240,0.3);
+    color:rgba(175, 90, 240, 0.308);
     background-color: #e4e9f5;
   }
 
   .shell{
-    position:absolute;
+    position:fixed;
     top:0%;
     left:0%;
     width:84px;
     height:100%;
-    background-color:#fff;
+    background-color:#ead1fb;
     z-index:9999;
     transition:width 0.5s;
     padding-left:10px;
@@ -145,7 +145,7 @@ export default defineComponent({
   }
 
   .active{
-    background-color: #e4e9f5;
+    background-color: #fff;
     border-top-left-radius: 50px;
     border-bottom-left-radius: 50px;
   }
@@ -158,7 +158,7 @@ export default defineComponent({
     width:30px;
     height:30px;
     border-bottom-right-radius:25px;
-    box-shadow:5px 5px 0 5px #e4e9f5;
+    box-shadow:5px 5px 0 5px #fff;
     background:transparent;
   }
 
@@ -170,7 +170,7 @@ export default defineComponent({
     width:30px;
     height:30px;
     border-top-right-radius: 25px;
-    box-shadow:5px -5px 0 5px #e4e9f5;
+    box-shadow:5px -5px 0 5px #fff;
     background:transparent;
   }
 
@@ -194,7 +194,7 @@ export default defineComponent({
     height:70px;
     color:#333;
     transition:0.5s;
-    color: rgb(110,90,240)
+    color: rgb(153, 109, 240)
   }
 
   .icon i{
@@ -218,7 +218,7 @@ export default defineComponent({
   .shell ul li:hover a .icon,
   .shell ul li:hover a .text
   {
-    color: #ffa117;/*字体和图标被选中后的颜色 */
+    color: #f3e7e9;/*字体和图标被选中后的颜色 */
   }
 
   .active a .icon::before{

Front/前端环境.md

@@ -52,4 +52,11 @@ pnpm add element-plus
 pnpm i vue-router
 pnpm add vue-router@4
 ```
-用来完成界面跳转，同时完成vuerouter与ts的适配
+用来完成界面跳转，同时完成vuerouter与ts的适配
+
+
+
+### 安装elementplus的icon库
+```
+pnpm install @element-plus/icons-vue
+```