appWareHouse/pages/studyRecord/index.vue

<template>
	<div class="container">
		<!-- 二级页面 （有返回按钮） -->
		<mHeader :title="title" class="m-header" :isBackShow="true"></mHeader>
		<div class="list-warp">
			<div class="list"
				v-for="(item, index) in studyRecord"
				:key="index">
				<div class="title-warp">
					<p class="title">{{ item.name }}</p>
					<span class="status">{{ item.isParticipate === 0 ? '未参加' : '已参加' }}</span>
				</div>
				<div class="info-warp">
					<span>{{ item.type === 1 ? '线上' : '线下' }}</span>
					<span>{{ item.duration }}课时</span>
				</div>
				<div class="time">{{ item.startTime }}-{{ item.endTime }}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mHeader from '../components/mHeader/index'
	import Api from '../../api/api.js'
	export default {
		data () {
			return {
				title: '选调培训记录',
				studyRecord: [{
					title: '这里是培训的名称这里是培训的名称',
					type: '线上/线下',
					class: '4',
					time: '2020.08.08 10:00-2020.08.08 12:00'
				},{
					title: '这里是培训的名称这里是培训的名称',
					type: '线上/线下',
					class: '4',
					time: '2020.08.08 10:00-2020.08.08 12:00'
				},{
					title: '这里是培训的名称这里是培训的名称',
					type: '线上/线下',
					class: '4',
					time: '2020.08.08 10:00-2020.08.08 12:00'
				}]
			}
		},
		components: {
			mHeader
		},
		created() {
			this._getStudyRecord()
		},
		methods: {
			// 获取选调培训记录
			_getStudyRecord () {
				Api.my.getStudyRecord().then(res => {
					this.studyRecord = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.m-header {
			background-color: #fff;
		}
		.list-warp {
			padding: calc(100rpx + 30rpx + var(--status-bar-height)) 32rpx 0;
			.list {
				padding: 32rpx 24rpx 0;
				box-shadow: 0 12rpx 24rpx 2rpx rgba(240, 240, 240, 1);
				border-radius: 20rpx;
				margin-bottom: 32rpx;
				.title-warp {
					display: flex;
					align-items: center;
					.title {
						color: $uni-text-color;
						font-size: 32rpx;
						font-weight: 500;
					}
					span {
						flex-shrink: 0;
						width: 84rpx;
						line-height: 36rpx;
						background: #F2FAFE;
						border-radius: 19rpx;
						margin-left: 16rpx;
						background-color: $uni-bg-color-hover;
						color: $uni-border-color;
						font-size: 20rpx;
						text-align: center;
					}
				}
				.info-warp {
					margin: 16rpx 0 32rpx;
					span {
						display: inline-flex;
						justify-content: center;
						align-items: center;
						height: 36rpx;
						border-radius: 20rpx 36rpx 36rpx 0;
						font-size: 20rpx;
						box-sizing: border-box;
						padding: 4rpx 10rpx;
						&:first-of-type {
							border: 2rpx solid $uni-text-color-highlight;
							color: $uni-text-color-highlight;
							margin-right: 16rpx;
						}
						&:last-of-type {
							border: 2rpx solid $uni-tab-color;
							color: $uni-tab-color;
						}
					}
				}
				.time {
					display: flex;
					align-items: center;
					height: 66rpx;
					color: $uni-text-color-grey;
					font-size: 24rpx;
					border-top: 2rpx solid $uni-bg-color-grey;
					box-sizing: border-box;
				}
			}
		}
	}
</style>