<view class="page-course-study">
<view id="main" class="main">
<view class="video-box">
<video
id="myVideo"
title="这是课程学习的视频"
class="video"
src="https://static.10000.wiki/video/%E9%80%8D%E9%81%A5%E5%8F%B9.mp4"
controls
object-fit="contain"
poster=""
autoplay
@loadedmetadata="onVideoLoad"
/>
</view>
</view>
<view class="info">
<view class="title">1.这是课程学习的视频</view>
<view class="content">
{{
` 这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频。`
}}
</view>
<view class="bar">
<view class="index">1/1</view>
<tn-button class="read" size="sm">
<view class="label"> ---- </view>
</tn-button>
</view>
</view>
</view>
.page-course-study {
width: 100%;
height: 100%;
min-height: fit-content;
background-color: #f8f8f8;
display: flex;
align-items: center;
overflow: hidden;
.main {
flex: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
.video-box {
width: 100%;
height: 100%;
.video {
width: 100%;
height: 100%;
}
}
}
.info {
flex-shrink: 0;
width: 400px;
height: 100%;
padding: 12px;
display: flex;
flex-direction: column;
background-color: #69b1ff;
.title {
font-size: 14px;
color: #fff;
}
.content {
flex: 1;
overflow: auto;
font-size: 12px;
color: #fff;
white-space: pre-wrap;
}
.bar {
display: flex;
justify-content: space-between;
align-items: center;
.index {
color: #fff;
font-size: 12px;
}
.read {
width: 80px;
.label {
font-size: 14px;
}
}
}
}
}
