wxThird/pages/subPack/tireSubmit.vue

<template>
<view class="box">
 <view class="cont">
	 <view style="height: 20rpx;"></view>
 	<view class="shopBox">
 		  <view class="shopLeft">
 			  <view class="shopName">
 				  <span style="font-weight: 500;padding-right: 26rpx;">服务门店：</span>
 				  <span>兰考众生大道店</span>
 			  </view>
			  <view class="shopAdress">河南省河南省河南省河南省河南省河南省河南</view>
 		  </view>
 		  <image src="../../static/timg/icon_phone@2x.png" mode="" class="callImg"></image>
 	</view>
	
	<view class="lineBox">
		<view class="line">
			<view class="lineLeft">联系方式</view>
			<view class="lineRgiht">微信用户 18866665555</view>
		</view>
		<view class="line">
			<view class="lineLeft">服务车辆</view>
			<view class="lineRgiht">微信用户 18866665555</view>
		</view>
		<view class="line" style="border: none;">
			<view class="lineLeft">期望时间</view>
			<view class="lineRgiht" style="display: flex;">
				<span>2024-11-12 1小时内</span>
				<image src="../../static/img2/hjt.png" mode="" class="jtImg1"></image>
			</view>
		</view>
	</view>
	<view class="goodsBox">
		<view class="goodsboxTitle">已选商品</view>
		<view class="goodsLine">
			<image src="../../static/timg/noimg.png" mode="" class="goodsImg"></image>
			<view class="goodsRight">
				<view class="goodsName">朝阳1号 235/55R18 ARISU</view>
				<view class="goodsjgsl">
					<view class="goodsprice">¥719</view>
					<view class="goodsNum">x2</view>
				</view>
			</view>
		</view>
		<view class="zengline">
			<view class="zeng">赠</view>
			<view class="zengTxt">3年换新保障x1</view>
		</view>
		<view class="zengline">
			<view class="zeng">赠</view>
			<view class="zengTxt">3年换新保障x1</view>
		</view>
		<view class="zengline">
			<view class="zeng">赠</view>
			<view class="zengTxt">3年换新保障x1</view>
		</view>
	</view>
	
	<view class="lineBox">
		<view class="line">
			<view class="lineLeft">商品总价</view>
			<view class="lineRgiht">¥1892.00</view>
		</view>
		<view class="line" style="border: none;">
			<view class="lineLeft">服务总价</view>
			<view class="lineRgiht">¥0.00</view>
		</view>
		
	</view>
 	
 </view>


 
 <view class="bottomBox">
	 <view class="bottom">
		 <view class="bLeft">
			 <span style="color: #222222;font-size: 26rpx;font-weight: 500;padding-right: 10rpx;">合计</span>
			 <span style="color: #EC0F0A;font-size: 20rpx;font-weight: 500;">¥</span>
			 <span style="color: #EC0F0A;font-size: 34rpx;font-weight: 500;">294</span>
		 </view>
		 <view class="bottomBtn">提交订单</view>
	 </view>
 </view>

</view>
</template>

<script>
	export default {
		
		data() {
			return {
				themeColor:'',
				ext:'',
				
				carInfo:'',
				
			}
		},
		onLoad(opt) {
			
			
			
		},
		onShow() {
			
			
		},
		methods: {
			
			
		}
	}
</script>

<style scoped lang="less">
.box {
	width: 100vw;
	min-height: 100vh;
	background: #F4F4F4;
}
.cont{
	padding: 0 22rpx;
}
.callImg{
	width: 50rpx;height: 50rpx;
}
.shopBox{
	background: #ffffff;
	border-radius: 16rpx;
	padding: 34rpx 38rpx;
	display: flex;justify-content: space-between;

}
.shopName{
	font-size: 28rpx;
	color: #222222;
}
.shopAdress{
	font-size: 24rpx;
	color: #666666;
	line-height: 33rpx;
	padding-top: 14rpx;
}
.shopLeft{
	width: 500rpx;
}
.lineBox{
	background: #ffffff;
	border-radius: 16rpx;
	padding: 0rpx 18rpx;
	margin-top: 20rpx;
}
.line{
	display: flex;justify-content: space-between;
	padding: 18rpx 20rpx;
	border-bottom: 1px solid #EEEEEE;
}
.lineLeft{
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	line-height: 36rpx;
}
.lineRgiht{
	font-size: 24rpx;
	color: #222222;line-height: 36rpx;
}
.jtImg1{
	width: 10rpx;height: 20rpx;margin-top: 10rpx;
    margin-left: 6rpx;

}
.goodsImg{
	width: 200rpx;
	height: 200rpx;
}
.goodsBox{
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-top: 20rpx;
	padding: 24rpx 35rpx;
}
.goodsboxTitle{
	font-weight: 500;
	font-size: 30rpx;
	color: #222222;
	padding-bottom: 24rpx;
}
.goodsLine{
	display: flex;
}
.goodsRight{
	width: 480rpx;
	padding-left: 20rpx;
}
.goodsName{
	font-size: 24rpx;
	color: #222222;
	line-height: 33rpx;
	padding-top: 15rpx;
}
.goodsjgsl{
	display: flex;justify-content: space-between;
	padding-top: 12rpx;
}
.goodsprice{
	font-weight: 500;
	font-size: 34rpx;
	color: #222222;
	line-height: 48rpx;
	
}
.goodsNum{
	line-height: 48rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #666666;
}
.zengline{
	display: flex;padding-top: 18rpx;
}
.zeng{
	width: 28rpx;
	height: 28rpx;
	border-radius: 6rpx;
	line-height: 28rpx;text-align: center;
	border: 1rpx solid #FF063A;
	font-size: 18rpx;
	color: #FF063A;
    margin-top: 6rpx;
}
.zengTxt{
	line-height: 42rpx;
	font-size: 26rpx;
	color: #666666;
	padding-left: 12rpx;
}
.bottomBox{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	background: #ffffff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.bottom{
	display: flex;
	padding: 30rpx;
	justify-content: space-between;
}
.bottomBtn{
	width: 223rpx;
	height: 86rpx;
	background: #FCD903;
	border-radius: 43rpx;
	text-align: center;
	line-height: 86rpx;
	font-size: 32rpx;
	color: #110B01;
}
.bLeft{
	line-height: 86rpx;
}
</style>