新增页面

src/App.vue

@@ -26,6 +26,7 @@
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item @click="handleLogout">{{ $t('common.logout') }}</el-dropdown-item>
+                   <el-dropdown-item @click="toPersonal">{{ $t('personalCenter.personalCenter') }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -110,6 +111,11 @@ const activeIndex = computed(() => {
   }
   return '1' // 默认返回首页
 });
+// 去个人中心
+const toPersonal = () => {
+  router.push('/personal-center')
+};
+
 // 处理注销
 const handleLogout = () => {
   logout().then(() => {

src/locales/en.js

@@ -66,5 +66,8 @@ export default {
     signUpSuccess: 'Sign Up Success',
     signUpFailed: 'Sign Up Failed, please try again later',
     publishSuccess: 'Publish Success',
+  },
+  personalCenter:{
+    personalCenter: 'Personal Center'
   }
 }

src/locales/zh-CN.js

@@ -1,3 +1,5 @@
+import PersonalCenter from "../pages/PersonalCenter.vue";
+
 export default {
   // 通用模块
   common: {
@@ -66,6 +68,9 @@ export default {
     signUpSuccess: '报名成功',
     signUpFailed: '报名失败，请稍后重试',
     publishSuccess: '发布成功',
+  },
+  personalCenter:{
+    personalCenter: '个人中心'
   }
 
 }

src/pages/Personal/Collection.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="collection">
+    <div class="gap10 title">
+      <div class="line_vertical"></div>
+      <div class="">我的收藏</div>
+    </div>
+    <ul class="collection-list">
+      <li class="flex-center-between" v-for="(item, index) in 5" :key="index">
+        <img class="image" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
+        <div class="collection-list-main">
+          <div class="collection-list-main-left">
+            <div class="titles">UI界面设计教程</div>
+            <div class="gap10 tag">
+              <el-button type="primary" size="large" plain>技能标签</el-button>
+            </div>
+            <div class="">这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍</div>
+          </div>
+          <div class="btn flex-center">
+            <img src="/src/assets/imgs/my/star-a@2x.png" alt="">
+            <div class="">已收藏</div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+  </div>
+</template>
+<script setup lang="ts">
+import Pagination from '@/components/Pagination.vue'
+</script>
+<style scoped lang="scss">
+.collection {
+  padding-bottom: 20px;
+
+  .title {
+    height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .collection-list {
+    li {
+      padding: 16px;
+      margin-bottom: 16px;
+      background: #F5F7FA;
+      border-radius: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .image {
+        width: 213px;
+        height: 120px;
+        object-fit: cover;
+        border-radius: 8px;
+        margin-right: 16px;
+      }
+
+      .collection-list-main {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .collection-list-main-left {
+          flex: 1;
+          margin-right: 16px;
+
+          .titles {
+            font-size: 18px;
+            font-weight: bold;
+            color: #333333;
+          }
+
+          .tag {
+            margin: 8px 0;
+          }
+
+          .content {
+            color: #666666;
+            font-size: 14px;
+            line-height: 22px;
+          }
+        }
+
+        .btn {
+          width: 106px;
+          height: 32px;
+          color: #FFFFFF;
+          font-size: 14px;
+          cursor: pointer;
+          background: linear-gradient( 270deg, #0055FE 0%, #C832FA 100%);
+          border-radius: 4px;
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 4px;
+          }
+        }
+        .active {
+          background: #FFFFFF;
+          color: #2D71FF;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/Personal/Demand.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="demand">
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
+        <ul class="demand-list">
+          <li v-for="(item, index) in 5" :key="index">
+            <div class="flex-center-between">
+              <div class="title">需求标题需求标题需求标题需求标题</div>
+              <div class="price">￥2000.00-3000.00</div>
+            </div>
+            <div class="flex-align-center content">
+              <div class="flex-align-center">
+                <el-button type="primary" size="small" plain>一级分类名称</el-button>
+                <el-button type="primary" size="small" plain>二级分类名称</el-button>
+              </div>
+              <ul class="flex-align-center list">
+                <div class="li">
+                  <img src="/src/assets/imgs/yuangong.png" alt="">
+                  <div class="">15人报名</div>
+                </div>
+                <div class="li">
+                  <img src="/src/assets/imgs/rili.png" alt="">
+                  <div class="">报名截止时间：2024-11-19 17:00</div>
+                </div>
+              </ul>
+            </div>
+            <div class="description">这是需求描述这是需求描述这是需求描述这是需求描述这是需求描述这是需求描述这是需求描述</div>
+            <div class="info">
+              <div class="info-left">
+                <el-avatar :size="30" :src="appStore.avatarDefault" />
+                <div class="name">花花</div>
+                <div class="date">2024-11-18 发布</div>
+              </div>
+              <div class="info-right flex-align-center">
+                <template v-if="activeName == 'first'">
+                  <div class="btn">
+                    <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
+                    <div>查看报名记录</div>
+                  </div>
+                  <div class="btn">
+                    <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
+                    <div>编辑</div>
+                  </div>
+                  <div class="btn">
+                    <img src="/src/assets/imgs/my/guanbi@2x.png" alt="">
+                    <div class="red">结束活动</div>
+                  </div>
+                  <div class="btn">
+                    <img src="/src/assets/imgs/my/shanchu@2x.png" alt="">
+                    <div class="red">删除</div>
+                  </div>
+                </template>
+
+                <div class="btn" v-else>
+                  <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
+                  <div class="red">取消报名</div>
+                </div>
+
+              </div>
+            </div>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useAppStore } from '@/pinia/appStore'
+import type { TabsPaneContext } from 'element-plus'
+import Pagination from '@/components/Pagination.vue'
+const appStore = useAppStore();
+const activeName = ref('first')
+const tabs = ref([
+  { label: '发布需求记录', name: 'first' },
+  { label: '我的报名记录', name: 'second' }
+])
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+<style scoped lang="scss">
+.demand {
+  padding-bottom: 20px;
+
+  div {
+    line-height: 1;
+  }
+
+  .demand-list {
+    li {
+      padding: 16px;
+      margin-bottom: 16px;
+      background: #F5F7FA;
+      border-radius: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #333333;
+      }
+
+      .content {
+        margin-top: 8px;
+
+        .list {
+          .li {
+            display: flex;
+            align-items: center;
+
+            img {
+              width: 16px;
+              height: 16px;
+              margin-right: 4px;
+            }
+
+            margin-left: 8px;
+
+            div {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+
+      .description {
+        font-size: 16px;
+        color: #666666;
+        line-height: 24px;
+        margin: 8px 0;
+      }
+
+      .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .info-left {
+          display: flex;
+          align-items: center;
+
+          .name {
+            font-size: 16px;
+            margin: 0 8px;
+          }
+
+          .date {
+            font-size: 14px;
+            color: #666666;
+          }
+        }
+
+        .info-right {
+          .btn {
+            height: 32px;
+            display: flex;
+            align-items: center;
+            padding: 0px 16px;
+            background: #FFFFFF;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-left: 8px;
+
+            img {
+              width: 14px;
+              height: 14px;
+              margin-right: 4px;
+            }
+
+            div {
+              font-size: 14px;
+              color: #2D71FF;
+            }
+
+            .red {
+              color: #E43434;
+            }
+          }
+        }
+
+      }
+
+      .price {
+        font-size: 24px;
+        color: #FD5F3C;
+      }
+    }
+  }
+}
+</style>

src/pages/Personal/Invoice.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="invoice">
+    <div class="gap10 invoice-title">
+      <div class="line_vertical"></div>
+      <div class="">我的发票</div>
+    </div>
+    <ul class="invoice-list">
+      <li v-for="(item, index) in 5" :key="index">
+        <div class="invoice-list-t flex-center-between">
+          <div class="">这是订单名称</div>
+          <div class="">￥5000.00</div>
+        </div>
+        <div class="flex-center-between invoice-list-c">
+          <div class="">订单编号：</div>
+          <div class="">20251024001</div>
+        </div>
+        <div class="flex-center-between invoice-list-time">
+          <div class="">订单创建时间：</div>
+          <div class="">2025-10-24 13:00</div>
+        </div>
+        <div class="flex-center-between invoice-list-b">
+          <div class=""></div>
+          <div class="">
+            <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
+           <span>查看详情</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+  </div>
+</template>
+<script setup lang="ts">
+  import Pagination from '@/components/Pagination.vue'
+</script>
+<style scoped lang="scss">
+.invoice {
+  padding-bottom: 20px;
+
+  .invoice-title {
+    height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .invoice-list {
+    li {
+      padding: 16px;
+      margin-bottom: 16px;
+      background: #F5F7FA;
+      border-radius: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .invoice-list-t {
+
+        div {
+          font-size: 18px;
+          font-weight: bold;
+          color: #3D3D3D;
+
+          &:last-child {
+            color: #FD5F3C;
+          }
+        }
+      }
+
+      .invoice-list-c,
+      .invoice-list-time,
+      .invoice-list-b {
+        margin-top: 8px;
+
+        div {
+          font-size: 16px;
+
+          &:first-child {
+            color: #666666;
+          }
+        }
+      }
+
+      .invoice-list-b {
+
+        div:last-child {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          justify-content: center;
+          width: 106px;
+          height: 32px;
+          background: #FFFFFF;
+          border-radius: 4px;
+          color: #2D71FF;
+          font-size: 14px;
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/Personal/MemberDetails.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="member-details">
+    <div class="gap10 title">
+      <div class="line_vertical"></div>
+      <div class="">开通会员明细</div>
+    </div>
+    <ul class="member-details-list">
+      <li v-for="(item, index) in 5" :key="index">
+        <div class="member-details-list-t flex-center-between">
+          <div class="">购买时长：1个月</div>
+          <div class="">￥99.99</div>
+        </div>
+        <div class="member-details-list-b flex-center-between">
+          <div class="">有效期：2026-01-01至2026-02-01</div>
+          <div class="">支付时间：2026-01-01 16:11:11</div>
+        </div>
+      </li>
+    </ul>
+    <Pagination 
+        :total="20"
+        :page-size="10"
+        :current-page="1"
+        @page-change="handlePageChange"
+      />
+  </div>
+</template>
+<script setup lang="ts">
+import Pagination from '@/components/Pagination.vue'
+</script>
+<style scoped lang="scss">
+.member-details {
+  padding-bottom: 20px;
+
+  .title {
+    height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .member-details-list {
+    li {
+      padding: 16px;
+      margin-bottom: 16px;
+      background: #F5F7FA;
+      border-radius: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .member-details-list-t {
+        margin-bottom: 8px;
+        div {
+          font-size: 16px;
+          &:last-child {
+            color: #F52929;
+          }
+        }
+      }
+      .member-details-list-b {
+        div {
+          font-size: 14px;
+          color: #666666;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/Personal/Orders.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="order">
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
+        <ul class="order-list">
+          <li v-for="(item, index) in 5" :key="index">
+            <div class="order-list-top flex-center-between">
+              <div class="order-list-top-l flex-align-center">
+                <el-tag :type="index == 0 ? 'primary' : index == 1 ? 'success' : 'danger'">{{ index == 0 ? '待付款' : index == 1 ? '已完成' : '已取消' }}</el-tag>
+                <div class="">订单号: 3056207306143088789</div>
+              </div>
+              <div class="order-list-top-r">下单时间: 2025-11-11 12:00:00</div>
+            </div>
+            <div class="order-list-main flex">
+              <img class="image" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
+              <div class="order-list-con flex-center-between flex_1">
+                <div class="">
+                  <div class="title">UI界面设计教程</div>
+                  <div class="">
+                    <el-button type="primary" size="small" plain>技能标签</el-button>
+                    <el-button type="primary" size="small" plain>技能标签</el-button>
+                  </div>
+                </div>
+                <div class="mi_price">
+                  <div class="">29900</div>
+                  <div class="">米币</div>
+                </div>
+                <div class="mi_price price">
+                  <div class="">￥239.20</div>
+                  <div class="">实际金额</div>
+                </div>
+                <div class="">
+                  <template v-if="index == 0">
+                    <div class="gradient btn">
+                      <img src="/src/assets/imgs/my/order1@2x.png" alt="">
+                      <div class="">去支付</div>
+                    </div>
+                    <div class="blue btn mt8">
+                      <img src="/src/assets/imgs/my/order2@2x.png" alt="">
+                      <div class="">取消订单</div>
+                    </div>
+                  </template>
+                  <template v-else-if="index == 1">
+                    <div class="blue btn">
+                      <img src="/src/assets/imgs/my/order3@2x.png" alt="">
+                      <div class="">申请开票</div>
+                    </div>
+                     <div class="red btn mt8">
+                      <img src="/src/assets/imgs/my/order4@2x.png" alt="">
+                      <div class="">申请退款</div>
+                    </div>
+                  </template>
+                  <template v-else-if="index == 2">
+                    <div class="btn gradient">
+                      <img src="/src/assets/imgs/my/order5@2x.png" alt="">
+                      <div class="">重新下单</div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import type { TabsPaneContext } from 'element-plus'
+import Pagination from '@/components/Pagination.vue'
+
+const tabs = ref([
+  { label: '全部订单', name: 'first' },
+  { label: '待付款', name: 'second' },
+  { label: '已完成', name: 'third' },
+  { label: '已取消', name: 'fourth' },
+])
+
+const activeName = ref('first')
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+<style scoped lang="scss">
+.order {
+  padding-bottom: 16px;
+
+  .order-list {
+    li {
+      background: #FFFFFF;
+      border-radius: 16rpx;
+       margin-bottom: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .order-list-top {
+        height: 42px;
+        padding: 0 16px;
+        background: #F5F7FA;
+        border-radius: 16px 16px 0px 0px;
+
+        .order-list-top-l {
+          div {
+            margin-left: 8px;
+            font-size: 16px;
+            font-weight: bold;
+          }
+        }
+
+        .order-list-top-r {
+          font-size: 14px;
+        }
+      }
+
+      .order-list-main {
+        padding: 16px;
+        border-radius: 0 0 16px 16px;
+        border: 1px solid #EBEEF5;
+
+        .image {
+          width: 160px;
+          height: 90px;
+          object-fit: cover;
+          margin-right: 16px;
+          border-radius: 8px;
+        }
+
+        .title {
+          font-size: 16px;
+          font-weight: bold;
+          margin-bottom: 8px;
+          line-height: 1;
+        }
+
+        .mi_price {
+
+          div {
+            font-size: 18px;
+            text-align: center;
+
+            &:last-child {
+              font-size: 12px;
+              color: #666666;
+            }
+          }
+        }
+
+        .price {
+          div {
+            &:first-child {
+              color: #FD5F3C;
+            }
+          }
+        }
+        .mt8 {
+          margin-top: 8px;
+        }
+        .btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 106px;
+          height: 32px;
+          cursor: pointer;
+          border-radius: 4px;
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 4px;
+          }
+          div {
+            font-size: 14px;
+            color: #FFFFFF;
+          }
+        }
+
+        
+
+        .red {
+          background: #FCEBEB;
+          div {
+            color: #E43434;
+          }
+        }
+        .blue {
+          background: #EAF0FF;
+          div {
+            color: #2D71FF;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/Personal/Wallet.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="wallet-page">
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="收益明细" name="first">
+        <ul class="wallet-page-list">
+          <li v-for="(item, index) in 5" :key="index">
+            <div class="title">
+              <div class="">订单米币</div>
+              <div class="">2024-08-24 14:11:11</div>
+            </div>
+            <div class="price">+1000</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="使用记录" name="second">
+        <ul class="wallet-page-list">
+          <li v-for="(item, index) in 5" :key="index">
+            <div class="title">
+              <div class="">订单米币</div>
+              <div class="">2024-08-24 14:11:11</div>
+            </div>
+            <div class="price">+1000</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+    <Pagination 
+        :total="20"
+        :page-size="10"
+        :current-page="1"
+        @page-change="handlePageChange"
+      />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import type { TabsPaneContext } from 'element-plus'
+import Pagination from '@/components/Pagination.vue'
+
+const activeName = ref('first')
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+
+const handlePageChange = (newPage: number) => {
+  console.log('当前页码:', newPage)
+}
+</script>
+<style scoped lang="scss">
+  .wallet-page {
+    padding-bottom: 16px;
+  }
+  .wallet-page-list {
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px;
+      border-radius: 16px;
+      background: #F5F7FA;
+      margin-bottom: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .title {
+        div {
+          font-size: 16px;
+          line-height: 1;
+          &:last-child {
+            margin-top: 8px;
+            color: #666666;
+            font-size: 14px;
+          }
+        }
+      }
+      .price {
+        font-size: 16px;
+        font-weight: bold;
+        color: #F52929;
+      }
+    }
+  }
+</style>

src/pages/Personal/Workflow.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="workflow">
+    <div class="gradient workflow-btn flex-center">
+      <img src="/src/assets/imgs/add.png" alt="">
+      <div class="">发布工作流</div>
+    </div>
+    <ul class="workflow-list">
+      <li>
+        <img class="image" src="" alt="">
+        <div class="workflow-list-con">
+          <div class="workflow-list-time flex-align-center">
+            <img src="/src/assets/imgs/rili.png" alt="">
+            <div class="">2023-10-15</div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+  </div>
+</template>
+<script setup lang="ts">
+ import Pagination from '@/components/Pagination.vue'
+</script>
+<style scoped lang="scss">
+.workflow {
+  padding:16px 0 20px;
+  .workflow-btn {
+    height: 50px;
+    color: #FFFFFF;
+    cursor: pointer;
+    border-radius: 10px;
+    font-size: 18px;
+    img {
+      width: 30px;
+      height: 30px;
+      margin-right: 4px;
+    }
+  }
+}
+</style>

src/pages/PersonalCenter.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="personal">
+    <Breadcrumb />
+    <div class="personal-head">
+      <div class="personal-head-left">
+        <el-avatar :size="100" :src="appStore.avatarDefault" />
+        <div class="personal-user-info">
+          <div class="personal-username">
+            <div class="">用户名</div>
+            <img src="/src/assets/imgs/my/vip@2x.png" alt="">
+          </div>
+          <div class="personal-user-phone mt4">手机号：13212345678</div>
+          <div class="gap10 mt4">
+            <el-button type="primary" size="large" plain>技能标签</el-button>
+          </div>
+          <div class="personal-user-list">
+            <div class="personal-user-li">
+              <span>0</span>
+              <span>米币</span>
+            </div>
+            <div class="personal-user-line"></div>
+            <div class="personal-user-li">
+              <span>0</span>
+              <span>暴米粒</span>
+            </div>
+            <div class="personal-user-line"></div>
+            <div class="personal-user-li">
+              <span>0</span>
+              <span>关注</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="personal-head-right">
+        <div class="personal-head-right-li">
+          <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
+          <div class="">编辑资料</div>
+        </div>
+        <div class="personal-head-right-li">
+          <img src="/src/assets/imgs/my/huiyuan@2x.png" alt="">
+          <div class="">开通会员</div>
+        </div>
+        <div class="personal-head-right-li gradient">
+          <img src="/src/assets/imgs/my/qiandao@2x.png" alt="">
+          <div class="">签到</div>
+        </div>
+      </div>
+    </div>
+    <div class="personal-main">
+      <div class="personal-left">
+        <div class="personal-left-list">
+          <div @click="toPath(item, index)" :class="{ active: index == navIndex }" class="personal-left-li"
+            v-for="(item, index) in navList" :key="index">
+            <img v-if="index == navIndex" :src="item.iconActive" alt="">
+            <img v-else :src="item.icon" alt="">
+            <div class="">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="personal-right">
+        <div class="personal-right-main">
+          <router-view />
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useAppStore } from '@/pinia/appStore'
+
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router'
+const appStore = useAppStore();
+const route = useRoute()
+const router = useRouter()
+const navList = ref([
+  {
+    name: '我的钱包',
+    path: '/personal-center/wallet',
+    icon: '/src/assets/imgs/my/icon1@2x.png',
+    iconActive: '/src/assets/imgs/my/icon1a@2x.png'
+  },
+  {
+    name: '会员信息',
+    path: '/personal-center/member-details',
+    icon: '/src/assets/imgs/my/icon2@2x.png',
+    iconActive: '/src/assets/imgs/my/icon2a@2x.png'
+  },
+  {
+    name: '我的收藏',
+    path: '/personal-center/collection',
+    icon: '/src/assets/imgs/my/icon3@2x.png',
+    iconActive: '/src/assets/imgs/my/icon3a@2x.png'
+  },
+  {
+    name: '我的需求',
+    path: '/personal-center/demand',
+    icon: '/src/assets/imgs/my/icon4@2x.png',
+    iconActive: '/src/assets/imgs/my/icon4a@2x.png'
+  },
+  {
+    name: '我的订单',
+    path: '/personal-center/orders',
+    icon: '/src/assets/imgs/my/icon5@2x.png',
+    iconActive: '/src/assets/imgs/my/icon5a@2x.png'
+  },
+  {
+    name: '我的发票',
+    path: '/personal-center/invoice',
+    icon: '/src/assets/imgs/my/icon6@2x.png',
+    iconActive: '/src/assets/imgs/my/icon6a@2x.png'
+  },
+  {
+    name: '我的工作流',
+    path: '/personal-center/workflow',
+    icon: '/src/assets/imgs/my/icon7@2x.png',
+    iconActive: '/src/assets/imgs/my/icon7a@2x.png'
+  }
+])
+const navIndex = ref(0);
+const toPath = (item: any, index: number) => {
+  navIndex.value = index;
+  if (item.path) {
+    router.push(item.path);
+  }
+};
+</script>
+<style lang="scss" scoped>
+.personal-head {
+  border-radius: 16px;
+  padding: 24px 16px;
+  background: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .personal-head-left {
+    display: flex;
+
+    .personal-user-info {
+      margin-left: 16px;
+
+      .personal-username {
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        font-weight: bold;
+        color: #333333;
+
+        img {
+          width: 51px;
+          height: 21px;
+          margin-left: 8px;
+        }
+      }
+
+      .personal-user-list {
+        display: flex;
+        margin-top: 16px;
+        align-items: center;
+
+        .personal-user-li {
+          span {
+            color: #333333;
+            font-size: 14px;
+
+            &:first-child {
+              font-size: 28px;
+              font-weight: bold;
+              margin-right: 10px;
+            }
+          }
+        }
+
+        .personal-user-line {
+          margin: 0 16px;
+          height: 20px;
+          width: 2px;
+          background: #EBEEF5;
+        }
+      }
+    }
+  }
+
+  .personal-head-right {
+    display: flex;
+    align-items: center;
+
+    .personal-head-right-li {
+      display: flex;
+      padding: 9px 16px;
+      align-items: center;
+      margin-left: 8px;
+      // height: 32px;
+      background: #EAF0FF;
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        background: linear-gradient(270deg, #0055FE 0%, #C832FA 100%);
+
+        div {
+          color: #FFFFFF;
+        }
+      }
+
+      img {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
+      }
+
+      div {
+        color: #2D71FF;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.personal-main {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+
+  .personal-left {
+    width: 300px;
+
+    .personal-left-list {
+      background: #FFFFFF;
+      border-radius: 16px;
+      padding: 8px;
+
+      .personal-left-li {
+        height: 56px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        font-size: 16px;
+        color: #333333;
+        cursor: pointer;
+        border-radius: 8px;
+
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 4px;
+        }
+
+        &:hover {
+          background: #F5F7FF;
+        }
+      }
+
+      .active {
+        position: relative;
+        background: #EAF0FF;
+
+        &::after {
+          top: 50%;
+          transform: translateY(-50%);
+          content: '';
+          position: absolute;
+          right: 8px;
+          width: 4px;
+          height: 24px;
+          background: #2D71FF;
+          border-radius: 2px;
+        }
+
+        div {
+          color: #2D71FF;
+        }
+      }
+    }
+  }
+
+  .personal-right {
+    flex: 1;
+
+    margin-left: 16px;
+
+    .personal-right-main {
+      padding: 0 16px;
+      border-radius: 16px;
+      background: #FFFFFF;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -4,6 +4,7 @@ import CourseDetail from '../pages/CourseDetail.vue'
 import MyLearning from '../pages/MyLearning.vue'
 import MyLearningHome from '../pages/MyLearningHome.vue'
 import Layout from '@/components/Layout.vue'
+import { pa } from 'element-plus/es/locales.mjs'
 
 const routes = [
   {
@@ -119,7 +120,49 @@ const routes = [
     component: () => import('@/pages/mibiShop/mibiShop.vue'),
     meta: { title: 'route.mibiShop' }
   },
-
+  {
+    path: '/personal-center',
+    name: 'PersonalCenterHome',
+    component: () => import('@/pages/PersonalCenter.vue'),
+    meta: { title: 'personalCenter.personalCenter' },
+    children:[
+      {
+        path: 'wallet',
+        name: 'Wallet',
+        component: () => import('@/pages/Personal/Wallet.vue')
+      },
+      {
+        path: 'collection',
+        name: 'Collection',
+        component: () => import('@/pages/Personal/Collection.vue')
+      },
+      {
+        path: 'orders',
+        name: 'Orders',
+        component: () => import('@/pages/Personal/Orders.vue')
+      },
+      {
+        path: 'member-details',
+        name: 'MemberDetails',
+        component: () => import('@/pages/Personal/MemberDetails.vue')
+      },
+      {
+        path: 'demand',
+        name: 'Demand',
+        component: () => import('@/pages/Personal/Demand.vue')
+      },
+      {
+        path: 'invoice',
+        name: 'Invoice',
+        component: () => import('@/pages/Personal/Invoice.vue')
+      },
+      {
+        path: 'workflow',
+        name: 'Workflow',
+        component: () => import('@/pages/Personal/Workflow.vue')
+      }
+    ]
+  },
 
 
 

src/styles/index.scss

@@ -36,8 +36,11 @@ H3,
 H4,
 H5,
 H6,
-P {
+P,
+ul,
+li {
   margin: 0;
+	padding: 0;
 }
 
 body ,htm{
@@ -51,6 +54,9 @@ body{
 	background: url('@/assets/imgs/bg_2.png') no-repeat center center fixed;
 	background-size: 100% 100%;
 }
+ul,li {
+	list-style: none;
+}
 
 .detail_right{
 	width: 410px;
@@ -214,6 +220,9 @@ wx-image{
 .mt5 {
 	margin-top: 5px;
 }
+.mt4 {
+	margin-top: 4px;
+}
 .mb20 {
 	margin-bottom: 20px;
 }