diff --git a/src/router/index.ts b/src/router/index.ts
index b5c1669..67e2796 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import test from './module/test'
 import myInfo from './module/myInfo'
 
@@ -80,7 +81,7 @@ const routes: Array<RouteRecordRaw> = [
             {
                 path: '/equipList',
                 name: 'equipList',
-                component: () => import('views/equip/list.vue'),
+                component: () => import('@/views/equip/list.vue'),
                 meta: {
                     title: ''
                 }
diff --git a/src/views/AppMain.vue b/src/views/AppMain.vue
index 8f192ff..f6b8538 100644
--- a/src/views/AppMain.vue
+++ b/src/views/AppMain.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-    import FooterInfo from 'components/FooterInfo/index.vue'
-    import { useRouter } from 'vue-router'
+    import FooterInfo from '../components/FooterInfo/index.vue'
+    import {useRouter} from "vue-router";
+    import $bus from "@/utils/bus"
+    const route = useRoute()
     const router = useRouter()
-    const route: any = useRoute()
-
-    const searchIptRef: any = shallowRef(null)
-
     // 判断是否是个人中心页面 如果是则隐藏页脚
     const isMyInfoPage = () => {
         if (route.path.indexOf('myuser') === -1) {
@@ -27,19 +25,32 @@
     ])
 
     // 搜索按钮
-    const searchKeywordBtn = () => {
-        console.log('搜索关键字', keywordIptValue.value)
+    const searchKeywordBtn = (e) => {
+        if(route.path == '/equipList'){
+            $bus.emit('search',keywordIptValue.value)
+        }else {
+            router.push({
+                name:'equipList',
+                state:{keyWord: keywordIptValue.value}
+            })
+        }
     }
 
     // 点击下方搜索记录时
     const handleHistory = (hisValue: any) => {
         keywordIptValue.value = hisValue
-        nextTick(() => {
-            searchIptRef.value.focus()
-        })
     }
+    //页面刷新回显模糊搜索词
+    $bus.on('callBackText',(val) => {
+        nextTick(() => {
+            keywordIptValue.value = val
+        })
+    })
 
-    onMounted(() => {})
+
+    onMounted(() => {
+
+    })
 </script>
 
 <template>
@@ -57,11 +68,11 @@
                     <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="" />
+                    <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="" />
+                    <img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
                     <span class="last-span">手机版</span>
                 </li>
             </ul>
@@ -81,8 +92,7 @@
                     placeholder="输入设备关键词"
                     type="text"
                     v-model="keywordIptValue"
-                    @keydown.enter="searchKeywordBtn"
-                    ref="searchIptRef" />
+                    @keydown.enter="searchKeywordBtn" />
                 <button class="search-btn" @click="searchKeywordBtn">搜索</button>
                 <div class="erweima">
                     <div class="tilte">手机扫码登录</div>
@@ -105,6 +115,7 @@
         <RouterView />
     </div>
     <FooterInfo v-if="isMyInfoPage()" />
+    <!-- <FooterInfo /> -->
 </template>
 
 <style scoped lang="scss">
diff --git a/src/views/equip/comoonents/showImg.vue b/src/views/equip/comoonents/showImg.vue
index 62fdb63..438aa40 100644
--- a/src/views/equip/comoonents/showImg.vue
+++ b/src/views/equip/comoonents/showImg.vue
@@ -8,7 +8,7 @@
                 <el-icon><ArrowLeftBold /></el-icon>
             </div>
             <div class="list">
-                <div class="line" :style="`transform: translateX(calc((-100% - 10px) / 3 * ${activeUrl - 3}))`">
+                <div class="line" :style="`transform: translateX(calc((-100% - 10px) / 3 * ${move}))`">
                     <div class="item" @mouseenter="mouseenter($event,i)" :class="i == activeUrl && 'activeUrl'" v-for="(v,i) in urlList" :key="i">
                         <img :src="v">
                     </div>
@@ -22,22 +22,26 @@
 </template>
 <script lang="ts" setup>
   import {ref} from "vue";
+  import {el} from "element-plus/es/locale";
 
   const props = defineProps({
       urlList:{
           type:Array,
           default: [
-              'https://img0.baidu.com/it/u=4159562347,2163772228&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=e00e9ffd17009de0374cfc7769143ff6',
-              'https://img1.baidu.com/it/u=2080801041,3349735074&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=5e131c7f2b0d5b02b9e82c0180b62fa8',
-              'https://img0.baidu.com/it/u=1302187753,1022585962&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=13ebea0b989899b3b933c19938b23f76',
-              'https://img0.baidu.com/it/u=2453512896,179623672&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
           ]
       }
   })
 
   //激活图片下标
   const activeUrl = ref(0)
-    
+
+  //展示  起始
+  const startIndex = ref(0)
+  //展示  结束
+  const endIndex = ref(2)
+  //移动
+  const move = ref(0)
+
   const init = () => {
 
   }
@@ -54,6 +58,11 @@
       }else if(activeUrl.value == props.urlList?.length){
           activeUrl.value = props.urlList.length - 1
       }
+      if(activeUrl.value > endIndex.value || activeUrl.value < startIndex.value){
+          endIndex.value = endIndex.value + val
+          startIndex.value = startIndex.value + val
+          move.value = move.value + val
+      }
   }
 
 </script>
@@ -101,6 +110,7 @@
             height: 100%;
             display: flex;
             align-items: center;
+            transition: all ease 0.5s;
         }
         .item{
             height: 100%;
diff --git a/src/views/equip/detail.vue b/src/views/equip/detail.vue
index 5749896..11790e0 100644
--- a/src/views/equip/detail.vue
+++ b/src/views/equip/detail.vue
@@ -1,52 +1,69 @@
 <template>
+    <Navmenu></Navmenu>
     <div class="equipDetail">
         <div class="top">
             <div class="showImg">
-                <showImg></showImg>
+                <showImg :url-list="pageData.pictures || []"></showImg>
             </div>
             <div class="baseInfo">
                 <div class="equipInfo">
                     <div class="left">
                         <div class="title">
-                            <div class="name">220El履带挖掘机</div>
+                            <div class="name">{{ pageData.modelName }}{{ pageData.deviceName }}</div>
                             <div class="tag">
-                                <div class="item">待租</div>
-                                <div class="item otherItem">已审核</div>
+                                <div class="item">{{ pageData.maStatus }}</div>
+                                <div class="item otherItem" v-if="pageData.isAudit == 1">已审核</div>
                             </div>
                         </div>
-                        <div class="viewNnum">浏览1000+</div>
+                        <div class="viewNnum">浏览{{pageData.searchNum}}</div>
                         <div class="infoBox">
                             <div class="item" v-for="(v, i) in equipBaseInfoList" :key="i">
                                 <div class="label">{{ v.label }}：</div>
-                                <div class="value">操作重量：22吨 铲斗容量：1立方亩</div>
+                                <div class="value">{{
+                                    v.key.split(',').map(key => {
+                                      return pageData[key]
+                                    }).join('')
+                                    }}
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="right">
-                        <div class="price">
-                            ￥
-                            <span>18500</span>
-                            /月
+                        <div class="Top">
+                            <div class="price">
+                                ￥
+                                <span>{{ pageData.monthLeasePrice }}</span>
+                                /月
+                            </div>
+                            <div class="collect" @click="collectChange">
+                                <el-icon class="no" v-show="!isCollect">
+                                    <Star/>
+                                </el-icon>
+                                <el-icon class="yes" v-show="isCollect">
+                                    <StarFilled/>
+                                </el-icon>
+                                {{ isCollect ? '装备已收藏' : '收藏装备' }}
+                            </div>
                         </div>
                         <div class="options">
                             <div class="item contact">联系商家</div>
-                            <div class="item applyFor">我要租</div>
+                            <div class="item applyFor" @click="openLease">我要租</div>
                         </div>
                     </div>
                 </div>
                 <div class="businessInfo">
-                    <img class="bgCar" src="@/assets/img/equipDetail/gouwu.png" />
+                    <img class="bgCar" src="@/assets/img/equipDetail/gouwu.png"/>
 
                     <div class="business">
                         <img
-                            src="https://img0.baidu.com/it/u=3896113677,3541736724&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=0b8dabbcda79511d6d18aaed664132fd"
-                            class="avatar" />
+                                :src="pageData.companyLogoUrl"
+                                class="avatar"/>
                         <div class="fonts">
-                            <div class="name">珠海嘉昌设备有限责任公司</div>
+                            <div class="name">{{ pageData.companyName }}</div>
                             <div class="other">
                                 <div class="item" v-for="(v, i) in businessList" :key="i">
                                     <div class="label">{{ v.label }}：</div>
-                                    <div class="value">111111111{{ v.key }}{{ v.unit }}</div>
+                                    <div class="value">{{ pageData[v.key] }}{{ v.unit }}</div>
                                 </div>
                             </div>
                         </div>
@@ -61,7 +78,10 @@
             <div class="list publicContent">
                 <div class="item" v-for="(v, i) in equipDetailKeyList" :key="i">
                     <div class="label">{{ v.label }}：</div>
-                    <div :class="v.fn ? 'fnValue' : 'value'">111111111111</div>
+                    <div :class="v.fn ? 'fnValue' : 'value'" @click="handelDetailListClick(v.fn,pageData[v.arg])">{{
+                        pageData[v.key]
+                        }}
+                    </div>
                 </div>
             </div>
         </div>
@@ -69,7 +89,7 @@
             <div class="publicTitle">装备外观</div>
             <div class="publicLine"></div>
             <div class="urlList publicContent">
-                <img :src="v" v-for="(v, i) in testUrl" :key="i" />
+                <img :src="v" v-for="(v, i) in (pageData.pictures || [])" :key="i"/>
             </div>
         </div>
         <div class="recommend">
@@ -82,402 +102,644 @@
                 <equip-card class="item" v-for="(v, i) in 3" :key="i" :id="i"></equip-card>
             </div>
         </div>
+
+        <el-dialog
+                v-model="dialoglease"
+                title="填写租赁信息"
+                lock-scroll
+                width="60%"
+        >
+            <el-config-provider :locale="zhCn">
+                <el-form
+                    ref="ruleFormRef"
+                    :model="ruleForm"
+                    :rules="rules"
+                    label-width="120px"
+                    class="demo-ruleForm"
+                    status-icon
+                >
+
+                    <el-row>
+                        <el-col :span="15">
+                            <el-form-item label="设备进场地址" prop="address">
+                                <el-input placeholder="请输入地址" v-model="ruleForm.address"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="15">
+                            <el-form-item label="详细地址" prop="detailAddress">
+                                <el-input placeholder="请输入地址" v-model="ruleForm.detailAddress"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="15">
+                            <el-form-item label="进场时间" prop="entryTime">
+                                <el-date-picker
+                                    v-model="ruleForm.entryTime"
+                                    type="date"
+                                    placeholder="请选择"
+                                />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="15">
+                            <el-form-item label="工期时长" prop="duration">
+                                <el-input placeholder="请输入地址" v-model="ruleForm.duration"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="7">
+                            <el-form-item label="是否需要机手" prop="machinist">
+                                <el-radio-group v-model="ruleForm.machinist">
+                                    <el-radio-button :label="1" :disabled="!pageData.isOperator">
+                                        是
+                                    </el-radio-button>
+                                    <el-radio-button :label="0" >
+                                        否
+                                    </el-radio-button>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="发票类型" prop="invoiceType">
+                                <el-radio-group v-model="ruleForm.invoiceType">
+                                    <el-radio-button :label="0" >
+                                        不需要
+                                    </el-radio-button>
+                                    <el-radio-button :label="1" >
+                                        增值税普票
+                                    </el-radio-button>
+                                    <el-radio-button :label="2" >
+                                        增值税专票
+                                    </el-radio-button>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="15">
+                            <el-form-item label="项目说明" prop="projectDescription">
+                                <el-input placeholder="请填写项目说明" type="textarea" v-model="ruleForm.projectDescription"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <el-table :data="[pageData]" border style="width: 100%">
+                    <el-table-column prop="date" label="装备" width="180" >
+
+                    </el-table-column>
+                    <el-table-column prop="name" label="租金" width="180" />
+                    <el-table-column prop="address" label="供应商" />
+                </el-table>
+            </el-config-provider>
+
+            <template #footer>
+                  <span class="dialog-footer">
+                    <el-button type="primary" @click="dialoglease = false">
+                      提交
+                    </el-button>
+                  </span>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script lang="ts" setup>
-    import ShowImg from './comoonents/showImg.vue'
-    import { reactive, ref } from 'vue'
-    import EquipCard from 'components/equipCard.vue'
+import ShowImg from './comoonents/showImg.vue'
+import {reactive, ref} from 'vue'
+import EquipCard from 'components/equipCard.vue'
+import {getDetail} from "@/http/api/equip"
+import {useRoute} from "vue-router";
+import Navmenu from '@/components/Navmenu/index.vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
-    //设备简略基本信息
-    const equipBaseInfoList = reactive([
-        {
-            label: '设备规格',
-            key: ''
-        },
-        {
-            label: '设备单位',
-            key: ''
-        },
-        {
-            label: '配备机手',
-            key: ''
-        },
-        {
-            label: '发布时间',
-            key: ''
-        },
-        {
-            label: '更新时间',
-            key: ''
-        }
-    ])
-    //商家标签信息
-    const businessList = reactive([
-        {
-            label: '入驻时间',
-            key: '',
-            unit: ''
-        },
-        {
-            label: '上架数量',
-            key: '',
-            unit: ''
-        },
-        {
-            label: '访问量',
-            key: '',
-            unit: '次'
-        }
-    ])
+const route = useRoute()
 
-    const equipDetailKeyList = reactive([
-        {
-            label: '装备编号',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '装备类别',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '装备组别',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '装备名称',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '规格/操作重量',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '品牌',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '装备型号',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '序列号码',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '出场时间',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '工作时长',
-            key: '',
-            fn: '',
-            arg: ''
-        },
-        {
-            label: '检验信息',
-            key: '',
-            fn: '1',
-            arg: ''
-        },
-        {
-            label: '保险信息',
-            key: '',
-            fn: '2',
-            arg: ''
-        }
-    ])
-
-    const testUrl = [
-        'https://img0.baidu.com/it/u=3182669744,3015526205&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
-        'https://img2.baidu.com/it/u=2078785911,1809964779&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500',
-        'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
-    ]
-
-    const fn = () => {
-        console.log('fn 111111111111111111111')
+const pageParams = route.params
+//设备简略基本信息
+const equipBaseInfoList = reactive([
+    {
+        label: '设备规格',
+        key: 'specification'
+    },
+    {
+        label: '设备单位',
+        key: 'companyName'
+    },
+    {
+        label: '配备机手',
+        key: 'isOperatorCn'
+    },
+    {
+        label: '发布时间',
+        key: 'createTime'
+    },
+    {
+        label: '更新时间',
+        key: 'updateTime'
     }
-
-    const that = {
-        fn
+])
+//商家标签信息
+const businessList = reactive([
+    {
+        label: '入驻时间',
+        key: 'companyCreateTime',
+        unit: ''
+    },
+    {
+        label: '上架数量',
+        key: 'companyUpNum',
+        unit: '台'
     }
+])
+
+//装备详情数据map
+const equipDetailKeyList = reactive([
+    {
+        label: '装备编号',
+        key: 'code',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '装备类别',
+        key: 'typeName',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '装备组别',
+        key: 'groupName',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '装备名称',
+        key: 'deviceName',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '规格/操作重量',
+        key: 'specification',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '品牌',
+        key: 'brand',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '装备型号',
+        key: 'modelName',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '序列号码',
+        key: 'serialNumber',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '出场时间',
+        key: 'productionDate',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '工作时长',
+        key: 'workingHours',
+        fn: '',
+        arg: ''
+    },
+    {
+        label: '检验信息',
+        key: 'look',
+        fn: 'openPdf',
+        arg: 'examinationPdf'
+    },
+    {
+        label: '保险信息',
+        key: 'look',
+        fn: 'openPdf',
+        arg: 'insurancePdf'
+    }
+])
+
+//
+
+
+//装备详情数据
+const pageData = ref({})
+
+//
+const dialoglease = ref(false)
+
+//装备收藏状态
+const isCollect = ref(false)
+
+//我要租 表单数据
+const ruleForm = ref({
+    address:'',//进场地址
+    detailAddress:'',//详细地址
+    entryTime:'',//进场时间
+    duration:'',//工期时长
+    machinist:0,//是否需要机手
+    invoiceType:0,//发票类型
+    projectDescription:''//项目说明
+})
+const rules = reactive({
+    address:[
+        {required: true, message: '请输入进场地址', trigger: 'blur'}
+    ],
+    detailAddress:[
+        {required: true, message: '请输入详细地址', trigger: 'blur'}
+    ],
+    entryTime:[
+        {required: true, message: '请选择进场时间', trigger: 'blur'}
+    ],
+    duration:[
+        {required: true, message: '请输入工期时长', trigger: 'blur'}
+    ],
+    machinist:[
+        {required: true, message: '请输入进场地址', trigger: 'blur'}
+    ],
+    invoiceType:[
+        {required: true, message: '请输入进场地址', trigger: 'blur'}
+    ],
+    projectDescription:[
+        {required: true, message: '请输入项目说明', trigger: 'blur'}
+    ],
+})
+//打开我要租表单
+const openLease = () => {
+
+    dialoglease.value = true
+}
+//切换收藏状态
+const collectChange = () => {
+    isCollect.value = !isCollect.value
+}
+const openPdf = (name) => {
+    window.open(name)
+}
+const that = {
+    openPdf
+}
+
+const handelDetailListClick = (fnName,arg) => {
+    if(fnName){
+        that[fnName](arg)
+    }
+}
+
+//获取页面数据
+const getData = async () => {
+    const res = await getDetail(pageParams.id)
+    res.data.isOperatorCn = res.data.isOperator ? '是' : '否'
+    res.data.look = '点击查看'
+    isCollect.value = res.data.collectId ? true : false
+    pageData.value = res.data
+    console.log(pageData.value)
+}
+const init = () => {
+    getData()
+}
+init()
 </script>
 <style scoped lang="scss">
-    .equipDetail {
-        .top {
-            display: flex;
-            margin-bottom: 50px;
-            .showImg {
-                width: 38%;
-                border-radius: 15px;
-                overflow: hidden;
-                margin-right: 30px;
-            }
-            .baseInfo {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                .equipInfo {
-                    display: flex;
-                    .left {
-                        margin-right: 5px;
-                        .title {
-                            display: flex;
-                            align-items: center;
-                            .name {
-                                font-size: 24px;
-                                font-family: PingFangSC, PingFang SC;
-                                font-weight: 600;
-                                color: #000000;
-                            }
-                            .tag {
-                                display: flex;
-                                align-items: center;
-                                .item {
-                                    font-size: 13px;
-                                    font-family: PingFangSC, PingFang SC;
-                                    font-weight: 400;
-                                    color: #005af2;
-                                    margin-left: 15px;
-                                    padding: 2px 10px;
-                                    border: 1px solid #005af2;
-                                    border-radius: 4px;
-                                }
-                                .otherItem {
-                                    border-color: #ff6734;
-                                    color: #ff6734;
-                                }
-                            }
-                        }
-                        .viewNnum {
-                            font-size: 13px;
-                            font-family: PingFangSC, PingFang SC;
-                            font-weight: 500;
-                            color: #bcbcbc;
-                            margin-top: 10px;
-                        }
-                        .infoBox {
-                            margin-top: 20px;
-                            .item {
-                                display: flex;
-                                align-items: center;
-                                margin-bottom: 18px;
-                                .label {
-                                    font-size: 15px;
-                                    font-family: PingFangSC, PingFang SC;
-                                    font-weight: 600;
-                                    color: #8e8e8e;
-                                    margin-right: 15px;
-                                }
-                                .value {
-                                    font-size: 15px;
-                                    font-family: PingFangSC, PingFang SC;
-                                    font-weight: 600;
-                                    color: #333333;
-                                }
-                            }
-                        }
-                    }
-                    .right {
-                        flex: 1;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-between;
-                        .price {
-                            font-size: 15px;
-                            font-weight: 500;
-                            font-family: PingFangSC, PingFang SC;
-                            color: #ff4800;
-                            text-align: right;
-                            span {
-                                font-size: 30px;
-                                font-weight: 600;
-                            }
-                        }
-                        .options {
-                            display: flex;
-                            justify-content: flex-end;
+:deep() .el-form-item{
+    display: flex;
+    width: 100%;
+    .el-form-item__content{
+        flex: 1;
+    }
+}
 
-                            .item {
-                                width: 110px;
-                                height: 40px;
-                                line-height: 40px;
-                                border-radius: 4px;
-                                font-size: 18px;
-                                font-weight: 600;
-                                text-align: center;
-                            }
-                            .contact {
-                                color: #ffffff;
-                                background: #3cabff;
-                                margin-right: 20px;
-                            }
-                            .applyFor {
-                                border: 1px solid #3cabff;
-                                color: #3cabff;
-                                box-sizing: border-box;
-                                line-height: 38px;
-                            }
-                        }
-                    }
-                }
-                .businessInfo {
-                    width: 100%;
-                    height: 147px;
-                    background: #f7f9fa;
-                    border-radius: 15px;
-                    position: relative;
-                    box-sizing: border-box;
-                    padding: 25px 15px;
-                    .bgCar {
-                        position: absolute;
-                        top: 0;
-                        right: 0;
-                        height: 100%;
-                        z-index: 0;
-                    }
+.equipDetail {
+    user-select: none;
+    margin-top: 20px;
+  .top {
+    display: flex;
+    margin-bottom: 50px;
 
-                    .business {
-                        display: flex;
-                        align-items: center;
-                        .avatar {
-                            width: 65px;
-                            height: 65px;
-                            border-radius: 100%;
-                            margin-right: 10px;
-                        }
-                        .fonts {
-                            .name {
-                                font-size: 20px;
-                                font-family: PingFangSC, PingFang SC;
-                                font-weight: 600;
-                                color: #333333;
-                                margin-bottom: 12px;
-                            }
-                            .other {
-                                display: flex;
-                                .item {
-                                    font-size: 14px;
-                                    font-family: PingFangSC, PingFang SC;
-                                    font-weight: 400;
-                                    color: #333333;
-                                    display: flex;
-                                    margin-right: 15px;
-                                    .label {
-                                    }
-                                    .value {
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
+    .showImg {
+      width: 38%;
+      border-radius: 15px;
+      overflow: hidden;
+      margin-right: 30px;
+    }
 
-        .publicTitle {
-            font-size: 20px;
-            font-family: PingFangSC, PingFang SC;
-            font-weight: 600;
-            color: #333333;
+    .baseInfo {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
 
+      .equipInfo {
+        display: flex;
+
+        .left {
+          margin-right: 5px;
+
+          .title {
             display: flex;
             align-items: center;
-            justify-content: space-between;
-        }
-        .publicLine {
-            width: 100%;
-            height: 12px;
-            border-bottom: 1px solid #e0e0e0;
-            position: relative;
-            &:before {
-                content: '';
-                height: 3px;
-                width: 40px;
-                background: #2282ff;
-                border-radius: 2px;
-                position: absolute;
-                bottom: -1px;
-                left: 20px;
-            }
-        }
-        .publicContent {
-            box-sizing: border-box;
-            padding: 40px 70px 10px;
-        }
 
-        .detail {
-            .list {
-                display: flex;
-                flex-wrap: wrap;
-                .item {
-                    width: calc(100% / 3);
-                    font-size: 16px;
-                    font-family: PingFangSC, PingFang SC;
-                    font-weight: 600;
-                    display: flex;
-                    margin-bottom: 35px;
-                    .label {
-                        color: #8e8e8e;
-                    }
-                    .value {
-                        color: #333333;
-                    }
-                    .fnValue {
-                        color: #0087cd;
-                    }
-                }
+            .name {
+              font-size: 24px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 600;
+              color: #000000;
             }
-        }
 
-        .appearance {
-            margin-bottom: 20px;
-            .urlList {
-                img {
-                    width: 100%;
-                }
+            .tag {
+              display: flex;
+              align-items: center;
+
+              .item {
+                font-size: 13px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                color: #005af2;
+                margin-left: 15px;
+                padding: 2px 10px;
+                border: 1px solid #005af2;
+                border-radius: 4px;
+              }
+
+              .otherItem {
+                border-color: #ff6734;
+                color: #ff6734;
+              }
             }
-        }
+          }
 
-        .recommend {
-            .change {
+          .viewNnum {
+            font-size: 13px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 500;
+            color: #bcbcbc;
+            margin-top: 10px;
+          }
+
+          .infoBox {
+            margin-top: 20px;
+
+            .item {
+              display: flex;
+              align-items: center;
+              margin-bottom: 18px;
+
+              .label {
+                font-size: 15px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 600;
+                color: #8e8e8e;
+                margin-right: 15px;
+              }
+
+              .value {
                 font-size: 14px;
                 font-family: PingFangSC, PingFang SC;
-                font-weight: 500;
-                color: #9d9d9d;
-                cursor: pointer;
+                color: #333333;
+              }
+            }
+          }
+        }
+
+        .right {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .collect {
+            user-select: none;
+            margin-top: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            font-size: 14px;
+            color: #acacac;
+            cursor: pointer;
+
+            .no {
+              font-size: 16px;
             }
 
-            .content {
-                margin-top: 20px;
-                width: 100%;
-                display: flex;
-                .item {
-                    width: calc((100% - 40px) / 3);
-                    &:nth-child(3n - 1) {
-                        margin: 0 20px;
-                    }
-                }
+            .yes {
+              font-size: 20px;
+              color: #1b7eff;
             }
+          }
+
+          .price {
+            font-size: 15px;
+            font-weight: 500;
+            font-family: PingFangSC, PingFang SC;
+            color: #ff4800;
+            text-align: right;
+
+            span {
+              font-size: 30px;
+              font-weight: 600;
+            }
+          }
+
+          .options {
+            display: flex;
+            justify-content: flex-end;
+
+            .item {
+              cursor: pointer;
+              width: 110px;
+              height: 40px;
+              line-height: 40px;
+              border-radius: 4px;
+              font-size: 18px;
+              font-weight: 600;
+              text-align: center;
+            }
+
+            .contact {
+              color: #ffffff;
+              background: #3cabff;
+              margin-right: 20px;
+            }
+
+            .applyFor {
+              border: 1px solid #3cabff;
+              color: #3cabff;
+              box-sizing: border-box;
+              line-height: 38px;
+            }
+          }
         }
+      }
+
+      .businessInfo {
+        width: 100%;
+        height: 147px;
+        background: #f7f9fa;
+        border-radius: 15px;
+        position: relative;
+        box-sizing: border-box;
+        padding: 25px 15px;
+
+        .bgCar {
+          position: absolute;
+          top: 0;
+          right: 0;
+          height: 100%;
+          z-index: 0;
+        }
+
+        .business {
+          display: flex;
+          align-items: center;
+
+          .avatar {
+            width: 65px;
+            height: 65px;
+            border-radius: 100%;
+            margin-right: 10px;
+          }
+
+          .fonts {
+            .name {
+              font-size: 20px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 600;
+              color: #333333;
+              margin-bottom: 12px;
+            }
+
+            .other {
+              display: flex;
+
+              .item {
+                font-size: 14px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                color: #333333;
+                display: flex;
+                margin-right: 15px;
+
+                .label {
+                }
+
+                .value {
+                }
+              }
+            }
+          }
+        }
+      }
     }
+  }
+
+  .publicTitle {
+    font-size: 20px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    color: #333333;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .publicLine {
+    width: 100%;
+    height: 12px;
+    border-bottom: 1px solid #e0e0e0;
+    position: relative;
+
+    &:before {
+      content: '';
+      height: 3px;
+      width: 40px;
+      background: #2282ff;
+      border-radius: 2px;
+      position: absolute;
+      bottom: -1px;
+      left: 20px;
+    }
+  }
+
+  .publicContent {
+    box-sizing: border-box;
+    padding: 40px 70px 10px;
+  }
+
+  .detail {
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        cursor: pointer;
+        width: calc(100% / 3);
+        font-size: 16px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        display: flex;
+        margin-bottom: 35px;
+
+        .label {
+          color: #8e8e8e;
+        }
+
+        .value {
+          color: #333333;
+        }
+
+        .fnValue {
+          color: #0087cd;
+        }
+      }
+    }
+  }
+
+  .appearance {
+    margin-bottom: 20px;
+
+    .urlList {
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .recommend {
+    .change {
+      font-size: 14px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      color: #9d9d9d;
+      cursor: pointer;
+    }
+
+    .content {
+      margin-top: 20px;
+      width: 100%;
+      display: flex;
+
+      .item {
+        width: calc((100% - 40px) / 3);
+
+        &:nth-child(3n - 1) {
+          margin: 0 20px;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/equip/list.vue b/src/views/equip/list.vue
index 898378d..974043b 100644
--- a/src/views/equip/list.vue
+++ b/src/views/equip/list.vue
@@ -1,22 +1,25 @@
 <template>
     <div class="equipList">
+        <NavMenu></NavMenu>
         <div class="showScreen">
-            <div class="title">筛选条件：</div>
+            <div class="title">
+                筛选条件：
+            </div>
             <div class="tags">
                 <el-tag
-                    v-for="(tag, i) in screenTags"
-                    :key="tag.id"
-                    class="item"
-                    @close="handleClose(tag, i)"
-                    closable>
+                        v-for="(tag,i) in screenTags"
+                        :key="tag.id"
+                        class="item"
+                        @close="handleClose(tag,i)"
+                        closable
+                >
                     {{ tag.name }}
                 </el-tag>
-                <el-tag
-                    class="item"
-                    v-if="screenTags.length > 0"
-                    type="danger"
-                    @close="tagClear"
-                    closable>
+                <el-tag class="item"
+                        v-if="screenTags.length > 0"
+                        type="danger"
+                        @close="tagClear"
+                        closable>
                     清空所有条件
                 </el-tag>
             </div>
@@ -24,38 +27,31 @@
 
         <div class="screen">
             <div class="choose">
-                <template v-for="(v, i) in screenChooseList">
-                    <div class="line" v-if="v.index < v.list.length" :key="i">
+                <template v-for="(v,i) in screenChooseList">
+                    <div class="line" v-if="v.index < v.list.length " :key="i">
                         <div class="label">
                             {{ v.list[v.index].name }}
                         </div>
                         <div class="select">
-                            <div
-                                class="item"
-                                @click="selectScreen(i, val, v.index)"
-                                v-for="(val, index) in v.list[v.index].select"
-                                :key="index">
+                            <div class="item"
+                                 @click="selectScreen(i,val,v.index)"
+                                 v-for="(val,index) in v.list[v.index].select" :key="index">
                                 {{ val.name }}
                             </div>
                         </div>
                     </div>
                 </template>
+
             </div>
             <div class="btns">
-                <div
-                    class="item"
-                    @click="changeOption(v)"
-                    :class="v.id == optionActive && 'active'"
-                    v-for="(v, i) in screenOptionList"
-                    :key="i">
+                <div class="item"
+                     @click="changeOption(v)"
+                     :class="v.id == optionActive && 'active'"
+                     v-for="(v,i) in screenOptionList" :key="i">
                     {{ v.name }}
                     <template v-if="v.sort">
-                        <el-icon class="icon" v-show="v.sort == 'asc' && v.id == optionActive">
-                            <CaretTop />
-                        </el-icon>
-                        <el-icon class="icon" v-show="v.sort == 'desc' && v.id == optionActive">
-                            <CaretBottom />
-                        </el-icon>
+                        <el-icon class="icon" v-show="v.sort == 'asc' && v.id == optionActive"><CaretTop /></el-icon>
+                        <el-icon class="icon" v-show="v.sort == 'desc' && v.id == optionActive"><CaretBottom /></el-icon>
                     </template>
                 </div>
             </div>
@@ -64,468 +60,498 @@
         <div class="showList">
             <equip-card
                 class="card"
-                v-for="(v, i) in 10"
+                v-for="(v,i) in equipList"
                 :key="i"
-                :id="i"
+                :url="v.picUrl"
+                :company="v.companyName"
+                :tags="[v.maStatus,v.location || '合肥市']"
+                :name="`${v.modelName}${v.deviceName}`"
+                :price="v.monthLeasePrice"
+                :id="v.maId"
+                time-unit="月"
                 @on-click="toDetail"></equip-card>
         </div>
 
         <div class="pagination">
             <el-pagination
-                :page-size="20"
-                :pager-count="11"
-                layout="prev, pager, next"
-                :total="1000" />
+                    v-model:current-page="pageData.pageNum"
+                    :page-size="pageData.pageSize"
+                    @current-change="pageChange"
+                    :pager-count="5"
+                    layout="prev, pager, next"
+                    :total="pageData.total"
+            />
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-    import { computed, reactive, ref } from 'vue'
-    import EquipCard from 'components/equipCard.vue'
-    import { useRouter } from 'vue-router'
-    import { getList } from 'http/api/equip'
-    const router = useRouter()
-    //筛选条件列表数据
-    const screenChooseList = reactive([
-        {
-            name: 'address',
-            index: 0,
-            select: [],
-            list: [
-                {
-                    name: '省份',
-                    value: '',
-                    parent: 'address',
-                    select: [
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '上海'
-                        },
-                        {
-                            id: 1,
-                            name: '北京'
-                        },
-                        {
-                            id: 1,
-                            name: '四川'
-                        },
-                        {
-                            id: 1,
-                            name: '河南'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        }
-                    ]
-                },
-                {
-                    name: '城市',
-                    value: '',
-                    parent: 'address',
-                    select: [
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        },
-                        {
-                            id: 1,
-                            name: '安徽'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'type',
-            index: 0,
-            select: [],
-            list: [
-                {
-                    name: '类别',
-                    value: '',
-                    parent: 'type',
-                    select: [
-                        {
-                            id: 1,
-                            name: '挖掘机械'
-                        },
-                        {
-                            id: 1,
-                            name: '土方机械'
-                        }
-                    ]
-                },
-                {
-                    name: '组别',
-                    value: '',
-                    parent: 'type',
-                    select: [
-                        {
-                            id: 1,
-                            name: '组别1'
-                        }
-                    ]
-                },
-                {
-                    name: '产品名称',
-                    value: '',
-                    parent: 'type',
-                    select: [
-                        {
-                            id: 1,
-                            name: '产品1'
-                        },
-                        {
-                            id: 1,
-                            name: '产品2'
-                        },
-                        {
-                            id: 1,
-                            name: '产品3'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'rent',
-            index: 0,
-            select: [],
-            list: [
-                {
-                    name: '租金区间',
-                    value: '',
-                    parent: 'rent',
-                    select: [
-                        {
-                            id: 1,
-                            name: '5千元以下'
-                        },
-                        {
-                            id: 1,
-                            name: '5千-1万'
-                        },
-                        {
-                            id: 1,
-                            name: '1万-5万'
-                        },
-                        {
-                            id: 1,
-                            name: '5万-10万'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'age',
-            index: 0,
-            select: [],
-            list: [
-                {
-                    name: '设备机龄',
-                    value: '',
-                    parent: 'rent',
-                    select: [
-                        {
-                            id: 1,
-                            name: '一年以下'
-                        },
-                        {
-                            id: 1,
-                            name: '1年-3年'
-                        },
-                        {
-                            id: 1,
-                            name: '3年-6年'
-                        },
-                        {
-                            id: 1,
-                            name: '10年以上'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'time',
-            index: 0,
-            select: [],
-            list: [
-                {
-                    name: '工作小时',
-                    value: '',
-                    parent: 'time',
-                    select: [
-                        {
-                            id: 1,
-                            name: '500小时以内'
-                        },
-                        {
-                            id: 1,
-                            name: '500-2000小时'
-                        },
-                        {
-                            id: 1,
-                            name: '2000-5000小时'
-                        },
-                        {
-                            id: 1,
-                            name: '5000-10000小时'
-                        },
-                        {
-                            id: 1,
-                            name: '10000小时以上'
-                        }
-                    ]
-                }
-            ]
-        }
-    ])
+import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
+import EquipCard from "@/components/equipCard.vue";
+import {useRoute, useRouter} from "vue-router";
+import { getList } from "@/http/api/equip"
+import $bus from "@/utils/bus"
+import NavMenu from "@/components/Navmenu/index.vue"
 
-    // 综合排序 更新时间 月租金 排序按钮
-    const screenOptionList = reactive([
-        {
-            name: '综合排序',
-            id: '1',
-            sort: ''
-        },
-        {
-            name: '更新时间',
-            id: '2',
-            sort: 'asc' //asc or desc
-        },
-        {
-            name: '月租金',
-            id: '3',
-            sort: 'asc'
-        }
-    ])
-    //激活 排序按钮
-    const optionActive = ref('1')
-    //显示的被选中的筛选条件
-    const screenTags = computed<Array<any>>(() => {
-        let arr = []
-        screenChooseList.forEach((key) => {
-            arr = [...arr, ...key.select]
-        })
-        return arr
+const router = useRouter()
+
+//筛选条件列表数据
+const screenChooseList = reactive([
+    {
+        name: 'address',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '省份',
+                value: '',
+                parent: 'address',
+                select: [
+                    {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '上海'
+                    }, {
+                        id: 1,
+                        name: '北京'
+                    }, {
+                        id: 1,
+                        name: '四川'
+                    }, {
+                        id: 1,
+                        name: '河南'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    },
+                ]
+            },
+            {
+                name: '城市',
+                value: '',
+                parent: 'address',
+                select: [
+                    {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    },
+                ]
+            }
+        ]
+    },
+    {
+        name: 'type',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '类别',
+                value: '',
+                parent: 'type',
+                select: [
+                    {
+                        id: 1,
+                        name: '挖掘机械'
+                    }, {
+                        id: 1,
+                        name: '土方机械'
+                    },
+                ]
+            },
+            {
+                name: '组别',
+                value: '',
+                parent: 'type',
+                select: [
+                    {
+                        id: 1,
+                        name: '组别1'
+                    },
+                ]
+            },
+            {
+                name: '产品名称',
+                value: '',
+                parent: 'type',
+                select: [
+                    {
+                        id: 1,
+                        name: '产品1'
+                    }, {
+                        id: 1,
+                        name: '产品2'
+                    }, {
+                        id: 1,
+                        name: '产品3'
+                    },
+                ]
+            }
+        ]
+    },
+    {
+        name: 'rent',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '租金区间',
+                value: '',
+                parent: 'rent',
+                select: [{
+                    id: 1,
+                    name: '5千元以下'
+                }, {
+                    id: 1,
+                    name: '5千-1万'
+                }, {
+                    id: 1,
+                    name: '1万-5万'
+                }, {
+                    id: 1,
+                    name: '5万-10万'
+                },]
+            }
+        ]
+    },
+    {
+        name: 'age',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '设备机龄',
+                value: '',
+                parent: 'rent',
+                select: [{
+                    id: 1,
+                    name: '一年以下'
+                }, {
+                    id: 1,
+                    name: '1年-3年'
+                }, {
+                    id: 1,
+                    name: '3年-6年'
+                }, {
+                    id: 1,
+                    name: '10年以上'
+                }]
+            }
+        ]
+    },
+    {
+        name: 'time',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '工作小时',
+                value: '',
+                parent: 'time',
+                select: [{
+                    id: 1,
+                    name: '500小时以内'
+                }, {
+                    id: 1,
+                    name: '500-2000小时'
+                }, {
+                    id: 1,
+                    name: '2000-5000小时'
+                }, {
+                    id: 1,
+                    name: '5000-10000小时'
+                }, {
+                    id: 1,
+                    name: '10000小时以上'
+                },]
+            }
+        ]
+    }
+])
+
+// 综合排序 更新时间 月租金 排序按钮
+const screenOptionList = reactive([
+    {
+        name: '综合排序',
+        id: '1',
+        sort: ''
+    }, {
+        name: '更新时间',
+        id: '2',
+        sort: 'asc' //asc or desc
+    }, {
+        name: '月租金',
+        id: '3',
+        sort: 'asc'
+    },
+])
+//激活 排序按钮
+const optionActive = ref('1')
+//显示的被选中的筛选条件
+const screenTags = computed<Array<any>>(() => {
+    let arr = []
+    screenChooseList.forEach(key => {
+        arr = [...arr,...key.select]
     })
+    return arr
+})
 
-    //删除条件
-    const handleClose = (tag, index) => {
-        screenChooseList[tag.parentIndex].select.splice(tag.index)
-        screenChooseList[tag.parentIndex].index = tag.index
-    }
-    //清除所有标签
-    const tagClear = () => {
-        screenChooseList.forEach((key) => {
-            key.select = []
-            key.index = 0
-        })
-    }
+//分页参数
+const pageData = reactive({
+    pageNum: 1,
+    pageSize: 9,
+    total:0
+})
 
-    const changeOption = (val) => {
-        if (val.sort && optionActive.value == val.id) {
-            val.sort = val.sort == 'asc' ? 'desc' : 'asc'
-        }
-        optionActive.value = val.id
-    }
+//装备列表
+const equipList = ref([])
 
-    //选中后添加到 大类中的select字段
-    const selectScreen = (parentIndex, val, index) => {
-        screenChooseList[parentIndex].select.push({
+
+onMounted(() => {
+    $bus.on('search',(val) => {
+        getData(val)
+    })
+})
+onUnmounted(() => {
+    $bus.off('search')
+})
+//删除条件
+const handleClose = (tag, index) => {
+    screenChooseList[tag.parentIndex].select.splice(tag.index)
+    screenChooseList[tag.parentIndex].index = tag.index
+}
+//清除所有标签
+const tagClear = () => {
+    screenChooseList.forEach(key => {
+        key.select = []
+        key.index = 0
+    })
+}
+
+const changeOption = (val) => {
+    if(val.sort && optionActive.value == val.id){
+        val.sort = val.sort == 'asc' ? 'desc' : 'asc'
+    }
+    optionActive.value = val.id
+
+}
+
+//选中后添加到 大类中的select字段
+const selectScreen = (parentIndex, val, index) => {
+    screenChooseList[parentIndex].select.push(
+        {
             ...val,
             index,
             parentIndex
-        })
-        screenChooseList[parentIndex].index++
+        }
+    )
+    screenChooseList[parentIndex].index++
+}
+
+//装备card被点击
+const toDetail = (data) => {
+    router.push({
+        path:`/equipDetail/${data.id}`
+    })
+}
+
+//分页page变化
+const pageChange = (val) => {
+    pageData.pageNum = val
+    getData()
+}
+//获取列表
+const getData = async (text = '') => {
+    const params = {
+        keyWord: text,
+        pageSize:pageData.pageSize,
+        pageNum:pageData.pageNum
+    }
+    const res = await getList(params)
+    pageData.total = res.total
+    equipList.value = res.rows
+}
+
+const getParams = () => {
+    const paramsKey = ['keyWord']
+    let params = {}
+    paramsKey.forEach(key => {
+        if (history.state[key]){
+            params[key] = history.state[key]
+        }
+    })
+    return params
+}
+const init = () => {
+    const params = getParams()
+    console.log(params)
+
+    if(params && params.keyWord){
+        $bus.emit('callBackText',params.keyWord)
+        $bus.off('callBackText')
     }
 
-    //装备card被点击
-    const toDetail = (data) => {
-        router.push({
-            path: `/equipDetail/${data.id}`
-        })
-    }
+    getData()
+}
+init()
+
+
+
 
-    const getData = async () => {
-        const res = await getList()
-        console.log('res ============', res)
-    }
-    const init = () => {
-        getData()
-    }
-    init()
 </script>
 <style lang="scss" scoped>
-    .equipList {
-        .showScreen {
-            display: flex;
-            align-items: center;
-            height: 30px;
-            .title {
-                font-size: 16px;
-                font-weight: 500;
-                color: #949494;
-            }
+.equipList {
 
-            .tags {
-                .item {
-                    margin-left: 10px;
-                }
-            }
-        }
-
-        .screen {
-            .choose {
-                margin-top: 20px;
-
-                .line {
-                    display: flex;
-                    border-bottom: 1px solid #dddddd;
-
-                    .label {
-                        width: 100px;
-                        box-sizing: border-box;
-                        padding: 15px;
-                        background: #f3f3f3;
-                        font-size: 16px;
-                    }
-
-                    .select {
-                        flex: 1;
-                        display: flex;
-                        flex-wrap: wrap;
-                        box-sizing: border-box;
-                        padding: 15px;
-
-                        .item {
-                            margin-right: 15px;
-                            cursor: pointer;
-                            color: #939393;
-                            font-size: 15px;
-
-                            &:hover {
-                                color: red;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .active {
-                color: #1069ff !important;
-            }
-
-            .btns {
-                display: flex;
-                align-items: center;
-                margin-top: 20px;
-
-                .item {
-                    background: #f7f9fa;
-                    border-radius: 12px;
-                    padding: 10px 20px;
-
-                    font-size: 17px;
-                    font-weight: 500;
-                    color: #9d9d9d;
-                    margin-right: 10px;
-                    cursor: pointer;
-                    user-select: none;
-                    .icon {
-                        font-size: 15px;
-                    }
-                }
-            }
-        }
-
-        .showList {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-
-            .card {
-                width: calc((100% - 40px) / 3);
-
-                &:nth-child(3n - 1) {
-                    margin: 0 20px;
-                }
-
-                margin-top: 15px !important;
-            }
-        }
-
-        .pagination {
-            margin-top: 20px;
-            display: flex;
-            justify-content: flex-end;
-        }
+  .showScreen {
+      margin-top: 20px;
+    display: flex;
+    align-items: center;
+    height: 30px;
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #949494;
     }
+
+    .tags {
+      .item {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .screen {
+    .choose {
+      margin-top: 20px;
+
+      .line {
+        display: flex;
+        border-bottom: 1px solid #dddddd;
+
+        .label {
+          width: 100px;
+          box-sizing: border-box;
+          padding: 15px;
+          background: #f3f3f3;
+          font-size: 16px;
+        }
+
+        .select {
+          flex: 1;
+          display: flex;
+          flex-wrap: wrap;
+          box-sizing: border-box;
+          padding: 15px;
+
+          .item {
+            margin-right: 15px;
+            cursor: pointer;
+            color: #939393;
+            font-size: 15px;
+
+            &:hover {
+              color: red;
+            }
+          }
+        }
+      }
+    }
+
+    .active {
+      color: #1069FF !important;
+    }
+
+    .btns {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+
+      .item {
+        background: #F7F9FA;
+        border-radius: 12px;
+        padding: 10px 20px;
+
+        font-size: 17px;
+        font-weight: 500;
+        color: #9D9D9D;
+        margin-right: 10px;
+        cursor: pointer;
+        user-select: none;
+          .icon{
+              font-size: 15px;
+          }
+      }
+    }
+  }
+
+  .showList {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .card {
+      width: calc((100% - 40px) / 3);
+
+      &:nth-child(3n - 1) {
+        margin: 0 20px;
+      }
+
+      margin-top: 15px !important;
+    }
+  }
+
+  .pagination {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>