From 147bb863dda2f40bedade425f9c7b02bb0e05e02 Mon Sep 17 00:00:00 2001
From: songyang <972986197@qq.com>
Date: Mon, 4 Dec 2023 09:12:38 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=B7=AF=E7=94=B1=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                             |  15 ++
 src/App.vue                                 | 273 +-------------------
 src/compontents/PagingComponent/index.vue   |  40 ++-
 src/main.ts                                 |  16 +-
 src/router/index.ts                         | 240 +++++++++--------
 src/store/main.ts                           |   4 +-
 src/style/css/reset.css                     |  42 +--
 src/views/AppMain.vue                       | 253 ++++++++++++++++++
 src/views/Index.vue                         |   8 +-
 src/views/Login.vue                         |  12 +
 src/views/collect/index.vue                 | 197 ++++++++++++++
 src/views/consultationDetails/index.vue     |  14 +
 src/views/home/index.vue                    |  59 +++--
 src/views/user/baseInfo/index.vue           | 265 ++++++++++++-------
 src/views/user/goodsManagement/index.vue    |  16 ++
 src/views/user/goodsUpdown/index.vue        |  13 +-
 src/views/user/operatorManagement/index.vue |  82 +++---
 src/views/user/orderManagement/index.vue    |  88 ++++---
 src/views/user/orderManagementCz/index.vue  |  79 +++---
 src/views/user/subAccount/index.vue         | 107 +++++---
 20 files changed, 1160 insertions(+), 663 deletions(-)
 create mode 100644 src/views/AppMain.vue
 create mode 100644 src/views/Login.vue
 create mode 100644 src/views/collect/index.vue
 create mode 100644 src/views/consultationDetails/index.vue

diff --git a/components.d.ts b/components.d.ts
index 2591c1a..f0b59a7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,8 +7,23 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/App.vue b/src/App.vue
index 941007f..15a4901 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,276 +1,7 @@
-<script setup lang="ts">
-import FooterInfo from './compontents/FooterInfo/index.vue'
-const route = useRoute()
-
-
-// 判断是否是个人中心页面 如果是则隐藏页脚
-const isMyInfoPage = () => {
-  if (route.path.indexOf("myuser") === -1) {
-    return true
-  } else {
-    return false
-  }
-}
-
-
-// 搜索查询绑定值
-const keywordIptValue = ref('')
-
-// 输入框下方历史搜索记录
-const searchHistoryList = ref(
-  [
-    { name: '220E履带挖掘机' },
-    { name: '3443挖掘机' },
-    { name: '塔式起重机' },
-    { name: '轮式牵引铲运机' },
-  ]
-)
-
-// 搜索按钮
-const searchKeywordBtn = () => {
-
-  console.log('搜索关键字', keywordIptValue.value);
-
-}
-
-// 点击下方搜索记录时 
-const handleHistory = (hisValue: any) => {
-  keywordIptValue.value = hisValue
-}
-
-
-onMounted(() => {
-
-})
-
-</script>
-
+<script setup lang="ts"></script>
 
 <template>
-  <div class="shop-header">
-    <div class="header-box">
-      <ul class="header-wapper">
-        <li>
-          <span>
-            <a href="">登录</a>/
-            <a href="" style="color:#6D6D6D">注册</a>
-          </span>
-        </li>
-        <li>
-          <span @click="$router.push({ name: 'myuser' })">
-            个人中心
-          </span>
-        </li>
-        <li>
-          <img src="./assets/img/home/2023_12_01_beijing2/shoucang.png" alt="">
-          <span>
-            收藏夹
-          </span>
-        </li>
-        <li>
-          <img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="">
-          <span class="last-span">
-            手机版
-          </span>
-        </li>
-      </ul>
-    </div>
-
-    <!-- 菜单 -->
-    <div class="shop-menu-box">
-      <div class="shop-menu">
-        <div class="left-logo" @click="$router.push('/home')">
-          <!-- 首页Logo -->
-          <img src="@/assets/img/home/2023_12_01_beijing2/logo.png" alt="首页" title="首页">
-        </div>
-        <input placeholder="输入设备关键词" type="text" v-model="keywordIptValue">
-        <button class="search-btn" @click="searchKeywordBtn">搜索</button>
-        <div class="erweima">
-          <div class="tilte">手机扫码登录</div>
-          <img src="" alt="">
-        </div>
-
-
-        <div class="ipt-down">
-          <a @click="handleHistory(item.name)" v-for="item in searchHistoryList" :key="item.name">{{ item.name }}</a>
-        </div>
-      </div>
-    </div>
-
-
-  </div>
-
-  <div class="container">
     <RouterView />
-  </div>
-  <FooterInfo v-if="isMyInfoPage()" />
-  <!-- <FooterInfo /> -->
 </template>
 
-
-<style scoped lang="scss">
-.container {
-  width: 1200px;
-  margin: 0 auto;
-  overflow: hidden;
-  background: #FFFFFF;
-  border-radius: 30px;
-  padding: 20px 30px;
-  box-sizing: border-box;
-}
-
-.shop-header {
-  // height: 157px;
-  width: 100%;
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 999;
-
-  .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;
-
-      li {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 37px;
-        cursor: pointer;
-        margin-left: 20px;
-
-
-        span {
-          color: #6D6D6D;
-          font-size: 14px;
-          padding: 0 20px 0 3px;
-          border-right: 1px solid #666655;
-
-          &:hover {
-            color: #2282FF;
-          }
-
-          a {
-            text-decoration: none;
-            color: #2282FF;
-          }
-
-        }
-
-        .last-span {
-          border: none;
-          padding: 0;
-
-        }
-
-      }
-
-
-    }
-  }
-
-  .shop-menu-box {
-    background-color: #edeef6;
-
-    .shop-menu {
-      position: relative;
-      width: 1200px;
-      height: 140px;
-      margin: 0 auto;
-      display: flex;
-      align-items: center;
-
-
-      .left-logo {
-        color: #999999;
-        font-weight: bold;
-        font-size: 20px;
-
-        img {
-          width: 176px;
-          height: 58px;
-          cursor: pointer;
-        }
-      }
-
-
-
-      input {
-        width: 700px;
-        height: 45px;
-        border: 1px solid #5CA4FF;
-        border-radius: 45px;
-        margin-left: 70px;
-        line-height: 45px;
-        color: transparent;
-        text-shadow: 0 0 0 #333;
-        padding-left: 30px;
-      }
-
-      input:focus {
-        outline: 1px solid #5CA4FF;
-      }
-
-      input::-webkit-input-placeholder {
-        color: #949494;
-      }
-
-      .search-btn {
-        width: 100px;
-        height: 39px;
-        transform: translateX(-110px);
-        border-radius: 39px;
-        background: linear-gradient(132deg, #6DE7FF 0%, #348CFF 100%);
-        box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
-        border: none;
-        color: #fff;
-        cursor: pointer;
-        font-size: 18px;
-
-      }
-
-
-      .erweima {
-        // display: none;
-        width: 100px;
-        height: 80px;
-        margin-left: -20px;
-        padding: 10px;
-        background-color: #fff;
-
-        .tilte {
-          font-size: 14px;
-          color: #1F88FF;
-          text-align: center;
-        }
-      }
-
-      .ipt-down {
-        position: absolute;
-        bottom: 20px;
-        left: 22%;
-        overflow: hidden;
-
-        a {
-          padding: 0 10px;
-          color: #727272;
-          font-size: 14px;
-          cursor: pointer;
-        }
-      }
-
-    }
-
-  }
-
-
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/compontents/PagingComponent/index.vue b/src/compontents/PagingComponent/index.vue
index f93b8c7..71faf37 100644
--- a/src/compontents/PagingComponent/index.vue
+++ b/src/compontents/PagingComponent/index.vue
@@ -1,16 +1,44 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    const emit = defineEmits(['getList'])
+    // 每页数量值改变
+    const handleSizeChange = (val: Number) => {
+        // 传递每页数量
+        emit('getList', val)
+    }
+    // 页码值改变
+    const handleCurrentChange = (val: Number) => {
+        // 传递页码值
+        emit('getList', val)
+    }
+
+    defineProps<Props>()
+    interface Props {
+        pageSize?: 20
+        pageNumber?: 1
+        total?: 0
+    }
+
+    // const handleTotalText = () => {
+    //     const targetDom: any = document.querySelector('.el-pagination__total')
+    //     targetDom.innerText = `数量${total.value}`
+    // }
+    // onMounted(() => {
+    //     // handleTotalText()
+    // })
+</script>
 
 <template>
     <!-- 分页 -->
-
     <el-pagination
-        current-page="1"
-        page-size="20"
-        :page-sizes="[100, 200, 300, 400]"
+        :current-page="pageNumber"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
         small="small"
         background="background"
         layout="total, sizes, prev, pager, next, jumper"
-        :total="50" />
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
 </template>
 
 <style>
diff --git a/src/main.ts b/src/main.ts
index c88a804..dc8c9b4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,14 +6,28 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import 'element-plus/dist/index.css'
 import './style/css/reset.css'
 
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
+import pinia from "./store"
+
+
+
+
+// 使页面跳转后滚动条恢复至顶部
+router.beforeEach((to, from, next) => {
+    // chrome
+    document.body.scrollTop = 0;
+    // firefox 兼容火狐
+    document.documentElement.scrollTop = 0;
+    next();
+})
 
 app.use(createPinia())
 app.use(router)
-
+app.use(pinia)
 app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index 570dff1..80b1ef7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,6 +12,16 @@ const routes: Array<RouteRecordRaw> = [
             AuthFlag: false
         }
     },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('views/Login.vue'),
+        meta: {
+            title: '登录页',
+            keepAlive: true,
+            AuthFlag: false
+        }
+    },
     {
         path: '/test', // 主路由地址
         name: 'testIndex',
@@ -36,119 +46,145 @@ const routes: Array<RouteRecordRaw> = [
     },
 
 
-    // 个人中心
-    {
-        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: '/',
-        redirect: '/home'
-    },
+
+
     // 首页
     {
-        path: '/home',
-        name: 'home',
-        component: () => import('views/home/index.vue'),
+        path: '/',
+        component: () => import('views/AppMain.vue'),
+        redirect: '/home',
         meta: {
             title: '首页',
             keepAlive: true,
             AuthFlag: false
         },
 
-    },
-    // 自选直租
-    {
-        path: '/equip',
-        name: 'equip',
-        redirect: '/equip/list',
         children: [
+            // 首页
             {
-                path: 'list',
-                name: 'equipList',
-                component: () => import('views/equip/list.vue')
-            }
+                path: 'home',
+                name: 'home',
+                component: () => import('views/home/index.vue'),
+                meta: {
+                    title: '首页',
+                    keepAlive: true,
+                    AuthFlag: false
+                },
+            },
+            // 自选直租
+            {
+                path: '/equip',
+                name: 'equip',
+                redirect: '/equip/list',
+                children: [
+                    {
+                        path: 'list',
+                        name: 'equipList',
+                        component: () => import('views/equip/list.vue')
+                    }
+                ]
+            },
+            // 资讯详情
+            {
+                path: '/consultationDetails',
+                name: 'consultationDetails',
+                component: () => (import('views/consultationDetails/index.vue'))
+            },
+            // 收藏夹页面
+            {
+                path: '/collect',
+                name: 'collect',
+                component: () => import('views/collect/index.vue')
+            },
+            // 个人中心
+            {
+                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
+                        },
+                    }
+                ]
+            },
         ]
-    }
+
+    },
+
+
 ]
 
 const router = createRouter({
diff --git a/src/store/main.ts b/src/store/main.ts
index 4042c58..1eb62a3 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -23,9 +23,9 @@ export const useStore = defineStore('main', {
             {
                 // 自定义存储的 key，默认是 store.$id
                 key: 'main',
-                storage: localStorage, //缓存模式 可选 localStorage sessionStorage
+                storage: sessionStorage, //缓存模式 可选 localStorage sessionStorage
                 // state 中的字段名，按组打包储存
-                paths: ['text', 'age'] //需要缓存的字段 与 state中相关联
+                paths: ['token'] //需要缓存的字段 与 state中相关联
             }
         ]
     }
diff --git a/src/style/css/reset.css b/src/style/css/reset.css
index 2d5d266..d753df2 100644
--- a/src/style/css/reset.css
+++ b/src/style/css/reset.css
@@ -79,17 +79,17 @@ time,
 mark,
 audio,
 video {
-  margin: 0;
+    margin: 0;
 
-  padding: 0;
+    padding: 0;
 
-  border: 0;
+    border: 0;
 
-  font-size: 100%;
+    font-size: 100%;
 
-  font: inherit;
+    font: inherit;
 
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 
 /* HTML5 display-role reset for older browsers */
@@ -104,53 +104,53 @@ hgroup,
 menu,
 nav,
 section {
-  display: block;
+    display: block;
 }
 
 body {
-  line-height: 1;
+    line-height: 1;
 }
 
 ol,
 ul {
-  list-style: none;
+    list-style: none;
 }
 
 blockquote,
 q {
-  quotes: none;
+    quotes: none;
 }
 
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-  content: "";
+    content: '';
 
-  content: none;
+    content: none;
 }
 
 table {
-  border-collapse: collapse;
+    border-collapse: collapse;
 
-  border-spacing: 0;
+    border-spacing: 0;
 }
 
 #app {
-  width: 100vw;
-  /* height: 100vh; */
-  background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
+    width: 100vw;
+    /* height: 100vh; */
+    background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
 }
 
 .wapper {
-  width: 1200px;
-  margin: 0 auto;
+    width: 1200px;
+    margin: 0 auto;
 }
 
 body {
-  overflow-x: hidden;
+    overflow-x: hidden;
 }
 
 a {
-  text-decoration: none;
+    text-decoration: none;
 }
diff --git a/src/views/AppMain.vue b/src/views/AppMain.vue
new file mode 100644
index 0000000..8035a60
--- /dev/null
+++ b/src/views/AppMain.vue
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+    import FooterInfo from '../compontents/FooterInfo/index.vue'
+    const route = useRoute()
+
+    // 判断是否是个人中心页面 如果是则隐藏页脚
+    const isMyInfoPage = () => {
+        if (route.path.indexOf('myuser') === -1) {
+            return true
+        } else {
+            return false
+        }
+    }
+
+    // 搜索查询绑定值
+    const keywordIptValue = ref('')
+
+    // 输入框下方历史搜索记录
+    const searchHistoryList = ref([
+        { name: '220E履带挖掘机' },
+        { name: '3443挖掘机' },
+        { name: '塔式起重机' },
+        { name: '轮式牵引铲运机' }
+    ])
+
+    // 搜索按钮
+    const searchKeywordBtn = () => {
+        console.log('搜索关键字', keywordIptValue.value)
+    }
+
+    // 点击下方搜索记录时
+    const handleHistory = (hisValue: any) => {
+        keywordIptValue.value = hisValue
+    }
+
+    onMounted(() => {})
+</script>
+
+<template>
+    <div class="shop-header">
+        <div class="header-box">
+            <ul class="header-wapper">
+                <li>
+                    <span>
+                        <a href="">登录</a>
+                        /
+                        <a href="" style="color: #6d6d6d">注册</a>
+                    </span>
+                </li>
+                <li>
+                    <span @click="$router.push({ name: 'myuser' })">个人中心</span>
+                </li>
+                <li @click="$router.push('/collect')">
+                    <img src="./assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" />
+                    <span>收藏夹</span>
+                </li>
+                <li>
+                    <img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
+                    <span class="last-span">手机版</span>
+                </li>
+            </ul>
+        </div>
+
+        <!-- 菜单 -->
+        <div class="shop-menu-box">
+            <div class="shop-menu">
+                <div class="left-logo" @click="$router.push('/home')">
+                    <!-- 首页Logo -->
+                    <img
+                        src="@/assets/img/home/2023_12_01_beijing2/logo.png"
+                        alt="首页"
+                        title="首页" />
+                </div>
+                <input
+                    placeholder="输入设备关键词"
+                    type="text"
+                    v-model="keywordIptValue"
+                    @keydown.enter="searchKeywordBtn" />
+                <button class="search-btn" @click="searchKeywordBtn">搜索</button>
+                <div class="erweima">
+                    <div class="tilte">手机扫码登录</div>
+                    <img src="" alt="" />
+                </div>
+
+                <div class="ipt-down">
+                    <a
+                        @click="handleHistory(item.name)"
+                        v-for="item in searchHistoryList"
+                        :key="item.name">
+                        {{ item.name }}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <RouterView />
+    </div>
+    <FooterInfo v-if="isMyInfoPage()" />
+    <!-- <FooterInfo /> -->
+</template>
+
+<style scoped lang="scss">
+    .container {
+        width: 1200px;
+        margin: 0 auto;
+        overflow: hidden;
+        background: #ffffff;
+        border-radius: 30px;
+        padding: 20px 30px;
+        box-sizing: border-box;
+    }
+
+    .shop-header {
+        // height: 157px;
+        width: 100%;
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 999;
+
+        .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;
+
+                li {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 37px;
+                    cursor: pointer;
+                    margin-left: 20px;
+
+                    span {
+                        color: #6d6d6d;
+                        font-size: 14px;
+                        padding: 0 20px 0 3px;
+                        border-right: 1px solid #666655;
+
+                        &:hover {
+                            color: #2282ff;
+                        }
+
+                        a {
+                            text-decoration: none;
+                            color: #2282ff;
+                        }
+                    }
+
+                    .last-span {
+                        border: none;
+                        padding: 0;
+                    }
+                }
+            }
+        }
+
+        .shop-menu-box {
+            background-color: #edeef6;
+
+            .shop-menu {
+                position: relative;
+                width: 1200px;
+                height: 140px;
+                margin: 0 auto;
+                display: flex;
+                align-items: center;
+
+                .left-logo {
+                    color: #999999;
+                    font-weight: bold;
+                    font-size: 20px;
+
+                    img {
+                        width: 176px;
+                        height: 58px;
+                        cursor: pointer;
+                    }
+                }
+
+                input {
+                    width: 700px;
+                    height: 45px;
+                    border: 1px solid #5ca4ff;
+                    border-radius: 45px;
+                    margin-left: 70px;
+                    line-height: 45px;
+                    color: transparent;
+                    text-shadow: 0 0 0 #333;
+                    padding-left: 30px;
+                }
+
+                input:focus {
+                    outline: 1px solid #5ca4ff;
+                }
+
+                input::-webkit-input-placeholder {
+                    color: #949494;
+                }
+
+                .search-btn {
+                    width: 100px;
+                    height: 39px;
+                    transform: translateX(-110px);
+                    border-radius: 39px;
+                    background: linear-gradient(132deg, #6de7ff 0%, #348cff 100%);
+                    box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
+                    border: none;
+                    color: #fff;
+                    cursor: pointer;
+                    font-size: 18px;
+                }
+
+                .erweima {
+                    // display: none;
+                    width: 100px;
+                    height: 80px;
+                    margin-left: -20px;
+                    padding: 10px;
+                    background-color: #fff;
+
+                    .tilte {
+                        font-size: 14px;
+                        color: #1f88ff;
+                        text-align: center;
+                    }
+                }
+
+                .ipt-down {
+                    position: absolute;
+                    bottom: 20px;
+                    left: 22%;
+                    overflow: hidden;
+
+                    a {
+                        padding: 0 10px;
+                        color: #727272;
+                        font-size: 14px;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 877d71e..26f2c0d 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,7 +1,5 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
 
-</script>
+<template>首页</template>
 
-<template></template>
-
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..7786ebb
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="login-container">登录页</div>
+</template>
+
+<style>
+    .login-container {
+        height: 100vh;
+        /* background-color: skyblue; */
+    }
+</style>
diff --git a/src/views/collect/index.vue b/src/views/collect/index.vue
new file mode 100644
index 0000000..73d2393
--- /dev/null
+++ b/src/views/collect/index.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+    import { useRouter } from 'vue-router'
+    const router = useRouter()
+
+    const getImg = (imgUrl: string) => {
+        return new URL(imgUrl, import.meta.url).href
+    }
+    const collectList = ref([
+        {
+            v_collect_name: '出租17内燃式叉车',
+            v_collect_price: '12000元/月',
+            v_collect_adress: '浙江省嘉兴市',
+            v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
+        },
+        {
+            v_collect_name: '出租17内燃式叉车',
+            v_collect_price: '12000元/月',
+            v_collect_adress: '浙江省嘉兴市',
+            v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
+        },
+        {
+            v_collect_name: '出租17内燃式叉车',
+            v_collect_price: '12000元/月',
+            v_collect_adress: '浙江省嘉兴市',
+            v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
+        },
+        {
+            v_collect_name: '出租17内燃式叉车',
+            v_collect_price: '12000元/月',
+            v_collect_adress: '浙江省嘉兴市',
+            v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
+        },
+        {
+            v_collect_name: '出租17内燃式叉车',
+            v_collect_price: '12000元/月',
+            v_collect_adress: '浙江省嘉兴市',
+            v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
+        },
+        {
+            v_collect_name: '出租17内燃式叉车',
+            v_collect_price: '12000元/月',
+            v_collect_adress: '浙江省嘉兴市',
+            v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
+        },
+        {
+            v_collect_name: '出租17内燃式叉车',
+            v_collect_price: '12000元/月',
+            v_collect_adress: '浙江省嘉兴市',
+            v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
+        }
+    ])
+
+    //  查看设备详情
+    const previewCollectBtn = () => {
+        router.push('/equip/list')
+    }
+    // 删除设备收藏
+    const deleteCollect = (indx: any) => {
+        collectList.value.splice(indx, 1)
+    }
+</script>
+
+<template>
+    <!-- 收藏设备页面 -->
+    <div class="my-collect">
+        <div class="collect" v-for="(item, index) in collectList" :key="item.v_collect_name">
+            <!-- 商品图片 -->
+            <img :src="getImg(item.v_collect_imgsrc)" alt="" />
+            <div class="lifting-info">
+                <i>起重量：5吨</i>
+                <i>起重量：5吨</i>
+            </div>
+            <div class="collect-price">￥{{ item.v_collect_price }}</div>
+            <div class="collect-name">{{ item.v_collect_name }}</div>
+            <div class="collect-adress">{{ item.v_collect_adress }}</div>
+
+            <!-- 遮罩层 -->
+            <div class="collect-mask">
+                <div class="collect-mask-btn">
+                    <button @click="previewCollectBtn">查看设备</button>
+                    <button @click="deleteCollect(index)">删除收藏</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    .my-collect {
+        display: flex;
+        flex-wrap: wrap;
+        .collect {
+            position: relative;
+            height: 400px;
+            width: calc((100% - 60px) / 3);
+            margin: 0 20px 20px 0;
+
+            // 这里一行显示4个，所以是/4，一行显示几个就除以几
+            // 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整
+            min-width: calc((100% - 60px) / 3);
+            max-width: calc((100% - 60px) / 3);
+            // 每行最右侧的那个不设置右外边距
+            &:nth-child(3n + 3) {
+                margin-right: 0;
+            }
+            &:nth-child(3n + 1) {
+                margin-left: 10px;
+            }
+
+            img {
+                width: 100%;
+                height: 260px;
+            }
+
+            .lifting-info {
+                position: absolute;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                top: 220px;
+                left: 0;
+                width: 100%;
+                height: 40px;
+                background-color: #333;
+                opacity: 0.9;
+                color: #fff;
+                i {
+                    margin: 0 10px;
+                }
+            }
+
+            .collect-price {
+                height: 40px;
+                line-height: 40px;
+                text-align: right;
+                padding-right: 10px;
+                color: #e6165e;
+            }
+
+            .collect-name {
+                height: 60px;
+                line-height: 60px;
+                padding-left: 10px;
+                color: #333;
+            }
+
+            .collect-adress {
+                height: 30px;
+                padding-right: 10px;
+                line-height: 30px;
+                text-align: right;
+                color: #bdbebf;
+                font-size: 14px;
+            }
+
+            // 遮罩层
+            .collect-mask {
+                display: none;
+                position: absolute;
+                top: 0;
+                right: 0;
+                left: 0;
+                bottom: 0;
+                background-color: #333;
+                opacity: 0.7;
+
+                .collect-mask-btn {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: 100%;
+                    button {
+                        width: 50%;
+                        cursor: pointer;
+                        height: 47px;
+                        border: none;
+                        background-color: #14171f;
+                        color: #fff;
+                        font-size: 18px;
+                        &:first-child {
+                            border-right: 1px solid #fff;
+                            background-color: #ee3442;
+                        }
+                    }
+                }
+            }
+
+            &:hover {
+                transform: scale(1.03);
+                transition: 2s all;
+                .collect-mask {
+                    display: block;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/views/consultationDetails/index.vue b/src/views/consultationDetails/index.vue
new file mode 100644
index 0000000..9c2ef6f
--- /dev/null
+++ b/src/views/consultationDetails/index.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+    <!-- 咨询详情页面 -->
+    <div class="consultation-details">咨询详情页面(占位)</div>
+</template>
+
+<style>
+    .consultation-details {
+        color: #000;
+        background-color: skyblue;
+        height: 200px;
+    }
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ae3da78..2263651 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -168,6 +168,27 @@
     const handlerGoodsDetails = () => {
         console.log('去往商品详情页')
     }
+
+    const detailsList = ref([
+        {
+            v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
+            v_content_info:
+                '天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
+            v_time: '[2023/11/28]'
+        },
+        {
+            v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
+            v_content_info:
+                '天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
+            v_time: '[2023/11/28]'
+        },
+        {
+            v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
+            v_content_info:
+                '天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
+            v_time: '[2023/11/28]'
+        }
+    ])
 </script>
 
 <template>
@@ -255,34 +276,18 @@
 
                 <!--  右侧信息 -->
                 <div class="right-consult">
-                    <div class="consult-box">
+                    <div
+                        class="consult-box"
+                        @click="$router.push('/consultationDetails')"
+                        v-for="item in detailsList"
+                        :key="item.v_time">
                         <div class="consult-title">
-                            <h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
-                            <span>[2023/11/28]</span>
+                            <h2>{{ item.v_title }}</h2>
+                            <span>{{ item.v_time }}</span>
                         </div>
 
                         <div class="consult-info">
-                            天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
-                        </div>
-                    </div>
-                    <div class="consult-box">
-                        <div class="consult-title">
-                            <h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
-                            <span>[2023/11/28]</span>
-                        </div>
-
-                        <div class="consult-info">
-                            天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
-                        </div>
-                    </div>
-                    <div class="consult-box">
-                        <div class="consult-title">
-                            <h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
-                            <span>[2023/11/28]</span>
-                        </div>
-
-                        <div class="consult-info">
-                            天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
+                            {{ item.v_content_info }}
                         </div>
                     </div>
                 </div>
@@ -462,11 +467,13 @@
             .right-consult {
                 height: 210px;
                 flex: 1;
-                padding-left: 35px;
+                width: calc(100% - 340px);
+                // padding-left: 35px;
 
                 .consult-box {
                     height: 70px;
-
+                    padding-left: 15px;
+                    cursor: pointer;
                     .consult-title {
                         height: 30px;
                         display: flex;
diff --git a/src/views/user/baseInfo/index.vue b/src/views/user/baseInfo/index.vue
index a20d7df..c731f41 100644
--- a/src/views/user/baseInfo/index.vue
+++ b/src/views/user/baseInfo/index.vue
@@ -1,17 +1,86 @@
 <script setup lang="ts">
+    import { ElMessage, ElMessageBox } from 'element-plus'
+    // 旧手机号码
+    const oldPhoneNumber = ref('15336652321')
+    // 修改新手机号码的数据源
+    const editForm = ref({
+        v_phone: '13522222'
+    })
+    // 修改手机号码弹框显示隐藏
+    const editDialogTableVisible = ref(false)
+    // 修改手机号码按钮
+    const handlerEditMobilePhone = () => {
+        console.log('修改***')
+        editDialogTableVisible.value = true
+    }
+    // 修改弹框确定
+    const submitEditPhone = () => {
+        console.log('确定修改')
+        editDialogTableVisible.value = false
+    }
+    // 修改弹框关闭
+    const closeEditBtn = () => {
+        console.log('关闭修改')
+        editDialogTableVisible.value = false
+    }
+    // 注销按钮
+    const logoffClick = () => {
+        ElMessageBox.confirm('是否确定对账户进行注销', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        })
+            .then(() => {
+                ElMessage({
+                    type: 'success',
+                    message: '已注销'
+                })
+            })
+            .catch(() => {
+                ElMessage({
+                    type: 'info',
+                    message: '已取消'
+                })
+            })
+    }
+    // 订单信息
+    const orderInfoList = ref([
+        {
+            v_name: '已提交',
+            imgSrc: '../../../assets/img/home/2023_12_01_beijing2/fankuixinxi.png',
+            orderConunt: 1
+        },
+        {
+            v_name: '进行中',
+            imgSrc: '../../../assets/img/home/2023_12_01_beijing2/dingdanxinxi.png',
+            orderConunt: 1
+        },
+        {
+            v_name: '已完成',
+            imgSrc: '../../../assets/img/home/2023_12_01_beijing2/lishijishi.png',
+            orderConunt: 1
+        },
+        {
+            v_name: '全部订单',
+            imgSrc: '../../../assets/img/home/2023_12_01_beijing2/fuwuxiangmu.png',
+            orderConunt: 1
+        }
+    ])
 
+    const getImg = (imgUrl: string) => {
+        return new URL(imgUrl, import.meta.url).href
+    }
 </script>
 
 <template>
     <!-- 基础信息 -->
     <div class="base-info">
         <div class="title-info">
-            <div class="number-box">
-                13585990498
-            </div>
+            <div class="number-box">{{ oldPhoneNumber }}</div>
 
             <div class="user-name">
-                <span class="free-user active-user">免费用户</span>/
+                <span class="free-user active-user">免费用户</span>
+                /
                 <span class="standard-user">标准用户</span>
             </div>
 
@@ -20,15 +89,13 @@
                 <span class="enterprise-name">安徽博诺斯信息科技有限公司</span>
             </div>
 
-
-
             <div class="btn-edit">
-                <span>
-                    <EditPen style="width: 1em; height: 1em; "></EditPen>
+                <span @click="handlerEditMobilePhone">
+                    <EditPen style="width: 1em; height: 1em"></EditPen>
                     修改
                 </span>
-                <span>
-                    <SwitchButton style="width: 1em; height: 1em; " />
+                <span @click="logoffClick">
+                    <SwitchButton style="width: 1em; height: 1em" />
                     注销
                 </span>
             </div>
@@ -36,112 +103,118 @@
 
         <!-- 订单交易信息 -->
         <div class="goods-box">
-
-
             <ul class="goods-count">
-                <li>
-                    <img src="../../../assets/img/home/2023_12_01_beijing2/fankuixinxi.png" alt="">
-                    <span class="item">已提交</span>
-                    <span>0</span>
-                </li>
-                <li>
-                    <img src="../../../assets/img/home/2023_12_01_beijing2/dingdanxinxi.png" alt="">
-                    <span class="item">进行中</span>
-                    <span>0</span>
-                </li>
-                <li>
-                    <img src="../../../assets/img/home/2023_12_01_beijing2/lishijishi.png" alt="">
-                    <span class="item">已完成</span>
-                    <span>0</span>
-                </li>
-                <li>
-                    <img src="../../../assets/img/home/2023_12_01_beijing2/fuwuxiangmu.png" alt="">
-                    <span class="item">全部订单</span>
-                    <span>0</span>
+                <li v-for="item in orderInfoList" :key="item.v_name">
+                    <img :src="getImg(item.imgSrc)" alt="" />
+                    <span class="item">{{ item.v_name }}</span>
+                    <span>{{ item.orderConunt }}</span>
                 </li>
             </ul>
         </div>
+
+        <!-- 修改手机号码弹框 -->
+        <el-dialog v-model="editDialogTableVisible" title="修改手机号码" width="30%">
+            <el-form :model="editForm">
+                <el-form-item label="原手机号码">
+                    <el-input
+                        v-model="oldPhoneNumber"
+                        autocomplete="off"
+                        disabled
+                        style="width: 220px" />
+                </el-form-item>
+                <el-form-item label="新手机号码">
+                    <el-input
+                        v-model="editForm.v_phone"
+                        autocomplete="off"
+                        placeholder="请输入新手机号码"
+                        style="width: 220px" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="success" @click="submitEditPhone">确 定</el-button>
+                    <el-button type="warning" @click="closeEditBtn">关 闭</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
     </div>
 </template>
 
 <style lang="scss">
-.base-info {
-    width: 100%;
-    height: 100%;
-}
+    // .base-info {
+    //     width: 100%;
+    //     height: 100%;
+    // }
 
-
-.title-info {
-    height: 50px;
-    background-color: #f7f9fa;
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-
-    .number-box {
-        margin-left: 20px;
-        font-weight: bold;
-        color: #1B7EFF;
-    }
-
-    .user-name {
-        margin-left: 15px;
-        color: #1B7EFF;
-    }
-
-    .active-user {
-        color: #c8c9c9;
-    }
-
-    .my-enterprise {
-        font-size: 18px;
-        color: #1B7EFF;
-        margin-left: 20px;
-
-        .enterprise-name {
-            font-weight: bold;
-        }
-    }
-
-    .btn-edit {
-        margin-left: 60px;
+    .title-info {
+        height: 50px;
+        background-color: #f7f9fa;
+        border-radius: 10px;
         display: flex;
         align-items: center;
-        color: #c7c7c8;
 
-        span {
-            margin: 0 10px;
-            cursor: pointer;
+        .number-box {
+            margin-left: 20px;
+            font-weight: bold;
+            color: #1b7eff;
+        }
+
+        .user-name {
+            margin-left: 15px;
+            color: #1b7eff;
+        }
+
+        .active-user {
+            color: #c8c9c9;
+        }
+
+        .my-enterprise {
+            font-size: 18px;
+            color: #1b7eff;
+            margin-left: 20px;
+
+            .enterprise-name {
+                font-weight: bold;
+            }
+        }
+
+        .btn-edit {
+            margin-left: 60px;
             display: flex;
             align-items: center;
+            color: #c7c7c8;
+
+            span {
+                margin: 0 10px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+            }
         }
     }
-}
 
-.goods-count {
-    display: flex;
-    padding-top: 30px;
-
-    li {
-        width: 120px;
+    .goods-count {
         display: flex;
-        flex-direction: column;
-        align-items: center;
+        padding-top: 30px;
 
-        img {
-            width: 30px;
-            height: 30px;
+        li {
+            width: 120px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            img {
+                width: 30px;
+                height: 30px;
+            }
+
+            span:last-child {
+                margin-top: 20px;
+                font-size: 18px;
+            }
         }
 
-        span:last-child {
-            margin-top: 20px;
-            font-size: 18px;
+        .item {
+            color: #2282ff;
+            margin-top: 5px;
         }
     }
-
-    .item {
-        color: #2282FF;
-        margin-top: 5px;
-    }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/user/goodsManagement/index.vue b/src/views/user/goodsManagement/index.vue
index 1044e7f..e0a367a 100644
--- a/src/views/user/goodsManagement/index.vue
+++ b/src/views/user/goodsManagement/index.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
     import TableComponent from '@/compontents/TableComponent/index.vue'
     import FormComponent from '@/compontents/FormComponent/index.vue'
+    import PagingComponent from '../../../compontents/PagingComponent/index.vue'
     import { ref } from 'vue'
 
+    const pageSize = 20
+    const pageNumber = 1
+    const total: any = 20
+    // 获取数据列表
+    const getList = () => {
+        console.log('获取数据列表***')
+    }
+
     // 选择复选框时获取需要删除的数据源
     const getRowId = (val: any) => {
         console.log(val, '需要删除的数据源**')
@@ -149,6 +158,13 @@
         </template>
     </TableComponent>
 
+    <!-- 分页 -->
+    <PagingComponent
+        @getList="getList"
+        :pageSize="pageSize"
+        :pageNumber="pageNumber"
+        :total="total" />
+
     <!-- 装备入驻弹框 -->
     <el-dialog v-model="dialogFormVisibleSettlein" title="装备入驻" width="60%" align-center>
         <el-form label-width="160" ref="ruleFormRef" :model="ruleForm" :rules="rules">
diff --git a/src/views/user/goodsUpdown/index.vue b/src/views/user/goodsUpdown/index.vue
index 1b4d4be..39fcd0d 100644
--- a/src/views/user/goodsUpdown/index.vue
+++ b/src/views/user/goodsUpdown/index.vue
@@ -5,6 +5,13 @@
     import TableComponent from '@/compontents/TableComponent/index.vue'
     import FormComponent from '@/compontents/FormComponent/index.vue'
     import PagingComponent from '../../../compontents/PagingComponent/index.vue'
+    const pageSize = 20
+    const pageNumber = 1
+    const total: any = 20
+    // 获取数据列表
+    const getList = () => {
+        console.log('获取数据列表***')
+    }
 
     // 选择复选框时获取需要删除的数据源
     const getRowId = (val: any) => {
@@ -121,7 +128,11 @@
         </template>
     </TableComponent>
 
-    <PagingComponent />
+    <PagingComponent
+        @getList="getList"
+        :pageSize="pageSize"
+        :pageNumber="pageNumber"
+        :total="total" />
 </template>
 
 <style>
diff --git a/src/views/user/operatorManagement/index.vue b/src/views/user/operatorManagement/index.vue
index dd1e679..636462f 100644
--- a/src/views/user/operatorManagement/index.vue
+++ b/src/views/user/operatorManagement/index.vue
@@ -1,45 +1,55 @@
 <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: '合肥市蜀山区',
-    },
-]
+    import { ref } from 'vue'
+    const queryParams = ref({})
+    import PagingComponent from '../../../compontents/PagingComponent/index.vue'
+    const pageSize = 20
+    const pageNumber = 1
+    const total: any = 20
+    // 获取数据列表
+    const getList = () => {
+        console.log('获取数据列表***')
+    }
+    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" label-width="auto" size="small">
-
         <el-form-item>
             <el-button type="primary">新增</el-button>
         </el-form-item>
     </el-form>
 
     <!-- 表格 -->
-    <el-table :data="tableData" style="width: 100%" :header-cell-style="{
-        background: '#3E98FF', color: '#fff'
-    }">
+    <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{
+            background: '#3E98FF',
+            color: '#fff'
+        }">
         <el-table-column align="center" prop="name" label="机手姓名" />
         <el-table-column align="center" prop="name" label="机手电话" />
         <el-table-column align="center" prop="date" label="年龄" />
@@ -52,10 +62,16 @@ const tableData = [
             </template>
         </el-table-column>
     </el-table>
+
+    <PagingComponent
+        @getList="getList"
+        :pageSize="pageSize"
+        :pageNumber="pageNumber"
+        :total="total" />
 </template>
 
 <style>
-.el-form {
-    margin: 15px 0;
-}
-</style>
\ No newline at end of file
+    .el-form {
+        margin: 15px 0;
+    }
+</style>
diff --git a/src/views/user/orderManagement/index.vue b/src/views/user/orderManagement/index.vue
index c01f535..31fd377 100644
--- a/src/views/user/orderManagement/index.vue
+++ b/src/views/user/orderManagement/index.vue
@@ -1,29 +1,37 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-const queryParams = ref({})
+    import { ref } from 'vue'
+    const queryParams = ref({})
+    import PagingComponent from '../../../compontents/PagingComponent/index.vue'
+    const pageSize = 20
+    const pageNumber = 1
+    const total: any = 20
+    // 获取数据列表
+    const getList = () => {
+        console.log('获取数据列表***')
+    }
 
-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: '合肥市蜀山区',
-    },
-]
+    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>
@@ -46,17 +54,19 @@ const tableData = [
             <el-input />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary">
-                查询
-            </el-button>
+            <el-button type="primary">查询</el-button>
             <el-button type="success">保存</el-button>
         </el-form-item>
     </el-form>
 
     <!-- 表格 -->
-    <el-table :data="tableData" style="width: 100%" :header-cell-style="{
-        background: '#3E98FF', color: '#fff'
-    }">
+    <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{
+            background: '#3E98FF',
+            color: '#fff'
+        }">
         <el-table-column align="center" prop="name" label="订单编号" />
         <el-table-column align="center" prop="name" label="供应商" />
         <el-table-column align="center" prop="date" label="订单创建日期" />
@@ -65,16 +75,22 @@ const tableData = [
         <el-table-column align="center" prop="name" label="订单状态" />
         <el-table-column align="center" prop="name" label="操作" width="260px">
             <template #default="scope">
-                <el-button size="small" type="primary">确认</el-button>
+                <el-button size="small" type="primary">退租</el-button>
                 <el-button size="small" type="success">查看</el-button>
-                <el-button size="small" type="danger">删除</el-button>
+                <el-button size="small" type="danger">续租</el-button>
             </template>
         </el-table-column>
     </el-table>
+
+    <PagingComponent
+        @getList="getList"
+        :pageSize="pageSize"
+        :pageNumber="pageNumber"
+        :total="total" />
 </template>
 
 <style>
-.el-form {
-    margin: 15px 0;
-}
-</style>
\ No newline at end of file
+    .el-form {
+        margin: 15px 0;
+    }
+</style>
diff --git a/src/views/user/orderManagementCz/index.vue b/src/views/user/orderManagementCz/index.vue
index 7aac420..886721a 100644
--- a/src/views/user/orderManagementCz/index.vue
+++ b/src/views/user/orderManagementCz/index.vue
@@ -1,29 +1,37 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-const queryParams = ref({})
+    import { ref } from 'vue'
+    const queryParams = ref({})
+    import PagingComponent from '../../../compontents/PagingComponent/index.vue'
+    const pageSize = 20
+    const pageNumber = 1
+    const total: any = 20
+    // 获取数据列表
+    const getList = () => {
+        console.log('获取数据列表***')
+    }
 
-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: '合肥市蜀山区',
-    },
-]
+    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>
@@ -52,9 +60,13 @@ const tableData = [
     </el-form>
 
     <!-- 表格 -->
-    <el-table :data="tableData" style="width: 100%" :header-cell-style="{
-        background: '#3E98FF', color: '#fff'
-    }">
+    <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{
+            background: '#3E98FF',
+            color: '#fff'
+        }">
         <el-table-column align="center" prop="name" label="订单编号" />
         <el-table-column align="center" prop="address" label="客户单位" />
         <el-table-column align="center" prop="date" label="订单创建日期" />
@@ -70,10 +82,15 @@ const tableData = [
             </template>
         </el-table-column>
     </el-table>
+    <PagingComponent
+        @getList="getList"
+        :pageSize="pageSize"
+        :pageNumber="pageNumber"
+        :total="total" />
 </template>
 
 <style>
-.el-form {
-    margin: 15px 0;
-}
-</style>
\ No newline at end of file
+    .el-form {
+        margin: 15px 0;
+    }
+</style>
diff --git a/src/views/user/subAccount/index.vue b/src/views/user/subAccount/index.vue
index fda53e3..a9643cb 100644
--- a/src/views/user/subAccount/index.vue
+++ b/src/views/user/subAccount/index.vue
@@ -1,29 +1,45 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-const queryParams = ref({})
+    import { ref } from 'vue'
+    const queryParams = ref({})
+    import PagingComponent from '../../../compontents/PagingComponent/index.vue'
+    const pageSize = 20
+    const pageNumber = 1
+    const total: any = 20
+    // 获取数据列表
+    const getList = () => {
+        console.log('获取数据列表***')
+    }
+    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: '否'
+        }
+    ]
 
-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: '否',
-    },
-]
+    // 新增框的显示隐藏
+    const addSubAccountdialogVisible = ref(false)
+
+    // 新增按钮
+    const addSubAccount = () => {
+        console.log('新增')
+        addSubAccountdialogVisible.value = true
+    }
 </script>
 
 <template>
@@ -31,14 +47,18 @@ const tableData = [
 
     <el-form :model="queryParams" :inline="true" label-width="auto" size="small">
         <el-form-item>
-            <el-button type="primary">新增</el-button>
+            <el-button type="primary" @click="addSubAccount">新增</el-button>
         </el-form-item>
     </el-form>
 
     <!-- 表格 -->
-    <el-table :data="tableData" style="width: 100%" :header-cell-style="{
-        background: '#3E98FF', color: '#fff'
-    }">
+    <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{
+            background: '#3E98FF',
+            color: '#fff'
+        }">
         <el-table-column align="center" prop="name" label="手机号" />
         <el-table-column align="center" prop="name" label="用户名" />
         <el-table-column align="center" prop="date" label="创建时间" />
@@ -49,10 +69,33 @@ const tableData = [
             </template>
         </el-table-column>
     </el-table>
+
+    <PagingComponent
+        @getList="getList"
+        :pageSize="pageSize"
+        :pageNumber="pageNumber"
+        :total="total" />
+
+    <!-- 新增子账号弹框 -->
+    <el-dialog v-model="addSubAccountdialogVisible" title="新增子账号" width="30%">
+        <el-form>
+            <el-form-item label="手机号">
+                <el-input autocomplete="off" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="addSubAccountdialogVisible = false">确 定</el-button>
+                <el-button type="primary" @click="addSubAccountdialogVisible = false">
+                    取 消
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
 </template>
 
 <style>
-.el-form {
-    margin: 15px 0;
-}
-</style>
\ No newline at end of file
+    .el-form {
+        margin: 15px 0;
+    }
+</style>