商城首页和个人信息

components.d.ts

@@ -7,7 +7,16 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/App.vue

@@ -1,8 +1,107 @@
 <template>
-  <el-button type="primary">424242 </el-button>
+  <div class="shop-header">
+    <div class="header-box">
+      <div class="header-wapper">
+        <a>登录</a>
+        <!-- <a>注册</a> -->
+        <a @click="$router.push('/myuser')">个人中心</a>
+        <a>收藏夹</a>
+        <a>手机版</a>
+      </div>
+    </div>
+
+    <!-- 菜单 -->
+    <div class="shop-menu">
+      <div class="left-logo">
+        <img src="../src//assets/img/home/2023_12_01_beijing2/logo.png" alt="">
+      </div>
+      <input placeholder="输入设备关键词" type="text">
+      <div class="erweima">二维码占位</div>
+    </div>
+  </div>
+
   <RouterView />
 </template>
 <script setup lang="ts">
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.shop-header {
+  height: 157px;
+  width: 100%;
+  position: sticky;
+  top: 0;
+  left: 0;
+
+  .header-box {
+    background-color: #F5F5F5;
+    width: 100%;
+
+    .header-wapper {
+      width: 1200px;
+      height: 37px;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+
+      a {
+        color: #6D6D6D;
+        font-size: 14px;
+        padding: 0 20px;
+        border-right: 1px solid #666655;
+        cursor: pointer;
+
+        &:last-child {
+          border: none;
+        }
+
+        &:hover {
+          color: #2282FF;
+        }
+      }
+    }
+  }
+
+
+
+  .shop-menu {
+    width: 1200px;
+    height: 120px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+
+    .left-logo {
+      color: #999999;
+      font-weight: bold;
+      font-size: 20px;
+
+      img {
+        width: 176px;
+        height: 58px;
+      }
+    }
+
+
+
+    input {
+      width: 700px;
+      height: 45px;
+      border: 1px solid #5CA4FF;
+      border-radius: 45px;
+      margin-left: 70px;
+      // margin-left: 190px;
+    }
+
+    .erweima {
+      width: 80px;
+      height: 80px;
+      line-height: 80px;
+      margin-left: 30px;
+      background-color: skyblue;
+    }
+  }
+}
+</style>

src/main.ts

@@ -5,6 +5,7 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import './style/css/reset.css'
 
 const app = createApp(App)
 

src/router/index.ts

@@ -33,6 +33,100 @@ const routes: Array<RouteRecordRaw> = [
             AuthFlag: false
         },
         children: [...myInfo]
+    },
+    {
+        path: '/myuser', // 主路由地址
+        name: 'myuser',
+        component: () => import('views/user/index.vue'), // 组件加载
+        meta: {
+            title: '个人中心',
+            keepAlive: true,
+            AuthFlag: false
+        },
+        redirect: '/myuser/baseInfo',
+        children: [
+            {
+                path: 'baseInfo',
+                name: 'baseInfo',
+                component: () => import('views/user/baseInfo/index.vue'),
+                meta: {
+                    title: '基础信息',
+                    keepAlive: true,
+                    AuthFlag: false
+                },
+            },
+            {
+                path: 'orderManagement',
+                name: 'orderManagement',
+                component: () => import('views/user/orderManagement/index.vue'),
+                meta: {
+                    title: '基础信息',
+                    keepAlive: true,
+                    AuthFlag: false
+                },
+            },
+            {
+                path: 'subAccount',
+                name: 'subAccount',
+                component: () => import('views/user/subAccount/index.vue'),
+                meta: {
+                    title: '基础信息',
+                    keepAlive: true,
+                    AuthFlag: false
+                },
+            },
+            {
+                path: 'orderManagementCz',
+                name: 'orderManagementCz',
+                component: () => import('views/user/orderManagementCz/index.vue'),
+                meta: {
+                    title: '基础信息',
+                    keepAlive: true,
+                    AuthFlag: false
+                },
+            },
+            {
+                path: 'goodsManagement',
+                name: 'goodsManagement',
+                component: () => import('views/user/goodsManagement/index.vue'),
+                meta: {
+                    title: '基础信息',
+                    keepAlive: true,
+                    AuthFlag: false
+                },
+            },
+            {
+                path: 'goodsUpdown',
+                name: 'goodsUpdown',
+                component: () => import('views/user/goodsUpdown/index.vue'),
+                meta: {
+                    title: '基础信息',
+                    keepAlive: true,
+                    AuthFlag: false
+                },
+            },
+            {
+                path: 'operatorManagement',
+                name: 'operatorManagement',
+                component: () => import('views/user/operatorManagement/index.vue'),
+                meta: {
+                    title: '基础信息',
+                    keepAlive: true,
+                    AuthFlag: false
+                },
+            }
+        ]
+    },
+    {
+        path: '/home',
+        name: 'home',
+        component: () => import('views/home/index.vue'),
+        meta: {
+            title: '首页',
+            keepAlive: true,
+            AuthFlag: false
+        },
+
     }
 ]
 

src/style/css/reset.css

@@ -1,70 +1,148 @@
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-b, u, i, center,
+object,
-dl, dt, dd, ol, ul, li,
+iframe,
-fieldset, form, label, legend,
+h1,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h2,
-article, aside, canvas, details, embed,
+h3,
-figure, figcaption, footer, header, hgroup,
+h4,
-menu, nav, output, ruby, section, summary,
+h5,
-time, mark, audio, video {
+h6,
-       
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
-       
+
   padding: 0;
-       
+
   border: 0;
-       
+
   font-size: 100%;
-       
+
   font: inherit;
-       
+
   vertical-align: baseline;
 }
 
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
+article,
-footer, header, hgroup, menu, nav, section {
+aside,
-       
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 
 body {
-       
   line-height: 1;
 }
 
-ol, ul {
+ol,
-       
+ul {
   list-style: none;
 }
 
-blockquote, q {
+blockquote,
-       
+q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
-       
+q:before,
-    content: '';
+q:after {
-       
+  content: "";
+
   content: none;
 }
 
 table {
-       
   border-collapse: collapse;
-       
+
   border-spacing: 0;
 }
 
 #app {
-       
   width: 100vw;
-       
   height: 100vh;
+  background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
+}
+
+.wapper {
+  width: 1200px;
+  margin: 0 auto;
 }

src/views/Index.vue

@@ -1,56 +1,7 @@
-<template>
-    <div>
-        <div
-            class="pathItem"
-            v-for="(item, index) in routeList.list"
-            :key="index"
-            @click="toPage(item)"
-        >
-            {{ item.name }}
-        </div>
-    </div>
-</template>
-
 <script setup lang="ts">
-const router = useRouter()
-const routeList = reactive({
-    list: [
-        {
-            name: 'vant-scss演示',
-            path: 'vantTest'
-        },
-        {
-            name: '时间测试',
-            path: 'timeTest'
-        },
-        {
-            name: '全局事件 mitt 演示',
-            path: 'mittTest'
-        },
-        {
-            name: 'pinia演示',
-            path: 'piniaTest'
-        },
-        {
-            name: '路由演示',
-            path: 'piniaTest'
-        }
-    ]
-})
 
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-const toPage = (item: any) => {
-    router.push({ name: item.path })
-}
 </script>
 
-<style scoped lang="scss">
+<template></template>
-// @mixin fontStyle($size,$color,$weight,$lineH,$align) {
-// @mixin flexStyle($js,$al,$dir,$wrap){
-.pathItem {
-    @include fontStyle(48px, green, bold, 80px, center);
-    @include wh(750px, 80px);
 
-    margin-bottom: 12px;
+<style></style>
-}
-</style>

src/views/home/index.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <!-- 首页 -->
+    <div class="home-index wapper"></div>
+</template>
+
+<style lang="scss">
+.home-index {
+    height: 600px;
+    background-color: #000;
+}
+</style>

src/views/user/baseInfo/index.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <!-- 基础信息 -->
+    <div class="base-info">
+        <div class="title-info">
+            <span>132255xxxxxxxx</span>
+            <a class="edit-a">修改</a>
+            <span>免费用户/标准用户 xxxx-xxx</span>
+            <a class="logoff-a">账号注销</a>
+        </div>
+
+        <div class="myqiye">
+            <span>我的企业:</span>
+            <a>申请企业认证</a>
+
+            /
+
+            <a>xxxxxx公司</a>
+        </div>
+
+        <!-- 订单交易信息 -->
+        <div class="goods-box">
+            <span class="goods-pay">订单交易</span>
+
+            <ul class="goods-count">
+                <li>
+                    <!-- <svg-icon icon-class="goods-submit" class="svgicon" /> -->
+                    <span>已提交</span>
+                    <span>0</span>
+                </li>
+                <li>
+                    <!-- <svg-icon icon-class="goods-ing" class="svgicon" /> -->
+                    <span>进行中</span>
+                    <span>0</span>
+                </li>
+                <li>
+                    <!-- <svg-icon icon-class="goods-pass" class="svgicon" /> -->
+                    <span>已完成</span>
+                    <span>0</span>
+                </li>
+                <li>
+                    <!-- <svg-icon icon-class="goods-icon" class="svgicon" /> -->
+                    <span>全部</span>
+                    <span>0</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.base-info {
+    width: 100%;
+    height: 100%;
+}
+
+.title-info,
+.myqiye {
+    padding: 0 20px;
+    display: flex;
+    height: 56px;
+    align-items: center;
+}
+
+.edit-a {
+    margin: 0 50px 0 10px;
+    color: #0262db;
+}
+
+.logoff-a {
+    flex: 1;
+    text-align: right;
+}
+
+.myqiye {
+    // width: calc(100% - 15px);
+    padding: 0;
+    margin: 20px 0 0 20px;
+    border-bottom: 1px solid #000;
+
+    span {
+        margin-right: 5px;
+    }
+
+    a {
+        color: #0262db;
+    }
+}
+
+.goods-box {
+    padding: 20px;
+
+
+    .goods-pay {
+        display: inline-block;
+        padding: 5px;
+        height: 37px;
+        line-height: 37px;
+        color: #000;
+        border-bottom: 1px solid #d90d1a;
+    }
+
+    .goods-count {
+        // width: 100%;
+        height: 140px;
+        background-color: #f5f5f5;
+        padding: 0;
+        margin: 0;
+        margin-top: 15px;
+        list-style: none;
+        display: flex;
+        justify-content: space-around;
+
+        .svgicon {
+            width: 35px;
+            height: 35px;
+        }
+
+        li {
+            width: 140px;
+            height: 140px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                margin: 5px;
+            }
+        }
+    }
+}
+</style>

src/views/user/baseInfo/indexcopy.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template></template>
+
+<style></style>

src/views/user/goodsManagement/index.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const queryParams = ref({})
+
+const tableData = [
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-04',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-01',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+]
+</script>
+
+<template>
+    <!-- 订单管理 -->
+
+    <el-form :model="queryParams" :inline="true">
+        <el-form-item label="编码：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="租赁范围：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="装备类型：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="装备名称：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="状态：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item>
+            <el-button>装备入驻</el-button>
+        </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="tableData" style="width: 100%">
+        <el-table-column align="center" prop="name" label="编码" />
+        <el-table-column align="center" prop="address" label="租赁范围" />
+        <el-table-column align="center" prop="date" label="装备类型" />
+        <el-table-column align="center" prop="name" label="装备名称" />
+        <el-table-column align="center" prop="name" label="租金" />
+        <el-table-column align="center" prop="name" label="状态" />
+        <el-table-column align="center" prop="name" label="操作">
+            <template>
+                <el-button>查看</el-button>
+                <el-button>确认收货</el-button>
+                <el-button>退租</el-button>
+                <el-button>续租</el-button>
+                <el-button>删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<style>
+.el-form {
+    margin: 15px 0;
+}
+</style>

src/views/user/goodsUpdown/index.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const queryParams = ref({})
+
+const tableData = [
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-04',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-01',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+]
+</script>
+
+<template>
+    <!-- 订单管理 -->
+
+    <el-form :model="queryParams" :inline="true">
+        <el-form-item label="编码：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="租赁范围：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="装备类型：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="装备名称：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="状态：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item>
+            <el-button>批量上架</el-button>
+            <el-button>批量下架</el-button>
+        </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="tableData" style="width: 100%">
+        <el-table-column align="center" prop="name" label="编码" />
+        <el-table-column align="center" prop="address" label="租赁范围" />
+        <el-table-column align="center" prop="date" label="装备类型" />
+        <el-table-column align="center" prop="name" label="装备名称" />
+        <el-table-column align="center" prop="name" label="租金" />
+        <el-table-column align="center" prop="name" label="状态" />
+        <el-table-column align="center" prop="name" label="操作">
+            <template>
+                <el-button>查看</el-button>
+                <el-button>确认收货</el-button>
+                <el-button>退租</el-button>
+                <el-button>续租</el-button>
+                <el-button>删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<style>
+.el-form {
+    margin: 15px 0;
+}
+</style>

src/views/user/index.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+// import { userRouter } from 'vue-router'
+// const router = userRouter()
+const activeseekingRent: any = ref(true)
+const activeMenu: any = ref('baseInfo')
+const menuList: any = ref([
+    { title: '基础信息', name: 'baseInfo' },
+    { title: '订单管理', name: 'orderManagement' },
+    { title: '子账号管理', name: 'subAccount' }
+])
+const seekingRentClick = () => {
+    activeseekingRent.value = !activeseekingRent.value
+    menuList.value = [
+        { title: '基础信息', name: 'baseInfo' },
+        { title: '订单管理', name: 'orderManagement' },
+        { title: '子账号管理', name: 'subAccount' }
+    ]
+
+}
+
+const lesseeClick = () => {
+    activeseekingRent.value = !activeseekingRent.value
+    menuList.value = [
+        { title: '订单管理', name: 'orderManagementCz' },
+        { title: '商品管理', name: 'goodsManagement' },
+        { title: '商品上下架', name: 'goodsUpdown' },
+        { title: '机手管理', name: 'operatorManagement' }
+    ]
+}
+
+// const handleSelect = (iname) => {
+//     router.push({
+//         name: iname,
+//         params: {
+//             twolevel: true
+//         }
+//     })
+// }
+</script>
+
+
+
+
+<template>
+    <!-- 个人中心页面 -->
+    <div class="app-container ">
+        <div class="left-menu">
+            <!-- 头像 -->
+            <div class="pic-box">
+                <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="" />
+                <span>1234566XXX</span>
+            </div>
+
+            <!-- 按钮 -->
+            <div class="btn-box">
+                <span @click="seekingRentClick" :class="activeseekingRent ? 'active' : ''">求租</span>
+                <span @click="lesseeClick" :class="!activeseekingRent ? 'active' : ''">承租</span>
+            </div>
+
+            <!-- 菜单 -->
+            <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" router>
+                <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.name">
+                    {{ item.title }}
+                </el-menu-item>
+            </el-menu>
+        </div>
+        <div class="right-content">
+            <router-view />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" >
+.app-container {
+    width: 100%;
+    // height: 100%;
+    background-color: #fff;
+    display: flex;
+
+    .left-menu {
+        width: 300px;
+
+        .pic-box {
+            width: 300px;
+            height: 180px;
+            text-align: center;
+
+            img {
+                margin: 30px 0 10px 0;
+                width: 90px;
+                height: 90px;
+                border-radius: 50%;
+            }
+
+            span {
+                display: block;
+            }
+        }
+    }
+
+    .btn-box {
+        height: 45px;
+        display: flex;
+
+        span {
+            height: 100%;
+            line-height: 45px;
+            flex: 1;
+            cursor: pointer;
+            text-align: center;
+        }
+    }
+
+    .right-content {
+        width: calc(100% - 300px);
+    }
+
+    .active {
+        background-color: #2282ff;
+    }
+}
+</style>

src/views/user/operatorManagement/index.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const queryParams = ref({})
+
+const tableData = [
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-04',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-01',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+]
+</script>
+
+<template>
+    <!-- 机手管理 -->
+
+    <el-form :model="queryParams" :inline="true">
+
+        <el-form-item>
+            <el-button>新增</el-button>
+        </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="tableData" style="width: 100%">
+        <el-table-column align="center" prop="name" label="机手姓名" />
+        <el-table-column align="center" prop="name" label="机手电话" />
+        <el-table-column align="center" prop="date" label="年龄" />
+        <el-table-column align="center" prop="name" label="性别" />
+        <el-table-column align="center" prop="name" label="身份证号" />
+        <el-table-column align="center" prop="name" label="操作">
+            <template>
+                <el-button>修改</el-button>
+                <el-button>删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<style>
+.el-form {
+    margin: 15px 0;
+}
+</style>

src/views/user/orderManagement/index.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const queryParams = ref({})
+
+const tableData = [
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-04',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-01',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+]
+</script>
+
+<template>
+    <!-- 订单管理 -->
+
+    <el-form :model="queryParams" :inline="true">
+        <el-form-item label="订单编号：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="创建时间：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="状态：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="装备类型：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="装备名称：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item>
+            <el-button>
+                查询
+            </el-button>
+            <el-button>保存</el-button>
+        </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="tableData" style="width: 100%">
+        <el-table-column align="center" prop="name" label="订单编号" />
+        <el-table-column align="center" prop="name" label="供应商" />
+        <el-table-column align="center" prop="date" label="订单创建日期" />
+        <el-table-column align="center" prop="name" label="装备类型" />
+        <el-table-column align="center" prop="name" label="装备名称" />
+        <el-table-column align="center" prop="name" label="订单状态" />
+        <el-table-column align="center" prop="name" label="操作">
+            <template>
+                <el-button>查看</el-button>
+                <el-button>确认收货</el-button>
+                <el-button>退租</el-button>
+                <el-button>续租</el-button>
+                <el-button>删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<style>
+.el-form {
+    margin: 15px 0;
+}
+</style>

src/views/user/orderManagementCz/index.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const queryParams = ref({})
+
+const tableData = [
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-04',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+    {
+        date: '2016-05-01',
+        name: '123xxx',
+        address: '合肥市蜀山区',
+    },
+]
+</script>
+
+<template>
+    <!-- 订单管理 -->
+
+    <el-form :model="queryParams" :inline="true">
+        <el-form-item label="订单编号：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="创建时间：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="状态：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="装备类型：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item label="装备名称：" prop="menuName">
+            <el-input />
+        </el-form-item>
+        <el-form-item>
+            <el-button>查询</el-button>
+            <el-button>保存</el-button>
+        </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="tableData" style="width: 100%">
+        <el-table-column align="center" prop="name" label="订单编号" />
+        <el-table-column align="center" prop="address" label="客户单位" />
+        <el-table-column align="center" prop="date" label="订单创建日期" />
+        <el-table-column align="center" prop="name" label="联系方式" />
+        <el-table-column align="center" prop="name" label="装备类型" />
+        <el-table-column align="center" prop="name" label="装备名称" />
+        <el-table-column align="center" prop="name" label="订单状态" />
+        <el-table-column align="center" prop="name" label="操作">
+            <template>
+                <el-button>查看</el-button>
+                <el-button>确认收货</el-button>
+                <el-button>退租</el-button>
+                <el-button>续租</el-button>
+                <el-button>删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<style>
+.el-form {
+    margin: 15px 0;
+}
+</style>

src/views/user/subAccount/index.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const queryParams = ref({})
+
+const tableData = [
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '是',
+    },
+    {
+        date: '2016-05-02',
+        name: '123xxx',
+        address: '是',
+    },
+    {
+        date: '2016-05-04',
+        name: '123xxx',
+        address: '否',
+    },
+    {
+        date: '2016-05-01',
+        name: '123xxx',
+        address: '否',
+    },
+]
+</script>
+
+<template>
+    <!-- 子账号管理 -->
+
+    <el-form :model="queryParams" :inline="true">
+        <el-form-item>
+            <el-button>新增</el-button>
+        </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="tableData" style="width: 100%">
+        <el-table-column align="center" prop="name" label="手机号" />
+        <el-table-column align="center" prop="name" label="用户名" />
+        <el-table-column align="center" prop="date" label="创建时间" />
+        <el-table-column align="center" prop="address" label="是否启用" />
+        <el-table-column align="center" prop="name" label="操作">
+            <template>
+                <el-button>查看</el-button>
+                <el-button>确认收货</el-button>
+                <el-button>退租</el-button>
+                <el-button>续租</el-button>
+                <el-button>删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<style>
+.el-form {
+    margin: 15px 0;
+}
+</style>