列表切换

src/views/packageManage/bookList.vue

@@ -50,7 +50,7 @@
                   v-for="item in bookType"
                   :key="item.id"
                   @click="selectType(item.id, item.name)"
-                >{{ item.name }}</a-menu-item
+                  >{{ item.name }}</a-menu-item
                 >
               </a-menu>
             </template>
@@ -75,7 +75,7 @@
       <bookdesc
         v-show="!isShowBookList"
         ref="bookDescRef"
-        style="margin-top: 100px"
+        style="margin-top: 130px"
         @escClick="escClick"
       />
       <recommendBox v-if="recommendVisit" />

src/views/packageManage/index.vue

@@ -42,11 +42,18 @@
           </div>
           <div v-else style="height: 30px"></div>
         </div>
+        <div class="switchBox" v-if="refTYpe == 1 && total">
+          <div :class="{ isActive: isSwitch == 1 }" @click="onSwitch(1)"
+          ><appstore-outlined />大图 </div
+          ><div :class="{ isActive: isSwitch == 2 }" @click="onSwitch(2)"
+          ><unordered-list-outlined />列表
+          </div>
+        </div>
         <div class="no-data" v-if="!total">
           <img src="@/assets/images/kongdata.svg" />
           <div>暂时还没有内容哦</div>
         </div>
-        <div class="content" v-else>
+        <div class="content" v-if="isSwitch == 1 && total">
           <div class="item" v-for="item in pkglist" :key="item.id" @click="clickDesc(item.id)">
             <div class="item_bj">
               <div class="item_img">
@@ -67,6 +74,18 @@
             </div>
           </div>
         </div>
+        <div class="listBox" v-if="isSwitch == 2 && total">
+          <div class="list-head">
+            <div class="isbn">isbn</div>
+            <div class="name">图书名称</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="author">{{ item.author || '-' }}</div>
+          </div>
+        </div>
         <div class="pagination" v-if="total">
           <a-pagination
             :show-total="(total) => `总共 ${total} 条`"
@@ -123,6 +142,7 @@
   import { useRouter, useRoute } from 'vue-router';
   import { message } from 'ant-design-vue';
   import { ref, onMounted, defineExpose, watch, reactive } from 'vue';
+  import { AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
   import book from '../../api/book';
 
   const router = useRouter();
@@ -141,7 +161,7 @@
   const current = ref<number>(1);
   const pageSize = ref<number>(9);
   let total = ref<any>(0);
-
+  const isSwitch = ref<number>(1);
   // 搜索
   const search_icon = ref<boolean>(true);
   const search_iconFlag = ref<boolean>(false);
@@ -213,6 +233,9 @@
       }
     });
   };
+  const onSwitch = (val) => {
+    isSwitch.value = val;
+  };
   onMounted(() => {
     getSubType();
   });
@@ -711,4 +734,78 @@
       }
     }
   }
+  .switchBox {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-right: 6%;
+    margin-bottom: 10px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    span {
+      margin-right: 4px;
+    }
+    & > div {
+      margin: 0 8px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        color: #1677ff;
+      }
+    }
+    .isActive {
+      color: #1677ff;
+    }
+  }
+  .listBox {
+    background: #ffffff;
+    margin: 20px;
+    width: 920px;
+    .list-head {
+      display: flex;
+      border-bottom: 1px solid #eee;
+      padding: 0 40px;
+      & > div {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        font-weight: bold;
+        line-height: 48px;
+        color: #999;
+      }
+    }
+    .list-item {
+      display: flex;
+      border-bottom: 1px solid #eee;
+      padding: 0 40px;
+      cursor: pointer;
+      & > div {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        line-height: 48px;
+        color: #666666;
+      }
+      &:hover {
+        color: #1677ff !important;
+        background: rgba(22, 119, 255, 0.09);
+      }
+    }
+    .isbn {
+      width: 150px;
+    }
+    .name {
+      width: 500px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      white-space: nowrap;
+    }
+    .author {
+      width: 120px;
+    }
+  }
 </style>