默认选中

src/views/packageManage/bookList.vue

@@ -97,7 +97,7 @@
   const isShowBookList = ref<boolean>(true);
 
   const input_search_book = ref<string>('');
-  const selctType = ref<number>(999999);
+  const selctType = ref<string>('1');
 
   const bookeRef = ref();
   const bookDescRef = ref();

src/views/packageManage/index.vue

@@ -22,12 +22,12 @@
           </div>
         </div>
       </div>
-      <div class="rightBox">
+      <div class="rightBox" :class="refTYpe == 1 ? '' : 'rBox'">
         <div v-if="refTYpe == 1">
           <div class="classification"
-            >中图分类法：<span v-for="item in anchorList" :key="item.id"
-              >>>> <span @click="selectClass(item)" class="anchor">{{ item.name }} &nbsp;</span>
-            </span></div
+          >中图分类法：<span v-for="item in anchorList" :key="item.id"
+          >>>> <span @click="selectClass(item)" class="anchor">{{ item.name }} &nbsp;</span>
+          </span></div
           >
           <div class="threeLevel" v-if="listChildCategory && listChildCategory.length">
             <span
@@ -42,11 +42,11 @@
           </div>
           <div v-else style="height: 30px"></div>
         </div>
-        <div class="switchBox" v-if="refTYpe == 1 && total">
+        <div class="switchBox" v-if="total">
           <div :class="{ isActive: isSwitch == 1 }" @click="onSwitch(1)"
-            ><appstore-outlined />大图 </div
+          ><appstore-outlined />大图 </div
           ><div :class="{ isActive: isSwitch == 2 }" @click="onSwitch(2)"
-            ><unordered-list-outlined />列表
+          ><unordered-list-outlined />列表
           </div>
         </div>
         <div class="no-data" v-if="!total">
@@ -76,13 +76,13 @@
         </div>
         <div class="listBox" v-if="isSwitch == 2 && total">
           <div class="list-head">
-            <div class="isbn">isbn</div>
             <div class="name">图书名称</div>
+            <div class="isbn">isbn</div>
             <div class="author">作者</div>
           </div>
           <div v-for="item in pkglist" :key="item.id" @click="clickDesc(item.id)" class="list-item">
-            <div class="isbn">{{ item.isbn || '-' }}</div>
             <div class="name">{{ item.name || '-' }}</div>
+            <div class="isbn">{{ item.isbn || '-' }}</div>
             <div class="author">{{ item.author || '-' }}</div>
           </div>
         </div>
@@ -120,13 +120,13 @@
         </div>
 
         <div :style="moveStyle ? 'color: #1677FF;' : 'color: rgba(102, 102, 102, 0.85);'"
-        >阅读说明</div
+          >阅读说明</div
         >
       </div>
       <div class="model_div" ref="explainModel">
         <a-modal v-model:visible="explainVisible" title="阅读说明">
           <div class="model_conter"
-          >若是文件格式为docx、doc、ppt、pptx、xls、ppsx可以使用office软件打开；若是文件格式为avi、rmvb、flv、swf、wmv、f4v、rm、IFO、mp4、VOB、MTS属于视频文件，可以使用视频播放器打开,其中MTS需要使用索尼软件播放视频；rar、zip为压缩文件，可以用winrar或7-Zip等解压缩软件解压查看；mp3、wma音频文件需要音频软件播放；mobi、chm、pdg、epub、azw3、pdz属于电子书格式，可以使用对应电子书阅读器阅读，例如EPUB电子书阅读器或超星阅读器；psd、MPG、jpeg可以直接用图片工具查看；若是djvu文件需使用djvu阅读器阅读，cfg文件需使用记事本打开，pps文件需要安装pps网络电视查看；若是exe文件，请直接下载安装。</div
+            >若是文件格式为docx、doc、ppt、pptx、xls、ppsx可以使用office软件打开；若是文件格式为avi、rmvb、flv、swf、wmv、f4v、rm、IFO、mp4、VOB、MTS属于视频文件，可以使用视频播放器打开,其中MTS需要使用索尼软件播放视频；rar、zip为压缩文件，可以用winrar或7-Zip等解压缩软件解压查看；mp3、wma音频文件需要音频软件播放；mobi、chm、pdg、epub、azw3、pdz属于电子书格式，可以使用对应电子书阅读器阅读，例如EPUB电子书阅读器或超星阅读器；psd、MPG、jpeg可以直接用图片工具查看；若是djvu文件需使用djvu阅读器阅读，cfg文件需使用记事本打开，pps文件需要安装pps网络电视查看；若是exe文件，请直接下载安装。</div
           >
           <template #footer>
             <div class="model_btn">
@@ -703,7 +703,8 @@
       }
     }
     .rightBox {
-      flex: 1;
+      // flex: 1;
+      width: 940px;
       .classification {
         .anchor {
           cursor: pointer;
@@ -717,7 +718,7 @@
         border-radius: 4px;
         padding: 16px 20px;
         margin: 16px 0;
-        width: 94%;
+        // width: 94%;
 
         span {
           font-size: 12px;
@@ -762,8 +763,8 @@
   }
   .listBox {
     background: #ffffff;
-    margin: 20px;
-    width: 920px;
+    // margin: 20px;
+    // width: 920px;
     .list-head {
       display: flex;
       border-bottom: 1px solid #eee;
@@ -795,17 +796,27 @@
       }
     }
     .isbn {
-      width: 200px;
+      width: 180px;
+      margin: 0 10px;
+      text-align: center;
     }
     .name {
-      width: 450px;
+      // width: 360px;
+      flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
-      display: -webkit-box;
       white-space: nowrap;
     }
     .author {
-      width: 120px;
+      width: 300px;
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      // display: -webkit-box;
+      white-space: nowrap;
     }
   }
+  .rBox {
+    width: 100% !important;
+  }
 </style>