预览页面兼容pad

src/views/courseView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container GCLS-BOOK-Container" v-if="showContent">
-    <template v-if="!isPhone">
+    <template v-if="!isPhone && !isPad">
       <div v-if="!type" class="header-box">
         <Header />
         <Nav nav-value="书籍预览" />
@@ -19,7 +19,11 @@
     <div
       class="content"
       id="content-scroll"
-      :class="[type ? 'content-top' : '', isPhone ? 'content-phone' : '']"
+      :class="[
+        type ? 'content-top' : '',
+        isPhone ? 'content-phone' : '',
+        isPad ? 'content-pad' : '',
+      ]"
     >
       <div
         id="content-tree"
@@ -27,21 +31,16 @@
           fullTree ? 'content-tree-full' : 'content-tree',
           isPhone ? 'content-tree-phone' : '',
           showMenu ? '' : 'content-tree-unfold',
+          isPad ? 'content-tree-pad' : '',
         ]"
         :style="{ background: isPhone && showMenu ? themeColorPhone : '' }"
       >
-        <template v-if="isPhone">
-          <div
-            class="toggle-box"
-            :class="[showMenu ? 'toggle-box-fold' : '']"
-            @click="toggleMenu"
-          >
+        <template v-if="isPhone || isPad">
+          <div class="toggle-box" :class="[showMenu ? 'toggle-box-fold' : '']">
             <i
+              @click="toggleMenu"
               :class="[showMenu ? 'el-icon-s-fold' : 'el-icon-s-unfold']"
-              v-if="showMenu"
-              style="padding: 10px"
             ></i>
-            <img src="../assets/menu-phone.png" v-else style="width: 20px" />
           </div>
         </template>
         <TreeView
@@ -50,19 +49,27 @@
           :change-id="changeId"
           :changeTreeData="changeTreeData"
           :currentTreeID="chapterId"
-          v-show="(isPhone && showMenu) || !isPhone"
+          v-show="((isPhone || isPad) && showMenu) || (!isPhone && !isPad)"
         />
         <div class="moveBtn-nnpe" v-move></div>
       </div>
-      <i class="el-icon-close close-phone" v-if="isPhone" @click="back"></i>
+      <i
+        class="el-icon-close close-phone"
+        v-if="isPhone || isPad"
+        @click="back"
+      ></i>
       <div
         id="data-screen"
         :class="[
           'inner',
           fullscreen ? 'inner-full' : '',
           isPhone ? 'inner-phone' : '',
+          isPad ? 'inner-pad' : '',
         ]"
-        :style="{ background: isPhone ? themeColorPhone : '' }"
+        :style="{
+          background: isPhone ? themeColorPhone : '',
+          marginLeft: isPad ? '0' : '',
+        }"
         v-loading="loading"
       >
         <el-image
@@ -176,7 +183,7 @@
     <!-- <Preview :context="context" :queIndex="queIndex" /> -->
 
     <a
-      v-if="chapterId && treeFlag && !isPhone"
+      v-if="chapterId && treeFlag && !isPhone && !isPad"
       class="screen-full"
       @click="fullScreen()"
     />
@@ -302,6 +309,7 @@ export default {
       isAnswerItemShow: false,
       pictureUrl: "",
       isPhone: false, // 是否是移动端打开
+      isPad: false, //是否是平板打开
       showMenu: false, //是否展开菜单
       themeColorPhone: "", // 移动端护眼色
     };
@@ -309,6 +317,26 @@ export default {
   created() {
     const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
     this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
+    this.isPad =
+      /(?:iPad)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) ||
+      /(?:PlayBook)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) ||
+      (/(?:Android)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) &&
+        !/(?:Mobile)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        )) ||
+      (/(?:Firefox)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) &&
+        /(?:Tablet)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ));
+
     this.showMenu = !(
       regExp.test(navigator.userAgent) && window.innerWidth < 860
     );
@@ -458,7 +486,7 @@ export default {
       if (document.getElementById("content-scroll")) {
         document.getElementById("content-scroll").scrollTop = 0;
       }
-      if (_this.isPhone) {
+      if (_this.isPhone || _this.isPad) {
         _this.showMenu = false;
         document.getElementsByClassName("content-tree-phone")[0].scrollTop = 0;
       }
@@ -586,7 +614,8 @@ export default {
         top: 100px !important;
       }
     }
-    &-phone {
+    &-phone,
+    &-pad {
       padding-top: 0;
     }
     &-tree {
@@ -599,7 +628,8 @@ export default {
       position: fixed;
       left: 0;
       z-index: 2;
-      &-phone {
+      &-phone,
+      &-pad {
         width: 50%;
         height: 100%;
         padding-top: 50px;
@@ -652,7 +682,8 @@ export default {
       &.inner-full {
         margin-left: 0;
       }
-      &-phone {
+      &-phone,
+      &-pad {
         margin-left: 0;
         padding: 0;
         width: 100%;