调整样式

This commit is contained in:
ChuShiZ 2024-08-23 20:04:25 +08:00
parent 183fff1e8e
commit cc5c0518d9
3 changed files with 125 additions and 35 deletions

View File

@ -7,7 +7,7 @@
</view>
<view class="orderCardStatus">
<view class="orderCardStatusData">
<template v-if="orderData.rescueStatus > 2">
<template v-if="orderData.rescueStatus == 3">
<image src="@/static/icons/homeOrderCard/dhjl.png" class="orderCardDistanceIcon" mode="aspectFit"></image>
<text class="orderCardDistanceValue">{{orderData.distance / 1000 || 0}}KM</text>
&nbsp;

View File

@ -49,7 +49,7 @@
<!-- <view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 3"></view> -->
<!-- <view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 5">您的订单已经完成</view>
<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 6">待取车</view> -->
<view class="touxiang">
<image :src=" baseUrl + detailsinfo.driverInfo.avatar " mode=""></image>
</view>
@ -105,8 +105,8 @@
<view style="margin: 20rpx 0 20rpx 0;">
<u-rate :count="count" v-model="value" active-color="#FFA632" inactive-color="#D7D7D7"></u-rate>
</view>
<u--textarea style="background: rgba(0,0,0,0.05);border-radius: 12rpx;" v-model="value5" v-if="detailsinfo.rescueInfo.orderStatus == 2 " placeholder="请输入内容"
border="bottom"></u--textarea>
<u--textarea style="background: rgba(0,0,0,0.05);border-radius: 12rpx;" v-model="value5"
v-if="detailsinfo.rescueInfo.orderStatus == 2 " placeholder="请输入内容" border="bottom"></u--textarea>
<u--textarea v-model="value5" disabled v-if="detailsinfo.rescueInfo.orderStatus == 3 " placeholder="请输入内容"
border="bottom"></u--textarea>
<view class="anniua" @click="pinglun()" v-if="detailsinfo.rescueInfo.orderStatus == 2 ">
@ -121,30 +121,55 @@
</view>
<view class="c-box">
<view v-if="detailsinfo.detail && detailsinfo.detail.length > 0" class="c-box">
<view class="lan-ga" v-for="(item,index) in detailsinfo.detail" :key="index">
<view class="ga-top-box">
<view class="ga-top">
<view class="gain">{{ String(index + 1).padStart(2, '0') }}</view>
<view class="">{{item.title}}</view>
<view v-if="index === detailsinfo.detail.length - 1" class="gain">
<image class="gainIcon" src="@/static/icons/currentDetails.png" mode="aspectFit"></image>
</view>
<view class="xhui">
{{item.createTime}}
</view>
</view>
<view class="beizh" style="margin-left: 60rpx;font-size: 14px;">
{{item.remark}}
</view>
<view class="wrap-box" style="margin-left: 20px;" v-if="item.images">
<view class="img-box" v-for="(items,index) in item.images.split(',') " :key="index"
@click="previewImage(items)">
<image :src="baseUrl + items " mode=""></image>
<view v-else class="gain">{{ index + 1 }}</view>
<view class="ga-content">
<view class="ga-content-top">
<view class="ga-content-title">{{item.title}}</view>
<view class="xhui">
{{item.createTime}}
</view>
</view>
<view class="beizh">
{{item.remark}}
</view>
<view class="wrap-box" v-if="item.images">
<view class="img-box" v-for="(items,index) in item.images.split(',') " :key="index"
@click="previewImage(items)">
<image :src="baseUrl + items " mode=""></image>
</view>
</view>
</view>
</view>
<view v-if="index < detailsinfo.detail.length - 1" class="lan-ga-line"></view>
</view>
<!-- <view class="lan-ga" v-for="(item,index) in detailsinfo.detail" :key="index">
<view class="ga-top-box">
<view class="ga-top">
<view class="gain">{{ String(index + 1).padStart(2, '0') }}</view>
<view class="">{{item.title}}</view>
</view>
<view class="xhui">
{{item.createTime}}
</view>
</view>
<view class="beizh" style="margin-left: 60rpx;font-size: 14px;">
{{item.remark}}
</view>
<view class="wrap-box" style="margin-left: 20px;" v-if="item.images">
<view class="img-box" v-for="(items,index) in item.images.split(',') " :key="index"
@click="previewImage(items)">
<image :src="baseUrl + items " mode=""></image>
</view>
</view>
</view> -->
</view>
</view>
</view>
</view>
@ -175,7 +200,23 @@
detailsinfo: null,
timerId: null,
currentIndicator: 'none',
isLoop: true
isLoop: true,
detailTestList: [{
title: '发起救援',
createTime: '2024-12-12 00:00:00',
remark: '救援发起'
},
{
title: '正在救援',
createTime: '2024-12-12 00:00:00',
remark: '司机正在赶来的路上'
},
{
title: '费用核算',
createTime: '2024-12-12 00:00:00',
remark: '司机核算救援费用为1500元'
},
]
}
},
onLoad(option) {
@ -416,6 +457,7 @@
.zzhui {
width: 100%;
padding-bottom: 20rpx;
background: #f6f6f6;
}
@ -670,18 +712,58 @@
.lan-ga {
width: 100%;
margin: 10px auto;
margin: 20rpx auto;
box-sizing: border-box;
padding-bottom: 15px;
border-bottom: 1px solid #EEEEEE;
padding-bottom: 40rpx;
position: relative;
.lan-ga-line {
position: absolute;
width: 2rpx;
height: calc(100% - 56rpx);
background-color: #979797;
left: calc(56rpx / 2 - 2rpx);
transform: translate(-50%, 0);
top: calc(56rpx + 10rpx);
}
}
.ga-top-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.ga-content {
flex: 1;
width: 0;
.ga-content-top {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 8rpx;
padding-bottom: 14rpx;
}
.ga-content-title {
font-weight: bold;
flex: 1;
width: 0;
word-break: break-all
}
.xhui {
font-size: 22rpx;
color: #929292;
flex-shrink: 0;
}
.beizh {
font-size: 28rpx;
color: #000000;
}
}
.ga-top {
display: flex;
align-items: center;
@ -710,17 +792,25 @@
flex-wrap: wrap;
}
.xhui {
font-size: 12px;
font-weight: 400;
color: #999999;
}
.gain {
box-sizing: border-box;
width: 60rpx;
font-size: 32rpx;
font-weight: bold;
width: 52rpx;
height: 52rpx;
font-size: 34rpx;
color: #327DFB;
margin-right: 20rpx;
border: 2rpx solid #327DFB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-weight: bold;
.gainIcon {
width: 100%;
height: 100%;
}
}
</style>

View File

@ -67,7 +67,7 @@
<view style="width: 100%; height: 60px;"></view>
</view>
<tabBar :msg="1"></tabBar>
<tabBar msg="1"></tabBar>
</view>
</template>