【套餐】小程序在线教育、视频点播系统 毕业设计

源代码下载地址：https://ke.qq.com/course/package/28464?tuin=2b10d56

有需要的请添加QQ 45157718（微信同号） 咨询

wxml代码

<!--pages/shipin/vedio.wxml-->
<view class="biaoti">视频课程：微信小程序样式Flex Box精通课程</view>
<view class="kc">
    <video class="kc_shipin" id="myVideo" src="http://wx.hzyaoyi.cn/02-jichu/01.mp4" controls></video>
    <view class="kc_caozuo">
        <view class="kc_caozuo_bofang">
            <button bindtap="bindPlay" class="kc_caozuo_bofang_bt" type="primary">播放</button>
         </view>
        <view class="kc_caozuo_zanting">
            <button bindtap="bindPause" class="kc_caozuo_zanting_bt" type="primary">暂停</button>
        </view>
    </view>
</view>
<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">当前学习章节</view>
    <view class="qukuai_you"></view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo xuanzhong">1.6 HTML 元素入门要点</view>
    <view class="zhang2_you">学习</view>
</view>
<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">上2个章节</view>
    <view class="qukuai_you"></view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">1.4 HTML编辑器</view>
    <view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">1.5 入门示例</view>
    <view class="zhang2_you">学习</view>
</view>
<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">接下来学习的3个章节</view>
    <view class="qukuai_you"></view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">1.7 HTML属性入门要点</view>
    <view class="zhang2_you">学习</view>
</view>
<view class="zhang1"> 
<view class="zhang1_zuo">第2章 HTML 基础标签</view>
<view class="zhang1_you">学习</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">2.1 HTML 标题 h1-h6 标签</view>
    <view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">2.2 HTML 水平线 hr 标签</view>
    <view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">2.3 HTML 注释标签和查看源代码</view>
    <view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> 
<view class="zhang2_zuo">2.4 HTML 段落 p 标签</view>
    <view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">2.5 HTML 换行 br 标签</view>
    <view class="zhang2_you">学习</view>
</view>

wxss代码

.biaoti{font-size: 16px; padding:0px 5px; background-color: white; height: 25px;
    box-sizing: border-box; line-height: 25px;text-shadow: 1px 1px 2px gainsboro;color: rgb(13, 163, 233);}
.kc{}
.kc_shipin{width: 100%;}
.kc_caozuo{display: flex; padding: 5px;}
.kc_caozuo_bofang{width: 50%; text-align: center;}
.kc_caozuo_bofang_bt{width: 90%;}
.kc_caozuo_zanting{width: 50%;}
.kc_caozuo_zanting_bt{width: 90%; text-align: center;}
.qukuai{display: flex;align-items:center; background-color:#f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;color: rgb(13, 163, 233);}
.qukuai_you{font-size: 16px; color: gray;padding-right: 10px;}
.zhang1{display: flex; font-size: 16px;padding: 5px;background-color: white;}
.zhang1_zuo{flex-grow: 1; padding-right: 10px;}
.zhang1_you{}
.zhang2{display: flex; font-size: 15px; padding: 10px 5px;color: gray;background-color: white;}
.zhang2_zuo{flex-grow: 1; padding-right: 10px;}
.zhang2_you{}
.xuanzhong{color: rgb(13, 163, 233);}

有需要的请添加QQ 45157718（微信同号） 咨询