feat: 新增底栏展示

This commit is contained in:
imsyy 2023-08-21 15:23:43 +08:00
parent dc17328a8f
commit e717984be6
8 changed files with 159 additions and 18 deletions

1
.env
View File

@ -5,6 +5,7 @@ VITE_SITE_KEYWORDS = "Snavigation,导航,网站导航,主页,简约导航,起始
VITE_SITE_DES = "一个简约的起始页,支持自定义搜索引擎,自定义快捷方式,自定义壁纸以及数据备份" VITE_SITE_DES = "一个简约的起始页,支持自定义搜索引擎,自定义快捷方式,自定义壁纸以及数据备份"
VITE_SITE_LOGO = "/favicon.png" VITE_SITE_LOGO = "/favicon.png"
VITE_SITE_APPLE_LOGO = "/logo/logo.png" VITE_SITE_APPLE_LOGO = "/logo/logo.png"
VITE_SITE_COPYRIGHTLINK = "https://github.com/imsyy/Snavigation"
# 进入欢迎词 # 进入欢迎词
VITE_WELCOME_TEXT = "欢迎访问本站" VITE_WELCOME_TEXT = "欢迎访问本站"

View File

@ -157,9 +157,12 @@ onMounted(() => {
&.main-set { &.main-set {
.main-box { .main-box {
opacity: 1; opacity: 1;
margin-top: 220px; margin-top: 20vh;
transform: scale(1); transform: scale(1);
visibility: visible; visibility: visible;
@media (max-width: 478px) {
margin-top: 22vh;
}
} }
.search-input { .search-input {
:deep(.all) { :deep(.all) {

View File

@ -28,7 +28,7 @@ const status = statusStore();
.main-box { .main-box {
position: absolute; position: absolute;
width: 80%; width: 80%;
height: 460px; height: 64vh;
max-width: 1200px; max-width: 1200px;
background-color: var(--main-background-light-color); background-color: var(--main-background-light-color);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
@ -40,7 +40,8 @@ const status = statusStore();
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
:deep(.scrollbar) { :deep(.scrollbar) {
max-height: calc(460px - 84px); max-height: calc(64vh - 84px);
transition: max-height 0.3s;
} }
:deep(.set-item) { :deep(.set-item) {
width: 100%; width: 100%;
@ -97,14 +98,14 @@ const status = statusStore();
height: 100%; height: 100%;
:deep(.n-tab-pane) { :deep(.n-tab-pane) {
.scrollbar { .scrollbar {
max-height: calc(460px - 84px); max-height: calc(64vh - 84px);
} }
.not-shortcut { .not-shortcut {
min-height: calc(460px - 84px); min-height: calc(64vh - 84px);
} }
&.no-padding { &.no-padding {
.scrollbar { .scrollbar {
max-height: calc(460px - 44px); max-height: calc(64vh - 44px);
} }
} }
} }
@ -116,5 +117,8 @@ const status = statusStore();
max-height: calc(80vh - 84px); max-height: calc(80vh - 84px);
} }
} }
@media (max-width: 478px) {
height: 60vh;
}
} }
</style> </style>

View File

@ -6,7 +6,7 @@
<n-grid <n-grid
class="all-shortcut" class="all-shortcut"
responsive="screen" responsive="screen"
cols="3 s:4 m:5 l:6" cols="2 s:3 m:4 l:5"
:x-gap="10" :x-gap="10"
:y-gap="10" :y-gap="10"
> >
@ -70,7 +70,8 @@
<n-form-item label="捷径名称" path="name"> <n-form-item label="捷径名称" path="name">
<n-input <n-input
clearable clearable
type="text" show-count
maxlength="14"
v-model:value="addShortcutValue.name" v-model:value="addShortcutValue.name"
placeholder="请输入捷径名称" placeholder="请输入捷径名称"
/> />
@ -78,7 +79,6 @@
<n-form-item label="站点链接" path="url"> <n-form-item label="站点链接" path="url">
<n-input <n-input
clearable clearable
type="text"
v-model:value="addShortcutValue.url" v-model:value="addShortcutValue.url"
placeholder="请输入站点链接" placeholder="请输入站点链接"
/> />

View File

@ -1,7 +1,75 @@
<template> <template>
<footer id="footer">114514</footer> <footer id="footer" @click.stop>
<div class="copyright">
<span class="site-name">{{ siteName }}</span>
<span class="year">{{ fullYear }}</span>
<span
class="anthor"
@click="jumpTo(copyrightLink ?? 'https://github.com/imsyy/Snavigation')"
>
{{ siteAnthor }}
</span>
<span v-if="icp" class="icp" @click="jumpTo('https://beian.miit.gov.cn')">
{{ icp }}
</span>
<span class="about" @click="aboutSiteModal = true">关于</span>
</div>
<!-- 关于 -->
<n-modal
preset="card"
:bordered="false"
v-model:show="aboutSiteModal"
transform-origin="center"
>
<div class="about-modal">
<div class="about">
<span class="name">{{ siteName }}</span>
<span class="version">v {{ packageJson.version }}</span>
</div>
<div class="desc">
<n-space class="link" justify="center">
<n-button
strong
secondary
@click="jumpTo('https://github.com/imsyy/Snavigation')"
>
Github
</n-button>
</n-space>
</div>
</div>
</n-modal>
</footer>
</template> </template>
<script setup>
import { ref } from "vue";
import { setStore } from "@/stores";
import { NModal, NButton, NSpace } from "naive-ui";
import packageJson from "@/../package.json";
const set = setStore();
//
const icp = import.meta.env.VITE_ICP;
const siteName = import.meta.env.VITE_SITE_TITLE;
const siteAnthor = import.meta.env.VITE_SITE_ANTHOR;
const copyrightLink = import.meta.env.VITE_SITE_COPYRIGHTLINK;
const fullYear = new Date().getFullYear();
//
const aboutSiteModal = ref(false);
//
const jumpTo = (url) => {
if (set.urlJumpType === "href") {
window.location.href = url;
} else if (set.urlJumpType === "open") {
window.open(url, "_blank");
}
};
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
#footer { #footer {
position: absolute; position: absolute;
@ -9,10 +77,71 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
bottom: 0; bottom: 0;
height: 60px; height: 50px;
width: 100%; width: 100%;
font-size: 14px;
color: var(--main-text-color); color: var(--main-text-color);
z-index: 1; z-index: 1;
.copyright {
display: flex;
align-items: center;
font-size: 13px;
span {
margin: 0 2px;
opacity: 0.6;
transition: opacity 0.3s;
&::before {
opacity: 0.6;
transition: none;
}
}
.year {
&::before {
content: "@";
opacity: 1;
margin-right: 4px;
}
}
.icp {
&::before {
content: "|";
margin-right: 4px;
}
}
.about {
&::before {
content: "|";
margin-right: 4px;
}
}
.anthor,
.icp,
.about {
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
}
.about-modal {
margin-bottom: 10px;
.about {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.name {
font-size: 26px;
font-weight: bold;
margin-bottom: 4px;
}
.version {
opacity: 0.6;
font-size: 16px;
}
}
.desc {
margin-top: 20px;
}
} }
</style> </style>

View File

@ -47,7 +47,6 @@
<n-form-item label="自定义搜索引擎地址" path="url"> <n-form-item label="自定义搜索引擎地址" path="url">
<n-input <n-input
clearable clearable
type="text"
v-model:value="customEngineValue.url" v-model:value="customEngineValue.url"
placeholder="请输入自定义搜索引擎地址" placeholder="请输入自定义搜索引擎地址"
/> />

View File

@ -225,7 +225,6 @@ const changeEngine = () => {
&::placeholder { &::placeholder {
width: 100%; width: 100%;
text-align: center; text-align: center;
transform: translateY(1px);
color: var(--main-text-color); color: var(--main-text-color);
letter-spacing: 2px; letter-spacing: 2px;
transition: opacity 0.3s; transition: opacity 0.3s;
@ -251,7 +250,7 @@ const changeEngine = () => {
} }
} }
&.small { &.small {
width: 240px; width: 260px;
.all { .all {
.engine, .engine,
.go { .go {
@ -259,7 +258,7 @@ const changeEngine = () => {
} }
.input { .input {
&::placeholder { &::placeholder {
opacity: 0.3; opacity: 0.6;
} }
} }
&.focus { &.focus {
@ -270,7 +269,7 @@ const changeEngine = () => {
} }
} }
&:hover { &:hover {
width: calc(100% - 60px); // width: calc(100% - 60px);
.all { .all {
.input { .input {
&::placeholder { &::placeholder {

View File

@ -221,13 +221,19 @@ onBeforeUnmount(() => {
&.focus { &.focus {
transform: translateY(-180px); transform: translateY(-180px);
// transform: translateY(-24vh);
} }
&.box, &.box,
&.set { &.set {
transform: translateY(-220px); // transform: translateY(-220px);
transform: translateY(-34vh);
@media (max-width: 478px) {
transform: translateY(-32vh);
}
} }
&.hidden { &.hidden {
transform: translateY(-180px); transform: translateY(-180px);
// transform: translateY(-24vh);
opacity: 0; opacity: 0;
} }
&.lunar { &.lunar {