mirror of
https://github.com/gedoor/legado.git
synced 2024-07-19 01:17:25 +08:00
web: 添加间距设置
This commit is contained in:
parent
c6b3558d51
commit
07f34c1b61
@ -87,6 +87,45 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="letter-spacing">
|
||||||
|
<i>字距</i>
|
||||||
|
<div class="resize">
|
||||||
|
<span class="less" @click="lessLetterSpacing"
|
||||||
|
><em class="iconfont"></em></span
|
||||||
|
><b></b> <span class="lang">{{ spacing.letter.toFixed(2) }}</span
|
||||||
|
><b></b>
|
||||||
|
<span class="more" @click="moreLetterSpacing"
|
||||||
|
><em class="iconfont"></em></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="line-spacing">
|
||||||
|
<i>行距</i>
|
||||||
|
<div class="resize">
|
||||||
|
<span class="less" @click="lessLineSpacing"
|
||||||
|
><em class="iconfont"></em></span
|
||||||
|
><b></b> <span class="lang">{{ spacing.line.toFixed(1) }}</span
|
||||||
|
><b></b>
|
||||||
|
<span class="more" @click="moreLineSpacing"
|
||||||
|
><em class="iconfont"></em></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="paragraph-spacing">
|
||||||
|
<i>段距</i>
|
||||||
|
<div class="resize">
|
||||||
|
<div class="resize">
|
||||||
|
<span class="less" @click="lessParagraphSpacing"
|
||||||
|
><em class="iconfont"></em></span
|
||||||
|
><b></b>
|
||||||
|
<span class="lang">{{ spacing.paragraph.toFixed(1) }}</span
|
||||||
|
><b></b>
|
||||||
|
<span class="more" @click="moreParagraphSpacing"
|
||||||
|
><em class="iconfont"></em></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
<li class="read-width" v-if="!store.miniInterface">
|
<li class="read-width" v-if="!store.miniInterface">
|
||||||
<i>页面宽度</i>
|
<i>页面宽度</i>
|
||||||
<div class="resize">
|
<div class="resize">
|
||||||
@ -176,6 +215,7 @@ onMounted(() => {
|
|||||||
const config = computed(() => {
|
const config = computed(() => {
|
||||||
return store.config;
|
return store.config;
|
||||||
});
|
});
|
||||||
|
|
||||||
const popupTheme = computed(() => {
|
const popupTheme = computed(() => {
|
||||||
return {
|
return {
|
||||||
background: settings.themes[config.value.theme].popup,
|
background: settings.themes[config.value.theme].popup,
|
||||||
@ -187,15 +227,6 @@ const selectedTheme = computed(() => {
|
|||||||
const selectedFont = computed(() => {
|
const selectedFont = computed(() => {
|
||||||
return store.config.font;
|
return store.config.font;
|
||||||
});
|
});
|
||||||
const fontSize = computed(() => {
|
|
||||||
return store.config.fontSize;
|
|
||||||
});
|
|
||||||
const readWidth = computed(() => {
|
|
||||||
return store.config.readWidth;
|
|
||||||
});
|
|
||||||
const infiniteLoading = computed(() => {
|
|
||||||
return store.config.infiniteLoading;
|
|
||||||
});
|
|
||||||
|
|
||||||
const setTheme = (theme) => {
|
const setTheme = (theme) => {
|
||||||
if (theme == 6) {
|
if (theme == 6) {
|
||||||
@ -219,6 +250,10 @@ const setCustomFont = () => {
|
|||||||
config.value.customFontName = customFontName.value;
|
config.value.customFontName = customFontName.value;
|
||||||
saveConfig(config.value);
|
saveConfig(config.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const fontSize = computed(() => {
|
||||||
|
return store.config.fontSize;
|
||||||
|
});
|
||||||
const moreFontSize = () => {
|
const moreFontSize = () => {
|
||||||
if (config.value.fontSize < 48) config.value.fontSize += 2;
|
if (config.value.fontSize < 48) config.value.fontSize += 2;
|
||||||
saveConfig(config.value);
|
saveConfig(config.value);
|
||||||
@ -227,6 +262,38 @@ const lessFontSize = () => {
|
|||||||
if (config.value.fontSize > 12) config.value.fontSize -= 2;
|
if (config.value.fontSize > 12) config.value.fontSize -= 2;
|
||||||
saveConfig(config.value);
|
saveConfig(config.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const spacing = computed(() => {
|
||||||
|
return store.config.spacing;
|
||||||
|
});
|
||||||
|
const lessLetterSpacing = () => {
|
||||||
|
store.config.spacing.letter -= 0.01;
|
||||||
|
saveConfig(config.value);
|
||||||
|
};
|
||||||
|
const moreLetterSpacing = () => {
|
||||||
|
store.config.spacing.letter += 0.01;
|
||||||
|
saveConfig(config.value);
|
||||||
|
};
|
||||||
|
const lessLineSpacing = () => {
|
||||||
|
store.config.spacing.line -= 0.1;
|
||||||
|
saveConfig(config.value);
|
||||||
|
};
|
||||||
|
const moreLineSpacing = () => {
|
||||||
|
store.config.spacing.line += 0.1;
|
||||||
|
saveConfig(config.value);
|
||||||
|
};
|
||||||
|
const lessParagraphSpacing = () => {
|
||||||
|
store.config.spacing.paragraph -= 0.1;
|
||||||
|
saveConfig(config.value);
|
||||||
|
};
|
||||||
|
const moreParagraphSpacing = () => {
|
||||||
|
store.config.spacing.paragraph += 0.1;
|
||||||
|
saveConfig(config.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const readWidth = computed(() => {
|
||||||
|
return store.config.readWidth;
|
||||||
|
});
|
||||||
const moreReadWidth = () => {
|
const moreReadWidth = () => {
|
||||||
/*if (config.value.readWidth < 960)*/
|
/*if (config.value.readWidth < 960)*/
|
||||||
config.value.readWidth += 160;
|
config.value.readWidth += 160;
|
||||||
@ -236,6 +303,9 @@ const lessReadWidth = () => {
|
|||||||
if (config.value.readWidth > 640) config.value.readWidth -= 160;
|
if (config.value.readWidth > 640) config.value.readWidth -= 160;
|
||||||
saveConfig(config.value);
|
saveConfig(config.value);
|
||||||
};
|
};
|
||||||
|
const infiniteLoading = computed(() => {
|
||||||
|
return store.config.infiniteLoading;
|
||||||
|
});
|
||||||
const setInfiniteLoading = (loading) => {
|
const setInfiniteLoading = (loading) => {
|
||||||
config.value.infiniteLoading = loading;
|
config.value.infiniteLoading = loading;
|
||||||
saveConfig(config.value);
|
saveConfig(config.value);
|
||||||
@ -279,6 +349,9 @@ const uploadConfig = (config) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.setting-list {
|
.setting-list {
|
||||||
|
max-height: calc(70vh - 50px);
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none outside none;
|
list-style: none outside none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -356,7 +429,10 @@ const uploadConfig = (config) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.font-size,
|
.font-size,
|
||||||
.read-width {
|
.read-width,
|
||||||
|
letter-spacing,
|
||||||
|
line-spacing,
|
||||||
|
paragraph-spacing {
|
||||||
margin-top: 28px;
|
margin-top: 28px;
|
||||||
|
|
||||||
.resize {
|
.resize {
|
||||||
|
Loading…
Reference in New Issue
Block a user