list change
This commit is contained in:
wlikett
parent
69654e610a
commit
9e865c1741
|
|
@ -9,6 +9,8 @@ declare module 'vue' {
|
|||
export interface GlobalComponents {
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,10 @@ import FooterInfo from './compontents/FooterInfo/index.vue'
|
|||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30px;
|
||||
padding: 20px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.shop-header {
|
||||
height: 157px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue