flying-monkey/pages/dataQuery/client.vue

<template>
	<view class="content">
		<statusNav returnColor="#c2c2c2" navBarTitle="客户(查询结果列表)"></statusNav>
		<container-subgroup-two>
			<view class="client-content" slot="content" style="margin: 0 -30rpx;">
				<view @tap="goDetail(index)" class="li" v-for="(item,index) in 10" :key="index">
					<view class="li-content">
						<view class="">
							<view class="title">湖南争鸣光电科技有限公司</view>
							<view class="code">编号：KH20220304-002</view>
							<view class="label-content">
								<view class="label">弱电安防</view>
								<view class="label">弱电安防</view>
								<view class="label">弱电安防</view>
							</view>
						</view>
						<view class="icon">13</view>
					</view>
					<view class="address">
						<image class="img" src="../../static/iocn/dizi.png" mode=""></image>
						<view class="text">湖南省长沙市高新开发区谷园路109号像素大厦1205</view>
					</view>
				</view>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import statusNav from '../../components/status-nav.vue';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo
		},
		data() {
			return {
             dataList:[
                 {
                     name:'湖南争鸣光电科技有限公司',
                     code:"KH20220304-002"
                 }
             ],
			}
		},
		methods: {
			// 前往客户详情
			goDetail(index){
				uni.navigateTo({
					url:'/pages/dataQuery/details'
				})
			}
		}
	}
</script>


<style>
	.client-content .li {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx 34rpx 30rpx 53rpx;
	}

	.client-content .li .title {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 25rpx;
	}

	.client-content .li .code {
		font-size: 24rpx;
		margin-bottom: 25rpx;
		color: #666666;
	}

	.client-content .li .label-content {
		display: flex;
		padding-bottom: 22rpx;
	}

	.client-content .li .label-content .label {
		padding: 10rpx 21rpx;
		background-color: #EDEDED;
		margin-right: 12rpx;
		color: #999999;
		font-size: 24rpx;
		border-radius: 5rpx;
	}

	.client-content .li .li-content {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #EDEDED;
		justify-content: space-between;
	}

	.client-content .li .li-content .icon {
		width: 71rpx;
		height: 66rpx;
		background-color: #00A2E9;
		box-shadow: -5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
		font-size: 36rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.client-content .li .address {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		color: #666666;
		font-size: 24rpx
	}

	.client-content .li .address .img {
		width: 17rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
</style>