<template>
	<view>
		<!-- 添加 -->
		<button class="shadow round bg-cyan add-btn iconfont icon-plus" hover-class="cc-active" @tap="openPage('/pages/add-stroke/add-stroke')"></button>
		<view class="card radius shadow-warp bg-white margin" :key="index" v-for="(item,index) in tableList">
			<view class="card-head solid-bottom">
				<view class="round bg-green cu-avatar">{{ index+1 }}</view>
				<view class="flex flex-sub"></view>
				<view class="flex justify-end">
					<text class="text-grey text-xl">{{ item.date }}</text>
				</view>
			</view>

			<view class="card-content padding-lr">
				<view class="data-wrap">
					<view class="data-item">
						<view class="data-title">出发时间：
							<text class="text-gray padding-left-xs">{{ item.startTime }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">抵达时间:
							<text class="text-gray padding-left-xs">{{ item.endTime }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">出行交通方式:
							<text class="text-gray padding-left-xs">{{ item.transport }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">乘坐航班车次或车牌号码及座位号:
							<text class="text-gray padding-left-xs">{{ item.carNumber }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		showToast
	} from 'common/script/util';

	export default {
		data() {
			return {
				tableList: [{
						date: '2020-02-05',
						startTime: '2020-02-04',
						endTime: '2020-02-05',
						transport: '铁路',
						carNumber: '32'
					},
					{
						date: '2020-02-05',
						startTime: '2020-02-04',
						endTime: '2020-02-05',
						transport: '飞机',
						carNumber: '3282'
					},
					{
						date: '2020-02-05',
						startTime: '2020-02-04',
						endTime: '2020-02-05',
						transport: '自驾',
						carNumber: '35212'
					}
				],
			};
		},
		methods: {

		},
	};
</script>

<style lang="scss" scoped>
	.data-wrap {
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: flex-start;
		padding: 40rpx 0;

		.data-item {
			display: flex;
			flex-wrap: wrap;
			align-items: left;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			
			.data-title{
				line-height: 60rpx;
				color: $black;
			}
		}
	}
	
	.add-btn{
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 96rpx;
		height: 96rpx;
		line-height: 96rpx;
		padding: 0;
		z-index: 1;
	}
	.add-btn::after{
		border: none;
	}
</style>
