epc/pages/mobile/OemDetail.vue

<template>
	<view class="box">

		<scroll-view scroll-x="true" class="scroll-Y">

			<view class="tab" v-for="(item,index) in tabList" @click="topClick(index)">
				<view class="tabLine" :class="{tabActive:tabIndex==index}">{{item}}
					<view class="line" :class="{lineBlue:tabIndex==index}"></view>
				</view>

			</view>
		</scroll-view>

		<!-- 配件信息 -->
		<view class="mainBox" v-if="tabIndex==0">
			<view class="comtent">
				<view class="left">零件编号</view>
				<view class="right">EQ867-51LO</view>
			</view>
			<view class="comtent">
				<view class="left">名称</view>
				<view class="right">EQ867-51LO</view>
			</view>
			<view class="comtent">
				<view class="left">位置</view>
				<view class="right">EQ867-51LO</view>
			</view>
			<view class="comtent">
				<view class="left">用量</view>
				<view class="right">EQ867-51LO</view>
			</view>
			<view class="comtent">
				<view class="left">备注</view>
				<view class="right">这是备注这是备注这是备注这是备注过长换行这是备注这是备注这是备注这是备注过长换行</view>
			</view>
			<view class="comtent">
				<view class="left">英文名称</view>
				<view class="right">EQ867-51LO</view>
			</view>
			<view class="comtent">
				<view class="left">适用车型代码</view>
				<view class="right">EQ867-51LO</view>
			</view>
			<view class="comtent">
				<view class="left">是否颜色配件</view>
				<view class="right">EQ867-51LO</view>
			</view>
			<view class="comtent">
				<view class="left">4S价格</view>
				<view class="right" style="color: #FF4F00; font-weight: bold;">¥265.00</view>
			</view>

		</view>

		<!-- 维修工时 -->
		<view class="mainBox" v-if="tabIndex==1">
				<view class="workBox" v-for="(item,index) in workHourseList" :key="index">
					<view class="oneBox">
						<view class="comtent2">
							<view class="left">工时代号：</view>
							<view class="right">1201D0</view>
						</view>
						<view class="comtent2">
							<view class="left">工时：</view>z
							<view class="right">12</view>
						</view>
					</view>
					
					<view class="oneBox">
						<view class="comtent2">
							<view class="left">相关参考号：</view>
							<view class="right">1201D0</view>
						</view>
						<view class="comtent2">
							<view class="left">工时包含：</view>
							<view class="right">12</view>
						</view>
					</view>
					
					<view class="comtent2" style="width: 100%;">
						<view class="left" style="width: 10%;" >说明：</view>
						<view class="right" style="width: 90%;" >净化控制电磁阀 - 更换净化控制电磁阀 - 更换净化控制电磁阀 - 更换</view>
					</view>
					
				</view>
		</view>

		<!-- 通用件 -->
		<view class="mainBox" v-if="tabIndex==2" style="margin-top: 0rpx; padding: 0rpx">
			<view class="topTitle"><span style="color: #FF3B30;">*</span>通用件数据仅供参考，采购前请谨慎核对是否为相同配件</view>
			
			<view class="workBox2" v-for="(item,index) in tongyongList" :key="index">
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">品牌：</view>
						<view class="right2">1201D0</view>
					</view>
					<view class="comtent2">
						<view class="left2" style="width: 26%;">零件号：</view>z
						<view class="right2">12</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">名称：</view>
						<view class="right2">1201D0</view>
					</view>
					<view class="comtent2">
						<view class="left2">价格：</view>
						<view class="right2">12</view>
					</view>
				</view>
				
				
			</view>
		</view>

		<!-- EPC车型 -->
		<view class="mainBox" v-if="tabIndex==3" style="margin-top: 0rpx; padding: 0rpx">
			<view class="topTitle">共<span style="color: #FF3B30;">999</span>条</view>
			
			<view class="workBox2" v-for="(item,index) in epsList" :key="index">
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">名称：</view>
						<view class="right2">1201D0</view>
					</view>
					<view class="comtent2">
						<view class="left2">车型：</view>z
						<view class="right2">12</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">年份：</view>
						<view class="right2">1201D0</view>
					</view>
					<view class="comtent2">
						<view class="left2" style="width: 28%;">发动机：</view>
						<view class="right2">12</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2" style="width: 28%;">变数箱：</view>
						<view class="right2">1201D0</view>
					</view>
					<view class="comtent2">
						<view class="left2">地区：</view>
						<view class="right2">12</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">配置：</view>
						<view class="right2">1201D0</view>
					</view>
					<view class="comtent2">
						<view class="left2">级别：</view>
						<view class="right2">12</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2" style="width: 35%;">模型代码：</view>
						<view class="right2">1201D0</view>
					</view>
					
				</view>
			</view>
		</view>

		<!-- 4S销售车型 -->
		<view class="mainBox" v-if="tabIndex==4" style="margin-top: 0rpx; padding: 0rpx">
			<view class="topTitle">共<span style="color: #FF3B30;">999</span>条</view>
			
			<view class="workBox3" v-for="(item,index) in epsList" :key="index">
				<view class="carMode">2009 手自一体变速器（MT）模拟7档 前置四驱 S5 Ca
briolet</view>
			</view>
		</view>









	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: ['配件信息', '维修工时', '通用件', 'EPC车型', '4S销售车型'],
				workHourseList: [1, 2, 3],
				tongyongList: [1, 2, 3],
				epsList: [1, 2, 3],
			}
		},
		methods: {
			topClick(index) {
				this.tabIndex = index
			},
		}
	}
</script>

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

	.scroll-Y {
		white-space: nowrap;
		width: 100%;
		height: 90rpx;
		background-color: #FFFFFF;
	}

	.tab {
		background: #FFFFFF;
		line-height: 87rpx;
		height: 87rpx;
		display: inline-block;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.tabLine {

		font-size: 32rpx;
		color: #999999;
		text-align: center;

	}

	.tabActive {
		color: #3F90F7;
		font-weight: bold;

	}

	.line {
		background: #FFFFFF;
		height: 4rpx;
		
	}

	.lineBlue {
		background: #3F90F7;
		width: 60rpx;
		margin-left: calc((100% - 60rpx)/2);
		
	}

	.mainBox {
		margin-top: 20rpx;
		background: #FFFFFF;
		min-height: 90vh;
		padding: 20rpx 24rpx;
	}

	.comtent {
		padding-bottom: 30rpx;
		display: flex;
		align-items: baseline;
		font-size: 26rpx;
	}

	.left {
		width: 40%;
		color: #999999;
		white-space: nowrap;
	}

	.right {
		width: 60%;
		color: #333333;
	}
	
	.workBox{
		
		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	.oneBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		padding-bottom: 20rpx;
	}
	.comtent2 {
		display: flex;
		align-items: baseline;
		font-size: 26rpx;
		width: 50%;
	}
	
	.topTitle{
		background-color: #F4F5F7;
		padding: 14rpx 24rpx;
		color: #666666;
		font-size: 24rpx;
	}
	.workBox2{
		
		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 20rpx 24rpx 0rpx;
		
		margin-bottom: 20rpx;
	}
	.left2 {
		width: 20%;
		color: #999999;
		white-space: nowrap;
	}
	
	.right2 {
		width: 80%;
		color: #333333;
	}
	.workBox3{
		
		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 20rpx 24rpx;
		
		margin-bottom: 20rpx;
	}
	.carMode{
		color: #333333;
		font-size: 28rpx;
		
	}
</style>