ParkApp/components/car-card/car-card.vue

<template>
	<view >
		<view class="recommend-info" >
		  <view class="goods-list">
		    <view @click="showDetail(item)"  class="list" v-for="(item,index) in list" :key="index">
		      <view class="pictrue" >
		        <image :src="item.outImgPath?item.outImgPath:'/static/index/noimg3.png'" mode="scaleToFill"></image>
				<view class="car">{{item.carNo}}</view>
		      </view>
			  <view class="content">
				  <view class="">
						<text class="cuIcon-time margin-right-10"></text>
						<text>进：{{formatDate(item.enterTime)}}</text>
				  </view>
				  <view style="padding-top: 8rpx;">
						<text class="cuIcon-time margin-right-10"></text>
						<text>出：{{formatDate(item.outTime)}}</text>
				  </view>
				  
				  <view class="flex justify-center" style="margin: 20rpx 0;">
				  	<view  class="cu-btn line-blue round df" style="width: 70%;">
				  		查看详情
				  	</view>
				  </view>
			  </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				
			}
		},
		computed:{
			formatDate(){
				return val=>{
					if (this.$isEmpty(val)) {
						return '未知'
					}
					return this.$u.timeFormat(new Date(val).getTime(), 'mm-dd hh:MM:ss') 
				}
			},
		},
		methods: {
			showDetail(item){
				uni.navigateTo({
					url:"/pages/index/car/detail?id="+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 为你推荐 */
	.recommend-info{
	  width: 100%;
	  .recommend-title{
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 100%;
	    height: 100rpx;
	    .title{
	      display: flex;
	      align-items: center;
	      image{
	        width: 416rpx;
	        height: 40rpx;
	      }
	    }
	  }
	  .goods-list{
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    padding: 0 30rpx;
	    .list{
	      width: 49%;
	      height: 540rpx;
	      margin-bottom: 20rpx;
	      background-color: #FFFFFF;
	      border-radius: 10rpx;
	      overflow: hidden;
	      .pictrue{
	        width: 100%;
			position: relative;
	        image{
				border-top-right-radius: 12rpx;
				border-top-left-radius: 12rpx;
	            height: 330rpx;
	        }
			.car{
				position: absolute;
				bottom: 20rpx;
				left: 10rpx;
				color: #FFFFFF;
			}
	      }
		  
		  .content{
			  padding: 20rpx;
			  text{
				  padding: 10rpx 0;
			  }
		  }
	      
	    }
	  }
	}

</style>