yb11.3

src/components/VideoBox.vue

@@ -52,9 +52,9 @@ const handleGetTopPosition=()=>{
     if(length%3===1){
         num=10
     }else if(length%3===2){
-        num=30
+        num=35
     }else{
-        num=50
+        num=55
     }
     return num+'px'
 }
@@ -219,7 +219,6 @@ const handleSendDanmu=async ()=>{
                     maxlength="50" 
                     placeholder="发个友善的弹幕见证当下~"
                     @keyup.enter="handleSendDanmu"
-                    @keyup.esc="videoState.isPageFullScreen=false"
                 >
                 <span class="btn" :style="{background:info.id!=props.curVideoId?'#929292':''}" @click.stop="handleSendDanmu">发送</span>
             </div>
@@ -530,9 +529,9 @@ const handleSendDanmu=async ()=>{
         .border{
             border: 1px solid #fff;
             border-radius: 10px;
-            padding-left: 2px;
-            padding-right: 2px;
-            line-height: 20px;
+            padding-left: 10px;
+            padding-right: 10px;
+            line-height: 18px;
         }
         @keyframes move {
             0%{

src/views/report/reportForVariety/List.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {apiReportListForVariety,apiGoodsPermissionList} from '@/api/report'
 import SelfList from '@/components/SelfList.vue'
+import SharePoster from '@/components/SharePoster.vue'
 import moment from 'moment';
 import { reactive,onMounted,onActivated,computed,ref } from 'vue'
 import { useRoute,useRouter } from 'vue-router';

src/views/roadShow/video/List.vue

@@ -1,6 +1,5 @@
 <script setup>
 import {ref,reactive,onMounted,onActivated} from 'vue'
-import { useElementSize } from '@vueuse/core'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import {apiGetWechatQRCode,apiUserBindPermission,apiViewLogUpdate} from '@/api/common'
@@ -24,10 +23,6 @@ const store=useStore()
 //分享进入的videoid 
 let videoId=ref(0)
 
-//监听列表页面版心宽度
-const listPageEl=ref('')
-const {width}=useElementSize(listPageEl)
-
 // 获取品种权限数据
 let permissionState=reactive({
     firstNavList:[],
@@ -264,7 +259,7 @@ const getCommentData=item=>{
     }
 }
 
-// 处理评论模块数据
+// 处理弹幕模块数据
 const getDanmuData=item=>{
     return{
         id:item.road_video_id,
@@ -314,8 +309,8 @@ onActivated(()=>{
             <div class="global-main-btn btn" @click="handleApply" style="margin-bottom: 20px;">立即申请</div>
         </template>
     </div>
-    <div class="video-list-page" ref="listPageEl" v-else>
-        <div class="top-nav-box" :style="{width:width+'px'}">
+    <div class="video-list-page" v-else>
+        <div class="top-nav-box">
             <div class="first-nav-box">
                 <span 
                     v-for="item in permissionState.firstNavList" 
@@ -457,11 +452,9 @@ onActivated(()=>{
     .top-nav-box{
         padding: 30px 0 12px;
         background: #FFFFFF;
-        // box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
         position: sticky;
         top: 60px;
         width: 100%;
-        max-width: 1240px;
         z-index: 10;
         .first-nav-box{
             span{

src/views/video/List.vue

@@ -8,6 +8,7 @@ import {apiApplyPermission} from '@/api/user'
 
 import SelfList from '@/components/SelfList.vue'
 import VideoComment from '@/components/VideoComment.vue'
+import VideoBox from '@/components/VideoBox.vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 
@@ -261,6 +262,15 @@ const getCommentData=item=>{
     }
 }
 
+// 处理弹幕模块数据
+const getDanmuData=item=>{
+    return{
+        id:item.community_video_id,
+        source:1,
+        ...item
+    }
+}
+
 onMounted(() => {
   //向小程序发送消息
   let postData = {
@@ -377,19 +387,15 @@ onActivated(()=>{
                     <div class="multi-ellipsis title">{{item.title}}</div>
                     </el-tooltip>
                     <div class="time">发布时间：{{item.publish_time}}</div>
-                    <video 
-                        :src="item.video_url" 
-                        controls
-                        :poster="item.cover_img_url"
-                        controlslist="nodownload"
-                        disablePictureInPicture
-                        autoplay
-                        v-if="item.community_video_id==curVideoId"
-                        @ended="curVideoId=0"
-                        @pause="handleVideoPause"
-                    ></video>
-                    <div v-else class="poster-img" :style="'background-image:url('+item.cover_img_url+')'" @click="handelClickPlay(item)"></div>
-             
+                    <div class="video-content">
+                        <VideoBox
+                            :videoInfo="getDanmuData(item)"
+                            :curVideoId="curVideoId"
+                            @clickPlay="handelClickPlay"
+                            @ended="curVideoId=0"
+                            @pause="handleVideoPause"
+                        ></VideoBox>
+                    </div>
                     <VideoComment :videoInfo="getCommentData(item)"></VideoComment>
                 </div>
                 <div class="last-add-item"></div>
@@ -517,34 +523,10 @@ onActivated(()=>{
                 color: #666;
                 padding-right: 70px;
             }
-            video{
+            .video-content{
                 width: 100%;
-                height: 200px;
-                object-fit: contain;
+                // height: 200px;
                 margin: 19px 0;
-                display: block;
-                box-sizing: border-box;
-            }
-            .poster-img{
-                width: 100%;
-                height: 200px;
-                margin: 19px 0;
-                position: relative;
-                background-size: cover;
-                background-position: center;
-                cursor: pointer;
-                &::after{
-                    content:'';
-                    display: block;
-                    position: absolute;
-                    width: 80px;
-                    height: 80px;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%,-50%);
-                    background-image: url('@/assets/video-play-btn.png');
-                    background-size: cover;
-                }
             }
             .time{
                 color: #999;