diff --git a/src/App.vue b/src/App.vue
index fcc453c..e483ce8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -76,6 +76,10 @@ onMounted(() => {
   width: 1200px;
   margin: 0 auto;
   overflow: hidden;
+  background: #FFFFFF;
+  border-radius: 30px;
+  padding: 20px 30px;
+  box-sizing: border-box;
 }
 
 .shop-header {
diff --git a/src/compontents/equipCard.vue b/src/compontents/equipCard.vue
index 428856b..debeeb3 100644
--- a/src/compontents/equipCard.vue
+++ b/src/compontents/equipCard.vue
@@ -62,7 +62,7 @@
     display: flex;
     align-items: center;
     .avatar{
-        width: 40%;
+        width: 37%;
         overflow: hidden;
         border-radius: 15px;
         .showImg{
@@ -86,7 +86,7 @@
         flex: 1;
         overflow: hidden;
         .title{
-            font-size: 20px;
+            font-size: 18px;
             font-weight: 400;
             color: #333333;
             overflow: hidden;
@@ -95,7 +95,7 @@
         }
         .tag{
             display: flex;
-            margin-top: 5px;
+            margin-top: 8px;
             .item{
                 background: white;
                 font-size: 14px;
@@ -123,7 +123,8 @@
             color: #FF4800;
             margin-top: 20px;
             span{
-                font-size: 33px;
+                font-size: 25px;
+                font-weight: 600;
             }
         }
     }
diff --git a/src/router/index.ts b/src/router/index.ts
index 44fd1f8..4d40490 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -132,6 +132,18 @@ const routes: Array<RouteRecordRaw> = [
             AuthFlag: false
         },
 
+    },
+    {
+        path:'/equip',
+        name:'equip',
+        redirect: '/equip/list',
+        children:[
+            {
+                path: 'list',
+                name: 'equipList',
+                component: () => import('views/equip/list.vue')
+            }
+        ]
     }
 ]
 
diff --git a/src/views/equip/list.vue b/src/views/equip/list.vue
index af967e5..d37f706 100644
--- a/src/views/equip/list.vue
+++ b/src/views/equip/list.vue
@@ -1,13 +1,416 @@
 <template>
   <div class="equipList">
+      <div class="showScreen">
+          <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
+              >
+                  {{ tag.label }}
+              </el-tag>
+          </div>
+      </div>
 
+      <div class="screen">
+          <div class="choose">
+              <div class="line" v-for="(v,i) in screenChooseList" :key="i">
+                    <div class="label">
+                        {{ v.list[v.index].name }}
+                    </div>
+                    <div class="select">
+                        <div class="item" v-for="(val,index) in v.list[v.index].select" :key="index">
+                            {{ val.name }}
+                        </div>
+                    </div>
+              </div>
+          </div>
+          <div class="btns">
+              <div class="item"
+                   @click="changeOption(v)"
+                   :class="v.id == optionActive && 'active'"
+                   v-for="(v,i) in screenOptionList" :key="i">
+                  {{ v.name }}
+              </div>
+          </div>
+      </div>
+
+      <div class="showList">
+          <equip-card class="card" v-for="(v,i) in 10" :key="i"></equip-card>
+      </div>
+
+      <div class="pagination">
+          <el-pagination
+              :page-size="20"
+              :pager-count="11"
+              layout="prev, pager, next"
+              :total="1000"
+          />
+      </div>
   </div>
 </template>
 <script lang="ts" setup>
+import {reactive, ref} from "vue";
+import EquipCard from "@/compontents/equipCard.vue";
 
+  const screenTags = reactive([
+      {
+        id:1,
+        label:'广东省1'
+      },{
+          id:1,
+          label:'广东省2'
+      },{
+          id:1,
+          label:'广东省3'
+      },{
+          id:1,
+          label:'广东省4'
+      },{
+          id:1,
+          label:'广东省5'
+      },{
+          id:1,
+          label:'广东省6'
+      }
+  ])
+
+  const screenChooseList = reactive([
+      {
+          name:'address',
+          index:0,
+          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,
+          list:[
+              {
+                  name:'类别',
+                  value:'',
+                  parent:'type',
+                  select:[
+                      {
+                          id:1,
+                          name:'挖掘机械'
+                      },{
+                          id:1,
+                          name:'土方机械'
+                      },
+                  ]
+              },
+              {
+                  name: '组别',
+                  value:'',
+                  parent:'type',
+                  select: [
+                      {
+                          id:1,
+                          name:'安徽'
+                      },
+                  ]
+              },
+              {
+                  name: '产品名称',
+                  value:'',
+                  parent:'type',
+                  select: [
+                      {
+                          id:1,
+                          name:'安徽'
+                      },{
+                          id:1,
+                          name:'安徽'
+                      },{
+                          id:1,
+                          name:'安徽'
+                      },
+                  ]
+              }
+          ]
+      },
+      {
+          name:'rent',
+          index:0,
+          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,
+          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,
+          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:''
+      },{
+          name:'月租金',
+          id:'3',
+          sort:''
+      },
+  ])
+
+  const optionActive = ref('1')
+
+  const handleClose = (tag,index) => {
+      screenTags.splice(index,1)
+  }
+
+  const changeOption = (val) => {
+      optionActive.value =  val.id
+  }
 </script>
 <style lang="scss" scoped>
   .equipList{
 
+      .showScreen{
+          display: flex;
+          align-items: center;
+          .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;
+              }
+          }
+      }
+
+      .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>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f01c53a..7ca8339 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -22,7 +22,7 @@ import EquipCard from '../../compontents/equipCard.vue'
                 <div class="right-content">
                     <ul class="nva-items">
                         <li>首页</li>
-                        <li>自选直租</li>
+                        <li @click="() => {$router.push({ name:'equipList' })}">自选直租</li>
                         <li>寻源比价</li>
                         <li>二手交易</li>
                         <li>保险业务</li>