✨ feat(视频控件): 样式细节调整，播放全屏播放问题

 <template>
 <template>
-  <div
-    style="margin: 1rem; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);">
-    <div :id="'mui-player-' + item.case_id" style="border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
-    <div style="color: #713610; padding: 1rem; padding-bottom: 0.5rem;">
+  <div class="video-wrapper">
+    <div class="video-div" :id="'mui-player-' + item.case_id"></div>
+    <div class="video-bar">
       <van-row>
       <van-row>
-        <van-col span="12">
+        <van-col span="12" @click="goTo">
           <van-image round width="2rem" height="2rem" style="vertical-align: bottom;"
           <van-image round width="2rem" height="2rem" style="vertical-align: bottom;"
             src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
             src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
           <span style="font-size: 1.05rem;">王忆慈</span>
           <span style="font-size: 1.05rem;">王忆慈</span>
         </van-col>
         </van-col>
         <van-col span="12">
         <van-col span="12">
           <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
           <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
-            <span @click="setCommit">
+            <span @click="setComment">
               <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
               <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
               67
               67
             </span>
             </span>
@@ -25,7 +24,7 @@
         </van-col>
         </van-col>
       </van-row>
       </van-row>
     </div>
     </div>
-    <div style="color: #999999; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
+    <div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -39,6 +38,16 @@ import 'mui-player/dist/mui-player.min.css'
 import MuiPlayer from 'mui-player'
 import MuiPlayer from 'mui-player'
 import _ from 'lodash';
 import _ from 'lodash';
 
 
+import { useRoute, useRouter } from 'vue-router'
+const $route = useRoute();
+const $router = useRouter();
+
+const goTo = () => { // 跳转作品详情页
+  $router.push({
+    path: '/client/videoDetail'
+  });
+}
+
 onMounted(() => {
 onMounted(() => {
 })
 })
 
 
@@ -60,7 +69,12 @@ export default {
       title: this.item.title,
       title: this.item.title,
       src: this.item.video.url,
       src: this.item.video.url,
       poster: this.item.cover.url,
       poster: this.item.cover.url,
-      autoFit: false
+      autoFit: false,
+      videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
+        {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
+        {attrKey:'playsinline',attrValue:'playsinline'},
+        {attrKey:'x5-video-player-type',attrValue:'h5-page'},
+      ]
     })
     })
     this.detail = _.cloneDeep(this.item)
     this.detail = _.cloneDeep(this.item)
   },
   },
@@ -68,7 +82,7 @@ export default {
     setLike() {
     setLike() {
       this.detail.liked = !this.detail.liked
       this.detail.liked = !this.detail.liked
     },
     },
-    setCommit() {
+    setComment() {
       console.warn('跳转详情页，移动到留言页');
       console.warn('跳转详情页，移动到留言页');
       console.warn(this.detail.case_id);
       console.warn(this.detail.case_id);
     }
     }
@@ -77,4 +91,19 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
+.video-wrapper {
+  margin: 1rem; 
+  border-bottom-left-radius: 5px; 
+  border-bottom-right-radius: 5px; 
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
+  .video-div {
+    border-top-left-radius: 5px; 
+    border-top-right-radius: 5px;
+  }
+  .video-bar {
+    color: #713610; 
+    padding: 1rem; 
+    padding-bottom: 0.5rem;
+  }
+}
 </style>
 </style>
\ No newline at end of file