1/pages/customerCS/components/claimsCard.vue

<template>
	<view class="claims-card">
		<view v-if="type==1" class="card-item" :style="{height:bodyHeight}">
			<view class="top-title">
				<image src="../../../static/img/title-img1.png"></image>
				<text> 验蟹师审核中</text>
			</view>
			<view class="card-tips">
				等待验蟹师审核，<text>{{restTime}}</text>后将自动理赔
			</view>
			<view class="card-info">
				<view class="card-time">
					2024.06.01 12:24
				</view>
				<view class="card-price">
					预计理赔<text>23.67</text>
				</view>
			</view>
			<view class="card-btn">
				查看理赔详情
			</view>
		</view>
		<view v-if="type==2" class="card-item" :style="{height:bodyHeight}">
			<view class="top-title">
				<image src="../../../static/img/title-img2.png"></image>
				<text> 理赔完成</text>
			</view>
			<view class="card-tips">
				理赔款已赔付至您的钱包余额，请您查收
			</view>
			<view class="card-info">
				<view class="card-time">
					2024.06.01 12:24
				</view>
				<view class="card-price">
					预计理赔<text>23.67</text>
				</view>
			</view>
			<view class="card-btn">
				查看理赔详情
			</view>
		</view>
		<view v-if="type==3" class="card-item disagree" :style="{height:bodyHeight}">
			<view class="top-title">
				<image src="../../../static/img/title-img3.png"></image>
				<text> 验蟹师驳回</text>
			</view>
			<view class="card-tips">
				未提交 3 只死蟹在一张照片中的合影
			</view>
			<view class="card-info">
				<view class="card-time">
					2024.06.01 12:24
				</view>
				<view class="card-price">
					预计理赔<text>23.67</text>
				</view>
			</view>
			<view class="card-btn">
				查看理赔详情
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props:{
			type:1,
			bodyHeight:"210rpx",
			
		},
		data(){
			return{
				restTime:"12:23:21",
			}
		}
	}
</script>

<style lang="scss">
	.claims-card{
		.card-item{
			width: 750rpx;	
			background: #FFFFFF;
			padding: 36rpx 36rpx 32rpx 36rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top-title{
				width: 260rpx;
				height: 50rpx;
				display: flex;
				box-sizing: border-box;
				>image{
					height: 40rpx;
					width: 40rpx;
					margin-top: 4rpx;
				}
				>text{
					font-weight: 600;
					font-size: 36rpx;
					color: #2388FF;
					margin-left: 4rpx;
					text-align: center;
				}
			}
			.card-tips{
				font-weight: 400;
				font-size: 24rpx;
				color: #555555;
				line-height: 34rpx;
				text-align: left;
				>text{
					color: #FF2D46 ;
				}
			}
			.card-info{
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				height: 67rpx;
				.card-price{
					>text{
						margin-left: 12rpx;
						font-weight: 600;
						font-size: 48rpx;
						color: #FF2D46;
						line-height: 67rpx;
						&::before{
							content: '¥';
							font-size: 24rpx;
							margin-right: 6rpx;
						}
					}	
				}
			}
			.card-btn{
				width: 678rpx;
				height: 92rpx;
				background: #FFFFFF;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				border: 2rpx solid #2388FF;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #2388FF;
				line-height: 39rpx;
				padding-top: 26rpx;
				box-sizing: border-box;
			}
			&.disagree{
				.top-title{
					>text{
						color: #FF2D46;
					}
				}
			}
		}
	}
</style>