first
This commit is contained in:
255
src/views/index/vehicleAdd.vue
Normal file
255
src/views/index/vehicleAdd.vue
Normal file
@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="addContentWrap">
|
||||
<div class="itemContent">
|
||||
<div class="titleType">
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
<span>车牌号</span>
|
||||
</div>
|
||||
<div class="checkContent">
|
||||
<input placeholder="请输入车牌号" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBot"></div>
|
||||
<div class="itemContent">
|
||||
<div class="titleType">
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
<span>车辆类型</span>
|
||||
</div>
|
||||
<select id="myDropdown" @change="handleSelectChange()">
|
||||
<option value="option1">一般平板</option>
|
||||
<option value="option2">小轿车</option>
|
||||
<option value="option3">大卡车</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lineBot"></div>
|
||||
<div class="itemContent">
|
||||
<div class="titleType">
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
<span>是否参与中道聚合</span>
|
||||
</div>
|
||||
<div class="isJoin">
|
||||
<van-radio-group v-model="radio3" @change="isChange" class="joinWrap">
|
||||
<van-radio name="参与" style="margin-right: 26px">
|
||||
参与
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="不参与">
|
||||
不参与
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBot"></div>
|
||||
<div class="itemContent">
|
||||
<div class="titleType">
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
<span>选择服务种类</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serviceType">
|
||||
<div class="trailerService">
|
||||
<div class="serviceline">
|
||||
<span class="service">拖车服务:</span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<van-radio-group v-model="radio" @change="change" class="radioWrap">
|
||||
<van-radio name="故障——平板拖车" class="item">
|
||||
故障——平板拖车
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name=" 事故——平板拖车" class="item">
|
||||
事故——平板拖车
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
<div class="smallRepairService">
|
||||
<div class="serviceline">
|
||||
<span class="service">小修服务:</span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<van-radio-group v-model="radio2" @change="change2" class="radioWrap">
|
||||
<van-radio name="换胎" class="item">
|
||||
换胎
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="搭电" class="item">
|
||||
搭电
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="送油" class="item">
|
||||
送油
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="送水" class="item">
|
||||
送水
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
|
||||
export default {
|
||||
name: "vehicleAdd",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
radio: '故障——平板拖车',
|
||||
radio2: '换胎',
|
||||
radio3:'参与',
|
||||
activeIcon: require('@/assets/check.png'),
|
||||
inactiveIcon: require('@/assets/uncheck.png')
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
change(e) {
|
||||
console.log("拖车服务",e)
|
||||
},
|
||||
change2(e) {
|
||||
console.log("小修服务",e)
|
||||
},
|
||||
isChange(e){
|
||||
console.log("是否参与",e)
|
||||
},
|
||||
cancelBtn(){
|
||||
console.log("取消车辆")
|
||||
},
|
||||
submitBtn(){
|
||||
console.log("提交车辆")
|
||||
}
|
||||
},
|
||||
components:{
|
||||
TwoCommonBtn
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
.wrap{
|
||||
@include wh(100%,100%);
|
||||
}
|
||||
.addContentWrap{
|
||||
margin-left: 16px;
|
||||
.itemContent{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 56px;
|
||||
box-sizing: border-box;
|
||||
padding-right: 25px;
|
||||
.titleType{
|
||||
@include fontWeightSize(500,14px);
|
||||
color: #323643;
|
||||
}
|
||||
.isJoin{
|
||||
display: flex;
|
||||
.joinWrap{
|
||||
display: flex;
|
||||
}
|
||||
img{
|
||||
@include widHeiMar(16px,16px,6px)
|
||||
}
|
||||
}
|
||||
.startImg{
|
||||
@include widHeiMar(6px,6px,3px);
|
||||
vertical-align: super;
|
||||
}
|
||||
input{
|
||||
border: none;
|
||||
text-align: right;
|
||||
@include fontWeightSize(500,13px);
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
.lineBot{
|
||||
@include wh(100%,1px);
|
||||
background: #E9E9EA;
|
||||
opacity: 0.6;
|
||||
}
|
||||
select{
|
||||
border: none;
|
||||
}
|
||||
.serviceType{
|
||||
@include fontWeightSize(500,13px);
|
||||
margin-left: 15px;
|
||||
.trailerService{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.serviceline{
|
||||
@include flexCenter;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item{
|
||||
margin: 20px 0;
|
||||
@include flexCenter;
|
||||
}
|
||||
.radioWrap{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.service{
|
||||
opacity: .7;
|
||||
color: #323643;
|
||||
line-height: 18px;
|
||||
}
|
||||
.line{
|
||||
display: inline-block;
|
||||
@include wh(246px,2px);
|
||||
opacity: 0.16;
|
||||
border-bottom: 1px solid;
|
||||
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
|
||||
}
|
||||
img{
|
||||
@include widHeiMar(16px,16px,12px)
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin-left: 8px;
|
||||
width: 90%;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user