507 lines
13 KiB
Vue
507 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div class="equipDetail">
|
|||
|
|
<div class="top">
|
|||
|
|
<div class="showImg">
|
|||
|
|
<showImg></showImg>
|
|||
|
|
</div>
|
|||
|
|
<div class="baseInfo">
|
|||
|
|
<div class="equipInfo">
|
|||
|
|
<div class="left">
|
|||
|
|
<div class="title">
|
|||
|
|
<div class="name">
|
|||
|
|
220El履带挖掘机
|
|||
|
|
</div>
|
|||
|
|
<div class="tag">
|
|||
|
|
<div class="item">
|
|||
|
|
待租
|
|||
|
|
</div>
|
|||
|
|
<div class="item otherItem">
|
|||
|
|
已审核
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="viewNnum">
|
|||
|
|
浏览1000+
|
|||
|
|
</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>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<div class="price">
|
|||
|
|
￥<span>18500</span>/月
|
|||
|
|
</div>
|
|||
|
|
<div class="options">
|
|||
|
|
<div class="item contact">
|
|||
|
|
联系商家
|
|||
|
|
</div>
|
|||
|
|
<div class="item applyFor">
|
|||
|
|
我要租
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="businessInfo">
|
|||
|
|
<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">
|
|||
|
|
<div class="fonts">
|
|||
|
|
<div class="name">珠海嘉昌设备有限责任公司</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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="detail">
|
|||
|
|
<div class="publicTitle">
|
|||
|
|
装备详情
|
|||
|
|
</div>
|
|||
|
|
<div class="publicLine"></div>
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="appearance">
|
|||
|
|
<div class="publicTitle">
|
|||
|
|
装备外观
|
|||
|
|
</div>
|
|||
|
|
<div class="publicLine"></div>
|
|||
|
|
<div class="urlList publicContent">
|
|||
|
|
<img :src="v" v-for="(v,i) in testUrl" :key="i">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="recommend">
|
|||
|
|
<div class="publicTitle">
|
|||
|
|
<div>为您推荐</div>
|
|||
|
|
|
|||
|
|
<div class="change">
|
|||
|
|
换一批
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<equip-card class="item" v-for="(v,i) in 3" :key="i" :id="i"></equip-card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import ShowImg from "./comoonents/showImg.vue"
|
|||
|
|
import { reactive, ref} from "vue";
|
|||
|
|
import EquipCard from "@/compontents/equipCard.vue";
|
|||
|
|
|
|||
|
|
//设备简略基本信息
|
|||
|
|
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 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 that = {
|
|||
|
|
fn
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</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;
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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{
|
|||
|
|
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>
|