修改页面

董国庆

2025-02-24 c16c9a188ea9b76958085d0bba3504e4e3be75b9

修改页面

 H5/pages.json

@@ -21,6 +21,13 @@
            }
        },
        {
            "path": "pages/work-detail/maxVideo",
            "style": {
                "navigationBarBackgroundColor": "#000000",
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/problemReporting/problemReporting",
            "style": {
                "navigationBarTitleText": "问题上报",

 H5/pages/components/certificate/certificate.vue

@@ -55,8 +55,7 @@
                this.show =false
            },
        },
        created() {
        },
        created() {},
    }
</script>


 H5/pages/work-detail/maxVideo.vue

New file
@@ -0,0 +1,50 @@
<template>
    <view>
        <u-navbar title=" " bgColor="#000000" autoBack leftIconColor="#ffffff">
        </u-navbar>
        <view class="preview-full">
            <video class="videoMax" :autoplay="true" :src="videoUrl" :show-fullscreen-btn="false">

            </video>
        </view>
    </view>

</template>


<script>
    export default {
        // props: {
        //     show: Boolean
        // },
        data() {
            return {
                videoUrl: ''
            };
        },
        onLoad(params) {
            this.videoUrl = params.url

        },
        methods: {

        },
        created() {},
    }
</script>

<style scoped lang="less">
    .preview-full {
        width: 100vw;
        height: 100vh;
        background-color: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .videoMax {
            width: 100%;
        }
    }
</style>

 H5/pages/work-detail/work-detail.vue

@@ -125,10 +125,25 @@
                </view>
                <view class="title">描述视频</view>
                <view class="descPic">
                    <view class="picItem" v-for="(item,index) in 3">
                        <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    <view class="picItem relative" v-for="(item,index) in 3">
                        <!-- <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                            class="img shrink0" mode="aspectFill">
                        </image> -->
                        <!-- <video :autoplay="true" src="https://www.w3schools.com/tags/movie.mp4"
                            class="img shrink0"></video> -->


                        <video id="myVideo" class="videoImg shrink0" disabled :controls="false"
                            :show-center-play-btn="false" :src="src">

                        </video>
                        <view class="videoOpen" @click.stop="openVideo(src)">
                            <image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill">
                        </image>
                        </view>



                    </view>
                </view>
            </view>
@@ -287,8 +302,6 @@
                </view>
            </view>
        </u-popup>


    </view>
</template>

@@ -303,15 +316,30 @@

                scoreTopHeight: 0, //距离顶部多高

                src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'

            };
        },
        onPageScroll(e) {
            this.scoreTopHeight = e.scrollTop

        },
        onShow() {

        },
        methods: {
            open() {},
            close() {},
            // 去大屏播放视频
            openVideo(url) {
                uni.navigateTo({
                    url: `/pages/work-detail/maxVideo?url=${'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'}`
                })
            },
            // 获取订单详情信息
            getDetailInfo() {

            },
            // 确认驳回
            submitReject() {
                this.showPop = false
@@ -512,8 +540,8 @@
                }

                .addressIcon {
                    width: 30.77rpx;
                    height: 30.77rpx;
                    width: 23.08rpx;
                    height: 25.64rpx;
                }
            }

@@ -810,6 +838,10 @@
                line-height: 38rpx;
            }


        }
    }

            .descPic {
                display: flex;
                flex-wrap: wrap;
@@ -817,12 +849,37 @@
                .picItem {
                    margin-right: 15rpx;


                    .img {
                        width: 140.38rpx;
                        height: 140.38rpx;
                        border-radius: 7.69rpx;
                    }
                }

        .videoImg {
            width: 140.38rpx;
            height: 140.38rpx;
            border-radius: 7.69rpx;
            position: relative;
        }

        .videoOpen {
            position: absolute;
            top: 10rpx;
            left: 0;
            z-index: 99;
            width: 140rpx;
            height: 140rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .video {
                z-index: 999;
                width: 140rpx;
                height: 140rpx;
            }
        }
    }
@@ -833,7 +890,12 @@
        line-height: 38rpx;
    }

    #myVideo {
        z-index: 1;
    }

    .btnButtom {
        z-index: 99;
        position: fixed;
        bottom: 0;
        width: 100vw;
@@ -984,4 +1046,18 @@
            cursor: pointer;
        }
    }

    .preview-full {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #000000;

        .maxVideo {
            width: 100%;
        }
    }
</style>

 H5/static/detailImg/dwei.png