weCom/pages/index/car.vue

<template>
	<view class="content">
		<view class="carTop">
			<view class="carCont">
				<view class="carModel">
					<image src="../../static/logo.png" mode="" class="carLogo"></image>
					<view class="carModelCont">
						<view class="carMcTop">
							<view class="plateNumber">鲁A12345</view>
							<view class="carTime">9年4个月</view>
							<view class="carA">A类车</view>
						</view>
						<view class="carMcTxt">2021款 1.2T 无极S-CVT 精英PLUS版 过精英PLUS版精英PLUS版长长...</view>
					    <view class="carTitleBox">
							<view class="carTitle">潜在车辆</view>
							<view class="carTitle">矩形</view>
						</view>
					</view>
					<view>
						<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
					</view>
				</view>
				<view class="carData">
					<view class="carDataLine">最新里程：29301km</view>
					<view class="carDataLine">累计消费：2930.00</view>
					
				</view>
				<view class="carnotes">车辆备注：这是备注信息</view>
			</view>
		</view>
		
		<view class="box">
			<view class="line">
				<view class="lineTop">
					<view class="lineTop1">
						<view class="lineTopNs">
							<view class="nsTxt">年审日期</view>
							<view class="nsStatus">已过期</view>
						</view>
						<view class="lineTimeBox">
							<span>2019-01-21</span>
							<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
						</view>
					</view>
					<view class="lineTop2">
						<view class="chaoqi">超期天数：10</view>
						<view class="lineBtn">发送提醒</view>
					</view>
				</view>
				<view class="lineCont">
					<view class="lcLine">
						<view class="lineTop1">
							<view class="lineTopNs">
								<view class="nsTxt">保险提醒</view>
								<view class="nsStatus">即将到期</view>
							</view>
							<view class="lineTimeBox">
								<span>2019-01-21</span>
								<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
							</view>
						</view>
						<view class="carData">
							<view class="carDataLine">交强险到期：2011-02-12</view>
							<view class="carDataLine">商业险到期：2011-02-12</view>
						</view>
						<view class="carnotes">保险公司：这是保险公司名</view>
						<view class="lineTop2">
							<view class="chaoqi">距离天数：10</view>
							<view class="lineBtn">发送提醒</view>
						</view>
					</view>
					
				</view>
			</view>
			
			<!-- 提醒商机 -->
			<view class="line">
				<view class="lineTop">
					<view class="lineTop1">
						<view class="lineTopNs">
							<view class="nsTxt">提醒商机</view>
							
						</view>
						<view class="lineTimeBox">
							<span style="color: #FF0000;">2条</span>
							<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
						</view>
					</view>
				
				</view>
				<view class="lineCont">
					<view class="lcLine">
						<view class="lineTop1">
							<view class="lineTopNs">
								<view class="nsTxt">提醒类别：机油滤清器</view>
							</view>
						</view>
						<view class="carData">
							<view class="carDataLine">下次服务日期：2024-02-12</view>
							<view class="carDataLine">下次服务里程：93843km</view>
						</view>
						<view class="carnotes">上次到店：2022-01-21</view>
						<view class="lineTop2">
							<view class="chaoqi">超期天数：10</view>
							<view class="lineBtn">发送提醒</view>
						</view>
					</view>
					<view class="lcLine">
						<view class="lineTop1">
							<view class="lineTopNs">
								<view class="nsTxt">保养提醒</view>
							</view>
						</view>
						<view class="carData">
							<view class="carDataLine">下次服务日期：2024-02-12</view>
							<view class="carDataLine">下次服务里程：93843km</view>
						</view>
						<view class="carnotes">上次到店：2022-01-21</view>
						<view class="lineTop2">
							<view class="chaoqi">超期天数：10</view>
							<view class="lineBtn">发送提醒</view>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 提醒商机 -->
			<!-- 检测异常商机 -->
			<view class="line">
				<view class="lineTop">
					<view class="lineTop1">
						<view class="lineTopNs">
							<view class="nsTxt">检测异常商机</view>
							
						</view>
						<view class="lineTimeBox">
							<span style="color: #FF0000;">2条</span>
							<image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
						</view>
					</view>
				
				</view>
				<view class="lineCont">
					<view class="lcLine">
						<view class="lineTop1">
							<view class="lineTopNs">
								<view class="nsTxt">检测异常商机</view>
							</view>
						</view>
						
						<view class="carData">
							<view class="carDataLine">下次服务日期：2024-02-12</view>
							<view class="carDataLine" style="color: #FF0000;">距离天数：10</view>
						</view>
						<view class="carnotes">检测结果：长了换行1</view>
						<view class="carData" style="padding-top: 16rpx;">
							<view class="carDataLine">检测日期：2024-02-12</view>
							<view class="carDataLine" >检测里程：9383km</view>
						</view>
						<view class="carnotes">检测门店：这是门店名称长了换行展示1</view>
						<view class="lineTop2">
							<view class="chaoqi"></view>
							<view class="lineBtn">发送提醒</view>
						</view>
					</view>
				
					
				</view>
			</view>
			<!-- 检测异常商机 -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style scoped>
	.carTop{
		background: #fff;
		padding: 24rpx;
		padding-top: 0;
	}
	.carCont{
		height: 305rpx;
		background: linear-gradient( 180deg, #FFE9DB 0%, #FFF2EB 48%, #FFF8F4 100%);
		border-radius: 10rpx;
		opacity: 0.7;
	}
	.carLogo{
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}
	.carUpimg{
		width: 26rpx;height: 16rpx;
	}
	.carModel{
		display: flex;
		padding-top: 24rpx;
		padding-left: 24rpx;
	}
	.carModelCont{
		width: 560rpx;
		padding-left: 12rpx;
	}
	.carMcTop{
		display: flex;
	}
	.plateNumber{
		font-weight: 500;
		font-size: 30rpx;
		color: #3C3C3C;
		line-height: 42rpx;
	}
	.carTime{
		height: 36rpx;
		background: #FF842D;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		padding: 0 10rpx;
		margin-left: 20rpx;
	}
	.carA{
		height: 36rpx;
		background: #FFE26C;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #2A2623;
		line-height: 36rpx;
		padding: 0 10rpx;
		margin-left: 20rpx;
	}
	.carMcTxt{
		font-size: 24rpx;
		color: #666666;
		padding-top: 16rpx;
		
		  white-space: nowrap; /* 不换行 */
		  overflow: hidden; /* 隐藏超出的内容 */
		  text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
		  width: 560rpx; /* 设置最大宽度以限制文本的显示长度 */
		

	}
	.carTitleBox{
		display: flex;padding-top: 12rpx;
	}
	.carTitle{
		height: 36rpx;
		border-radius: 4rpx;
		border: 1px solid #FF8113;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #FF8113;
		padding: 0 8rpx;
		margin-right: 10rpx;
	}
	.carModel{
		border-bottom: 1px solid #EFDFD6;
		padding-bottom: 20rpx;
	}
	.carData{
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666666;
	/* 	padding-top: 18rpx; */
		line-height: 33rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.carnotes{
		font-size: 24rpx;
		color: #666666;
		padding-top: 18rpx;
		line-height: 33rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.box{
		padding: 0 24rpx;
	}
	.line{
		background: #fff;margin-top: 20rpx;
		border-radius: 10rpx;
	}
	.lineTop{
		padding: 30rpx 22rpx;
	}
	.lineTop1{
		display: flex;justify-content: space-between;
		padding-bottom: 20rpx;
	}
	.lineTopNs{
		display: flex;
	}
	.nsTxt{
		font-size: 28rpx;
		color: #3C3C3C;
		line-height: 36rpx;
	}
	.nsStatus{
		font-size: 24rpx;
		color: #FF0000;
		height: 36rpx;
		background: #FFF1F1;
		border-radius: 4rpx;
		line-height: 36rpx;
		padding: 0 10rpx;
		margin-left: 20rpx;
	}
	.lineTimeBox{
		line-height: 36rpx;color: #3C3C3C;display: flex;
	}
	.carUpimg{
		margin-left: 20rpx;margin-top: 8rpx;
	}
	.lineTop2{
		display: flex;justify-content: space-between;
		/* padding-bottom: 30rpx; */
	}
	.lineBtn{
		height: 52rpx;
		border-radius: 28rpx;
		border: 1rpx solid #DDDDDD;
		line-height: 52rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #3C3C3C;
	}
	.chaoqi{
		line-height: 56rpx;font-size: 24rpx;
color: #FF0000;
	}
	.lineCont{
		
	}
	.lcLine{
		padding: 24rpx 20rpx 0 20rpx;
		border-top: 1px solid #EEEEEE;
		padding-bottom: 20rpx;
	}
	.lcLine .carData{
		padding-left: 0;padding-right: 0;
	}
	.lcLine .carnotes{
		padding-left: 0;padding-right: 0;
	}
</style>