安卓端，nvue 监听手势操作，安卓端touchend 监听不到，ios端可以监听到，一直没解决，我监听的是一个视频播放插件，全屏状态下，

示例代码：

<template>  
    <div  
        class="detailVideo"  
        @touchstart="  
            e => {  
                return touchStart(e, 'Android');  
            }  
        "  
        @touchmove="touchmove"  
        @touchend="  
            e => {  
                return touchend(e, 'Android');  
            }  
        "  
        @touchcancel="touchcancel"  
    >  
        <div class="headerTitle" :style="{ height: iStatusBarHeight + 'rpx' }"></div>  
        <div class="header-top">  
            <image @click="getBack" class="img" src="../../static/img/video/back.png" mode=""></image>  
            <text class="header-item">{{ Videotitle }}</text>  
            <text class="header-items"></text>  
        </div>  
        <div style="height: 500rpx; width: 100%;"></div>  
        <KJ-HikVideoPlayer  
            @touchstart="  
                e => {  
                    return touchStart(e, 'iOS');  
                }  
            "  
            @touchend="  
                e => {  
                    return touchend(e, 'iOS');  
                }  
            "  
            ref="HikVideoPlayer"  
            :class="full == 1 ? 'EZOpen_full' : 'EZOpen'"  
            :style="{ width: '100%', height: palyerHeight, top: full == 1 ? 0 : iStatusBarHeight + 92 + 'rpx' }"  
            @player="er"  
            @intercomClient="onIntercomClient"  
        ></KJ-HikVideoPlayer>  

        <div class="mask-ios" v-if="full == 0">  
            <div class="left-mask">  
                <image v-if="status.ipcType == '1'" style="width: 50upx;height: 50upx;margin:0 20upx;" src="../../static/img/video/qiang1.png" mode=""></image>  
                <image v-else-if="status.ipcType == '2'" style="width: 50upx;height: 50upx;margin:0 20upx;" src="../../static/img/video/qiu1.png" mode=""></image>  
                <image v-else-if="status.ipcType == '3'" style="width: 40upx;height: 40upx;margin:0 20upx;" src="../../static/img/video/danb-hui.png" mode=""></image>  
            </div>  
            <div class="right-mask">  
                <image @click="full_video" class="mask-ios-img" src="../../static/img/video/da.png" mode=""></image>  
                <image @click="capturePicture(false)" class="mask-ios-img" src="../../static/img/video/jiandao.png" mode=""></image>  
                <image @click="handplatback" class="mask-ios-img" src="../../static/img/video/hui.png" mode=""></image>  
                <image @click="handSwitchvideo('1')" class="mask-ios-img" v-if="Sdhd == '0'" src="../../static/img/video/hd.png" mode=""></image>  
                <image @click="handSwitchvideo('0')" class="mask-ios-img" v-else src="../../static/img/video/sd.png" mode=""></image>  
                <image v-if="clip" @click="handClip(1)" class="mask-ios-img" src="../../static/img/video/shexiangji.png" mode=""></image>  
                <div class="cliptime" @click="handClip(2)" v-else>  
                    <div class="clip-t">  
                        <text class="text">{{ time < 10 ? '0' + time : time }}</text>  
                    </div>  
                </div>  
            </div>  
        </div>  

        <view class="mask-pos" v-else-if="full == 1 && Fullscreen">  
            <!-- 全屏展示 -->  
            <image @click="exitfull_video" class="images3" src="../../static/img/video/xiao.png" mode=""></image>  
            <image @click="capturePicture(false)" class="images3" src="../../static/img/video/jiandao.png" mode=""></image>  
            <image v-if="clip" @click="handClip(1)" class="images3" src="../../static/img/video/shexiangji.png" mode=""></image>  
            <div class="cliptime1" @click="handClip(2)" v-else>  
                <div class="clip-t1">  
                    <text class="text">{{ time < 10 ? '0' + time : time }}</text>  
                </div>  
            </div>  
            <image class="images3" @click="bianbeijian" src="../../static/img/video/zoomjian.png" mode=""></image>  
            <image class="images3" @click="bianbeijia" src="../../static/img/video/zoomjia.png" mode=""></image>  

            <image @click="down(1)" @touchend="up(1)" class="content-img" src="../../static/img/video/tp.png" mode=""></image>  
            <image v-if="discolor" class="content-img" src="../../static/img/video/top-1.png" mode=""></image>  
            <image @click="down(2)" @touchend="up(2)" class="content-img1" src="../../static/img/video/rt.png" mode=""></image>  
            <image v-if="discolor2" class="content-img1" src="../../static/img/video/right-1.png" mode=""></image>  
            <image @click="down(3)" @touchend="up(3)" class="content-img2" src="../../static/img/video/bot.png" mode=""></image>  
            <image v-if="discolor3" class="content-img2" src="../../static/img/video/bot-1.png" mode=""></image>  
            <image @click="down(4)" @touchend="up(4)" class="content-img3" src="../../static/img/video/lt.png" mode=""></image>  
            <image v-if="discolor4" class="content-img3" src="../../static/img/video/left-1.png" mode=""></image>  
        </view>  

        <!-- <image class="imgatop" v-if="full == 1 && discolor" :style="{ left: setWidth }" src="../../static/img/video/top.png" mode=""></image>  
        <image class="imgabott" v-else-if="full == 1 && discolor3" :style="{ left: setWidth }" src="../../static/img/video/bottom.png" mode=""></image>  
        <image class="imgaleft" v-else-if="full == 1 && discolor4" :style="{ top: setHeight }" src="../../static/img/video/left.png" mode=""></image>  
        <image class="imgaright" v-else-if="full == 1 && discolor2" :style="{ top: setHeight }" src="../../static/img/video/right.png" mode=""></image> -->  
        <div class="middle">  
            <div class="middle-content">  
                <image @touchstart="down(1)" @touchend="up(1)" class="content-img" src="../../static/img/video/shadowon.png" mode=""></image>  
                <image v-if="discolor" class="content-img" src="../../static/img/video/brighton.png" mode=""></image>  
                <image @touchstart="down(2)" @touchend="up(2)" class="content-img1" src="../../static/img/video/shadowright.png" mode=""></image>  
                <image v-if="discolor2" class="content-img1" src="../../static/img/video/brightright.png" mode=""></image>  
                <image @touchstart="down(3)" @touchend="up(3)" class="content-img2" src="../../static/img/video/shadowdown.png" mode=""></image>  
                <image v-if="discolor3" class="content-img2" src="../../static/img/video/brightdown.png" mode=""></image>  
                <image @touchstart="down(4)" @touchend="up(4)" class="content-img3" src="../../static/img/video/shadowleft.png" mode=""></image>  
                <image v-if="discolor4" class="content-img3" src="../../static/img/video/brightleft.png" mode=""></image>  
            </div>  
            <!-- 底部照片 -->  
            <div class="soleBase">  
                <div class="zoom1" @click="bianbeijia">  
                    <image class="zoom1-img" src="../../static/img/video/bianbei.png" mode=""></image>  
                    <text class="zoom1-text">变倍+</text>  
                </div>  
                <div class="zoom1" @click="bianbeijian">  
                    <image class="zoom1-img" src="../../static/img/video/bianbei1.png" mode=""></image>  
                    <text class="zoom1-text">变倍-</text>  
                </div>  
                <div class="zoom1" @click="bianjiaojia">  
                    <image class="zoom1-img" src="../../static/img/video/bianjiao1.png" mode=""></image>  
                    <text class="zoom1-text">变焦+</text>  
                </div>  
                <div class="zoom1" @click="bianjiaojian">  
                    <image class="zoom1-img" src="../../static/img/video/bianjiao2.png" mode=""></image>  
                    <text class="zoom1-text">变焦-</text>  
                </div>  
            </div>  
        </div>  
    </div>  
</template>  
<script>  
import { request, BASE_URL } from '../../utils/request.js';  
import { is_iOS, compress } from '../../utils/utils.js';  
export default {  
    components: {},  
    data() {  
        return {  
            loadingList: '',  
            discolor2: false,  
            discolor3: false,  
            discolor4: false,  
            discolor: false,  
            isShow: false,  
            play: true,  
            videoUrl: '',  
            zidong: false,  
            pmgressbar: false,  
            videoContext: null,  
            status: {},  
            ehomebianbei: '',  
            bianbei: '',  
            Videotitle: '',  
            // loading: false,  
            hd: 2,  
            // played:false  
            PlaybackUrl: '',  
            palyerHeight: '500rpx',  
            filePathvideo: '',  
            full: 0,  
            touchStartX: 0, // 触屏起始点x  
            touchStartY: 0, // 触屏起始点y  
            time: 30,  
            timer: null,  
            clip: true,  
            fileSizeString: '',  
            Sdhd: '0', //1普清 0高清  
            Fullscreen: false,  
            setWidth: null,  
            setHeight: null,  
            playTimer: null,  
            flagShow: true //控制一开始播放高清然后普清，后续切换不进行自动切换  
        };  
    },  
    onReady() {},  
    onLoad(option) {  
        this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;  
        this.status = option;  
        if (option.names.length > 23) {  
            this.Videotitle = option.names.slice(0, 23) + '...';  
        } else {  
            this.Videotitle = option.names;  
        }  
        this.Sdhd = uni.getStorageSync(this.status.ipcId) || '0';  
        this.videodetail();  
    },  
    onShow() {  
        // #ifdef APP-PLUS  
        plus.screen.lockOrientation('portrait-primary');  

        // #endif  
    },  
    onUnload() {},  
    created() {},  
    mounted() {},  
    methods: {  
        handSwitchvideo(val) {  
            this.Sdhd = val;  
            this.videodetail();  
        },  
        _handReveal() {  
            this.Fullscreen = !this.Fullscreen;  
        },  
        handplatback() {  
            uni.navigateTo({  
                url: `/pages/video/playback?camera=${this.status.camera}`  
            });  
        },  
        handClip(val) {  
            //点击 1开始录像 2停止录像  
            if (val == 1) {  
                this.clip = false;  
                this.startRecord();  
                this.timer = setInterval(() => {  
                    this.time--;  
                    if (this.time == 0) {  
                        this.stopRecord();  
                        clearInterval(this.timer);  
                        this.timer = null;  
                        this.clip = true;  
                        this.time = 30;  
                    }  
                }, 1000);  
            } else {  
                this.stopRecord();  
                clearInterval(this.timer);  
                this.timer = null;  
                this.clip = true;  
                this.time = 30;  
            }  
        },  
        /**  
         * 触摸开始  
         **/  

        touchStart(e, v) {  
            console.log(e,'222222')  
            let _this = this;  
            /* console.log('触摸开始', e.changedTouches); */  
            this.touchStartX = e.changedTouches[0].screenX;  
            this.touchStartY = e.changedTouches[0].screenY;  
            if (this.full == 1 && plus.os.name == v) {  
                //判断ios和Android触摸触发不同需要判断  
                uni.getSystemInfo({  
                    success: function(res) {  
                        _this.setWidth = res.windowWidth - 100 + 'rpx';  
                        _this.setHeight = res.windowHeight - 50 + 'rpx';  
                    }  
                });  
            }  
        },  
        touchmove(e) {  
            console.log('touchmove', e.changedTouches[0]);  
        },  
        touchcancel(e) {  
            if (plus.os.name == 'Android') {  
                this.touchend(e, 'Android');  
            }  
        },  
        /**  
         * 触摸结束  
         **/  

        touchend(e, v) {  
            if (this.full == 1 && plus.os.name == v) {  
                /* console.log('触摸结束', e.changedTouches[0]); */  
                let deltaX = e.changedTouches[0].screenX - this.touchStartX;  
                let deltaY = e.changedTouches[0].screenY - this.touchStartY;  

                if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
                    if (deltaX >= 0) {  
                        /* this.down(2); */  
                        console.log('右滑');  
                    } else {  
                        /* this.down(4); */  
                        console.log('左滑');  
                    }  
                } else if (Math.abs(deltaY) > 10 && Math.abs(deltaX) < Math.abs(deltaY)) {  
                    if (deltaY < 0) {  
                        /* this.down(1); */  
                        console.log('上滑');  
                    } else {  
                        /* this.down(3); */  
                        console.log('下滑');  
                    }  
                } else {  
                    this._handReveal();  
                    console.log('可能是误触！');  
                }  
            }  
        },  
        // 导航栏返回  
        getBack() {  
            uni.navigateBack({  
                delta: 1  
            });  
        },  
        fullScreenEvent(e) {  
            if (e.detail.fullScreen) {  
                //全屏  
                this.isShow = true;  
                this.videoContext = uni.createVideoContext('myVideo', this);  
                this.videoContext.showStatusBar(); //显示状态栏,仅在ios全屏下有效  
                this.pmgressbar = true;  
            } else {  
                // 非全屏  
                this.isShow = false;  
                this.screen = false;  
                this.fullControl = false;  
                this.pmgressbar = false;  
            }  
        },  
        down(e) {  
            if (e == 1) {  
                // 云台控制 上  
                this.discolor = true;  
                this.ehomebianbei = 'UP';  
            } else if (e == 2) {  
                // 云台控制 右  
                this.discolor2 = true;  
                this.ehomebianbei = 'RIGHT';  
            } else if (e == 3) {  
                // 云台控制 下  
                this.discolor3 = true;  
                this.ehomebianbei = 'DOWN';  
            } else if (e == 4) {  
                // 云台控制 左  
                this.discolor4 = true;  
                this.ehomebianbei = 'LEFT';  
            }  
            this.ehomeControl();  
            let _this = this;  
            let timer = setTimeout(() => {  
                clearTimeout(timer);  
                timer = null;  
                _this.discolor = false;  
                _this.discolor2 = false;  
                _this.discolor3 = false;  
                _this.discolor4 = false;  
            }, 600);  
        },  
        up(e) {  
            if (e == 1) {  
                this.discolor = false;  
            } else if (e == 2) {  
                this.discolor2 = false;  
            } else if (e == 3) {  
                this.discolor3 = false;  
            } else if (e == 4) {  
                this.discolor4 = false;  
            }  
        },  
        // ehome云台控制  
        ehomeControl() {  
            request(`/ehome/ptzOption/${this.status.camera}/${this.ehomebianbei}`, 'POST', {}, false).then(res => {  
                if (res.code == 0) {  
                } else {  
                    uni.showToast({  
                        title: '当前设备暂不支持',  
                        icon: 'none'  
                    });  
                }  
            });  
        },  
        // 萤石云云台控制  
        Fluorite() {  
            request(`/ptzOption/${this.status.nvr}/${this.status.channel}/${this.bianbei}`, 'POST', {}, false).then(res => {  
                if (res.code == 0) {  
                } else {  
                    uni.showToast({  
                        title: '当前设备暂不支持',  
                        icon: 'none'  
                    });  
                }  
            });  
        },  
        // 变倍+  
        bianbeijia() {  
            // 萤石云是1,  
            // 海康是0  

            this.ehomebianbei = 'ZOOM_IN';  
            this.ehomeControl();  
        },  
        // 变倍-  
        bianbeijian() {  
            this.ehomebianbei = 'ZOOM_OUT';  
            this.ehomeControl();  
        },  
        // 变焦+  
        bianjiaojia() {  
            this.ehomebianbei = 'FOCUS_FAR';  
            this.ehomeControl();  
        },  
        // 变焦-  
        bianjiaojian() {  
            this.ehomebianbei = 'FOCUS_NEAR';  
            this.ehomeControl();  
        },  

        back() {  
            uni.navigateBack({  
                delta: 1  
            });  
        },  
        videodetail() {  
            //1 普清 0高清  
            //切换高清和普清  
            uni.showLoading({  
                title: '加载中',  
                mask: true  
            });  
            request(  
                `/ehome/camera/previewUrl/rtsp`,  
                'POST',  
                {  
                    streamType: this.Sdhd,  
                    indexCode: this.status.camera  
                },  
                false  
            )  
                .then(res => {  
                    if (res.code == 0) {  
                        this.videoUrl = res.url;  
                        this.startRealPlay();  
                    } else {  
                        uni.showToast({  
                            title: '切换失败',  
                            icon: 'none'  
                        });  
                    }  
                })  
                .catch(e => {  
                    console.error(e);  
                });  
        },  
        async chooseFile() {  
            //上传图片  
            let _this = this;  
            let image = await compress(_this.imageSrc);  
            uni.uploadFile({  
                url: BASE_URL + '/upload/image',  
                filePath: image,  
                name: 'pic',  
                header: {  
                    accept: '*/*',  
                    'Content-Type': 'application/x-www-form-urlencoded',  
                    token: uni.getStorageSync('token')  
                },  
                success: res => {  
                    const imgRes = JSON.parse(res.data);  
                    _this.handimgUpdata(imgRes.data.file_full_url);  
                }  
            });  
        },  
        handimgUpdata(img) {  
            //封面上传  
            request(  
                '/updateCameraImage',  
                'POST',  
                {  
                    image: img,  
                    cameraId: this.status.ipcId  
                },  
                false  
            )  
                .then(res => {})  
                .catch(err => {  
                    console.log(err);  
                });  
        },  
        /**  
         * 全屏  
         * */  
        full_video() {  
            plus.screen.lockOrientation('landscape-primary');  
            let timer = setTimeout(() => {  
                clearTimeout(timer);  
                timer = null;  
                this.full = 1;  
                this.palyerHeight = '750rpx';  
            }, 100);  
        },  
        /**  
         * 退出全屏  
         * */  
        exitfull_video() {  
            /* plus.screen.unlockOrientation(); */  
            plus.screen.lockOrientation('portrait-primary');  
            let timer = setTimeout(() => {  
                clearTimeout(timer);  
                timer = null;  
                this.full = 0;  
                this.palyerHeight = '500rpx';  
            }, 100);  
        },  
        /**  
         * 播放状态回调  
         * */  
        er(e) {  
            let _this = this;  
            //{"playStatus":"SUCCESS","errorCode":"HVPErrorCodeSuccess"}  
            //错误码参考插件市场文档  
            console.log('er: ' + JSON.stringify(e.detail));  
            uni.hideLoading();  
            clearTimeout(this.playTimer); //五秒内播放成功不启动定时器  
            this.playTimer = null;  
            if (e.detail.playStatus == 'SUCCESS') {  
                uni.setStorageSync(this.status.ipcId, this.Sdhd); //记录播放成功是高清还是普清  
                let timer = setTimeout(() => {  
                    clearTimeout(timer);  
                    timer = null;  
                    _this.capturePicture(true);  
                }, 3000);  
            } else if (e.detail.playStatus == 'FAILED') {  
                uni.showToast({  
                    title: '播放失败',  
                    icon: 'none'  
                });  
            } else if (e.detail.playStatus == 'EXCEPTION') {  
                uni.showModal({  
                    title: '提示',  
                    content: '播放异常,是否重新加载？',  
                    success: res => {  
                        if (res.confirm) {  
                            this.Sdhd = '0';  
                            this.videodetail();  
                        }  
                    }  
                });  
            } else if (e.detail.playStatus == 'PATHERR') {  
                uni.showModal({  
                    title: '提示',  
                    content: '播放失败,是否重新加载？',  
                    success: res => {  
                        if (res.confirm) {  
                            this.Sdhd = '0';  
                            this.videodetail();  
                        }  
                    }  
                });  
            }  
        },  
        /**  
         * 开启预览  
         * */  
        startRealPlay() {  
            var _this = this;  
            _this.$refs.HikVideoPlayer.stopPlay(res => {  
                console.log('stopPlay: ' + JSON.stringify(res));  
                _this.$refs.HikVideoPlayer.startRealPlay(_this.videoUrl, res => {  
                    console.log('startRealPlay: ' + res);  
                    //播放路径有问题会一直加载  
                    _this.playTimer = setTimeout(() => {  
                        if (_this.flagShow && _this.Sdhd == '0') {  
                            //判断高清播放切换普清  
                            _this.flagShow = false;  
                            _this.Sdhd = '1';  
                            return _this.videodetail();  
                        }  
                        _this.er({ detail: { playStatus: 'PATHERR' } });  
                    }, 8000);  
                });  
            });  
        },  
        /**  
         * 开启录像回放  
         * 时间格式：yyyy-MM-dd HH:mm:ss  
         * */  
        startPlayback() {  
            var _this = this;  
            this.$refs.HikVideoPlayer.stopPlay(res => {  
                console.log('stopPlay: ' + JSON.stringify(res));  
                _this.$refs.HikVideoPlayer.startPlayback(this.PlaybackUrl, '2020-07-28 1:00:00', '2020-07-28 23:59:59', res => {  
                    console.log('startPlayback: ' + JSON.stringify(res));  
                });  
            });  
        },  
        /**  
         * 暂停回放  
         * */  
        pause() {  
            this.$refs.HikVideoPlayer.pause(res => {  
                console.log('pause: ' + JSON.stringify(res));  
            });  
        },  
        /**  
         * 恢复回放  
         * */  
        resume() {  
            this.$refs.HikVideoPlayer.resume(res => {  
                console.log('resume: ' + JSON.stringify(res));  
            });  
        },  
        /**  
         *获取视频中屏幕显示时间  
         * */  
        getOSDTime() {  
            var _this = this;  
            var interval3 = setInterval(function() {  
                _this.$refs.HikVideoPlayer.getOSDTime(res => {  
                    console.log('getOSDTime: ' + JSON.stringify(res));  
                });  
            }, 1000);  
        },  
        /**  
         *抓图  
         *注意：filePath 一定要是_doc绝对目录  
         * */  
        capturePicture(val) {  
            var filePath = plus.io.convertLocalFileSystemURL('_doc/KJ-HikVideoPlayer');  
            var fileName = 'test.png';  
            var dic = {  
                filePath: filePath,  
                fileName: fileName  
            };  

            var _this = this;  
            _this.$refs.HikVideoPlayer.capturePicture(dic, res => {  
                console.log('capturePicture: ' + JSON.stringify(res));  
                _this.imageSrc = 'file://' + filePath + '/' + fileName;  
                if (!val) {  
                    uni.saveImageToPhotosAlbum({  
                        filePath: _this.imageSrc,  
                        success: function() {  
                            uni.showToast({  
                                title: '保存本地相册',  
                                duration: 1500  
                            });  
                        },  
                        fail: function() {  
                            uni.showToast({  
                                title: '截图失败',  
                                duration: 1500  
                            });  
                        }  
                    });  
                } else {  
                    _this.chooseFile();  
                }  
            });  
        },  

        /**  
         *开始录像  
         *注意：filePath 一定要是_doc绝对目录  
         * */  
        startRecord() {  
            this.filePathvideo = plus.io.convertLocalFileSystemURL('_doc/KJ-HikVideoPlayer');  
            var dic = {  
                filePath: this.filePathvideo,  
                fileName: 'test.mp4'  
            };  
            var _this = this;  
            _this.$refs.HikVideoPlayer.startRecord(dic, res => {  
                console.log('startRecord: ' + JSON.stringify(res));  
            });  
        },  
        /**  
         *结束录像  
         * */  
        stopRecord() {  
            var tempFilePath = 'file://' + this.filePathvideo + '/test.mp4';  
            this.$refs.HikVideoPlayer.stopRecord(res => {  
                console.log('stopRecord: ' + JSON.stringify(res));  
                uni.saveVideoToPhotosAlbum({  
                    filePath: tempFilePath,  
                    success: function() {  
                        uni.showToast({  
                            title: '保存本地相册',  
                            duration: 1500  
                        });  
                    },  
                    fail: function() {  
                        uni.showToast({  
                            title: '保存录像失败',  
                            duration: 1500  
                        });  
                    }  
                });  
            });  
        },  
        /**  
         * 语音对讲状态回调  
         * */  
        onIntercomClient(e) {  
            console.log('onIntercomClient: ' + JSON.stringify(e.detail));  
        },  
        /**  
         * 停止取流和播放  
         * */  
        stopPlay() {  
            this.$refs.HikVideoPlayer.stopPlay(res => {  
                console.log('stopPlay: ' + JSON.stringify(res));  
            });  
        }  
    }  
};  
</script>  

<style lang="less" scoped>  
.detailVideo {  
    /* width: 750rpx;  
    flex: 1; */  
}  
.headerTitle {  
    width: 750rpx;  
    background: #00b48f;  
}  

.EZOpen {  
    background: #464950;  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    right: 0;  
}  

.EZOpen_full {  
    position: fixed;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
}  
.header-top {  
    background: #00b48f;  
    width: 750rpx;  
    height: 92rpx;  
    padding: 0 20rpx;  
    display: flex;  
    flex-direction: row;  
    justify-content: space-between;  
    align-items: center;  
}  

.img {  
    width: 40rpx;  
    height: 40rpx;  
}  

.header-top .header-item {  
    color: white;  
    width: 400rpx;  
    font-size: 32rpx;  
    font-family: PingFang SC;  
    font-weight: bold;  
    text-align: center;  
}  

.header-items {  
    color: white;  
    width: 50rpx;  
}  

.vid {  
    position: relative;  
    width: 750rpx;  
    height: 500rpx;  
}  

.vid-loading {  
    width: 100rpx;  
    height: 100rpx;  
    line-height: 100rpx;  
    text-align: center;  
    color: #ffffff;  
    font-size: 32rpx;  
    position: absolute;  
    left: 375rpx;  
    top: 250rpx;  
    transform: translate(-50%, -50%);  
}  

.container {  
    position: absolute;  
    top: 100rpx;  
    right: 10rpx;  
}  

.mask {  
    width: 750rpx;  
    height: 100rpx;  
    position: relative;  
    background: #464950;  
}  

.mask-loading {  
    width: 200rpx;  
    height: 100rpx;  
}  
.mask-ios {  
    display: flex;  
    flex-direction: row;  
    justify-content: space-between;  
    align-items: center;  
    width: 750rpx;  
    height: 100rpx;  
    background: #464950;  
    .right-mask {  
        display: flex;  
        flex-direction: row;  
        flex-direction: row-reverse;  
    }  
    .cliptime {  
        margin-right: 20rpx;  
        position: relative;  
        .clip-t {  
            display: flex;  
            flex-direction: row;  
            align-items: center;  
            justify-content: center;  
            width: 60rpx;  
            height: 60rpx;  
            border: 5rpx solid #e54545;  
            border-radius: 50rpx;  
            font-size: 40rpx;  
            .text {  
                color: #e54545;  
            }  
        }  
    }  
}  
.mask-ios-img {  
    margin-right: 20rpx;  
    width: 60rpx;  
    height: 60rpx;  
}  
.mask-pos {  
    display: flex;  
    align-items: center;  
    flex-direction: row;  
    flex-direction: row-reverse;  
    height: 100upx;  
    position: fixed;  
    bottom: 0;  
    right: 0;  
    left: 0;  
    background: rgba(0, 0, 0, 0.3);  
    .content-img {  
        position: fixed;  
        left: 158rpx;  
        bottom: 355rpx;  
        width: 230rpx;  
        height: 130rpx;  
    }  

    .content-img1 {  
        position: fixed;  
        left: 320rpx;  
        bottom: 195rpx;  
        width: 130rpx;  
        height: 230rpx;  
    }  

    .content-img2 {  
        position: fixed;  
        bottom: 140rpx;  
        left: 158rpx;  
        width: 230rpx;  
        height: 130rpx;  
    }  

    .content-img3 {  
        position: fixed;  
        bottom: 195rpx;  
        left: 98rpx;  
        width: 130rpx;  
        height: 230rpx;  
    }  
    .cliptime1 {  
        margin-right: 50rpx;  
        position: relative;  
        .clip-t1 {  
            display: flex;  
            flex-direction: row;  
            align-items: center;  
            justify-content: center;  
            width: 60rpx;  
            height: 60rpx;  
            border: 5rpx solid #e54545;  
            border-radius: 50rpx;  
            font-size: 40rpx;  
            .text {  
                color: #e54545;  
            }  
        }  
    }  
}  
.fullscreefall {  
    position: fixed;  
    top: 150rpx;  
    left: 100rpx;  
    z-index: 999999;  
    .content-img {  
        position: absolute;  
        left: 158rpx;  
        top: -18rpx;  
        width: 230rpx;  
        height: 130rpx;  
    }  

    .content-img1 {  
        position: absolute;  
        top: 50rpx;  
        left: 93rpx;  
        width: 130rpx;  
        height: 230rpx;  
    }  

    .content-img2 {  
        position: absolute;  
        left: 158rpx;  
        bottom: 0;  
        width: 230rpx;  
        height: 130rpx;  
    }  

    .content-img3 {  
        position: absolute;  
        left: 325rpx;  
        top: 50rpx;  
        width: 130rpx;  
        height: 230rpx;  
    }  
}  
.images3 {  
    margin-right: 50rpx;  
    width: 60rpx;  
    height: 60rpx;  
}  
.imgatop {  
    position: fixed;  
    top: 30rpx;  
    width: 150rpx;  
    height: 250rpx;  
}  
.imgabott {  
    position: fixed;  
    bottom: 30rpx;  
    width: 150rpx;  
    height: 250rpx;  
}  

.imgaleft {  
    position: fixed;  
    left: 100rpx;  
    width: 250rpx;  
    height: 100rpx;  
}  
.imgaright {  
    position: fixed;  
    right: 100rpx;  
    width: 250rpx;  
    height: 100rpx;  
}  
.clip-yuan {  
    width: 20rpx;  
    height: 20rpx;  
    background: #b61e11;  
}  

.loading-text {  
    width: 200rpx;  
    text-align: center;  
    font-size: 28rpx;  
    line-height: 100rpx;  
    color: #ffffff;  
}  

.images1 {  
    width: 76rpx;  
    height: 76rpx;  
    transform: translateX(5%);  
    margin-bottom: 40rpx;  
}  

.images2 {  
    width: 80rpx;  
    height: 80rpx;  
    margin-bottom: 40rpx;  
}  

.clarity {  
    position: absolute;  
    right: 100rpx;  
    bottom: 20rpx;  
    width: 60rpx;  
    height: 60rpx;  
    color: #ffffff;  
}  

.mask-img {  
    position: absolute;  
    right: 20rpx;  
    bottom: 20rpx;  
    width: 60rpx;  
    height: 60rpx;  
    color: #ffffff;  
}  

.middle {  
    padding-top: 50rpx;  
    width: 750rpx;  
    text-align: center;  
}  

.middle .middle-content {  
    margin: 20rpx;  
    width: 360rpx;  
    height: 360rpx;  
    position: relative;  
    transform: translateX(50%);  
}  

.middle-content .content-img {  
    position: absolute;  
    left: 180rpx;  
    top: 0;  
    width: 230rpx;  
    height: 130rpx;  
    transform: translateX(-50%);  
}  

.middle-content .content-img1 {  
    position: absolute;  
    right: 0;  
    top: 180rpx;  
    width: 130rpx;  
    height: 230rpx;  
    transform: translateY(-50%);  
}  

.middle-content .content-img2 {  
    position: absolute;  
    left: 180rpx;  
    bottom: 0;  
    width: 230rpx;  
    height: 130rpx;  
    transform: translateX(-50%);  
}  

.middle-content .content-img3 {  
    position: absolute;  
    left: 0;  
    top: 180rpx;  
    width: 130rpx;  
    height: 230rpx;  
    transform: translateY(-50%);  
}  

.a {  
    width: 230rpx;  
    height: 130rpx;  
}  

.b {  
    width: 50rpx;  
    height: 52rpx;  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -70%);  
}  

.soleBase {  
    width: 750rpx;  
    // margin: 50rpx 50rpx 10rpx;  
    display: flex;  
    flex-direction: row;  
    justify-content: space-around;  
    align-items: center;  
}  

.soleBase .zoom1 {  
    width: 96rpx;  
    height: 135rpx;  
}  

.zoom1 .zoom1-img {  
    width: 96rpx;  
    height: 96rpx;  
}  

.zoom1 .zoom1-text {  
    font-size: 30rpx;  
    color: #666666;  
    text-align: center;  
    font-family: PingFang SC;  
}  
</style>  

操作步骤：

11

预期结果：

11

实际结果：

11