|
1 | | -<template> |
2 | | - <footer id="footer" :class="store.footerBlur ? 'blur' : null"> |
3 | | - <Transition name="fade" mode="out-in"> |
4 | | - <div v-if="!store.playerState || !store.playerLrcShow" class="power"> |
5 | | - <span> |
6 | | - <span :class="startYear < fullYear ? 'c-hidden' : 'hidden'">星鸿_SeRazon Copyright</span> |
7 | | - © |
8 | | - <span v-if="startYear < fullYear" |
9 | | - class="site-start"> |
10 | | - {{ startYear }} |
11 | | - - |
12 | | - </span> |
13 | | - {{ fullYear }} |
14 | | - <a :href="siteUrl">{{ siteAuthor }}</a> |
15 | | - </span> |
16 | | - |
17 | | - <!-- 站点备案 --> |
18 | | - <span> |
19 | | - & |
20 | | - <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank"> |
21 | | - {{ siteIcp }} |
22 | | - </a> |
23 | | - </span> |
24 | | - </div> |
25 | | - <div v-else class="lrc"> |
26 | | - <Transition name="fade" mode="out-in"> |
27 | | - <div class="lrc-all" :key="store.getPlayerLrc"> |
28 | | - <music-one theme="filled" size="18" fill="#efefef" /> |
29 | | - <span class="lrc-text text-hidden" v-html="store.getPlayerLrc" /> |
30 | | - <music-one theme="filled" size="18" fill="#efefef" /> |
31 | | - </div> |
32 | | - </Transition> |
33 | | - </div> |
34 | | - </Transition> |
35 | | - </footer> |
36 | | -</template> |
37 | 1 |
|
38 | | -<script setup> |
39 | | -import { MusicOne } from "@icon-park/vue-next"; |
40 | | -import { mainStore } from "@/store"; |
41 | | -import config from "@/../package.json"; |
42 | | -
|
43 | | -const store = mainStore(); |
44 | | -const fullYear = new Date().getFullYear(); |
45 | | -
|
46 | | -// 加载配置数据 |
47 | | -// const siteStartDate = ref(import.meta.env.VITE_SITE_START); |
48 | | -const startYear = ref( |
49 | | - import.meta.env.VITE_SITE_START?.length >= 4 ? |
50 | | - import.meta.env.VITE_SITE_START.substring(0, 4) : null |
51 | | -); |
52 | | -const siteIcp = ref(import.meta.env.VITE_SITE_ICP); |
53 | | -const siteAuthor = ref(import.meta.env.VITE_SITE_AUTHOR); |
54 | | -const siteUrl = computed(() => { |
55 | | - const url = import.meta.env.VITE_SITE_URL; |
56 | | - if (!url) return "https://xhsr.org.cn"; |
57 | | - // 判断协议前缀 |
58 | | - if (!url.startsWith("http://") && !url.startsWith("https://")) { |
59 | | - return "//" + url; |
60 | | - } |
61 | | - return url; |
62 | | -}); |
63 | | -</script> |
64 | | -
|
65 | | -<style lang="scss" scoped> |
66 | | -#footer { |
67 | | - width: 100%; |
68 | | - position: absolute; |
69 | | - bottom: 0; |
70 | | - left: 0; |
71 | | - height: 46px; |
72 | | - line-height: 46px; |
73 | | - text-align: center; |
74 | | - z-index: 0; |
75 | | - font-size: 14px; |
76 | | - // 文字不换行 |
77 | | - word-break: keep-all; |
78 | | - white-space: nowrap; |
79 | | - .power { |
80 | | - animation: fade 0.3s; |
81 | | - } |
82 | | - .lrc { |
83 | | - padding: 0 20px; |
84 | | - display: flex; |
85 | | - flex-direction: row; |
86 | | - align-items: center; |
87 | | - justify-content: center; |
88 | | - .lrc-all { |
89 | | - width: 98%; |
90 | | - display: flex; |
91 | | - flex-direction: row; |
92 | | - justify-content: center; |
93 | | - align-items: center; |
94 | | - .lrc-text { |
95 | | - margin: 0 8px; |
96 | | - } |
97 | | - .i-icon { |
98 | | - width: 18px; |
99 | | - height: 18px; |
100 | | - display: inherit; |
101 | | - } |
102 | | - } |
103 | | - } |
104 | | - &.blur { |
105 | | - backdrop-filter: blur(10px); |
106 | | - background: rgb(0 0 0 / 25%); |
107 | | - font-size: 16px; |
108 | | - } |
109 | | - .fade-enter-active, |
110 | | - .fade-leave-active { |
111 | | - transition: opacity 0.15s ease-in-out; |
112 | | - } |
113 | | - @media (max-width: 720px) { |
114 | | - font-size: 0.9rem; |
115 | | - &.blur { |
116 | | - font-size: 0.9rem; |
117 | | - } |
118 | | - } |
119 | | - @media (max-width: 560px) { |
120 | | - .c-hidden { |
121 | | - display: none; |
122 | | - } |
123 | | - } |
124 | | - @media (max-width: 480px) { |
125 | | - .hidden { |
126 | | - display: none; |
127 | | - } |
128 | | - } |
129 | | -} |
130 | | -</style> |
0 commit comments