完成二级页面的布局

src/assets/styles/common.css

@@ -21,6 +21,9 @@ page {
 .pingfangr{
 	font-family: "pingfangr" !important;
 }
+.text-black{
+	color:#000;
+}
 .block{
 	display: block;
 }
@@ -278,7 +281,7 @@ page {
 	word-break: break-all;
 }
 .text-white{
-	color:#FFF;
+	color:#FFF !important;
 }
 .q-absolute{
 	position: absolute;
@@ -350,6 +353,9 @@ page {
 .text-grey-8{
 	color: grey;
 }
+.no-select{
+	user-select: none!important;
+}
 .cusor-pointer,
 .cursor-pointer{
 	cursor: pointer;
@@ -461,7 +467,7 @@ page {
 	font-weight: bold;
 }
 .text-weight-bolder{
-	font-weight: bolder;
+	font-weight: bolder !important;
 }
 .rounded{
 	border-radius: 8px;
@@ -567,6 +573,21 @@ page {
 .full-scroll .el-scrollbar__view{
 	height: 100% !important;
 }
+.primary-link-button{
+	padding: 0 12px;
+	height: 32px;
+	background-color: rgb(240, 246, 255);
+	color: #564becCC !important;
+	font-size: 14px;
+	font-weight: 600;
+	display: inline-block;
+	line-height: 32px;
+	border-radius: 8px;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	-ms-border-radius: 8px;
+	-o-border-radius: 8px;
+}
 .el-button{
 	font-size: 12px !important;
 }
@@ -576,6 +597,26 @@ page {
 .wrap{
 	white-space: wrap;
 }
+.md-menu .el-menu-item{
+	height: 40px;
+	margin-bottom: 5px;
+	line-height: 40px;
+	border-radius: 8px;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	-ms-border-radius: 8px;
+	-o-border-radius: 8px;
+}
+.md-menu .el-menu-item.is-active{
+	color: #000;
+	font-weight: bold;
+	background-color: #f1f2f4 !important;
+    border-color: #f1f2f4 !important;
+}
+.md-menu .el-menu-item:hover{
+	background-color: #f1f2f4 !important;
+    border-color: #f1f2f4 !important;
+}
 .el-tree.auto-width-tree{
 	width: unset !important;
 }
@@ -610,6 +651,16 @@ page {
 .el-button.is-link:hover{
 	color: #564becCC !important;
 }
+.el-menu.no-border{
+	border:none !important;
+}
+.el-avatar--square{
+	border-radius: 8px !important;
+	-webkit-border-radius: 8px !important;
+	-moz-border-radius: 8px !important;
+	-ms-border-radius: 8px !important;
+	-o-border-radius: 8px !important;
+}
 .full-dialog{
 	background-color: rgba(0,0,0,0.4);
 	position: fixed;

src/components/User/UserCard.vue

@@ -2,8 +2,9 @@
   <div class="items-center row">
     <el-dropdown trigger="click">
       <el-avatar
-        :size="40"
+        :size="size"
         :src="userInfo.photo"
+        shape="square"
         style="background-color: #e6ddf5; color: #7b35ef"
         class="q-mx-lg cusor-pointer"
         >{{
@@ -83,7 +84,8 @@
           </div>
           <div class="TranLine"></div>
           <div class="MarketSettings row flex-between">
-            <span>账号设置</span>
+            <!-- <span>账号设置</span> -->
+            <el-button link class="pingfangr" style="font-size: 14px" @click="forwardUserCenter">账号设置</el-button>
             <span class="pointer" @click="loginOutHandler">退出登录</span>
           </div>
         </div>
@@ -109,7 +111,16 @@
 <script lang="ts" setup>
 import { useUserStore } from "@/store";
 import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+
+const props = defineProps({
+    size: {
+      type: Number,
+      default: 40,
+    },
+});
 
+const router = useRouter()
 const useUser = useUserStore();
 const { userInfo } = storeToRefs(useUser);
 const format = (percentage: number) => {
@@ -122,6 +133,9 @@ const moreList = [
   { icon: require("@/assets/img/homeMore3.png"), Name: "意见反馈" },
 ];
 
+const forwardUserCenter = ()=>{
+  router.push('/u')
+}
 const loginOutHandler = ()=>{
     useUser.setUserLoginOut()
 }
@@ -175,6 +189,10 @@ const loginOutHandler = ()=>{
   width: 380px;
   padding: 24px 30px 0 30px;
 }
+.MarketfigurePopover .el-button{
+  font-size: 14px !important;
+  font-weight: bold;
+}
 /* .Marketfigure:hover img {
   animation: myfirst 1s;
   -webkit-animation: myfirst 1s;

src/configs/customer.ts

+export type CustomerRate = 'FREE'|'VIP'|'EN'
+export interface CustomerTheme{
+    name:CustomerRate,
+    bg:string,
+    color:string,
+    desc:string
+}
+
+export const FREE_USER_THEME:CustomerTheme = {name:'FREE',bg:'linear-gradient(270deg, #94A3C0 0%, #99A3B8 100%)',color:'#94a3c0', desc:'免费版·个人'}
+export const VIP_USER_THEME:CustomerTheme = {name:'VIP',bg:'linear-gradient(270deg, #4165E2 0%, #5276F5 100%)',color:'#dd9b38', desc:'会员版·个人'}
+export const ENT_USER_THEME:CustomerTheme = {name:'EN',bg:'linear-gradient(270deg, #DD9B38 0%, #E6B351 100%);',color:'#252860', desc:'会员版·企业'}
+
+export const CustomerThemeConfig:CustomerTheme[] = [FREE_USER_THEME,VIP_USER_THEME,ENT_USER_THEME] 
\ No newline at end of file

src/plugins/icon.ts

@@ -130,6 +130,8 @@ import {
   More,
   Setting,
   Refresh,
+  Currency,
+  Protect,
 } from '@icon-park/vue-next'
 
 export interface Icons {
@@ -264,6 +266,8 @@ export const icons: Icons = {
   IconMore: More,
   IconSetting: Setting,
   IconRefresh: Refresh,
+  IconCurrency: Currency,
+  IconProtect: Protect
 }
 
 export default {

src/router/router.ts

@@ -165,6 +165,29 @@ const routes: RouteRecordRaw[] = [
       title:'行程生成预览'
     }
   },
+  {
+    path: '/u',
+    component: () => import('@/views/UserCenter/Layout.vue'),
+    meta:{
+      title:'管理与设置中心'
+    },
+    children:[
+      {
+        path: '/u',
+        component: () => import('@/views/UserCenter/Index.vue'),
+        meta:{
+          title:'账号一览'
+        }
+      },
+      {
+        path: '/u/order',
+        component: () => import('@/views/UserCenter/Order.vue'),
+        meta:{
+          title:'我的订单/发票'
+        }
+      },
+    ]
+  },
   {
     path: '/:catchAll(.*)*',
     component: () => import('@/views/ErrorNotFound.vue'),

src/store/index.ts

@@ -7,6 +7,7 @@ import { useFontStore } from './font'
 import { useMapStore } from './map'
 import { useSellTemplateStore } from './sellTemplate'
 import { useUserStore } from './user'
+import { useMenuStore } from './menu'
 
 export {
   useMainStore,
@@ -17,5 +18,6 @@ export {
   useFontStore,
   useMapStore,
   useSellTemplateStore,
-  useUserStore
+  useUserStore,
+  useMenuStore
 }
\ No newline at end of file

src/store/menu.ts

+import { defineStore } from "pinia"
+import { useUserStore } from "./user"
+
+export interface Menu{
+    name:string,
+    icon:string,
+    url:string,
+    children?:Menu[]
+}
+export type MenuOwner = '*'|'F'|'V'|'A'|'E'
+export interface MenuState {
+    // freeUser: Menu[],
+    // vipUser: Menu[],
+    // enterpriseUser: Menu[],
+    // enterpriseAdmin: Menu[]
+    userMenu:Menu[]
+    currentMenu: Menu|null
+}
+
+const menus:{menu:Menu,owner:MenuOwner}[] = [
+    {menu:{name:'账号一览',icon:'IconEarth',url:'/u'},owner:'*'},
+    {menu:{name:'订单/发票',icon:'IconCurrency',url:'/u/order'},owner:'*'},
+    {menu:{name:'账户设置',icon:'IconProtect',url:'/u/setting'},owner:'*'}
+]
+
+export const useMenuStore = defineStore('screen', {
+    state: (): MenuState => ({
+        // freeUser:[],
+        // vipUser:[],
+        // enterpriseAdmin:[],
+        // enterpriseUser:[],
+        userMenu:[],
+        currentMenu:null
+    }),
+    getters:{
+        getUserMenu(state){
+            if(state.userMenu.length==0){
+                const userStore= useUserStore()
+                const userInfo = userStore.getUser
+                let userPermissions:MenuOwner[] = ['*','F']
+                
+                if(userInfo.it){
+                    userPermissions.push('E')
+                }
+                if(userInfo.ia){
+                    userPermissions.push('A')
+                }
+                if(userInfo.iv){
+                    userPermissions.push('V')
+                }
+                
+                const findFreeMenu = menus.filter(x=>userPermissions.includes(x.owner))
+                if(findFreeMenu){
+                    state.userMenu = findFreeMenu.map(x=>x.menu)
+                }
+            }
+            return state.userMenu
+        }
+    },
+    // actions:{
+    //     setUserMenu()
+    // }
+})
\ No newline at end of file

src/store/user.ts

 import { ApiResult } from '@/configs/axios';
+import { CustomerRate, CustomerThemeConfig } from '@/configs/customer';
 import UserService from '@/services/UserService';
 import { defineStore } from 'pinia';
 import { StorageLike } from 'pinia-plugin-persistedstate';
@@ -34,6 +35,14 @@ export const useUserStore = defineStore('user', {
         getUser: (state) => {
           return state.userInfo;
         },
+        getUserTheme: (state) => {
+            let rate:CustomerRate = 'FREE'
+            if(state.userInfo.it) rate = 'EN'
+            else if(state.userInfo.iv) rate = 'VIP'
+
+            const theme = CustomerThemeConfig.find(x=>x.name==rate)
+            return theme
+        },
     },
     actions:{
         async setUserAutoLoginAsync(userId:number){

src/views/Auth/Login.vue

 <template>
     <div class="login-box q-pa-xl row">
-        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" class="logo"  />
+        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" class="logo"  />
         <div class="col column">
             <div class="col column flex-center items-center">
                 <div class="wel">

src/views/Company/Product.vue

 <template>
-  <div class="full-width relative">
-    <el-scrollbar class="q-pa-md full-width full-height full-scroll" style="padding-bottom: 96px;">
-      <div class="column flex-center items-center" style="min-height: 100%;">
+  <div class="full-width relative product-bg column">
+    <el-scrollbar class="full-width full-scroll col">
+      <div class="column flex-center items-center" style="min-height: 100%; padding-bottom: 30px;">
         <div class="text-weight-bold" style="font-size: 36px">
-          全新Travel Design一站式协同行程设计平台
+          <span class="product-cn" >全新Travel Design</span>
+          <span class="product-subtitle q-ml-lg">一站式协同行程设计平台</span>
         </div>
-        <div style="font-size: 24px" class="q-mt-md">
+        <div style="font-size: 40px;color:#000;" class="q-mt-lg text-weight-bolder">
           开启企业版会员，全组织，多场景协同
         </div>
 
-        <div class="q-py-lg row q-mt-xl" v-loding="loading">
-          <div
-            class="q-mr-lg rounded bg-white light-shadow q-pa-lg product-item cusor-pointer"
-            :class="{ active: choosenVersion && x.priceid == choosenVersion.priceid }"
-            v-for="(x, i) in products"
-            @click="choosenVersionHandler(x)"
-          >
-            <div style="font-size: 20px" class="text-center">
-              {{ x.vipname }}
+        <div style="margin-top: 50px;" class="row" v-loding="loading">
+          <div class="product-item" :class="{ active: choosenVersion && x.priceid == choosenVersion.priceid }" v-for="(x, i) in products"  @click="choosenVersionHandler(x)" >
+            <div class="rounded row items-center" style="height:90px;padding: 0 25px;" :style="{backgroundColor:colors[i]}">
+              <span class="text-white text-weight-bold col" style="font-size: 24px;">{{ x.vipname }}</span>
+              <img :src="imgs[i]" style="width:63px;">
             </div>
+            <div class="q-px-md">
               <div class="row items-center text-info q-mt-lg">
                 <div class="col">可用人数</div>
                 <div class="text-dark">
@@ -71,34 +69,33 @@
                   <img src="../../assets/img/gou.png" style="width: 15px" />
                 </div>
               </div>
-            <div class="row items-center text-info q-mt-lg">
-              <div class="col">价格</div>
-              <div class="text-dark" v-if="x.disprice > 0">
-                <span style="font-size: 20px">{{ x.disprice.toFixed(2) }}</span>
-                /年
+              <div class="text-center q-mt-lg text-weight-bold" style="color: #000000;font-size: 30px;">
+                <template  v-if="x.price > 0">
+                  <span>{{ x.price.toFixed(2) }}</span><span style="font-size: 14px;color: #959595;">/年</span>
+                </template>
+                <span v-else>面议</span>
               </div>
-              <div class="text-dark" v-else>面议</div>
             </div>
           </div>
         </div>
       </div>
     </el-scrollbar>
-    <div class="absolute botton light-shadow rounded q-pa-lg bg-white row items-center">
+    <div class="light-shadow rounded q-pa-lg bg-white row items-center q-ma-md" style="margin-top: 0;">
         <div class="text-info text-small col" >
             当前选中产品：
             <span class="text-dark">{{ choosenVersion?choosenVersion.vipname:'未选择企业产品' }}</span>
         </div>
-        <div class="text-info text-small" v-if="choosenVersion && choosenVersion.disprice>0">价格信息：</div>
-        <div v-if="choosenVersion && choosenVersion.disprice>0">
-            <span style="font-size: 24px">{{ choosenVersion.disprice.toFixed(2) }}</span>
+        <div class="text-info text-small" v-if="choosenVersion && choosenVersion.price>0">价格信息：</div>
+        <div v-if="choosenVersion && choosenVersion.price>0">
+            <span style="font-size: 24px">{{ choosenVersion.price.toFixed(2) }}</span>
             /年
         </div>
         <div class="q-ml-lg">
-            <el-button type="primary" v-if="choosenVersion" :loading="creating" @click="createOrderHandler">{{ choosenVersion.disprice > 0?'确认购买':'联系客服' }}</el-button>
+            <el-button type="primary" v-if="choosenVersion" :loading="creating" @click="createOrderHandler">{{ choosenVersion.price > 0?'确认购买':'联系客服' }}</el-button>
         </div>
     </div>
   </div>
-  <WePay v-if="showPay"></WePay>
+  <!-- <WePay v-if="showPay"></WePay> -->
 </template>
 <script lang="ts" setup>
 import { ApiResult, VipType } from "@/configs/axios";
@@ -115,6 +112,12 @@ const space = ref<string[]>(["20G", "100G", "定制"]);
 const choosenVersion = ref<any>(null);
 const creating = ref(false)
 const showPay = ref(true)
+const imgs=ref<string[]>([
+  'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713425444000_672.png',
+  'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713425444000_689.png',
+  'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713425444000_164.png'
+])
+const colors = ref<string[]>(['#3556F9','#46CDD9','#591EDB'])
 const formatProductHandler = (data: any[]) => {
   if (Array.isArray(data)) {
     products.value = data.filter((x) => x.viptype == VipType.TEAM);
@@ -136,13 +139,13 @@ const choosenVersionHandler = (item:any)=>{
 }
 const createOrderHandler = async ()=>{
     if(choosenVersion.value && !creating.value){
-        if(choosenVersion.value.disprice>0){
+        if(choosenVersion.value.price>0){
             creating.value=true
             const parameters = {
                 priceid:choosenVersion.value.priceid,
                 vipid:choosenVersion.value.vipid,
                 pricetype:1,
-                price:choosenVersion.value.disprice,
+                price:choosenVersion.value.price,
                 activedate:'2024-04-15',
                 orderid:0
             }
@@ -166,26 +169,65 @@ const createOrderHandler = async ()=>{
 getProduct();
 </script>
 <style scoped>
+.product-bg{
+  background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713424495000_472.png');
+  background-size: 100% auto;
+}
+.product-cn{
+  font-weight: 800;
+  font-size: 27px;
+  color: #000000;
+  line-height: 1;
+  background: linear-gradient(102deg, #649DED 0%, #570AD8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.product-subtitle{
+  font-weight: 400;
+  font-size: 27px;
+  color: #5F65E5;
+  line-height: 1;
+}
 .product-item {
-  width: 255px;
+  width: 20.833vw;
+  padding:20px;
+  margin-right: 3.125vw;
+  border-radius: 8px;
+  background: #FFF;
+  border: 3px solid transparent;
+  cursor: pointer;
+  box-shadow: 0px 0px 27px 0px rgba(178,198,240,0.56);
 }
 .product-item:hover,
 .product-item.active {
-  background: linear-gradient(134deg, #649ded, #570ad8);
-  color: #fff !important;
+  /* box-shadow: 0px 0px 51px 0px rgba(103,130,249,0.99);
+  border: 3px solid #3556F9; */
+  animation: active-an .3s linear forwards;
 }
-.product-item:hover .text-info,
+@keyframes active-an {
+    0%{
+      margin-top: 0;
+      box-shadow: 0px 0px 27px 0px rgba(178,198,240,0.56);
+      border: 3px solid transparent;
+    }
+    100% {
+      box-shadow: 0px 0px 51px 0px rgba(103,130,249,0.99);
+      margin-top:-20px;
+      border: 3px solid #3556F9;
+    }
+}
+/* .product-item:hover .text-info,
 .product-item.active .text-info {
   color: #efefef;
-}
-.product-item:hover .text-dark,
+} */
+/* .product-item:hover .text-dark,
 .product-item.active .text-dark {
   color: #fff;
 }
 .product-item:hover img,
 .product-item.active img {
   filter: grayscale(100%) brightness(200%);
-}
+} */
 .absolute.botton{
     bottom: 20px;
     right: 20px;

src/views/Index.vue

@@ -3,7 +3,7 @@
     <div class="workspace column">
       <div class="row q-pa-md items-center" style="padding-bottom: 15px">
         <img
-          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png"
+          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
           style="height: 30px"
         />
         <div class="col text-center">
@@ -140,7 +140,7 @@
               <template v-if="!userInfo.it">
                 <div class="row items-center">
                   <div class="text-info text-small col">未加入任何企业</div>
-                  <el-button type="primary" @click="redicetTo('/cp')" link icon="officeBuilding">立即创建企业</el-button>
+                  <el-button type="primary" @click="redicetTo('/space/cp')" link icon="officeBuilding">立即创建企业</el-button>
                 </div>
                 <el-divider />
                 <el-menu mode="vertical">
@@ -180,7 +180,7 @@ const { userInfo } = storeToRefs(useUserStore());
 const sellStore = useSellTemplateStore()
 const router = useRouter()
 const isWorkspace = ref(true) 
-isWorkspace.value = !router.currentRoute.value.path.includes('/cp')
+isWorkspace.value = !router.currentRoute.value.path.includes('/space/cp')
 
 const openMarketHandler = (type: string = "") => {
   openNewBlank(`/market/create${type}`);
@@ -199,7 +199,7 @@ const openFilePosition = (playload:any)=>{
 }
 
 const redicetTo = (path:string)=>{
-  isWorkspace.value = !path.includes('/cp')
+  isWorkspace.value = !path.includes('/space/cp')
 
   router.push({
       path

src/views/Market/Index.vue

@@ -4,7 +4,7 @@
         <div class="relative" style="padding: 22px 17px; max-width:1440px; margin:0 auto;z-index: 2;">
             <div :class="[datas.scrollTop>100?'MarketHeader':'']">
                 <div class="row items-center">
-                    <img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" />
+                    <img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" style="height: 30px;" />
                     <div class="row grow Market-select reactive">
                         <el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33">
                             <template #append>

src/views/UserCenter/Index.vue

+<template>
+  <div class="user-header rounded row items-center" :style="{ background: userTheme?.bg }">
+    <el-avatar :size="64" :src="userInfo.photo" shape="square" :style="{ BackgroundColor: userTheme?.color }" style="font-size: 36px;font-weight: bold;">
+      <!-- {{userInfo.photo && userInfo.photo.includes("http")? "": userInfo.nickname[0]}} -->
+    </el-avatar>
+    <div class="q-ml-lg text-white col">
+      <div class="" style="font-size: 20px;">{{ userInfo.nickname }}</div>
+      <div class="q-mt-sm text-info">个人账号ID：{{ userInfo.cardno??'8027970449819221090' }}</div>
+      
+    </div>
+    <div class="text-white">{{ userTheme?.desc }}</div>
+    <div :style="{'background':vipTheme.color}" v-if="userTheme?.name=='FREE'" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">升级为VIP</div>
+    <!-- <div :style="{'background':vipTheme.color}" v-if="1==2" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">续费VIP</div> -->
+    <div :style="{'background':enTheme.color}" v-if="userTheme?.name=='FREE'" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">升级为企业</div>
+  </div>
+  <div class="q-mt-xl">
+    <div class="user-label text-grey-8">我的权益</div>
+    <div></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
+import { useUserStore } from "@/store";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+
+const useUser = useUserStore()
+const { userInfo } = storeToRefs(useUser)
+const userTheme = useUser.getUserTheme
+
+const vipTheme = VIP_USER_THEME
+const enTheme = ENT_USER_THEME
+
+</script>
+
+<style>
+.user-header {
+  padding: 16px 24px;
+  position: relative;
+  font-size: 14px;
+  color:#FFF;
+  z-index: 1;
+  width:100%;
+  overflow: hidden;
+}
+
+.user-header::after {
+  position: absolute;
+  top: 0;
+  right: -48px;
+  bottom: -12px;
+  z-index: -1;
+  width: 100%;
+  background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
+  content: "";
+  transform: scale(2);
+  transform-origin: right center;
+}
+.user-label{
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+</style>
\ No newline at end of file

src/views/UserCenter/Layout.vue

+<template>
+    <div class="window-height column">
+        <div class="user-center-header row items-center">
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
+                style="height: 24px" />
+            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
+                管理与设置
+            </div>
+            <div class="col"></div>
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713433759000_282.png"
+                style="height: 33px" />
+            <div class="primary-link-button q-ml-lg">创建设计</div>
+            <UserCard :size="33"></UserCard>
+        </div>
+        <div class="col row">
+            <div class="user-center-menu column ">
+                <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
+                    <el-menu-item :index="i" v-for="(x,i) in menus" :key="i" :route="x.url">
+                        <component :is="x.icon" style="font-size: 20px;"></component>
+                        <span class="q-ml-lg">{{ x.name }}</span>
+                    </el-menu-item>
+                </el-menu>
+                <el-button class="full-width pingfangr text-weight-bolder" @click="forwardSpace" style="font-size: 14px !important;" icon="arrow-left">返回工作台</el-button>
+            </div>
+            <el-scrollbar class="col full-height user-center-body">
+                <router-view />
+            </el-scrollbar>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import UserCard from "@/components/User/UserCard.vue";
+import { useMenuStore } from "@/store";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter()
+const useMenu = useMenuStore();
+const menus = ref(useMenu.getUserMenu);
+const activeIndex = ref(0)
+
+const forwardSpace = () => router.push('/space')
+
+watch(() => router.currentRoute.value.path, (toPath) => {
+    menus.value = useMenu.getUserMenu
+    activeIndex.value = menus.value.findIndex(x=>x.url==router.currentRoute.value.path)
+},{immediate: true,deep: true})
+</script>
+
+<style scoped>
+.user-center-header {
+    padding: 0 40px 0 28px;
+    border-bottom: 1px solid #efefef;
+    height: 56px;
+    color: #000;
+}
+
+.user-center-menu {
+    width: 232px;
+    padding: 20px 0 20px 16px;
+}
+
+.user-center-body {
+    padding: 20px 40px 40px 40px;
+}
+</style>

src/views/UserCenter/Order.vue

+<template>
+  这里是Order
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/Website/components/Welcomes.vue

@@ -18,7 +18,7 @@
                 </div>
             </div>
         </div>
-        <div class="column items-center window-height two-card" :class="{'flex-center animate__animated animate__backInUp':top>0,'step-2':top>2}">
+        <div class="column items-center window-height two-cardss" :class="{'flex-center animate__animated animate__backInUp':top>0,'step-2':top>2}">
             <div class="row items-center">
                 <div class="left-box step-2" v-show="top>2" :class="{'step-3':top>3}">
                     <div class="row items-center">
@@ -163,8 +163,8 @@ const forwardLogin = ()=>{
 .website .img-change.step-2{
     margin-right: 7.8125vw;
 }
-.website .two-card.step-2{
-    align-items: end !important;
+.website .two-cardss.step-2{
+    /* align-items: end !important; */
 }
 .website .left-box.step-2{
     animation: left-box-step-2 .2s linear both;