wordPad-applet/miniprogram/component/teacher/teacherMonitor/monitor.wxml

<!--pages/teacher/monitor/monitor.wxml-->
<view wx:if="{{pageState==0}}" class="container" style="background-color: #F4F4F4;">
    <view class="qrcode_layout">
        <view class="qrcode_layout_bg" bindtap="scanCode">
            <image src="../../../image/teacher/qrcode.png" style="width:60rpx;height:60rpx"></image>
            <text>扫一扫</text>
        </view>
    </view>
    <view class="center_layout">
        <text class="center_title">上课地点</text>
        <view class="center_picker_layout">
            <!--选择地区-->
            <view class="item_input_bg" style=" margin-top: 0rpx;   box-shadow: 0px 1px 0px 0px #EEEEEE;">
                <text class="item_input_title">地区：</text>
                <picker mode="multiSelector" bindchange="bindRegionChange" bindcolumnchange="bindMultiPickerColumnChange" range="{{region}}" class="item_picker_bg" value="{{regionIndex}}">
                    <view class="item_picker_content">
                        <p> {{region[0][regionIndex[0]]}} </p>
                        <p> {{region[1][regionIndex[1]]}} </p>
                        <p> {{region[2][regionIndex[2]]}} </p>
                    </view>
                </picker>
                <view class="item_picker_icon_layout">
                    <image src="../../../image/teacher/dropdown_icon.png" class="item_picker_icon"></image>
                </view>
            </view>
            <!--选择地区 end-->
            <!--选择学校-->
            <view class="item_input_bg" style=" margin-top: 2rpx;box-shadow: 0px 1px 0px 0px #EEEEEE;">
                <text class="item_input_title">学校：</text>
                <picker mode="multiSelector" bindcolumnchange="bindSchoolPicker" range="{{schoolArray}}" value="{{[schoolIndex,0]}}" class="item_picker_bg">
                    <view class="item_picker_content">
                        {{schoolArray[0][schoolIndex]}}
                    </view>
                </picker>
                <view class="item_picker_icon_layout">
                    <image src="../../../image/teacher/dropdown_icon.png" class="item_picker_icon"></image>
                </view>
            </view>
            <!--选择学校end-->
            <!--选择班级-->
            <view class="item_input_bg" style=" margin-top: 2rpx;box-shadow: 0px 1px 0px 0px #EEEEEE;">
                <text class="item_input_title">班级：</text>
                <picker bindchange="bindClssPicker" value="{{classIndex}}" range="{{classArray}}" class="item_picker_bg">
                <view class="item_picker_content">
                    {{classArray[classIndex]}}
                </view>
            </picker>
                <view class="item_picker_icon_layout">
                    <image src="../../../image/teacher/dropdown_icon.png" class="item_picker_icon"></image>
                </view>
            </view>
            <!--选择班级end-->
            <view class="item_input_bg" style="margin-top: 1rpx;">
                <text class="item_input_title">设备ID：</text>
                <input class="item_input_content" placeholder="请输入设备ID" bindinput="bindDeviceInput" value="{{deviceId}}"  />
            </view>
        </view>
        <view class="login_btn_layout" style="margin-left: 0rpx;margin-top: 190rpx;" bindtap="startMonitor">
            <button class="login_btn" style="width: 100%; margin-left: 0rpx;font-size: 36rpx;font-weight: 400;">开始上课</button>
        </view>
    </view>
</view>


<!--开始上课之后-->
<view wx:if="{{pageState==1}}" class="container" style="background-color: #F4F4F4;">
    <view style="margin-top: 33rpx;">
        <text class="title">设备监控</text>
    </view>
    <!--播放视频的视频框-->
    <view style="width: 100%;height: 422rpx; background-color: blue;margin-top: 40rpx;;display: flex;">
        <live-player style="width: 100%; height: 100%; "></live-player>
        <view style="width: 100%;height: 422rpx; position: absolute;">
            <view class="light_green {{videostatus==1?'light_red':''}}"></view>
        </view>
    </view>
    <!--播放视频的视频框-->

    <!-- 快照-->
    <view style="margin-top:48rpx;font-size:25rpx;font-weight: 500;">
        <text style="margin-left:10rpx">快照</text>
        <scroll-view scroll-x class="image_scroll">
            <view wx:for="{{20}}" wx:key="index" style="display:inline-block;">
                <image class="image"></image>
                <view class="image_index">{{index}}</view>
            </view>
        </scroll-view>
    </view>
    <!-- 快照-->
    <!-- 下课按钮-->
    <view>
        <image bindtap="classOver" class="class_over" src="../../../image/teacher/class_over.png"></image>
    </view>
    <!-- 下课按钮-->
</view>
<!--开始上课之后-->