uni-zhihuikuangshan/components/e-record/e-record.vue

<template>
	<view>
		<view class="recordList">
			<view class="title">记录列表</view>
			
			
			<scroll-view scroll-x="true" >
				<view class="list">
					<view class="item" :class="{active:active==index}" v-for="(item,index) in recordList" :key="index" @click="click_active(index,item)">{{item.templateName}}</view>
				</view>
			</scroll-view>
			
			<view class="content">
				<view class="inner" v-for="(item,index) in instanceList" :key="index">
					<view style="color: #009FE8;">记录时间 ： {{item[0].createDate}}</view>
					<view style="color: #009FE8;">{{item[0].templateName}}</view>
					<view>{{item[0].createName}}</view>
					<view v-for="(item_2,index_2) in item[0].recordStatusInstanceList" :key="index_2">
						<view> <span style="color: #999999;">{{item_2.statusName}} ：</span> {{item_2.recordStatusInstanceValue}}</view>
					</view>
					<view style="color: #009FE8;" v-if="item[0].statusFlag">结束 ： {{item[0].createDate}}</view>
					<view style="color: #F0AD4E;" v-else>等待处理...</view>
				</view>
			</view>
			
			
			<view class="more">查看更多</view>
			
				
			
		</view>
	</view>
</template>

<script>
	export default {
		props: [
			"recordList",
			"instanceList"
		],
		data() {
			return {
				active:0
			};
		},
		methods: {
			click_active(index,item){
				this.active = index
				this.$emit("set_parentId",item.parentId)
			}
		}
	}
</script>

<style lang="scss">
	.recordList {
		width: 700rpx;
		.title {
			line-height: 30px;
			border-left: 4px solid #009FE8;
			border-radius: 4px;
			padding-left: 10px;
			margin-bottom: 10px;
		}
		
		.list{
			width: 400%;
			padding: 8px 0;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			cursor: pointer;
			
			display: flex;
			
			.item{
				margin-right: 15px;
				border: 1px solid #ccc;
				color: #ccc;
				font-size: 17px;
				padding: 4px 8px;
				border-radius: 4px;
			}
			.active{
				background-color: #009FE8;
				color: #fff;
			}
		}
		
		.content{
			padding:10rpx;
			.inner{
				box-sizing: border-box;
				padding: 10px 30rpx;
				width: 680rpx;
				border: 1px dashed #ccc;
				border-radius: 10px;
				margin-bottom: 10px;
			}
			
		}

		
	}


	.more{
		text-align: center;
		line-height: 60px;
		font-size: 18px;
		border-bottom: 2px solid #C0C0C0;
		margin: 0 -25rpx;
	}
</style>