baseApp/pages/user/repair/repairDetail.vue

<template>
	<view class="container padding-t-30">
		<view class="itemBox">
			<view class="flex item">
				<view class="title">
					保修车辆：
				</view>
				<view class="content">
					{{item.shop}}
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					维修单号：
				</view>
				<view class="content">
					{{item.shop}}
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					维修地点：
				</view>
				<view class="content">
					{{item.mast}}
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					完成时间：
				</view>
				<view class="content">
					{{item.addTime}}
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					申报时间：
				</view>
				<view class="content">
					{{item.delTime}}
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					联系电话：
				</view>
				<view class="content">
					{{item.delTime}}
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					故障概述：
				</view>
				<view class="content">
					{{item.delTime}}
				</view>
			</view>
			<view class="item ">
				<view class="title">
					已传图片：
				</view>
				<view class="content margin-t-20">
					<image class="img margin-r-20" src="../../../static/error/errorImage.jpg" mode="scaleToFill"></image>
					<image class="img margin-r-20" src="../../../static/error/errorImage.jpg" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		
		
		
		<view class="buttom flex">
			<view class="borderGray btn">
				上一个申请
			</view>
			<view class="borderGreed btn">
				下一个申请
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				item: {
					shop: '绿津路桥加盟商一',
					mast: '戴师傅',
					address: '国际塑料城',
					addTime: '2022-08-08 18:00',
					delTime: '2022-08-08 19:00',

				}
			};
		},
		methods: {
			loadData(source) {

			},
		}
	};
</script>
<style lang="scss">
	.itemBox {
		margin: 0 $page-row-spacing;
		margin-bottom: $page-row-spacing;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-top: 40rpx;

		.item {
			justify-content: flex-start;
			padding: 30rpx;
			padding-top: 0;
			font-size: $font-base;

			.title {
				flex-shrink: 0;
				color: $font-color-base;
			}

			.content {
				color: $font-color-light;
				.img{
					width: 120rpx;
					height: 120rpx;
					border-radius: 20rpx;
				}
			}

		}
	}
	
	.buttom{
		justify-content: space-around;
		padding-top: 50rpx;
		.btn{
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 99rpx;
		}
		.borderGray{
			border:1px solid $font-color-disabled;
			color: $font-color-disabled;
		}
		.borderGreed{
			border: 1px solid $color-green;
			color: $color-green;
		}
	}
</style>