1

src/api/book.ts

@@ -12,7 +12,8 @@ const book = {
   bookRetrieval: '/fighter-library/book/bookRetrieval',
   viewBookDetails: '/fighter-library/book/viewBookDetails',
   getBookTypeDropDown: '/fighter-library/CateRelation/listTopCategory',
-  listCategory: '/fighter-library/CateRelation/listChildCategory',
+  listCategory: '/fighter-library/CateRelation/listLevel3Category',
+  listChildCategory: '/fighter-library/CateRelation/listChildCategory',
 };
 
 interface booklist {
@@ -59,5 +60,11 @@ class UserService {
       params: params,
     });
   }
+  static async listChildCategory(params): Promise<HttpResponse> {
+    return Axios(book.listChildCategory, {
+      method: 'post',
+      params: params,
+    });
+  }
 }
 export default UserService;

src/views/packageManage/index.vue

@@ -1,64 +1,93 @@
 <!-- 套餐列表 -->
 <template>
-  <div>
-    <div class="pkg-main" v-if="search_icon">
-      <div class="head" v-if="refTYpe == 1">
-        <div class="name">分类：</div>
+  <div class="pkg-main">
+    <div class="minBox" v-if="search_icon">
+      <div class="headBox" v-if="refTYpe == 1">
+        <div class="name">图书分类</div>
         <div class="navBox">
-          <div v-for="item in subTypeList" :key="item.id">
+          <div
+            v-for="item in subTypeList"
+            :key="item.id"
+            @click="selectType(item.id)"
+            class="onwLevel"
+          >
+            {{ item.name }}
+
+            <div v-if="item?.cateRelationPoList" class="twoLevel">
+              <span
+                class="booke_type"
+                v-for="it in item.cateRelationPoList"
+                :key="it.id"
+                :class="{ booke_type_color: it.id === selctType }"
+                @click="selectType(it.id)"
+              >
+                {{ it.name }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rightBox">
+        <div v-if="refTYpe == 1">
+          <div class="classification">中图分类法：>>马克思主义、列宁主义、毛</div>
+          <div class="threeLevel">
             <span
               class="booke_type"
-              :class="{ booke_type_color: item.id === selctType }"
-              @click="selectType(item.id)"
+              v-for="it in listChildCategory"
+              :key="it.id"
+              :class="{ booke_type_color: it.id === selctType }"
+              @click="selectType(it.id)"
             >
-              {{ item.name }}
+              {{ it.name }}(全部：{{ it.bookNum }})
             </span>
-            <a-divider type="vertical" />
           </div>
         </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="item" v-for="item in pkglist" :key="item.id" @click="clickDesc(item.id)">
-          <div class="item_bj">
-            <div class="item_img">
-              <img :src="item.cover" class="item_cover" />
-            </div>
-            <div class="item_ctx">
-              <div class="item_ctx_title">{{ item.name }}</div>
-              <div class="item_ctx_author">{{ item.author }}</div>
-              <div class="item_ctx_text">{{ item.brief }}</div>
-              <div class="item_ctx_read" @click.stop="readBook(item.uploadFile, item.linkAddress)">
-                {{ isRead(item.uploadFile, item.linkAddress) }}
-                <span class="msly">></span>
+        <div class="no-data" v-if="!total">
+          <img src="@/assets/images/kongdata.svg" />
+          <div>暂时还没有内容哦</div>
+        </div>
+        <div class="content" v-else>
+          <div class="item" v-for="item in pkglist" :key="item.id" @click="clickDesc(item.id)">
+            <div class="item_bj">
+              <div class="item_img">
+                <img :src="item.cover" class="item_cover" />
+              </div>
+              <div class="item_ctx">
+                <div class="item_ctx_title">{{ item.name }}</div>
+                <div class="item_ctx_author">{{ item.author }}</div>
+                <div class="item_ctx_text">{{ item.brief }}</div>
+                <div
+                  class="item_ctx_read"
+                  @click.stop="readBook(item.uploadFile, item.linkAddress)"
+                >
+                  {{ isRead(item.uploadFile, item.linkAddress) }}
+                  <span class="msly">></span>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="pagination" v-if="total">
-        <a-pagination
-          :show-total="(total) => `总共 ${total} 条`"
-          show-size-changer
-          :pageSizeOptions="['9', '18', '27', '36']"
-          v-model:current="current"
-          v-model:pageSize="pageSize"
-          :total="total"
-          show-quick-jumper
-          @showSizeChange="sizeChange"
-          @change="cuerrchange"
-        ></a-pagination>
+        <div class="pagination" v-if="total">
+          <a-pagination
+            :show-total="(total) => `总共 ${total} 条`"
+            show-size-changer
+            :pageSizeOptions="['9', '18', '27', '36']"
+            v-model:current="current"
+            v-model:pageSize="pageSize"
+            :total="total"
+            show-quick-jumper
+            @showSizeChange="sizeChange"
+            @change="cuerrchange"
+          />
+        </div>
       </div>
     </div>
-    <div class="main-icon" v-else>
+    <!-- <div class="main-icon" v-else>
       <div class="no-data">
         <img src="@/assets/images/seachericonnull.svg" />
         <div>很抱歉没有找到相关的内容，请换个关键词试试！</div>
       </div>
-    </div>
+    </div> -->
     <div>
       <div
         class="suspension"
@@ -72,13 +101,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">
@@ -91,352 +120,198 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useRouter, useRoute } from 'vue-router';
-import { message } from 'ant-design-vue';
-import { ref, onMounted, defineExpose, watch, reactive } from 'vue';
-import book from '../../api/book';
+  import { useRouter, useRoute } from 'vue-router';
+  import { message } from 'ant-design-vue';
+  import { ref, onMounted, defineExpose, watch, reactive } from 'vue';
+  import book from '../../api/book';
 
-const router = useRouter();
-const explainModel = ref();
-const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
-const pkglist = ref<any>({});
-const bookType = ref([
-  { label: '全部', id: 0 },
-  { label: '电子图书', id: 1 },
-  { label: '文献资料', id: 2 },
-  { label: '学术论文', id: 3 },
-]);
+  const router = useRouter();
+  const explainModel = ref();
+  const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
+  const pkglist = ref<any>({});
+  const bookType = ref([
+    { label: '全部', id: 0 },
+    { label: '电子图书', id: 1 },
+    { label: '文献资料', id: 2 },
+    { label: '学术论文', id: 3 },
+  ]);
 
-const selctType = ref<number>(0);
+  const selctType = ref<number>(0);
 
-const current = ref<number>(1);
-const pageSize = ref<number>(9);
-let total = ref<any>(0);
+  const current = ref<number>(1);
+  const pageSize = ref<number>(9);
+  let total = ref<any>(0);
 
-// 搜索
-const search_icon = ref<boolean>(true);
-const search_iconFlag = ref<boolean>(false);
+  // 搜索
+  const search_icon = ref<boolean>(true);
+  const search_iconFlag = ref<boolean>(false);
 
-function goToPage(path, id) {
-  router.push({
-    path: path,
-    query: {
-      id: id,
-    },
-  });
-}
+  function goToPage(path, id) {
+    router.push({
+      path: path,
+      query: {
+        id: id,
+      },
+    });
+  }
 
-const refbookName = ref<string>('');
-const refTYpe = ref<number>(0);
-// 图书列表
-const getbookList = () => {
-  let params = {
-    bookName: refbookName.value || '',
-    pageNum: current.value,
-    pageSize: pageSize.value,
-    // type: refTYpe.value || '',
-    // subType: selctType.value ? selctType.value : '',
-    currentCateId: selctType.value && selctType.value != 999999 ? selctType.value : '',
+  const refbookName = ref<string>('');
+  const refTYpe = ref<number>(0);
+  // 图书列表
+  const getbookList = () => {
+    let params = {
+      bookName: refbookName.value || '',
+      pageNum: current.value,
+      pageSize: pageSize.value,
+      // type: refTYpe.value || '',
+      // subType: selctType.value ? selctType.value : '',
+      currentCateId: selctType.value && selctType.value != 999999 ? selctType.value : '',
+    };
+    book
+      .bookRetrieval(params)
+      .then((res) => {
+        const { data, code, message } = res.data;
+        if (code === 200) {
+          pkglist.value = data.records;
+          total.value = data.total;
+          if (search_iconFlag.value) {
+            search_icon.value = false;
+          } else {
+            search_icon.value = true;
+          }
+        }
+      })
+      .catch((err) => {
+        message.info(err.data.message);
+      });
   };
-  book
-    .bookRetrieval(params)
-    .then((res) => {
-      const { data, code, message } = res.data;
-      if (code === 200) {
-        pkglist.value = data.records;
-        total.value = data.total;
-        if (search_iconFlag.value) {
-          search_icon.value = false;
-        } else {
-          search_icon.value = true;
+  const subTypeList = ref([]);
+  const listChildCategory = ref([]);
+  const getSubType = () => {
+    if (refTYpe.value) {
+      book.listCategory({ pid: refTYpe.value }).then((res) => {
+        const { code, data } = res.data;
+        subTypeList.value = [];
+        if (code === 200) {
+          subTypeList.value.push(...data);
         }
-      }
-    })
-    .catch((err) => {
-      message.info(err.data.message);
-    });
-};
-const subTypeList = ref([
-  {
-    name: '全部',
-    id: 0,
-  },
-]);
-const getSubType = () => {
-  if (refTYpe.value) {
-    book.listCategory({ pid: refTYpe.value }).then((res) => {
+        console.log(subTypeList.value);
+        getListChildCategory(refTYpe.value);
+        getbookList();
+      });
+    }
+  };
+  const getListChildCategory = (val) => {
+    book.listChildCategory({ pid: val }).then((res) => {
       const { code, data } = res.data;
-      subTypeList.value = [{ name: '全部', id: 0 }];
+      listChildCategory.value = [];
       if (code === 200) {
-        subTypeList.value.push(...data);
+        listChildCategory.value.push(...data);
       }
-      console.log(subTypeList.value);
-      getbookList();
     });
-  }
-};
-onMounted(() => {
-  getSubType();
-});
-const selectType = (id) => {
-  selctType.value = id;
-  getbookList();
-  // let arry = data.filter((item) => item.id == id);
-  // console.log(arry, 'aaa');
-  // pkglist.value = arry[0].data;
-  // total.value = pkglist.value.length;
-  // showBookList.value = true;
-};
+  };
+  onMounted(() => {
+    getSubType();
+  });
+  const selectType = (id) => {
+    selctType.value = id;
+    getListChildCategory(id);
+    getbookList();
+    // let arry = data.filter((item) => item.id == id);
+    // console.log(arry, 'aaa');
+    // pkglist.value = arry[0].data;
+    // total.value = pkglist.value.length;
+    // showBookList.value = true;
+  };
 
-// 分页
-const cuerrchange = (num) => {
-  current.value = num;
-  getbookList();
-};
-const sizeChange = (page, size) => {
-  pageSize.value = size;
-  getbookList();
-};
-const emit = defineEmits(['showDesc']);
-const clickDesc = (id) => {
-  window.scrollTo(0, 0);
-  emit('showDesc', id);
-};
-const readBook = (file, url) => {
-  window.open(file || url);
-  //console.log(file||url)
-};
-const isRead = (file, url) => {
-  if (file) {
-    var index = file.lastIndexOf('.');
-    //获取后缀
-    var ext = file.substr(index + 1);
-    console.log(ext);
-    if (ext == 'pdf' || ext == 'PDF') {
+  // 分页
+  const cuerrchange = (num) => {
+    current.value = num;
+    getbookList();
+  };
+  const sizeChange = (page, size) => {
+    pageSize.value = size;
+    getbookList();
+  };
+  const emit = defineEmits(['showDesc']);
+  const clickDesc = (id) => {
+    window.scrollTo(0, 0);
+    emit('showDesc', id);
+  };
+  const readBook = (file, url) => {
+    window.open(file || url);
+    //console.log(file||url)
+  };
+  const isRead = (file, url) => {
+    if (file) {
+      var index = file.lastIndexOf('.');
+      //获取后缀
+      var ext = file.substr(index + 1);
+      console.log(ext);
+      if (ext == 'pdf' || ext == 'PDF') {
+        return '立即阅读';
+      } else {
+        return '立即下载';
+      }
+    } else if (url) {
       return '立即阅读';
     } else {
       return '立即下载';
     }
-  } else if (url) {
-    return '立即阅读';
-  } else {
-    return '立即下载';
-  }
-};
-//改变悬浮求样式
-const moveStyle = ref<boolean>(false);
-const mouseOver = () => {
-  moveStyle.value = true;
-};
-const mouseLeave = () => {
-  moveStyle.value = false;
-};
+  };
+  //改变悬浮求样式
+  const moveStyle = ref<boolean>(false);
+  const mouseOver = () => {
+    moveStyle.value = true;
+  };
+  const mouseLeave = () => {
+    moveStyle.value = false;
+  };
 
-const explainVisible = ref<boolean>(false);
+  const explainVisible = ref<boolean>(false);
 
-defineExpose({
-  getSubType,
-  refbookName,
-  refTYpe,
-  current,
-  pageSize,
-  search_iconFlag,
-  selctType,
-});
+  defineExpose({
+    getSubType,
+    refbookName,
+    refTYpe,
+    current,
+    pageSize,
+    search_iconFlag,
+    selctType,
+  });
 </script>
 <style lang="less" scoped>
-.model_btn {
-  :deep(.ant-btn-primary) {
-    background: #1677ff;
-    border-color: #1677ff;
-  }
-}
-.suspension {
-  position: fixed;
-  cursor: pointer;
-  top: 50%;
-  right: 35px;
-  padding: 1px 8px;
-  background: #ffffff;
-  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  .book_svg_div {
-    width: 48px;
-    height: 48px;
-    overflow: hidden;
-  }
-}
-.main-icon {
-  width: 100%;
-  background: white;
-  padding-top: 60px;
-  .no-data {
-    text-align: center;
-    padding-top: 200px;
-    img {
-      margin: 0 auto;
-    }
-    div {
-      color: #cccccc;
-      margin-top: 10px;
-    }
-  }
-}
-.pkg-main {
-  width: 100%;
-  background: white;
-  background: url('@/assets/images/bookbg.svg');
-  background-size: 100% 608px;
-  background-repeat: no-repeat;
-  padding-top: 98px;
-  .no-data {
-    text-align: center;
-    padding-top: 80px;
-    padding-bottom: 40px;
-    img {
-      padding: 0px auto;
-    }
-    div {
-      color: #cccccc;
-      margin-top: 10px;
+  .model_btn {
+    :deep(.ant-btn-primary) {
+      background: #1677ff;
+      border-color: #1677ff;
     }
   }
-  .content {
-    width: 1160px;
-    margin: 0 auto;
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: start;
-    .item {
-      width: 378px;
-      height: 200px;
-      background: none;
-      margin-right: 6px;
-      margin-bottom: 20px;
-      cursor: pointer;
-      .item_bj {
-        background: #ffffff;
-        border: 1px solid #eeeeee;
-        width: 378px;
-        height: 200px;
-        display: flex;
-        justify-content: flex-start;
-        .item_img {
-          margin-top: 20px;
-          margin-left: 10px;
-          width: 114px;
-          height: 160px;
-          .item_cover {
-            width: 100%;
-            height: 100%;
-          }
-        }
-        .item_ctx {
-          margin-top: 19px;
-          margin-left: 10px;
-          width: 212px;
-          height: 200px;
-          .item_ctx_title {
-            font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            min-height: 50px;
-            color: #333333;
-            white-space: normal;
-            text-overflow: -o-ellipsis-lastline;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            line-clamp: 2;
-            -webkit-box-orient: vertical;
-          }
-          .item_ctx_author {
-            margin-top: 4px;
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #666666;
-            white-space: normal;
-            text-overflow: -o-ellipsis-lastline;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            line-clamp: 1;
-            -webkit-box-orient: vertical;
-          }
-          .item_ctx_text {
-            margin-top: 8px;
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #666666;
-            white-space: normal;
-            text-overflow: -o-ellipsis-lastline;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            line-clamp: 3;
-            -webkit-box-orient: vertical;
-          }
-          .item_ctx_read {
-            margin-top: 10px;
-            font-size: 14px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #333333;
-          }
-          .msly {
-            display: inline-block;
-            margin-left: 5px;
-            color: #666666;
-          }
-        }
-      }
-      .item_bj:hover {
-        background: #edf4fe;
-        .item_ctx_read {
-          color: #1677ff;
-        }
-        .msly {
-          color: #1677ff;
-          display: inline-block;
-          margin-left: 5px;
-        }
-      }
+  .suspension {
+    position: fixed;
+    cursor: pointer;
+    top: 50%;
+    right: 35px;
+    padding: 1px 8px;
+    background: #ffffff;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    .book_svg_div {
+      width: 48px;
+      height: 48px;
+      overflow: hidden;
     }
   }
-}
-.pagination {
-  text-align: center;
-  padding-bottom: 40px;
-  margin-top: 40px;
-}
-
-@media screen and (max-width: 600px) {
-  .pagination {
-    text-align: center;
-    padding-bottom: 40px;
-    margin-top: 8px;
-  }
-  /deep/ .ant-pagination-total-text {
-    display: none;
-  }
   .main-icon {
-    width: 100% !important;
+    width: 100%;
     background: white;
     padding-top: 60px;
-    overflow: hidden;
-
     .no-data {
       text-align: center;
-      padding-top: 400px;
+      padding-top: 200px;
       img {
         margin: 0 auto;
       }
@@ -447,14 +322,17 @@ defineExpose({
     }
   }
   .pkg-main {
-    width: 100% !important;
+    width: 100%;
     background: white;
-    padding-top: 9.25rem;
-    margin: 0 !important;
+    background: url('@/assets/images/bookbg.svg');
+    background-size: 100% 608px;
+    background-repeat: no-repeat;
+    padding-top: 158px;
+
     .no-data {
       text-align: center;
       padding-top: 80px;
-      padding-bottom: 80px;
+      padding-bottom: 40px;
       img {
         padding: 0px auto;
       }
@@ -463,25 +341,25 @@ defineExpose({
         margin-top: 10px;
       }
     }
+
     .content {
-      width: 100% !important;
+      // width: 1160px;
       margin: 0 auto;
-      padding-top: 0px;
+
       display: flex;
-      flex-flow: column nowrap;
-      justify-content: center;
+      flex-wrap: wrap;
+      justify-content: space-between;
       .item {
-        width: 100%;
-        flex: 1;
+        width: 304px;
         height: 200px;
         background: none;
-        padding: 0 20px;
+        margin-right: 6px;
         margin-bottom: 20px;
         cursor: pointer;
         .item_bj {
           background: #ffffff;
           border: 1px solid #eeeeee;
-          width: 100%;
+          width: 304px;
           height: 200px;
           display: flex;
           justify-content: flex-start;
@@ -498,8 +376,7 @@ defineExpose({
           .item_ctx {
             margin-top: 19px;
             margin-left: 10px;
-            width: auto;
-            flex: 1;
+            width: 148px;
             height: 200px;
             .item_ctx_title {
               font-size: 16px;
@@ -574,45 +451,232 @@ defineExpose({
       }
     }
   }
-}
-.head {
-  width: 1160px;
-  margin: 20px auto;
-  display: flex;
-  background: #ffffff;
-  border-radius: 8px;
-
-  min-height: 62px;
-  .navBox {
-    display: flex;
-    line-height: 62px;
-    flex-wrap: wrap;
-    flex: 1;
-  }
-  .name {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 62px;
-    color: #999999;
-    width: 100px;
+  .pagination {
     text-align: center;
+    padding-bottom: 40px;
+    margin-top: 40px;
   }
-  .booke_type {
-    display: inline-block;
-    //   width: 50px;
-    cursor: pointer;
-    text-align: center;
-    line-height: 48px;
-    font-size: 16px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    padding: 0 11px;
+
+  @media screen and (max-width: 600px) {
+    .pagination {
+      text-align: center;
+      padding-bottom: 40px;
+      margin-top: 8px;
+    }
+    /deep/ .ant-pagination-total-text {
+      display: none;
+    }
+    .main-icon {
+      width: 100% !important;
+      background: white;
+      padding-top: 60px;
+      overflow: hidden;
+
+      .no-data {
+        text-align: center;
+        padding-top: 400px;
+        img {
+          margin: 0 auto;
+        }
+        div {
+          color: #cccccc;
+          margin-top: 10px;
+        }
+      }
+    }
+    .pkg-main {
+      width: 100% !important;
+      background: white;
+      padding-top: 9.25rem;
+      // margin: 0 !important;
+      .no-data {
+        text-align: center;
+        padding-top: 80px;
+        padding-bottom: 80px;
+        img {
+          padding: 0px auto;
+        }
+        div {
+          color: #cccccc;
+          margin-top: 10px;
+        }
+      }
+      .content {
+        width: 100% !important;
+        margin: 0 auto;
+        padding-top: 0px;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+        .item {
+          width: 100%;
+          flex: 1;
+          height: 200px;
+          background: none;
+          padding: 0 20px;
+          margin-bottom: 20px;
+          cursor: pointer;
+          .item_bj {
+            background: #ffffff;
+            border: 1px solid #eeeeee;
+            width: 100%;
+            height: 200px;
+            display: flex;
+            justify-content: flex-start;
+            .item_img {
+              margin-top: 20px;
+              margin-left: 10px;
+              width: 114px;
+              height: 160px;
+              .item_cover {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .item_ctx {
+              margin-top: 19px;
+              margin-left: 10px;
+              width: auto;
+              flex: 1;
+              height: 200px;
+              .item_ctx_title {
+                font-size: 16px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                min-height: 50px;
+                color: #333333;
+                white-space: normal;
+                text-overflow: -o-ellipsis-lastline;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                -webkit-box-orient: vertical;
+              }
+              .item_ctx_author {
+                margin-top: 4px;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #666666;
+                white-space: normal;
+                text-overflow: -o-ellipsis-lastline;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                line-clamp: 1;
+                -webkit-box-orient: vertical;
+              }
+              .item_ctx_text {
+                margin-top: 8px;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #666666;
+                white-space: normal;
+                text-overflow: -o-ellipsis-lastline;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                line-clamp: 3;
+                -webkit-box-orient: vertical;
+              }
+              .item_ctx_read {
+                margin-top: 10px;
+                font-size: 14px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #333333;
+              }
+              .msly {
+                display: inline-block;
+                margin-left: 5px;
+                color: #666666;
+              }
+            }
+          }
+          .item_bj:hover {
+            background: #edf4fe;
+            .item_ctx_read {
+              color: #1677ff;
+            }
+            .msly {
+              color: #1677ff;
+              display: inline-block;
+              margin-left: 5px;
+            }
+          }
+        }
+      }
+    }
   }
-  .booke_type_color {
-    font-size: 16px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #1677ff;
+
+  .minBox {
+    display: flex;
+    justify-content: center;
+    width: 1200px;
+    margin: 0 auto;
+    .headBox {
+      width: 250px;
+      margin-right: 10px;
+      .name {
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        margin-bottom: 15px;
+      }
+      .navBox {
+        background: #ffffff;
+        border-radius: 4px;
+        padding: 10px 20px;
+        .onwLevel {
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333333;
+          margin: 16px 0;
+          cursor: pointer;
+        }
+        .twoLevel {
+          margin-top: 10px;
+          span {
+            margin-right: 8px;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            cursor: pointer;
+            &:hover {
+              color: #1677ff;
+            }
+          }
+        }
+      }
+    }
+    .rightBox {
+      flex: 1;
+      .threeLevel {
+        background: #fff;
+        border-radius: 4px;
+        padding: 16px 20px;
+        margin: 16px 0;
+        span {
+          font-size: 12px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 20px;
+          margin-right: 8px;
+          cursor: pointer;
+          &:hover {
+            color: #1677ff;
+          }
+        }
+      }
+    }
   }
-}
 </style>