saas_miniprogram/pages2/learn/details.vue

<template>
	<view class="safeArea">
		<view class="detailsWrap">
			<view class="detailsItem" v-for="(item,index) in 3" :key="index">
				<view class="head">
					<view class="tap">录播</view>
					<view class="title">这是一个节标这是一个节标题这是一个节标题这是一个节标题这是一个节标题题</view>
				</view>
				<u-line color="#EEEEEE" />
				<view class="info">
					<view class="item" v-for="item in 7">
						<view class="imgbox"><image src="@/static/intro.png" style="width:100%" mode="heightFix"></image></view>
						<view class="time">2021/10/25 14:25:20</view>
					</view>
				</view>
				<u-line color="#EEEEEE" />
				<view class="reason">
					<view class="label">原因：</view>
					<view class="val">拍照异常/时间异常</view>
				</view>
			</view>
		</view>
		<view class="btn">确认重学</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {
	},
	data() {
		return {
		};
	},
	onShow() {
	},
	methods: {
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style >
page {
	background: #EAEEF1;
}
</style>
<style scoped lang="scss">
.detailsWrap{
	padding:8rpx 8rpx 140rpx;
}
.detailsItem{
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 16rpx;
	.head{
		padding: 26rpx 24rpx;
		display: flex;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		.tap{
			width: 56rpx;
			height: 28rpx;
			line-height: 26rpx;
			text-align: center;
			border: 2rpx solid #666666;
			border-radius: 8rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-right: 8rpx;
			flex-shrink: 0;
			position: relative;
			top: 6rpx;
		}
	}
	.info{
		padding: 17rpx 24rpx;
		display: flex;
		flex-wrap: wrap;
		.item{
			width: 160rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin: 0 8rpx 16rpx 0;
			.imgbox{
				width:160rpx;
				height: 160rpx;
				border-radius: 8px;
				overflow: hidden;
				margin-bottom: 7rpx;
			}
		}
	}
	.reason{
		display: flex;
		padding: 21rpx 24rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		.label{
			color: #666666;
		}
	}
}
.btn{
	width: 526rpx;
	height: 80rpx;
	background: #007AFF;
	border-radius: 40rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 50%;
	margin-left: -263rpx;
	bottom: 50rpx;
}
</style>