我的学时---目录

pages.json

@@ -437,6 +437,16 @@
 						"bounce": "none"
 					}
 				}
+			},
+			{
+				"path": "learn/menu",
+				"style": {
+					"navigationBarTitleText": "目录",
+					"app-plus": {
+						"titleNView": false, //禁用原生导航栏 
+						"bounce": "none"
+					}
+				}
 			}
 		]/*,
 		 "plugins": {

pages2/learn/menu.vue

@@ -0,0 +1,247 @@
+<template>
+	<view class="safeArea">
+		<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>