bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://192.168.0.56:3000/bonus/Zlpt_Portal

This commit is contained in:
songyang 2023-12-01 17:02:31 +08:00
parent 5d56b88081 60323f19e1
commit f6365299c1
5 changed files with 425 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -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 {

9
src/compontents/equipCard.vue
View File

@ -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;
}
}
}

12
src/router/index.ts
View File

@ -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')
}
]
}
]

403
src/views/equip/list.vue
View File

@ -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>

2
src/views/home/index.vue
View File

@ -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>