改版

src/layout/Header.vue

@@ -54,146 +54,151 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-import { SessionStorageService, LocalStorageService } from '@/utils/storage';
-import { ref, onMounted, computed, watch } from 'vue';
-import userImg from '@/assets/images/backgroundicon.png';
-import logo_public from '@/assets/images/logo_public.png';
-import avatar from '@/assets/images/avatar.png'
-import orderImg from '@/assets/images/order.svg';
-import { removeToken } from '@/utils/cookie';
-import store from '@/store';
+  import { useRouter } from 'vue-router';
+  import { SessionStorageService, LocalStorageService } from '@/utils/storage';
+  import { ref, onMounted, computed, watch } from 'vue';
+  import userImg from '@/assets/images/backgroundicon.png';
+  import logo_public from '@/assets/images/logo_public.png';
+  import avatar from '@/assets/images/avatar.png';
+  import orderImg from '@/assets/images/order.svg';
+  import { removeToken } from '@/utils/cookie';
+  import store from '@/store';
 
-const router = useRouter();
-console.log('mounted');
+  const router = useRouter();
+  console.log('mounted');
 
-const isLog = import.meta.env.VITE_APP_PATH;
-const getPng = () => {
-  console.log(1);
-  if (isLog == 'production' || isLog == 'development') {
-    return true;
-  } else {
-    console.log(2);
-    return false;
-  }
-};
-
-function goToPage(path) {
-  router.replace({
-    path: path,
-  });
-}
-goToPage('/bookList');
-const quite = () => {
-  removeToken();
-  LocalStorageService.clearAll();
-  window.location.href = 'http://www.sqjyy.cn/cas/logout?service=http://www.sqjyy.cn';
-  //store.dispatch('user/LogOut');
-  //window.location.href = import.meta.env.VITE_APP_BOOK_STORE_URL as string;
-};
-const toAccount = () => {
-  window.location.href = import.meta.env.VITE_APP_BOOK_STORE_URL as string;
-};
-console.log(store.state.user.userInfo, 'store.state.user.userInfo');
-const userinfo = ref(LocalStorageService.get('userInfo'));
+  const isLog = import.meta.env.VITE_APP_PATH;
+  const getPng = () => {
+    console.log(1);
+    if (isLog == 'production' || isLog == 'development') {
+      return true;
+    } else {
+      console.log(2);
+      return false;
+    }
+  };
 
-watch(
-  () => store.state.user.userInfo,
-  (val, old) => {
-    userinfo.value = val;
+  function goToPage(path) {
+    router.replace({
+      path: path,
+    });
   }
-);
+  goToPage('/bookList');
+  const quite = () => {
+    removeToken();
+    LocalStorageService.clearAll();
+    window.location.href = 'http://www.sqjyy.cn/cas/logout?service=http://www.sqjyy.cn';
+    //store.dispatch('user/LogOut');
+    //window.location.href = import.meta.env.VITE_APP_BOOK_STORE_URL as string;
+  };
+  const toAccount = () => {
+    window.location.href = import.meta.env.VITE_APP_BOOK_STORE_URL as string;
+  };
+  console.log(store.state.user.userInfo, 'store.state.user.userInfo');
+  const userinfo = ref(LocalStorageService.get('userInfo'));
+
+  watch(
+    () => store.state.user.userInfo,
+    (val, old) => {
+      userinfo.value = val;
+    }
+  );
 </script>
 
 <style lang="less" scoped>
-.main {
-  width: 100%;
-  position: fixed;
-  background: white;
-  z-index: 2;
-  top: 0;
-  .user-info {
-    width: 1160px;
-    min-width: 1160px;
-    max-width: 1160px;
-    margin: 0 auto;
-    display: flex;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 80px;
-    .logo,
-    img {
-      width: auto;
-      height: 48px;
-      cursor: pointer;
-    }
-    .info {
+  .main {
+    width: 100%;
+    position: fixed;
+    background: white;
+    z-index: 2;
+    top: 0;
+    .user-info {
+      width: 1160px;
+      min-width: 1160px;
+      max-width: 1160px;
+      margin: 0 auto;
+      display: flex;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 80px;
+      .logo,
       img {
-        width: 24px;
-        height: 24px;
-        /*margin: 0 10px;*/
-        margin-right: 4px;
+        width: auto;
+        height: 48px;
+        cursor: pointer;
+      }
+      .info {
+        img {
+          width: 24px;
+          height: 24px;
+          /*margin: 0 10px;*/
+          margin-right: 4px;
+        }
+        .ant-dropdown-link {
+          color: #333333;
+          font-size: 14px;
+        }
       }
-      .ant-dropdown-link {
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      span {
+        font-size: 24px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
         color: #333333;
-        font-size: 14px;
+      }
+      // .imgicon {
+      //   height: 28px;
+      //   width: 285px;
+      // }
+      a {
+        margin-left: 64px;
+        color: @primary-color;
       }
     }
-  }
-  .logo {
-    display: flex;
-    align-items: center;
-    span {
-      font-size: 24px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
+
+    .user_info_title {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
       color: #333333;
     }
-    // .imgicon {
-    //   height: 28px;
-    //   width: 285px;
-    // }
-    a {
-      margin-left: 64px;
-      color: @primary-color;
-    }
-  }
-
-  .user_info_title {
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #333333;
-  }
-}
-@media screen and (max-width: 1024px) {
-  .main {
-    width: 100% !important;
   }
-  .user-info {
-    padding: 0 20px;
-    width: 100% !important;
-    min-width: 100% !important;
-    max-width: 100% !important;
+  @media screen and (max-width: 1024px) {
+    .main {
+      width: 100% !important;
+    }
+    .user-info {
+      padding: 0 20px;
+      width: 100% !important;
+      min-width: 100% !important;
+      max-width: 100% !important;
+    }
   }
-}
-@media screen and (max-width: 600px) {
-  .user-info {
-    .imgicon {
-      height: 10px !important;
-      width: 100px !important;
+  @media screen and (max-width: 600px) {
+    .user-info {
+      .imgicon {
+        height: 10px !important;
+        width: 100px !important;
+      }
+    }
+    .logo {
+      span {
+        font-size: 16px !important;
+      }
     }
   }
-}
-/*@media screen and (max-width: 600px) {*/
-/*  .main{*/
-/*    width: 100% !important;*/
-/*  }*/
-/*   .user-info{*/
-/*     width: 100% !important;*/
-/*     min-width: 100% !important;*/
-/*     max-width: 100% !important;*/
-/*   }*/
-/*}*/
+  /*@media screen and (max-width: 600px) {*/
+  /*  .main{*/
+  /*    width: 100% !important;*/
+  /*  }*/
+  /*   .user-info{*/
+  /*     width: 100% !important;*/
+  /*     min-width: 100% !important;*/
+  /*     max-width: 100% !important;*/
+  /*   }*/
+  /*}*/
 </style>

src/views/packageManage/bookList.vue

@@ -257,6 +257,9 @@
         background: white;
         border-bottom: 1px solid #ffeeeeee;
       }
+      .headBox {
+        display: none;
+      }
       .h5booke-header {
         width: 100% !important;
         position: fixed;

src/views/packageManage/index.vue

@@ -23,7 +23,7 @@
         </div>
       </div>
       <div class="rightBox" :class="refTYpe == 1 ? '' : 'rBox'">
-        <div v-if="refTYpe == 1">
+        <div v-if="refTYpe == 1" class="right-head">
           <div class="classification"
             >中图分类法：<span v-for="item in anchorList" :key="item.id"
               >>>> <span @click="selectClass(item)" class="anchor">{{ item.name }} &nbsp;</span>
@@ -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">
@@ -428,7 +428,7 @@
               font-size: 16px;
               font-family: PingFangSC-Medium, PingFang SC;
               font-weight: 500;
-              min-height: 50px;
+              min-height: 40px;
               color: #333333;
               white-space: normal;
               text-overflow: -o-ellipsis-lastline;
@@ -826,4 +826,22 @@
   .rBox {
     width: 100% !important;
   }
+
+  @media screen and (max-width: 600px) {
+    .minBox {
+      width: 100%;
+    }
+    .headBox {
+      display: none;
+    }
+    .right-head {
+      display: none;
+    }
+    .switchBox {
+      display: none;
+    }
+    .item_ctx {
+      height: 180px !important;
+    }
+  }
 </style>