sailun-tbr-web/pages/me/search/index.vue

<template>
	<view>
		<view class="content">
			<u-search placeholder="请输入搜索内容" @click="data" v-model="keyword"></u-search>
		</view>
		
		<view class="content-one" v-for="(item,index) in datalist" :key="index">
			<view class="content-one-view">
			</view>
			<view class="content-one-text">单号：20200609135904795 - 20753</view>
			<view class="content-one-time">2020-10-28</view>
			<view class="content-two">
				<view>
					赛轮
				</view>
				<view>
					aaaaaaaaaaabbbbbbbbb
				</view>
			</view>
			<view class="content-two">
				<view>
					赛轮
				</view>
				<view>
					aaaaaaaaaaabbbbbbbbb
				</view>
			</view>
			<view class="content-two">
				<view>
					赛轮
				</view>
				<view>
					aaaaaaaaaaabbbbbbbbb
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				datalist: [
					{},
					{}
				],
				keyword: ''
			}
		},
		methods: {
			data() {
				console.log("@@@")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-top: 30rpx;
	}
	.content-one {
		width: 690rpx;
		// height: 338rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24px 0px rgba(101, 176, 249, 0.41);
		border-radius: 20px;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	.content-one-view {
		width: 6rpx;
		height: 30rpx;
		background: #0292FD;
		position: relative;
		top: 20rpx;
		left: 30rpx;
	}
	.content-one-text {
		position: relative;
		top: -8rpx;
		left: 60rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #000;
	}
	.content-one-time {
		position: relative;
		top: -40rpx;
		left: 530rpx;
		font-size: 16rpx;
		color: #626262;
	}
	.content-two {
		display: flex;
		justify-content: space-between;
		width: 600rpx;
		margin: 0 auto;
	}
	
	.content-two>view:nth-child(2) {
		margin-bottom: 30rpx;
		
	}
</style>