mirror of
https://github.com/gedoor/legado.git
synced 2024-09-01 09:34:25 +08:00
feat: 1.书架页面增加暗黑模式,在章节阅读页面设置暗黑主题即可开启;2.支持Retina高分屏下无法正确的由左右分屏变化为上下分屏;3.上下分屏模式下,展示最近阅读和基本设定栏。
This commit is contained in:
parent
1925fad79a
commit
0468b64776
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="index-wrapper">
|
<div :class="{ 'index-wrapper': true, night: isNight, day: !isNight }">
|
||||||
<div class="navigation-wrapper">
|
<div class="navigation-wrapper">
|
||||||
<div class="navigation-title-wrapper">
|
<div class="navigation-title-wrapper">
|
||||||
<div class="navigation-title">阅读</div>
|
<div class="navigation-title">阅读</div>
|
||||||
@ -85,6 +85,11 @@ import API from "@api";
|
|||||||
const store = useBookStore();
|
const store = useBookStore();
|
||||||
const { connectStatus, connectType, newConnect, shelf } = storeToRefs(store);
|
const { connectStatus, connectType, newConnect, shelf } = storeToRefs(store);
|
||||||
|
|
||||||
|
const theme = computed(() => {
|
||||||
|
return store.config.theme;
|
||||||
|
});
|
||||||
|
const isNight = computed(() => theme.value == 6);
|
||||||
|
|
||||||
const readingRecent = ref({
|
const readingRecent = ref({
|
||||||
name: "尚无阅读记录",
|
name: "尚无阅读记录",
|
||||||
author: "",
|
author: "",
|
||||||
@ -261,6 +266,11 @@ const fetchBookShelfData = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottom-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.recent-wrapper {
|
.recent-wrapper {
|
||||||
margin-top: 36px;
|
margin-top: 36px;
|
||||||
|
|
||||||
@ -322,10 +332,15 @@ const fetchBookShelfData = () => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
.index-wrapper {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -339,17 +354,50 @@ const fetchBookShelfData = () => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-end;
|
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 {
|
.bottom-icons {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.shelf-wrapper {
|
.shelf-wrapper {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
flex-grow: 1;
|
||||||
:deep(.el-loading-spinner) {
|
:deep(.el-loading-spinner) {
|
||||||
display: none;
|
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>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user