mirror of
https://github.com/caojiezi2003/Snavigation.git
synced 2024-11-10 06:39:45 +00:00
feat: 新增底栏展示
This commit is contained in:
parent
dc17328a8f
commit
e717984be6
1
.env
1
.env
@ -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 = "欢迎访问本站"
|
||||||
|
@ -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) {
|
||||||
|
@ -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>
|
||||||
|
@ -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="请输入站点链接"
|
||||||
/>
|
/>
|
||||||
|
@ -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>
|
||||||
|
@ -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="请输入自定义搜索引擎地址"
|
||||||
/>
|
/>
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user