From 0468b6477612d4565229de1f57e604e2dbdcbd7a Mon Sep 17 00:00:00 2001
From: Sunrishe <gsunrishe@gmail.com>
Date: Thu, 1 Jun 2023 16:17:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=201.=E4=B9=A6=E6=9E=B6=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=9C=A8=E7=AB=A0=E8=8A=82=E9=98=85=E8=AF=BB=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98=E5=8D=B3?=
 =?UTF-8?q?=E5=8F=AF=E5=BC=80=E5=90=AF=EF=BC=9B2.=E6=94=AF=E6=8C=81Retina?=
 =?UTF-8?q?=E9=AB=98=E5=88=86=E5=B1=8F=E4=B8=8B=E6=97=A0=E6=B3=95=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE=E7=9A=84=E7=94=B1=E5=B7=A6=E5=8F=B3=E5=88=86=E5=B1=8F?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96=E4=B8=BA=E4=B8=8A=E4=B8=8B=E5=88=86=E5=B1=8F?=
 =?UTF-8?q?=EF=BC=9B3.=E4=B8=8A=E4=B8=8B=E5=88=86=E5=B1=8F=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8B=EF=BC=8C=E5=B1=95=E7=A4=BA=E6=9C=80=E8=BF=91?=
 =?UTF-8?q?=E9=98=85=E8=AF=BB=E5=92=8C=E5=9F=BA=E6=9C=AC=E8=AE=BE=E5=AE=9A?=
 =?UTF-8?q?=E6=A0=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/web/src/views/BookShelf.vue | 54 +++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/modules/web/src/views/BookShelf.vue b/modules/web/src/views/BookShelf.vue
index 95bc4b620..2dbcde722 100644
--- a/modules/web/src/views/BookShelf.vue
+++ b/modules/web/src/views/BookShelf.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="index-wrapper">
+  <div :class="{ 'index-wrapper': true, night: isNight, day: !isNight }">
     <div class="navigation-wrapper">
       <div class="navigation-title-wrapper">
         <div class="navigation-title">阅读</div>
@@ -85,6 +85,11 @@ import API from "@api";
 const store = useBookStore();
 const { connectStatus, connectType, newConnect, shelf } = storeToRefs(store);
 
+const theme = computed(() => {
+  return store.config.theme;
+});
+const isNight = computed(() => theme.value == 6);
+
 const readingRecent = ref({
   name: "尚无阅读记录",
   author: "",
@@ -261,6 +266,11 @@ const fetchBookShelfData = () => {
       }
     }
 
+    .bottom-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
     .recent-wrapper {
       margin-top: 36px;
 
@@ -322,10 +332,15 @@ const fetchBookShelfData = () => {
     width: 100%;
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
+    overflow: hidden;
   }
 }
 
-@media screen and (max-width: 428px) {
+@media screen and (max-width: 428px),
+  screen and (max-width: 750px) and (min-resolution: 2dppx),
+  screen and (max-width: 750px) and (-webkit-min-device-pixel-ratio: 2),
+  screen and (max-width: 750px) and (min--moz-device-pixel-ratio: 2) {
   .index-wrapper {
     overflow-x: hidden;
     flex-direction: column;
@@ -339,17 +354,50 @@ const fetchBookShelfData = () => {
         justify-content: space-between;
         align-items: flex-end;
       }
-      .bottom-wrapper,
+      .bottom-wrapper {
+        flex-direction: row;
+        > * {
+          flex-grow: 1;
+          margin-top: 18px;
+          .reading-recent,
+          .setting-item {
+            margin-bottom: 0px;
+          }
+        }
+      }
       .bottom-icons {
         display: none;
       }
     }
     .shelf-wrapper {
       padding: 0;
+      flex-grow: 1;
       :deep(.el-loading-spinner) {
         display: none;
       }
     }
   }
 }
+
+.night {
+  :deep(.navigation-wrapper) {
+    background-color: #454545;
+    .navigation-title {
+      color: #aeaeae;
+    }
+    .search-wrapper {
+      .search-input {
+        .el-input__wrapper {
+          background-color: #454545;
+        }
+        .el-input__inner {
+          color: #b1b1b1;
+        }
+      }
+    }
+  }
+  :deep(.shelf-wrapper) {
+    background-color: #161819;
+  }
+}
 </style>