saas_miniprogram/pages2/learn/menu.vue

<template>
	<view class="safeArea">
		<nav-bar title="目录"></nav-bar>
		<view class="menuWrap">
			<view class="videoMain">
				<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
				<view class="videoTitle">
					<view class="left">承发包模式-施工合同与物资采购合...</view>
					<view class="right">
						<u-icon class="icon" name="file-text"></u-icon>讲义
					</view>
				</view>
				<u-line color="#EEEEEE" />
				<view class="tabMain" style="width: 100%;text-align: center;">
					<u-tabs :list="menuList" sticky :current="current" @change="change" active-color="#333" inactive-color="#999"></u-tabs>
				</view>
			</view>
			<view class="menuMain">
				<view class="menuItem" v-for="(item,index) in 3" :key="index">
					<view class="title">2Z106000 施工合同管理-模块标题</view>
					<u-collapse accordion>
						<u-collapse-item>
							<text slot="title" class="u-page__item__title__slot-title">2Z106010 施工承发包的模式-2Z106020 施工合同...</text>
							<view class="u-collapse-content">
								<view class="item" v-for="(item,index) in 7" :key="index">
									<view class="tag">录播</view><!--默认蓝色，红色加red，黄色加yellow-->
									<!-- <view class="yellow">回放</view> -->
									<!-- <view class="red">直播</view> -->
									<view class="info">施工承发包模式-施工合同与物资标题过长...</view>
									<view class="btn">待重修</view>
									<view class="status">回放</view>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {
	},
	data() {
		return {
			current: 0,
			menuList: [
				{
					name: '重修目录'
				}, 
				{
					name: '目录'
				}, 
				{
					name: '笔记'
				}, 
				{
					name: '答疑'
				}
			]
		};
	},
	onShow() {
	},
	methods: {
		change(index){
			this.current = index;
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style lang="scss">
page {
	background: #EAEEF1;
}
.videoMain .u-scroll-box{
	display: flex;
}
.menuItem{
	.u-collapse-item{
		position: relative;
	}
	.u-arrow-down-icon{
		position: absolute;
		left:19rpx;
	}
	.u-page__item__title__slot-title{
		width: 563rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding-left: 90rpx;
	}
}
</style>
<style scoped lang="scss">
.videoMain{
	width:100%;
	background: #fff;
	#myVideo{
		width:100%;
		height: 461rpx;
		background: #000000;
		vertical-align: top;
	}
	.videoTitle{
		height: 80rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			width: 550rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding-left: 32rpx;
		}
		.right{
			width: 100rpx;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: -4rpx 0 4rpx 0rpx rgba(0, 0, 0, 0.1);
			text-align: center;
			line-height: 1.2;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-top: 4rpx;
			.icon{
				display: block;
				font-size: 36rpx;
				color:#007AFF;
				vertical-align: top;
			}
		}
	}
	.u-scroll-box{
		display: flex;
	}
}
.menuMain{
	padding: 16rpx;
	.menuItem{
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding-bottom: 30rpx;
		.title{
			padding: 33rpx 16rpx 0;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.item{
			display: flex;
			padding: 28rpx 16rpx;
			align-items: center;
			justify-content: space-between;
			position: relative;
			&:first-child{
				&::after{
					width:686rpx;
					left:16rpx;
				}
			}
			&::after{
				content: '';
				width: 90%;
				height:1px;
				background: #EEEEEE;
				position: absolute;
				top: 0;
				right:0;
			}
			.tag{
				width: 56rpx;
				height: 28rpx;
				background: #FFFFFF;
				border: 2rpx solid #007AFF;
				border-radius: 8rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #007AFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.info{
				width: 504rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #007AFF;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.btn{
				width: 80rpx;
				height: 28rpx;
				background: #FF3B30;
				border-radius: 8rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.status{
				position: absolute;
				bottom: 1rpx;
				left: 96rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF3B30;
			}
		}
	}
}
.yellow{
	color: #FF9500!important;
	border-color: #FF9500!important;;
}
.red{
	color: #FF3B30!important;
	border-color: #FF3B30!important;;
}
</style>