二手车交易，全部页面&对接部分接口
This commit is contained in:
226
src/views/secondHandCar/wantBuySale.vue
Normal file
226
src/views/secondHandCar/wantBuySale.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="wrap" >
|
||||
<div class="headerWrap">
|
||||
<img class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
|
||||
<span>在售</span>
|
||||
<div style="opacity: 0;" class="back"></div>
|
||||
</div>
|
||||
<div class="contentWrap">
|
||||
<div class="titleWrap wrapCommon">
|
||||
<div class="info">
|
||||
<span>牵引车</span>
|
||||
<span>全落地</span>
|
||||
<span>黄牌</span>
|
||||
<span>帕菲特</span>
|
||||
<span>八万公里</span>
|
||||
<span>国5</span>
|
||||
</div>
|
||||
<div class="time">
|
||||
<span>2025-03-05</span><span>江苏苏州</span><span>发布</span>
|
||||
</div>
|
||||
<div class="price">
|
||||
<span>20.5</span>
|
||||
<span>万</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailInfoWrap wrapCommon">
|
||||
<div>
|
||||
<img class="descImg firstDescImg" src="@/assets/secondHandCar/details.png" />
|
||||
</div>
|
||||
<div class="descItem descCommon">
|
||||
<div class="itemInfo">
|
||||
<span>拖车</span>
|
||||
<span>拖车类型</span>
|
||||
</div>
|
||||
<div class="suGang"></div>
|
||||
<div class="itemInfo">
|
||||
<span>全落地 </span>
|
||||
<span>拖车落板</span>
|
||||
</div>
|
||||
<div class="suGang"></div>
|
||||
<div class="itemInfo">
|
||||
<span>国五</span>
|
||||
<span>排放标准</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="descImg" src="@/assets/secondHandCar/description.png" />
|
||||
</div>
|
||||
<div class="descCommon desc">
|
||||
事故事故手动阀时空裂缝就能看拉萨你发凯撒老大飞机考拉说法你时空裂缝距离考试纽福克斯就发了斯
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="noMultipleClicks(handle)">我有车源</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
export default {
|
||||
name: "wantBuySale",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
current: 0,
|
||||
noClick:true
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
},
|
||||
methods:{
|
||||
onChange(index) {
|
||||
this.current = index;
|
||||
},
|
||||
handle(){
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/mixin.scss';
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
position: relative;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.headerWrap{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
.back{
|
||||
@include wh(15px,15px);
|
||||
}
|
||||
span{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #203152;
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
height: calc(100% - 42px);
|
||||
overflow-y: auto;
|
||||
.wrapCommon{
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(5.602678571428572px);
|
||||
box-sizing: border-box;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.titleWrap{
|
||||
margin-top: 10px;
|
||||
height: 108px;
|
||||
padding: 18px 0 15px 21px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.info{
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #212020;
|
||||
line-height: 21px;
|
||||
span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 17px;
|
||||
span:first-child{
|
||||
margin-right: 20px;
|
||||
}
|
||||
span:last-child{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.price{
|
||||
color: #FF5533;
|
||||
line-height: 28px;
|
||||
font-weight: 600;
|
||||
span:first-child{
|
||||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
span:last-child{
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailInfoWrap{
|
||||
box-sizing: border-box;
|
||||
padding: 18px 28px 15px 22px;
|
||||
.descImg{
|
||||
@include wh(72px, 19px);
|
||||
}
|
||||
.firstDescImg{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.descCommon{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.descItem{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.itemInfo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span:first-child{
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #282828;
|
||||
line-height: 20px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
span:last-child{
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #999999;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.suGang{
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
border-right: 1px solid #999999;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.desc{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #282828;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 296px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
color: #FFFFFF;
|
||||
background: #4A7FEB;
|
||||
margin: 0 auto;
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user