web loading遮罩透明

modules/web/.env.development

@@ -1 +1 @@
-VITE_API=http://192.168.10.5:1122
+VITE_API=http://192.168.10.11:1122

modules/web/package.json

@@ -13,22 +13,22 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@vueuse/shared": "^9.13.0",
     "axios": "^1.3.5",
-    "element-plus": "^2.3.1",
-    "pinia": "^2.0.33",
+    "element-plus": "^2.3.3",
+    "hotkeys-js": "^3.10.2",
+    "pinia": "^2.0.34",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6",
-    "hotkeys-js": "^3.10.1"
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
-    "eslint": "^8.37.0",
+    "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.10.0",
     "prettier": "^2.8.7",
-    "sass": "^1.60.0",
+    "sass": "^1.61.0",
     "unplugin-auto-import": "^0.15.2",
-    "unplugin-icons": "^0.16.0",
+    "unplugin-icons": "^0.16.1",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.2.1"
   }

modules/web/src/views/BookChapter.vue

@@ -82,10 +82,10 @@
       <div class="content">
         <div class="top-bar" ref="top"></div>
         <div v-for="data in chapterData" :key="data.index" ref="chapter">
-          <div class="title" :index="data.index">
+          <div class="title" :index="data.index" v-if="show">
             {{ data.title }}
           </div>
-          <chapter-content :carray="data.content" />
+          <chapter-content :carray="data.content" v-if="show"/>
         </div>
         <div class="loading" ref="loading"></div>
         <div class="bottom-bar" ref="bottom"></div>
@@ -102,13 +102,14 @@ import loadingSvg from "@element-plus/icons-svg/loading.svg?raw";
 
 const showLoading = ref(false);
 const loadingSerive = ref(null);
+const content = ref();
+
 watch(showLoading, (loading) => {
-  if (!loading) return loadingSerive.value?.close();
+ if (!loading) return loadingSerive.value?.close();
   loadingSerive.value = ElLoading.service({
     target: content.value,
     spinner: loadingSvg,
     text: "正在获取信息",
-    backgroud: "rgb(0,0,0,0)",
     lock: true,
   });
 });
@@ -121,7 +122,6 @@ try {
 } catch {
   localStorage.removeItem("config");
 }
-const content = ref();
 const loading = ref();
 
 const noPoint = ref(true);
@@ -141,10 +141,10 @@ const {
   popCataVisible,
   readSettingsVisible,
   config,
-  showContent: show,
-  miniInterface,
+  miniInterface
 } = storeToRefs(store);
 
+const show = computed(()=>store.showContent)
 const theme = computed(() => config.value.theme);
 
 const bodyColor = computed(() => settings.themes[config.value.theme].body);
@@ -212,8 +212,7 @@ watchEffect(() => {
 });
 
 watchEffect(() => {
-  document.title = catalog.value[chapterIndex.value]?.title;
-  console.log(chapterIndex.value, store.readingBook.index);
+  document.title = catalog.value[chapterIndex.value]?.title || document.title;
   store.saveBookProcess();
 });
 const isNight = ref(false);
@@ -652,15 +651,6 @@ onUnmounted(() => {
     }
   }
 
-  .chapter-bar {
-    .el-breadcrumb {
-      .item {
-        font-size: 14px;
-        color: #606266;
-      }
-    }
-  }
-
   .chapter {
     font-family: "Microsoft YaHei", PingFangSC-Regular, HelveticaNeue-Light,
       "Helvetica Neue Light", sans-serif;
@@ -670,6 +660,9 @@ onUnmounted(() => {
     width: 670px;
     margin: 0 auto;
 
+    :deep(.el-loading-mask) {
+      background-color: rgba(0, 0, 0, 0);
+    }
     :deep(.el-loading-spinner) {
       font-size: 36px;
       color: #b5b5b5;

modules/web/src/views/BookShelf.vue

@@ -101,7 +101,6 @@ watch(showLoading, (loading) => {
     target: shelfWrapper.value,
     spinner: loadingSvg,
     text: "正在获取书籍信息",
-    backgroud: "rgb(247,247,247)",
     lock: true,
   });
 });
@@ -326,7 +325,9 @@ const fetchBookShelfData = () => {
     width: 100%;
     display: flex;
     flex-direction: column;
-
+    :deep(.el-loading-mask) {
+      background-color: rgba(0, 0, 0, 0);
+    }
     :deep(.el-loading-spinner) {
       font-size: 36px;
       color: #b5b5b5;