手机端不显示导航

src/views/courseView.vue

@@ -1,23 +1,25 @@
 <template>
   <div class="container GCLS-BOOK-Container" v-if="showContent">
-    <div v-if="!type" class="header-box">
-      <Header />
-      <Nav nav-value="书籍预览" />
-    </div>
-    <div v-else class="header-box">
-      <div class="bookname">
-        <i
-          style="cursor: pointer; margin-right: 5px"
-          class="el-icon-arrow-left"
-          @click="back"
-        ></i>
-        {{ name }}
+    <template v-if="!isPhone">
+      <div v-if="!type" class="header-box">
+        <Header />
+        <Nav nav-value="书籍预览" />
       </div>
-    </div>
+      <div v-else class="header-box">
+        <div class="bookname">
+          <i
+            style="cursor: pointer; margin-right: 5px"
+            class="el-icon-arrow-left"
+            @click="back"
+          ></i>
+          {{ name }}
+        </div>
+      </div>
+    </template>
     <div
       class="content"
       id="content-scroll"
-      :class="[type ? 'content-top' : '']"
+      :class="[type ? 'content-top' : '', isPhone ? 'content-phone' : '']"
     >
       <div
         id="content-tree"
@@ -260,10 +262,13 @@ export default {
       ],
       isAnswerItemShow: false,
       pictureUrl: "",
+      isPhone: false, // 是否是移动端打开
     };
   },
   created() {
-    console.log("2024-04-13");
+    console.log("2024-04-23");
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
     const _this = this;
     if (
       _this.$route.query.encryption &&
@@ -502,6 +507,9 @@ export default {
         top: 100px !important;
       }
     }
+    &-phone {
+      padding-top: 0;
+    }
     &-tree {
       width: 340px;
       height: 85vh;