813 lines
25 KiB
Vue
813 lines
25 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="containerBody">
|
||
<VNavigationBar background-color="rgba(0,0,0,0)" title="编辑工单" title-color="#333"></VNavigationBar>
|
||
<view class="body">
|
||
<view class="card cardInfo userCard">
|
||
<template>
|
||
<view class="userTitle">工单信息</view>
|
||
<view class="userContainer" style="padding-bottom: 20rpx">
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">客户姓名</text>
|
||
<input type="text" style="text-align: left" v-model="formData.userName" placeholder="请填写客户姓名"/>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">客户电话</text>
|
||
<input type="text" style="text-align: left" v-model="formData.userMobile" placeholder="请填写客户电话"/>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">经办人姓名</text>
|
||
<input type="text" style="text-align: left" v-model="formData.handleName" placeholder="请填写经办人姓名"/>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">经办人电话</text>
|
||
<input type="text" style="text-align: left" v-model="formData.handleMobile" placeholder="请填写经办人电话"/>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">进厂时间</text>
|
||
|
||
<picker
|
||
mode="date"
|
||
:value="formData.inTime"
|
||
start="2020-01-01"
|
||
end="2030-12-31"
|
||
@change="bindDateChange1">
|
||
<view style="margin-left: 10rpx">
|
||
{{ formData.inTime}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">预计完工</text>
|
||
<picker
|
||
mode="date"
|
||
:value="formData.outTime"
|
||
start="2020-01-01"
|
||
end="2030-12-31"
|
||
@change="bindDateChange2">
|
||
<view style="margin-left: 10rpx">
|
||
{{ formData.outTime}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">表显里程</text>
|
||
<input type="text" style="text-align: left" v-model="formData.mileageTraveled" placeholder="请填写表显里程"/>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">三包单位</text>
|
||
<input type="text" style="text-align: left" v-model="formData.threePackUnits" placeholder="请填写三包单位"/>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">最近保养日期</text>
|
||
<picker
|
||
mode="date"
|
||
:value="formData.maintenanceDate"
|
||
start="2020-01-01"
|
||
@change="bindDateChange3">
|
||
<view style="margin-left: 10rpx">
|
||
{{ formData.maintenanceDate}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">最近保养公里数</text>
|
||
<input type="text" style="text-align: left" v-model="formData.maintenanceMileage" placeholder="请填写最近保养公里数"/>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">年检到期时间</text>
|
||
<picker
|
||
mode="date"
|
||
:value="formData.nextInspectionDate"
|
||
start="2020-01-01"
|
||
@change="bindDateChange4">
|
||
<view style="margin-left: 10rpx">
|
||
{{ formData.nextInspectionDate}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">保险到期时间</text>
|
||
<picker
|
||
mode="date"
|
||
:value="formData.insuranceExpiryDate"
|
||
start="2020-01-01"
|
||
@change="bindDateChange5">
|
||
<view style="margin-left: 10rpx">
|
||
{{ formData.insuranceExpiryDate}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1" v-if="cusFromList && cusFromList.length>0">
|
||
<text class="label">客户来源</text>
|
||
<picker @change="cusFromChange" :value="cusFromIndex" :range="cusFromList" range-key="label" >
|
||
<view class="uni-input">{{ cusFromList[cusFromIndex].label}}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1" v-if="busiFromList && busiFromList.length>0">
|
||
<text class="label">业务来源</text>
|
||
<picker @change="busiFromChange" :value="busiFromIndex" :range="busiFromList" range-key="label" >
|
||
<view class="uni-input">{{ busiFromList[busiFromIndex].label}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">保险名称</text>
|
||
<input type="text" style="text-align: left" v-model="formData.insuranceName" placeholder="请填写保险名称"/>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">承保险种</text>
|
||
<uni-data-checkbox multiple v-model="insuranceTypeArray" :localdata="insuranceTypeList"></uni-data-checkbox>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">上年保费</text>
|
||
<view style="display: flex">
|
||
交：<input type="decimal" style="text-align: left" v-model="formData.jiaoqiang" placeholder="请输入交强险保费"/>
|
||
商：<input type="decimal" style="text-align: left" v-model="formData.shangye" placeholder="请输入商业险保费"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">救援费</text>
|
||
<input type="text" style="text-align: left" v-model="formData.rescueMoney" placeholder="请填写救援费"/>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">三包费</text>
|
||
<input type="text" style="text-align: left" v-model="formData.threePackMoney" placeholder="请填写救援费"/>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">定损费</text>
|
||
<input type="text" style="text-align: left" v-model="formData.confirmFaultMoney" placeholder="请填写定损费"/>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1">
|
||
<text class="label">管理费</text>
|
||
<input type="text" style="text-align: left" v-model="formData.managerMoney" placeholder="请填写管理费"/>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center">
|
||
<view class="infoItem" style="flex: 1" v-if="partDisposals && partDisposals.length>0">
|
||
<text class="label">旧件处置方式</text>
|
||
<picker @change="partDisposalChange" :value="partDisposalIndex" :range="partDisposals" range-key="label" >
|
||
<view class="uni-input">{{ partDisposals[partDisposalIndex].label}}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="infoItem" style="flex: 1" v-if="repairTypes && repairTypes.length>0">
|
||
<text class="label">维修类型</text>
|
||
<picker @change="repairTypeChange" :value="repairTypeIndex" :range="repairTypes" range-key="label" >
|
||
<view class="uni-input">{{ repairTypes[repairTypeIndex].label}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="btn" @click="submitUpload">保存工单</view>
|
||
</view>
|
||
</view>
|
||
<!-- 普通弹窗---拍照上传 -->
|
||
<uni-popup ref="popup" background-color="#fff">
|
||
<view class="popup-content">
|
||
<view class="dl-avatar-box">
|
||
<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile" limit="9" title="请上传诊断维修单和车辆维修前照片"></uni-file-picker>
|
||
</view>
|
||
<button type="primary" @click="applyData">保存</button>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import VNavigationBar from '@/components/VNavigationBar.vue'
|
||
import request from "@/utils/request";
|
||
import upload from "@/utils/upload";
|
||
import config from "@/config";
|
||
import {getToken, setUserInfo, getUserInfo,getStorageWithExpiry,setStorageWithExpiry} from '@/utils/auth.js'
|
||
import {getDictByCode,formatDate} from "@/utils/utils";
|
||
|
||
export default {
|
||
components: {
|
||
VNavigationBar,
|
||
},
|
||
data() {
|
||
return {
|
||
//上传的图片数组
|
||
fileList: [],
|
||
sizeType:['compressed'],
|
||
phone: '',
|
||
repairTypes:[],
|
||
repairTypeIndex:0,
|
||
cusFromList:[],
|
||
cusFromIndex:0,
|
||
busiFromList:[],
|
||
busiFromIndex:0,
|
||
partDisposals:[],
|
||
partDisposalIndex:0,
|
||
formData:{
|
||
userName: "",
|
||
userMobile: "",
|
||
inTime: null,
|
||
outTime: null,
|
||
handleName: null,
|
||
handleMobile: null,
|
||
mileageTraveled:null,
|
||
threePackUnits:null,
|
||
insuranceName:null,
|
||
managerMoney:0.00,
|
||
rescueMoney:0.00,
|
||
threePackMoney:0.00,
|
||
confirmFaultMoney:0.00,
|
||
partDisposal:null,
|
||
repairType:null,
|
||
nextInspectionDate:null,
|
||
insuranceExpiryDate:null,
|
||
jiaoqiang:null,
|
||
shangye:null,
|
||
cusFrom:null,
|
||
busiFrom:null,
|
||
},
|
||
//承保险种-、三者、车损、驾乘、不计
|
||
insuranceTypeList:[{
|
||
text: '交强',
|
||
value: '交强'
|
||
}, {
|
||
text: '三者',
|
||
value: '三者'
|
||
}, {
|
||
text: '车损',
|
||
value: '车损'
|
||
},{
|
||
text: '驾乘',
|
||
value: '驾乘'
|
||
},{
|
||
text: '不计',
|
||
value: '不计'
|
||
}],
|
||
//选中的险种
|
||
insuranceTypeArray:[],
|
||
//ticketId 工单Id
|
||
ticketId:null,
|
||
}
|
||
},
|
||
onLoad(data) {
|
||
this.ticketId = data.ticketId
|
||
// this.formData.inTime = formatDate(Date.now())
|
||
// this.formData.outTime = formatDate(Date.now())
|
||
// this.formData.maintenanceDate = formatDate(Date.now())
|
||
this.initDict("repair_busi_from")
|
||
this.initDict("insurance_type")
|
||
this.initDict("repair_type")
|
||
this.initDict("cus_data_from")
|
||
this.initDict("repair_part_disposal")
|
||
this.getOrderDetail()
|
||
},
|
||
onShow() {
|
||
},
|
||
methods: {
|
||
afterRead(file) {
|
||
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
||
upload({
|
||
url:'/admin-api/infra/file/upload',
|
||
filePath: file.tempFilePaths[i]
|
||
}).then((res)=>{
|
||
this.fileList.push({
|
||
url: config.baseImageUrl+res.data
|
||
})
|
||
console.log(this.fileList)
|
||
})
|
||
}
|
||
},
|
||
|
||
deleteFile(file, index) {
|
||
this.fileList.splice(index, 1);
|
||
},
|
||
getOrderDetail(){
|
||
request({
|
||
url: '/admin-api/repair/tickets/getById',
|
||
method: 'get',
|
||
params:{id:this.ticketId}
|
||
}).then((res)=> {
|
||
let resultObj= res.data
|
||
//进厂日期
|
||
if (null != resultObj.inTime){
|
||
resultObj.inTime = formatDate(resultObj.inTime)
|
||
}
|
||
//最近保养日期
|
||
if (null != resultObj.maintenanceDate){
|
||
resultObj.maintenanceDate = formatDate(resultObj.maintenanceDate)
|
||
}
|
||
//预计竣工日期
|
||
if (null != resultObj.outTime){
|
||
resultObj.outTime = formatDate(resultObj.outTime)
|
||
}
|
||
//年检到期时间
|
||
if (null != resultObj.nextInspectionDate){
|
||
resultObj.nextInspectionDate = formatDate(resultObj.nextInspectionDate)
|
||
}
|
||
//保险到期时间
|
||
if (null != resultObj.insuranceExpiryDate){
|
||
resultObj.insuranceExpiryDate = formatDate(resultObj.insuranceExpiryDate)
|
||
}
|
||
if(resultObj.insuranceType){
|
||
this.insuranceTypeArray = resultObj.insuranceType.split(",")
|
||
}
|
||
for (let i = 0; i < this.cusFromList.length; i++) {
|
||
if(this.cusFromList[i].value==resultObj.customerInfo.dataFrom){
|
||
this.cusFromIndex = i
|
||
resultObj.cusFrom = this.cusFromList[i].value
|
||
break
|
||
}
|
||
}
|
||
for (let i = 0; i < this.busiFromList.length; i++) {
|
||
if(this.busiFromList[i].value==resultObj.busiFrom){
|
||
this.busiFromIndex = i
|
||
resultObj.busiFrom = this.busiFromList[i].value
|
||
break
|
||
}
|
||
}
|
||
for (let i = 0; i < this.partDisposals.length; i++) {
|
||
if(this.partDisposals[i].value==resultObj.partDisposal){
|
||
this.partDisposalIndex = i
|
||
break
|
||
}
|
||
}
|
||
for (let i = 0; i < this.repairTypes.length; i++) {
|
||
if(this.repairTypes[i].value==resultObj.repairType){
|
||
this.repairTypeIndex = i
|
||
break
|
||
}
|
||
}
|
||
this.formData = resultObj
|
||
})
|
||
},
|
||
// 日期选择 事件
|
||
bindDateChange1(e) {
|
||
this.formData.inTime = e.target.value; // 更新选择的日期到data中的date变量
|
||
},
|
||
// 日期选择 事件
|
||
bindDateChange3(e) {
|
||
this.formData.maintenanceDate = e.target.value; // 更新选择的日期到data中的date变量
|
||
},
|
||
// 日期选择 事件
|
||
bindDateChange4(e) {
|
||
this.formData.nextInspectionDate = e.target.value; // 更新选择的日期到data中的date变量
|
||
},
|
||
// 日期选择 事件
|
||
bindDateChange5(e) {
|
||
this.formData.insuranceExpiryDate = e.target.value; // 更新选择的日期到data中的date变量
|
||
},
|
||
// 日期选择 事件
|
||
bindDateChange2(e) {
|
||
this.formData.outTime = e.target.value; // 更新选择的日期到data中的date变量
|
||
},
|
||
repairTypeChange(event){
|
||
const newIndex = event.detail.value;
|
||
this.repairTypeIndex = newIndex;
|
||
this.formData.repairType = this.repairTypes[newIndex].value;
|
||
},
|
||
cusFromChange(event){
|
||
const newIndex = event.detail.value;
|
||
this.cusFromIndex = newIndex;
|
||
this.formData.cusFrom = this.cusFromList[newIndex].value;
|
||
},
|
||
busiFromChange(event){
|
||
const newIndex = event.detail.value;
|
||
this.busiFromIndex = newIndex;
|
||
this.formData.busiFrom = this.busiFromList[newIndex].value;
|
||
},
|
||
partDisposalChange(event){
|
||
const newIndex = event.detail.value;
|
||
this.partDisposalIndex = newIndex;
|
||
this.formData.partDisposal = this.repairTypes[newIndex].value;
|
||
},
|
||
async initDict(dictCode){
|
||
let dictArray = getStorageWithExpiry(dictCode);
|
||
console.log(dictArray,"partDisposals")
|
||
if(null==dictArray || undefined==dictArray){
|
||
request({
|
||
url: '/admin-api/system/dict-data/type',
|
||
method: 'get',
|
||
params:{type:dictCode}
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
setStorageWithExpiry(dictCode,res.data,3600)
|
||
this.$nextTick(()=>{
|
||
if("repair_type"==dictCode){
|
||
this.repairTypes = res.data
|
||
}else if("repair_part_disposal"==dictCode){
|
||
this.partDisposals = res.data
|
||
}else if("insurance_type"==dictCode){
|
||
this.buildInsuranceTypeList()
|
||
}else if("cus_data_from"==dictCode){
|
||
this.cusFromList = res.data
|
||
}else if("repair_busi_from"==dictCode){
|
||
this.busiFromList = res.data
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}else{
|
||
this.$nextTick(()=>{
|
||
if("repair_type"==dictCode){
|
||
this.repairTypes = dictArray
|
||
}else if("repair_part_disposal"==dictCode){
|
||
this.partDisposals = dictArray
|
||
}else if("insurance_type"==dictCode){
|
||
this.buildInsuranceTypeList()
|
||
}else if("cus_data_from"==dictCode){
|
||
this.cusFromList = dictArray
|
||
}else if("repair_busi_from"==dictCode){
|
||
this.busiFromList = dictArray
|
||
}
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 组装承保险种待选值
|
||
*/
|
||
buildInsuranceTypeList(data){
|
||
if(data && data.length>0){
|
||
this.insuranceTypeList=[]
|
||
data.map((item)=>{
|
||
let thisObj={
|
||
text:item.label,
|
||
value:item.value
|
||
}
|
||
this.insuranceTypeList.push(thisObj)
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 创建工单前上传图片
|
||
*/
|
||
submitUpload(){
|
||
this.$refs.popup.open("bottom")
|
||
},
|
||
applyData(){
|
||
let fileStr = this.fileList.map(item=>item.url.replace(config.baseImageUrl,"")).join(",")
|
||
let dataObj = this.formData
|
||
dataObj.image=fileStr
|
||
if(this.insuranceTypeArray.length>0){
|
||
dataObj.insuranceType= this.insuranceTypeArray.join(",")
|
||
}
|
||
request({
|
||
url: '/admin-api/repair/tickets/updateById',
|
||
method: 'POST',
|
||
data: this.formData
|
||
}).then(res => {
|
||
this.$refs.popup.close()
|
||
uni.showToast({
|
||
title: '修改成功',
|
||
icon: 'success'
|
||
})
|
||
setTimeout(()=>{
|
||
uni.navigateTo({
|
||
url: `/pages-home/home/home`
|
||
});
|
||
},600)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.popup-content {
|
||
@include flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px;
|
||
height: auto;
|
||
background-color: #fff;
|
||
}
|
||
.container {
|
||
height: 100%;
|
||
background-color: #F3F5F7;
|
||
|
||
.containerBody {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
|
||
background-size: 100% 500rpx;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.body {
|
||
flex: 1;
|
||
height: 0;
|
||
overflow: auto;
|
||
|
||
.card {
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
margin: 20rpx 32rpx;
|
||
}
|
||
|
||
.phone {
|
||
background: #0174F6;
|
||
|
||
.phoneHeader {
|
||
padding: 20rpx 30rpx;
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.desc {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
|
||
.phoneBody {
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
padding: 0 30rpx;
|
||
|
||
.searchBox {
|
||
padding: 40rpx 0;
|
||
border-bottom: 1rpx solid #EEEEEE;
|
||
}
|
||
|
||
.btn {
|
||
padding: 40rpx 0;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
column-gap: 10rpx;
|
||
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #0174F6;
|
||
|
||
.btnIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cardInfo {
|
||
&.none {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.cardNoneIcon {
|
||
width: 336rpx;
|
||
}
|
||
|
||
.btn {
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
column-gap: 10rpx;
|
||
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #0174F6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.projTitle, .userTitle, .carTitle {
|
||
padding: 30rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.carCard {
|
||
.carListTab {
|
||
display: flex;
|
||
align-items: center;
|
||
column-gap: 32rpx;
|
||
padding: 0 26rpx 22rpx;
|
||
|
||
.carTabItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
row-gap: 10rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
|
||
&.active {
|
||
.carImage {
|
||
border: 2rpx solid #0174F6;
|
||
}
|
||
|
||
color: #0174F6;
|
||
}
|
||
|
||
.carImage {
|
||
width: 128rpx;
|
||
height: 80rpx;
|
||
background: #F2F2F7;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
}
|
||
|
||
.carTabItemNew {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
row-gap: 10rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
border: 2rpx solid #0174F6; /* 默认边框颜色为透明 */
|
||
justify-content: center; /* 垂直居中 */
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
padding: 10rpx; /* 可以根据需要调整内边距 */
|
||
width: 128rpx; /* 与 .carImage 宽度一致 */
|
||
height: 80rpx; /* 与 .carImage 高度一致 */
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
margin-top: -37rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.carDetail {
|
||
background: linear-gradient(180deg, rgba(1, 116, 246, 0.15) 0%, rgba(255, 255, 255, 0) 100%) no-repeat;
|
||
background-size: 100% 184rpx;
|
||
padding: 30rpx 30rpx 0;
|
||
|
||
.carHeader {
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
column-gap: 20rpx;
|
||
|
||
padding-bottom: 30rpx;
|
||
|
||
.carImage {
|
||
width: 192rpx;
|
||
height: 120rpx;
|
||
background: #F2F2F7;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
|
||
.carHeaderRight {
|
||
display: flex;
|
||
flex-direction: column;
|
||
row-gap: 20rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
|
||
.carType {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #858BA0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.carBody {
|
||
display: flex;
|
||
flex-direction: column;
|
||
row-gap: 30rpx;
|
||
padding-top: 30rpx;
|
||
border-top: 1rpx solid #DDDDDD;
|
||
}
|
||
|
||
.carFoot {
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.projCard {
|
||
.projList {
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
flex-wrap: wrap;
|
||
|
||
.projItem {
|
||
padding: 10rpx 16rpx;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
border: 2rpx solid #0174F6;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #0174F6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.userCard {
|
||
.userContainer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
row-gap: 30rpx;
|
||
margin: 0 30rpx;
|
||
}
|
||
}
|
||
|
||
.infoItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.label {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #858BA0;
|
||
}
|
||
|
||
.value {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.projFoot, .userFoot, .carFoot {
|
||
padding: 30rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #0174F6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
column-gap: 6rpx;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
height: 136rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.btn {
|
||
width: 510rpx;
|
||
height: 76rpx;
|
||
background: #0174F6;
|
||
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
}
|
||
|
||
.radio-label {
|
||
//display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.radio-label text {
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
}
|
||
</style>
|