我的网课

pages2/course/detail.vue

@@ -28,22 +28,63 @@
 			<u-line color="#D6D6DB" />
 			
 		</view>
-		<view class="box">
-			<view class="menuBox" v-for="(item, index) in menuList">
-				<view class="b_title">
-					2Z106000 施工合同管理-模块标题
+		<view class="box" >
+			<!--目录 -->
+			<view v-show="current==0">
+				<view class="menuBox" v-for="(item, index) in menuList">
+					<view class="b_title">
+						2Z106000 施工合同管理-模块标题
+					</view>
+					<view style="color: #666666;font-size: 24rpx;margin: 30rpx 0;" v-for="(item1, index1) in item">
+						<u-icon :name="item1.showChildren?'arrow-down':'arrow-right'" color="#666666" size="28" @click="open(item1)"></u-icon>
+						<text @click="open(item1)">2Z106010 施工承发包的模式-2Z106020 施工合同...</text>
+						<view v-for="(item2, index2) in item1.children" v-if="item1.showChildren" >
+							<view style="display: flex;align-items: center;margin: 20rpx 0;">
+								<view class="tag1">录播</view>
+								<view class="t_content1">施工承发包模式-施工合同与物资采购合同</view>
+							</view>
+						</view>
+					</view>
+					
+				</view>
+			</view>
+			<!--笔记 -->
+			<view v-show="current==1">
+				<view class="inputBottom" >
+					<view style="width: 10%;">
+						<image src="/static/icon/note3.png" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image>
+					</view>
+					<view style="width: 73%;height: 88rpx;margin-bottom: 15rpx;">
+						<u-input height="78" fixed="true" :placeholder="placeholder" type="textarea" :custom-style="inputStyle" v-model="value"  />
+					</view>
+					<view style="color: #007AFF;font-size: 30rpx;font-weight: bold;width: 15%;text-align: center;">
+						提交
+					</view>
 				</view>
-				<view style="color: #666666;font-size: 24rpx;margin: 30rpx 0;" v-for="(item1, index1) in item">
-					<u-icon :name="item1.showChildren?'arrow-down':'arrow-right'" color="#666666" size="28" @click="open(item1)"></u-icon>
-					<text @click="open(item1)">2Z106010 施工承发包的模式-2Z106020 施工合同...</text>
-					<view v-for="(item2, index2) in item1.children" v-if="item1.showChildren" >
-						<view style="display: flex;align-items: center;margin: 20rpx 0;">
-							<view class="tag1">录播</view>
-							<view class="t_content1">施工承发包模式-施工合同与物资采购合同</view>
+				<view  v-for="(item, index) in menuList">
+					<view class="dateBox">2021年10月30日</view>
+					<view class="noteBox">
+						<view class="tBox">
+							<image src="/static/icon/note1.png" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image>
+							<view class="title leftPadding">施工承发包模式-施工合同与物资采购合同</view>
+						</view>
+						<view class="tBox2">
+							<view class="title" style="width: 39rpx;height: 39rpx;margin:0 29rpx;">00:20</view>
+							<view class="t2Content leftPadding">
+								这是一段用户记录的笔记本文，当内容过长时
+								需要换行，完整显示文字内容。
+							</view>
+						</view>
+						<view class="tBox">
+							<image src="/static/icon/note2.png" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image>
+							<view class="title leftPadding">施工承发包模式-施工合同与物资采购合同</view>
+						</view>
+						<view style="margin-left: 97rpx;" class="t2Content leftPadding">
+							这是一段用户记录的笔记本文，当内容过长时
+							需要换行，完整显示文字内容。
 						</view>
 					</view>
 				</view>
-				
 			</view>
 		</view>
 	</view>
@@ -54,6 +95,13 @@ import { mapGetters } from 'vuex';
 export default {
 	data() {
 		return {
+			placeholder:"您可以在这里输入笔记内容\n还可以点击左侧图标为笔记加上时间标记",
+			inputStyle:{
+				background: 'rgba(244, 244, 244, 0.98)',
+				borderRadius: '24rpx',
+				padding: '8rpx',
+				marginBottom: '10rpx'
+			},
 			playbackRate: [0.5, 0.8, 1.0],
 			list: [
 				{
@@ -78,7 +126,7 @@ export default {
 					children:[1,2]
 				}],[],[]
 			],
-			current:0
+			current:1
 		};
 	},
 	onUnload() {
@@ -103,6 +151,62 @@ export default {
 </script>
 
 <style scope>
+	.leftPadding{
+		margin-left: 8rpx;
+	}
+	.t2Content{
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+		line-height: 48rpx;
+	}
+	.tBox2{
+		display: flex;
+		padding-top: 10rpx;
+	}
+	.tBox{
+		display: flex;
+		align-items: center;
+		padding-top: 10rpx;
+	}
+	.title{
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	page{
+		padding-top: 10px;
+		padding-top: constant(safe-area-inset-top);
+		padding-top: env(safe-area-inset-top);
+	}
+	.inputBottom{
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		background: #FFFFFF;
+		height: 98rpx;
+		display: flex;
+		align-items: center;
+		width: 100%;	
+	}
+	.noteBox{
+		width: 100%;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		padding: 10rpx;
+	}
+	.dateBox{
+		width: 216rpx;
+		height: 48rpx;
+		background: #FFFFFF;
+		border-radius: 24rpx;
+		font-size: 24rpx;
+		color: #666666;
+		text-align: center;
+		line-height: 48rpx;
+		margin: 20rpx 0;
+	}
 	.t_content1{
 		color: #007AFF;
 		margin-left: 10rpx;