路由跳转方式调整优化

 import { useRouter } from 'vue-router';
 
+/**
+ * 封装路由跳转方便行内调用
+ * @returns 
+ */
 export function useGo () {
   let router = useRouter()
   function go (path, query) {

@@ -11,3 +11,9 @@ export const styleObject2 = ref({
   color: '#0B3A72',
   borderColor: '#F9D95C'
 })
+
+export const styleObject3 = ref({
+  backgroundColor: '#F4675A',
+  color: '#FFFFFF',
+  borderColor: '#F4675A'
+})

@@ -66,7 +66,8 @@
           <template v-for="item in prod_list" :key="item" style="height: 3rem;">
             <video-card :item="item">
               <template #bookDetailSub>
-                <div @click="goToDetail(item.id, item.book_id, item.type)" style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }} </div>
+                <div @click="goToDetail(item.id, item.book_id, item.type)"
+                  style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }} </div>
               </template>
             </video-card>
           </template>
@@ -94,7 +95,7 @@
         <my-button @on-click="toDonate" type="plain">爱心捐书</my-button>
       </div>
     </div>
-    <shortcut-fixed type="C" :item="['home', 'me']"></shortcut-fixed>
+    <shortcut-fixed type="C" :item="shortcutItem"></shortcut-fixed>
   </div>
 
   <!-- 上传时，如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
@@ -124,7 +125,9 @@ import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_i
 import { JSJ_FORM_C } from '@/constant'
 
 import { useVideoList, useDefaultPerf } from '@/composables';
+import { useShortcutBar } from '@/composables';
 
+const { shortcutItem } = useShortcutBar(['home', 'me']); // 配置快捷跳转条
 const $route = useRoute();
 const $router = useRouter();
 
@@ -352,6 +355,7 @@ const goToDetail = (prod_id, book_id, type) => { // 跳转作品详情页
     .book-video-title {
       background-color: #F7F7F7;
       padding: 1rem 1.5rem;
+
       .bg-gradient {
         background: linear-gradient(@base-color, @base-color) no-repeat;
         /*调整下划线的宽度占百分之百  高度是3px */

 <template>
   <div class="book-list">
     <template v-for="(item, key) in items" :key="key">
-      <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
+      <book-card type="C" :item="item" @on-click="go('/client/bookDetail', { id: item.id })"></book-card>
     </template>
   </div>
   <van-empty v-if="emptyStatus"
@@ -14,14 +14,11 @@
 <script setup>
 import no_image from '@images/que-shuju@2x.png'
 import BookCard from '@/components/BookCard/index.vue'
-import { ref, reactive, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref } from 'vue'
 import axios from '@/utils/axios';
-import $ from 'jquery'
-import { Toast } from 'vant';
-const $route = useRoute();
-const $router = useRouter();
+import { useGo } from '@/hooks/useGo'
 
+const go = useGo()
 // 因为不能让空图标提前出来的写法
 const emptyStatus = ref(false);
 
@@ -45,15 +42,6 @@ axios.get('/srv/?a=my_subscribe')
   .catch(err => {
     console.error(err);
   });
-
-const onClick = (item) => {
-  $router.push({
-    path: '/client/bookDetail',
-    query: {
-      id: item.id
-    }
-  });
-}
 </script>
 
 <script>