✨ feat(书籍详情页，视频列表播放全屏优化，细节优化):

@@ -22,53 +22,56 @@
         </div>
         </div>
       </div>
       </div>
 
 
-      <div class="book-video-title">
-        <van-row>
-          <van-col span="12">
-            作品演绎
-            <div style="background-color: #F9D95C; width: 70px; height: 4px;"></div>
-          </van-col>
-          <van-col span="12">
-            <div style="font-size: 1rem; color: #999999; text-align: right;">
-              <van-icon :name="icon_video" />
-              54个作品
-            </div>
-          </van-col>
-        </van-row>
-      </div>
-
-      <div class="book-video-language">
-        <van-row>
-          <van-col span="6">
-            <div @click="toggleLanguage" :class="[check_mandarin ? 'checked' : 'uncheck']">普通话</div>
-          </van-col>
-          <van-col span="6">
-            <div @click="toggleLanguage" :class="[check_localism ? 'checked' : 'uncheck']">方言</div>
-          </van-col>
-          <van-col span="12" v-if="check_localism" @click="showPicker = true">
-            <div class="choose-wrapper">
-              <div class="text">
-                &nbsp;{{ chooseLanguage.text }}
+      <van-sticky>
+        <div class="book-video-title">
+          <van-row>
+            <van-col span="12">
+              作品演绎
+              <div style="background-color: #F9D95C; width: 70px; height: 4px;"></div>
+            </van-col>
+            <van-col span="12">
+              <div style="font-size: 1rem; color: #999999; text-align: right;">
+                <van-icon :name="icon_video" />
+                54个作品
               </div>
               </div>
-              <div class="icon">
-                <van-icon name="arrow-down" />&nbsp;
+            </van-col>
+          </van-row>
+        </div>
+        <div class="book-video-language">
+          <van-row>
+            <van-col span="6">
+              <div @click="toggleLanguage" :class="[check_mandarin ? 'checked' : 'uncheck']">普通话</div>
+            </van-col>
+            <van-col span="6">
+              <div @click="toggleLanguage" :class="[check_localism ? 'checked' : 'uncheck']">方言</div>
+            </van-col>
+            <van-col span="12" v-if="check_localism" @click="showPicker = true">
+              <div class="choose-wrapper">
+                <div class="text">
+                  &nbsp;{{ chooseLanguage.text }}
+                </div>
+                <div class="icon">
+                  <van-icon name="arrow-down" />&nbsp;
+                </div>
               </div>
               </div>
-            </div>
-          </van-col>
-        </van-row>
-        <van-popup v-model:show="showPicker" round position="bottom">
-          <van-picker
-            :columns="columns"
-            :columns-field-names="{ text: 'text', value: 'val', children: 'children' }"
-            @cancel="showPicker = false"
-            @confirm="onConfirm"
-          />
-        </van-popup>
-      </div>
+            </van-col>
+          </van-row>
+          <van-popup v-model:show="showPicker" round position="bottom">
+            <van-picker
+              :columns="columns"
+              :columns-field-names="{ text: 'text', value: 'val', children: 'children' }"
+              @cancel="showPicker = false"
+              @confirm="onConfirm"
+            />
+          </van-popup>
+        </div>
+      </van-sticky>
 
 
       <div class="book-video-list">
       <div class="book-video-list">
         <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
         <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-          <div v-for="item in list" :key="item" style="height: 3rem;">{{ item }}</div>
+          <template v-for="item in dataList" :key="item" style="height: 3rem;">
+            <video-card :item="item"></video-card>
+          </template>
         </van-list>
         </van-list>
       </div>
       </div>
     </div>
     </div>
@@ -91,7 +94,10 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import dataList from '@/mock/video_list'
+
 import MyButton from '@/components/MyButton/index.vue'
 import MyButton from '@/components/MyButton/index.vue'
+import VideoCard from '@/components/VideoCard/index.vue'
 
 
 import icon_video from '@images/video.png'
 import icon_video from '@images/video.png'
 import icon_up from '@images/icon-guanbi@2x.png'
 import icon_up from '@images/icon-guanbi@2x.png'
@@ -105,6 +111,7 @@ import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
 import $ from 'jquery'
 import $ from 'jquery'
+import _ from 'lodash'
 import { Toast } from 'vant';
 import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
@@ -220,6 +227,10 @@ const uploadVideo = () => {
 <script>
 <script>
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
 
 
+function transCaseList (url, pic) {
+  return { url, pic }
+}
+
 export default {
 export default {
   mixins: [mixin.init],
   mixins: [mixin.init],
   data() {
   data() {
@@ -227,11 +238,17 @@ export default {
 
 
     }
     }
   },
   },
-  mounted() {
-
+  created() {
+    this.getList()
   },
   },
   methods: {
   methods: {
-
+    getList () {
+      _.each(this.dataList, item => {
+        let video = item.video && item.video.url ? item.video.url : 'http://static.smartisanos.cn/common/video/t1-ui.mp4';
+        let cover = item.cover && item.cover.url ? item.cover.url : 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg';
+        item.options = { video: transCaseList(video, cover), autoplay: false, preload: 'none' }
+      })
+    }
   }
   }
 }
 }
 </script>
 </script>
@@ -240,11 +257,12 @@ export default {
 @import url('@css/content-bg.less');
 @import url('@css/content-bg.less');
 
 
 .book-detail-page {
 .book-detail-page {
-  overflow: auto;
+  // overflow: auto;
 
 
   .book-detail {
   .book-detail {
     margin: 1rem;
     margin: 1rem;
-    margin-top: 1.25rem;
+    // margin-top: 1.25rem;
+    margin-top: 0;
     padding-top: 1rem;
     padding-top: 1rem;
     border-radius: 10px;
     border-radius: 10px;
     background-color: rgba(255, 255, 255, 1);
     background-color: rgba(255, 255, 255, 1);
@@ -278,7 +296,7 @@ export default {
 
 
     .book-video-language {
     .book-video-language {
       padding: 1rem;
       padding: 1rem;
-
+      background-color: white;
       .uncheck {
       .uncheck {
         background: #F7F7F7;
         background: #F7F7F7;
         border-radius: 15px;
         border-radius: 15px;
@@ -320,12 +338,13 @@ export default {
     }
     }
 
 
     .book-video-list {
     .book-video-list {
-      height: 20rem;
-      overflow: scroll;
+      // height: 20rem;
+      // overflow: scroll;
     }
     }
   }
   }
 
 
   .book-bar {
   .book-bar {
+    z-index: 999;
     position: fixed;
     position: fixed;
     right: 0;
     right: 0;
     bottom: 0;
     bottom: 0;