shell/pages/index/gearboxOil.vue

<template>
	<view class="content">
		<view class="box">
			<view class="historyLine">
				<image src="http://img.db.66km.cn/carbrandlogo/B - 宝马.png" mode="" class="historylinecarImg"></image>
				<view class="historylinecar">华晨宝马iX3 G08 电动 HA001N0电动领先型 ( 改款 )（2021-2021）过长换行</view>
			</view>
		</view>
		<view class="cont">
			<view class="jiyouBox">
				<view class="jiyouTop">
					<view class="jiyoutopTitle">变速箱油</view>
					
				</view>
				<view class="jylineBox">
					<view class="jyline" v-for="(item,index) in 2">
						<view class="jyimgBox">
							<image src="http://dmsphoto.66km.com.cn/thFiles/1057BA84-E59D-47B7-9F66-73E3491A443E.jpg" mode="" class="jyimg"></image>
						</view>
						<view class="jyName">
							<span class="best">最佳</span>
							<span class="jyNametxt">安耐驰 全合成机油润滑油 5W-40 SM级 4L 汽车全合成机油润滑油 </span>
						</view>
					</view>
				</view>
			</view>
			<!-- 养护信息 -->
            <view class="jiyouBox">
				<view class="jiyouTop">
					<view class="jiyoutopTitle">养护信息</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">型号/厂家</view>
					<view class="yhxxlineRight">HU898777/DF89090/980889</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">原厂加注量</view>
					<view class="yhxxlineRight">5</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">换油量(L)</view>
					<view class="yhxxlineRight">重力:5  机器:12</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">换油接头</view>
					<view class="yhxxlineRight">A24</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">养护指导</view>
					<view class="yhxxlineRight">养护指导这是养护指导信息这是养护指导信息这是养护指导信息这是</view>
				</view>
				
				<view class="yhxxImgBox">
					<view class="yhxxImglineBox">
						<view class="yhxxImgBorder">
							<image src="http://dmsphoto.66km.com.cn/thFiles/B366C258-AE13-41F3-86A8-B0CEDD1654C0.jpg" mode="" class="yhxxImg"></image>
						    <view class="yhxxCkdt">
								<image src="../../static/img/icon_pic.png" mode="" class="iconpic"></image>
								<view class="yhxxCkdtNum">1</view>
							</view>
						</view>
						<view class="yhxximgName">接头位置</view>
					</view>
				</view>
				
			</view>

		</view>



	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {

			}
		},
		onLoad(opt) {

		},
		methods: {

		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background: #F4F5F7;
	}

	.box {
		padding: 0 24rpx;
		background: #ffffff;
	}

	.historylinecarImg {
		width: 46rpx;
		height: 46rpx;
	}

	.historylinecar {
		font-weight: 400;
		font-size: 26rpx;
		color: #1A1A1A;
		line-height: 37rpx;
		width: 636rpx;
	}

	.historyLine {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-top: 1rpx solid #EEEEEE;
	}

	.cont {
		padding:0 24rpx 30rpx 24rpx;
	}
	.toplineImg{
		width: 35rpx;
		height: 34rpx;
	}
	.topName{
		line-height: 34rpx;font-weight: 400;
color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
	}
	.topBox{
		width: 702rpx;
		height: 98rpx;
		background: #FFFFFF linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
		border-radius: 16rpx;
		display: flex;justify-content: space-around;
	}
	.topsx{
		width: 2rpx;background: #ffffff;
		height: 54rpx;margin-top: 22rpx;
	}
	.topLine{
		display: flex;padding-top: 32rpx;
	}
	.jiyouTop{
		display: flex;justify-content: space-between;
	}
	.jiyouBox{
		margin-top: 30rpx;border-radius: 16rpx;
		background: #ffffff;padding: 30rpx;
	}
	.jiyoutopTitle{
		font-weight: 500;font-size: 28rpx;
		color: #1A1A1A;
		line-height: 40rpx;
	}
	.jyzl{
		font-weight: 400;line-height: 40rpx;
		color: #666666;font-size: 24rpx;
	}
	.jyimg{
		width: 302rpx;
		height: 302rpx;
		border-radius: 10rpx;
	}
	.jyline{
		width: 302rpx;padding-top: 30rpx;
	}
	.jyName{
		font-weight: 400;font-size: 22rpx;
		color: #1A1A1A;
		line-height:36rpx ;
		overflow: hidden; 
		text-overflow: ellipsis; 
		display: -webkit-box; 
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2;
		padding-top: 10rpx;
	}
	.best{
		color: #FF4F00;border-radius: 6rpx;
		padding: 0 8rpx;border: 1px solid #FF4F00;
	}
	.jylineBox{
		display: flex;justify-content: space-between;flex-wrap: wrap;
	}
	.yhxxline{
		 display: flex;font-size: 26rpx;line-height: 36rpx;padding: 20rpx 0;
	}
	.yhxxlineLeft{
		color: #999999;width: 174rpx;
	}
	.yhxxlineRight{
		color: #3C3C3C;width: 458rpx;
	}
	.yhxxImg{
		width: 138rpx;
		height: 138rpx;
	}
	.yhxxImgBorder{
		width: 138rpx;
		height: 138rpx;
		border-radius: 7rpx;
		border: 1rpx solid #EEEEEE;
		overflow: hidden;
		position: relative;
	}
	.yhxximgName{
		width: 138rpx;font-weight: 400;
color: #3C3C3C;font-size: 24rpx;
line-height: 34rpx;padding-top: 16rpx;
	}
	.iconpic{
		width: 18rpx;
		height: 15rpx;
		
	}
	.yhxxCkdt{
		width: 62rpx;
		height: 30rpx;
		border-radius: 15rpx;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		bottom: 10rpx;right: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.yhxxCkdtNum{
		color: #ffffff;font-weight: 500;font-size: 20rpx;padding-left: 5rpx;    padding-bottom: 6rpx;
	}
</style>