sailun-tbr-web/pages/me/result.vue

<template>
	<view>
		<view class="head">
			<view class="tips">
				<image src="../../../static/sailun/successful.png" mode=""></image>
				<view>查询成功</view>
			</view>
			<view class="stripe"></view>
			<view class="roll">
				<view>232654561651</view>
				<view>
					<view></view>
					<view></view>
					<u-line color="#f4f4f4" border-style="dashed" :hair-line="true" length="94%" style="margin: 0 auto;padding-top: 30rpx;" />
				</view>
				<view class="Exhibition">
					<view><text>轮胎胎号</text><text>232654561651</text></view>
					<view><text>轮胎类型</text><text>扫码出库</text></view>
					<view><text>轮胎品牌</text><text>赛轮轮胎</text></view>
					<view><text>轮胎规格</text><text>12R22.5</text></view>
					<view><text>创建时间</text><text>2020-02-22 10:22:23</text></view>
				</view>
			</view>
			<u-button type="primary" shape="circle" class="button">继续查询</u-button>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.button {
		width: 90%;
		margin-top: 200rpx;
	}

	.head {
		width: 750rpx;
		height: 440rpx;
		background-color: #0095FF;

		.stripe {
			width: 650rpx;
			height: 30rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 12rpx;
			margin: 0 auto;
			margin-top: 40rpx;
		}

		.roll>view:nth-child(1) {
			font-size: 42rpx;
			font-weight: bold;
			color: #0192FD;
			text-align: center;
			margin-bottom: 50rpx;
		}

		.roll {
			width: 600rpx;
			height: auto;
			background: #FFFFFF;
			margin: 0 auto;
			margin-top: -15rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(101, 176, 249, 0.3);
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			padding-top: 50rpx;
			padding-bottom: 40rpx;

			view:nth-child(2) {
				width: 100%;
				height: auto;

				view:nth-child(1),
					{
					width: 50rpx;
					height: 50rpx;
					background-color: #F4F4F4;
					border-radius: 100%;
					float: left;
					margin-left: -30rpx;
				}

				view:nth-child(2) {
					width: 50rpx;
					height: 50rpx;
					background-color: #F4F4F4;
					border-radius: 100%;
					float: right;
					margin-right: -30rpx;
				}
			}
		}

		.tips {
			text-align: center;

			image {
				margin-top: 60rpx;
				width: 106rpx;
				height: 112rpx;
			}

			view {
				margin-top: 50rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.Exhibition {
		width: 94%;
		margin: 0 auto;
		margin-top: 25rpx;
	}
	.Exhibition>view{
		margin-bottom: 10rpx;
	}
	.Exhibition>view>text:nth-child(2) {
		float: right;
	}
</style>