├── public
    └── favicon.ico
├── src
    ├── main.js
    ├── config
    │   ├── links.json
    │   └── site.json
    ├── App.vue
    ├── components
    │   ├── Website.vue
    │   ├── AboutPage.vue
    │   ├── VisitTimer.vue
    │   └── Home.vue
    └── style.less
├── vite.config.js
├── .gitignore
├── package.json
├── index.html
├── README.md
├── .env
└── LICENSE


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JLinMr/Home-Vue/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 | import './style.less';
4 | import { MotionPlugin } from '@vueuse/motion';
5 | const app = createApp(App);
6 | 
7 | app.use(MotionPlugin);
8 | 
9 | app.mount('#app');


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import vue from '@vitejs/plugin-vue';
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [vue()],
 6 |   css: {
 7 |     preprocessorOptions: {
 8 |       less: {
 9 |         javascriptEnabled: true,
10 |       },
11 |     },
12 |   },
13 |   server: {
14 |     port: 3000,
15 |   },
16 | });


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | pnpm-lock.yaml


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "home-vue",
 3 |   "private": true,
 4 |   "version": "0.1.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@vueuse/motion": "^2.2.5",
13 |     "less": "^4.2.0",
14 |     "swiper": "^11.1.14",
15 |     "typed.js": "^2.1.0",
16 |     "vue": "^3.4.37"
17 |   },
18 |   "devDependencies": {
19 |     "@vitejs/plugin-vue": "^5.1.4",
20 |     "vite": "^5.4.1"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/config/links.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "type": "Email",
 4 |     "icon": "fas fa-envelope",
 5 |     "url": "mailto:i@bsgun.cn",
 6 |     "hoverColor": "#e78b0a"
 7 |   },
 8 |   {
 9 |     "type": "Github",
10 |     "icon": "fab fa-github",
11 |     "url": "https://github.com/JLinmr",
12 |     "hoverColor": "#6500fc"
13 |   },
14 |   {
15 |     "type": "支付宝",
16 |     "icon": "fab fa-alipay",
17 |     "qrCode": "https://lib.bsgun.cn/Hexo-static/img/zfbzf.avif",
18 |     "hoverColor": "#007aff"
19 |   },
20 |   {
21 |     "type": "微信",
22 |     "icon": "fab fa-weixin",
23 |     "qrCode": "https://lib.bsgun.cn/Hexo-static/img/wxzf.avif",
24 |     "hoverColor": "#247700"
25 |   }
26 | ]
27 | 


--------------------------------------------------------------------------------
/src/config/site.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "name": "博客",
 4 |     "url": "https://blog.bsgun.cn",
 5 |     "icon": "fa fa-blog"
 6 |   },
 7 |   {
 8 |     "name": "雨云",
 9 |     "url": "https://www.rainyun.com/Lin_",
10 |     "icon": "fa fa-cloud "
11 |   },
12 |   {
13 |     "name": "图床",
14 |     "url": "https://dev.bsgun.cn",
15 |     "icon": "fa fa-image"
16 |   },
17 |   {
18 |     "name": "封面",
19 |     "url": "https://cover.bsgun.cn",
20 |     "icon": "fa fa-panorama"
21 |   },
22 |   {
23 |     "name": "监测",
24 |     "url": "https://status.bsgun.cn",
25 |     "icon": "fa fa-chart-line"
26 |   },
27 |   {
28 |     "name": "图标",
29 |     "url": "https://icon.bsgun.cn/",
30 |     "icon": "fa fa-icons"
31 |   }
32 | ]


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="background"></div>
 3 |     <Home />
 4 |   <footer>
 5 |     <span>© 2024 Made in <a href="/" target="_blank">{{ userName }}</a></span>
 6 |     <a v-if="icpNumber" href="https://beian.miit.gov.cn/" target="_blank">{{ icpNumber }}</a>
 7 |     <a v-if="policenumber" :href="`https://beian.mps.gov.cn/#/query/webSearch?police=${policenumber}`" target="_blank" class="police_link">
 8 |       <span class="police_img"></span> {{ policenumber }}
 9 |     </a>
10 |   </footer>
11 | </template>
12 | 
13 | <script setup>
14 | import { ref } from 'vue';
15 | import Home from './components/Home.vue';
16 | 
17 | const userName = ref(import.meta.env.VITE_APP_USER_NAME);
18 | const icpNumber = ref(import.meta.env.VITE_APP_ICP_NUMBER);
19 | const policenumber = ref(import.meta.env.VITE_APP_POLICE_NUMBER);
20 | </script>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>%VITE_TITLE%</title>
 8 |     <meta name="keywords" content="%VITE_KEYWORDS%" />
 9 |     <meta name="description" content="%VITE_DESCRIPTION%" />
10 |     <link rel="icon" href="%VITE_FAVICON%" />
11 |     <!--Umami统计-->
12 |     <script defer src="%VITE_UMAMI_SCRIPT%" data-website-id="%VITE_UMAMI_WEBSITE_ID%"></script>
13 |     <!-- 引入图标库 -->
14 |     <link rel="stylesheet" href="%VITE_ICON_LIBRARY%">
15 |     <!-- 字体 -->
16 |     <link rel="stylesheet" href="%VITE_FONT_LIBRARY%">
17 |   </head>
18 |   <body>
19 |     <div id="app"></div>
20 |     <script type="module" src="/src/main.js"></script>
21 |   </body>
22 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 个人主页
 2 | 
 3 | 基于Vue的个人主页，刚接触Vue不太会用各种插件，代码有点难看，大佬们见谅
 4 | 
 5 | ### Demo
 6 | 
 7 | - [预览](https://bsgun.cn)
 8 | 
 9 | ### 修改
10 | 
11 | 图标默认采用Font Awesome，如需修改图标，请前往 [Font Awesome](https://fa6.dashgame.com/) 复制图标
12 | 
13 | - 修改联系方式 **`src/config/links.json`** 文件中的内容值即可
14 | - 修改网站列表 **`src/config/site.json`** 文件中的内容值即可
15 | 
16 | ### 部署
17 | 
18 | * **安装** [node.js](https://nodejs.org/zh-cn/) **环境**
19 | 
20 |   > node > 16.16.0
21 |   > npm > 8.15.0
22 | 
23 | * 然后以 **管理员权限** 运行 `cmd` 终端，并 `cd` 到 项目根目录
24 | * 在 `终端` 中输入：
25 | 
26 | ```bash
27 | # 安装依赖
28 | npm install
29 | # 预览
30 | npm run dev
31 | # 构建
32 | npm run build
33 | ```
34 | > 构建完成后，静态资源会在 **`dist` 目录** 中生成，可将 **`dist` 文件夹下的文件**上传至服务器，也可使用 `Vercel` 等托管平台一键导入并自动部署
35 | 
36 | ### Vercle部署
37 | 
38 | >点击后自动部署并创建仓库
39 | 
40 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/JLinMr/Home-Vue&repository-name=Home-Vue)
41 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
 1 | # 网页标题
 2 | VITE_TITLE = "梦爱吃鱼 - 个人主页"
 3 | # 网页关键词
 4 | VITE_KEYWORDS = "一个基于Vue3的个人主页"
 5 | # 网页描述
 6 | VITE_DESCRIPTION = "一个默默无闻的主页"
 7 | # 网页图标
 8 | VITE_FAVICON = "/favicon.ico"
 9 | 
10 | ## 你需要部署Umami 再填写这些配置
11 | # Umami 统计脚本地址
12 | VITE_UMAMI_SCRIPT = "https://um.bsgun.cn/tongjifenxi.js"
13 | # Umami 统计网站 ID
14 | VITE_UMAMI_WEBSITE_ID = "2a70fe42-f442-41ea-8632-05adfc0c8d1f"
15 | 
16 | ## 引入Font Awesome 图标库 fa6.dashgame.com
17 | VITE_ICON_LIBRARY = "//lib.baomitu.com/font-awesome/6.5.0/css/all.min.css"
18 | 
19 | ## 引入字体库 // 如需修改字体同步去 style.less 文件修改Body内容
20 | VITE_FONT_LIBRARY = "https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css"
21 | 
22 | # 网页内显示的名称 // 页脚也会同步显示
23 | VITE_APP_USER_NAME = "梦爱吃鱼"
24 | # 网页内显示的头像
25 | VITE_APP_PROFILE_IMAGE_URL = "https://q.qlogo.cn/headimg_dl?dst_uin=153336174&spec=640"
26 | 
27 | ## 页脚的备案信息 // 如果不填写则不显示 // 移动端不显示公安备案号
28 | # 应用 ICP 备案号
29 | VITE_APP_ICP_NUMBER = "豫ICP备20017009号"
30 | # 应用公安备案号
31 | VITE_APP_POLICE_NUMBER = "豫公网安备 41168102000061号"
32 | 
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 摸鱼玩家
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/Website.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="swiper-container">
  4 |       <div class="swiper-wrapper">
  5 |         <div v-for="(siteChunk, index) in chunkedSites" :key="index" class="swiper-slide">
  6 |           <div class="site-grid">
  7 |             <div v-for="(site, i) in siteChunk" :key="i" class="site-box" @click="openLink(site.url)">
  8 |               <div class="site-content">
  9 |                 <i :class="site.icon" aria-hidden="true"></i>
 10 |                 <span class="site-name">{{ site.name }}</span>
 11 |               </div>
 12 |             </div>
 13 |           </div>
 14 |         </div>
 15 |       </div>
 16 |       <div class="swiper-pagination"></div>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script setup>
 22 | import { ref, onMounted } from 'vue';
 23 | import Swiper from 'swiper/bundle';
 24 | import 'swiper/swiper-bundle.css';
 25 | import siteData from '../config/site.json';
 26 | 
 27 | const chunkedSites = ref(siteData.reduce((acc, site, index) => {
 28 |   const chunkIndex = Math.floor(index / 6);
 29 |   if (!acc[chunkIndex]) acc[chunkIndex] = [];
 30 |   acc[chunkIndex].push(site);
 31 |   return acc;
 32 | }, []));
 33 | 
 34 | const openLink = (url) => {
 35 |   if (url) window.open(url, '_blank');
 36 | };
 37 | 
 38 | onMounted(() => {
 39 |   new Swiper('.swiper-container', {
 40 |     slidesPerView: 1,
 41 |     spaceBetween: 20,
 42 |     pagination: { el: '.swiper-pagination', clickable: true },
 43 |     mousewheel: true,
 44 |   });
 45 | });
 46 | </script>
 47 | 
 48 | 
 49 | <style scoped>
 50 | .container {
 51 |   max-width: 700px;
 52 |   width: 100%;
 53 |   margin: 30px 0 20px;
 54 | }
 55 | 
 56 | .swiper-container {
 57 |   overflow: hidden;
 58 |   padding: 10px;
 59 | }
 60 | 
 61 | .swiper-pagination {
 62 |   bottom: inherit;
 63 | }
 64 | 
 65 | .site-grid {
 66 |   display: grid;
 67 |   grid-template-columns: repeat(3, 1fr);
 68 |   gap: 15px;
 69 | }
 70 | 
 71 | .site-box {
 72 |   padding: 30px;
 73 |   backdrop-filter: blur(10px);
 74 |   border-radius: var(--border-radius);
 75 |   border: 1px solid var(--border-color);
 76 |   background-color: rgba(var(--background-color-rgb), 0.2);
 77 |   cursor: pointer;
 78 |   transition: transform 0.3s ease, box-shadow 0.3s ease;
 79 | 
 80 |   &:hover {
 81 |     transform: translateY(-3px);
 82 |     box-shadow: 0 1px 8px var(--shadow-color);
 83 |   }
 84 | }
 85 | 
 86 | .site-content {
 87 |   display: flex;
 88 |   gap: 10px;
 89 |   justify-content: center;
 90 |   align-items: center;
 91 | 
 92 |   i {
 93 |     font-size: var(--icon-size);
 94 |   }
 95 | }
 96 | 
 97 | .site-name {
 98 |   margin: 0;
 99 |   font-size: 1.17em;
100 |   font-weight: bold;
101 | }
102 | 
103 | @media screen and (max-width: 768px) {
104 |   .site-content {
105 |     gap: 5px;
106 |     flex-direction: column;
107 |   }
108 | 
109 |   .site-box {
110 |     padding: 15px;
111 |     border-radius: 8px;
112 |   }
113 | 
114 |   .site-name {
115 |     font-size: 16px;
116 |   }
117 | 
118 |   .site-content i {
119 |     font-size: 18px;
120 |   }
121 | }
122 | 
123 | :deep(.swiper-pagination-bullet-active) {
124 |   background: #8c8c8c94;
125 |   width: 20px;
126 |   border-radius: 5px;
127 | }
128 | </style>


--------------------------------------------------------------------------------
/src/components/AboutPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="about-page" @click.stop>
  3 |     <div class="about-modal">
  4 |       <div class="about-modal-content">
  5 |         <div class="tech-stack">
  6 |           <h3>使用的技术栈</h3>
  7 |           <ul class="tech-list">
  8 |             <li v-for="tech in techStack" :key="tech.name" :class="['tech-item', tech.name.toLowerCase()]">
  9 |               <i :class="tech.icon"></i>
 10 |               {{ tech.name }}
 11 |             </li>
 12 |           </ul>
 13 |         </div>
 14 |         <div class="github-info">
 15 |           <h3>开源地址</h3>
 16 |           <a href="https://github.com/JLinMr/Home-Vue" target="_blank" class="github-link">
 17 |             <i class="fab fa-github"></i> Github
 18 |           </a>
 19 |         </div>
 20 |         <div class="update-info">
 21 |           <h3>最近更新</h3>
 22 |           <ul class="update-list">
 23 |             <li v-if="loading" class="loading-item">
 24 |               <div class="loading-spinner"></div>
 25 |             </li>
 26 |             <li v-for="(update, index) in lastUpdates" :key="index" class="update-item">
 27 |               {{ update.message }} <span v-if="update.date"> ({{ update.date }})</span>
 28 |             </li>
 29 |           </ul>
 30 |         </div>
 31 |       </div>
 32 |       <button @click="closeModal" class="close-btn">
 33 |         <i class="fas fa-times"></i>
 34 |       </button>
 35 |     </div>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script setup>
 40 | import { ref } from 'vue';
 41 | 
 42 | const emit = defineEmits(['close']);
 43 | 
 44 | const techStack = [
 45 |   { name: 'Vue3', icon: 'fab fa-vuejs' },
 46 |   { name: 'Vite', icon: 'fas fa-bolt' },
 47 |   { name: 'CSS3', icon: 'fab fa-css3-alt' },
 48 |   { name: 'HTML5', icon: 'fab fa-html5' },
 49 |   { name: 'JavaScript', icon: 'fab fa-js' }
 50 | ];
 51 | const lastUpdates = ref([]);
 52 | const loading = ref(true);
 53 | const closeModal = () => emit('close');
 54 | const fetchCommits = async () => {
 55 |   try {
 56 |     const response = await fetch('https://api.github.com/repos/JLinMr/Home-Vue/commits');
 57 |     const commits = await response.json();
 58 |     lastUpdates.value = commits.slice(0, 3).map(commit => ({
 59 |       message: commit.commit.message,
 60 |       date: new Date(commit.commit.author.date).toLocaleDateString()
 61 |     }));
 62 |   } catch (error) {
 63 |     console.error('获取更新信息失败', error);
 64 |     lastUpdates.value = [{ message: '无法获取更新信息', date: '' }];
 65 |   } finally {
 66 |     loading.value = false;
 67 |   }
 68 | };
 69 | 
 70 | fetchCommits();
 71 | </script>
 72 | 
 73 | <style scoped>
 74 | .about-page {
 75 |   width: 500px;
 76 |   backdrop-filter: blur(5px);
 77 |   background-color: rgba(var(--background-color-rgb), 0.9);
 78 |   padding: 40px;
 79 |   border-radius: var(--border-radius);
 80 |   position: relative;
 81 |   text-align: center;
 82 |   box-sizing: border-box;
 83 | 
 84 |   @media (max-width: 600px) {
 85 |     padding: 20px;
 86 |     width: 90%;
 87 |     margin: auto;
 88 |   }
 89 | }
 90 | 
 91 | h3 {
 92 |   border-bottom: 2px solid var(--border-color);
 93 |   padding-bottom: 10px;
 94 | }
 95 | 
 96 | .tech-stack ul,
 97 | .tech-list {
 98 |   display: flex;
 99 |   gap: 5px;
100 |   flex-wrap: wrap;
101 |   justify-content: center;
102 | }
103 | 
104 | .tech-stack li,
105 | .tech-item {
106 |   padding: 10px 15px;
107 |   border-radius: var(--border-radius);
108 |   transition: all 0.3s ease;
109 |   display: flex;
110 |   gap: 5px;
111 |   flex-direction: column;
112 | }
113 | 
114 | .tech-stack li:hover,
115 | .tech-item:hover {
116 |   background-color: var(--hover-other-color);
117 |   color: var(--hover-link-color);
118 | }
119 | 
120 | .tech-stack li i,
121 | .tech-item i {
122 |   font-size: 1.5em;
123 | }
124 | 
125 | @media (max-width: 600px) {
126 |   .tech-stack li,
127 |   .tech-item {
128 |     font-size: 0.8em;
129 |   }
130 | }
131 | 
132 | .github-link {
133 |   display: inline-block;
134 |   background-color: #040404d0;
135 |   color: white;
136 |   padding: 10px 20px;
137 |   border-radius: var(--border-radius);
138 |   text-decoration: none;
139 |   transition: background-color 0.3s ease;
140 | 
141 |   &:hover {
142 |     background-color: #1a1a1a;
143 |   }
144 | }
145 | 
146 | .update-info ul,
147 | .update-list {
148 |   display: flex;
149 |   flex-direction: column;
150 |   gap: 5px;
151 |   min-height: 73px;
152 |   justify-content: center;
153 |   align-items: center;
154 | }
155 | 
156 | .close-btn {
157 |   position: absolute;
158 |   top: 20px;
159 |   right: 20px;
160 |   background: none;
161 |   border: none;
162 |   font-size: 1.5em;
163 |   cursor: pointer;
164 |   color: #7f8c8d;
165 |   transition: color 0.3s ease;
166 | 
167 |   &:hover {
168 |     color: #c61b09;
169 |   }
170 | }
171 | 
172 | .loading-item {
173 |   display: flex;
174 |   justify-content: center;
175 |   align-items: center;
176 | }
177 | 
178 | .loading-spinner {
179 |   border: 4px solid rgba(0, 0, 0, 0.1);
180 |   width: 36px;
181 |   height: 36px;
182 |   border-radius: 50%;
183 |   border-top-color: #ffcc00;
184 |   animation: spin 1s ease-in-out infinite;
185 | }
186 | 
187 | .loading-text {
188 |   color: #7f8c8d;
189 |   font-style: italic;
190 | }
191 | 
192 | @keyframes spin {
193 |   to {
194 |     transform: rotate(360deg);
195 |   }
196 | }
197 | 
198 | @keyframes fadeIn {
199 |   from { opacity: 0; transform: translateY(20px); }
200 |   to { opacity: 1; transform: translateY(0); }
201 | }
202 | 
203 | .about-modal-content > div {
204 |   display: flex;
205 |   flex-direction: column;
206 |   animation: fadeIn 0.5s ease-out forwards;
207 |   opacity: 0;
208 | 
209 |   &:nth-child(1) { animation-delay: 0.2s; }
210 |   &:nth-child(2) { animation-delay: 0.3s; }
211 |   &:nth-child(3) { animation-delay: 0.4s; }
212 | }
213 | 
214 | .update-item {
215 |   width: 100%;
216 |   text-align: center;
217 | }
218 | </style>


--------------------------------------------------------------------------------
/src/components/VisitTimer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="visit-timer-container">
  3 |     <div class="visit-timer" 
  4 |          v-motion
  5 |          :initial="{ opacity: 0, y: 50, x: '-50%', scale: 0.5 }"
  6 |          :enter="{ opacity: 1, y: 0, x: '-50%', scale: 1, transition: { duration: 300 } }"
  7 |          @mouseenter="handleMouseEnter"
  8 |          @mouseleave="handleMouseLeave"
  9 |          @click="toggleCalendar">
 10 |       <div class="timer-content">
 11 |         <i class="fas fa-clock"></i>
 12 |         <span>停留时间 : </span>
 13 |         <div class="time">
 14 |           <template v-for="(value, unit) in timeUnits" :key="unit">
 15 |             <div class="time-wrapper">
 16 |               <Transition name="flip">
 17 |                 <span :key="value" class="time-unit">{{ value }}</span>
 18 |               </Transition>
 19 |             </div>
 20 |             <span v-if="unit !== 'seconds'" class="separator">:</span>
 21 |           </template>
 22 |         </div>
 23 |       </div>
 24 |     </div>
 25 | 
 26 |     <Transition name="calendar">
 27 |       <div v-if="showCalendar" 
 28 |            class="calendar-popup"
 29 |            @mouseleave="handleMouseLeave">
 30 |         <div class="calendar-header">
 31 |           <i class="fas fa-calendar-alt"></i>
 32 |           {{ dateTime.dateOnly }}
 33 |         </div>
 34 |         <div class="calendar-time">
 35 |           <i class="fas fa-clock"></i>
 36 |           <span>{{ dateTime.weekday }}</span>
 37 |           <span>{{ dateTime.timeWithoutSeconds }}</span>
 38 |           <span v-if="isCalendarPinned" class="pin-indicator">
 39 |             <i class="fas fa-thumbtack"></i>
 40 |           </span>
 41 |         </div>
 42 |       </div>
 43 |     </Transition>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script setup>
 48 | import { ref, onMounted, onUnmounted, computed } from 'vue';
 49 | 
 50 | // === 合并计时和日期时间逻辑 ===
 51 | const useTimeManager = () => {
 52 |   const startTime = ref(Date.now());
 53 |   const currentTime = ref(Date.now());
 54 | 
 55 |   onMounted(() => {
 56 |     const timer = setInterval(() => {
 57 |       currentTime.value = Date.now();
 58 |     }, 1000);
 59 |     
 60 |     onUnmounted(() => clearInterval(timer));
 61 |   });
 62 | 
 63 |   // 计算属性
 64 |   const timeUnits = computed(() => {
 65 |     const totalSeconds = Math.floor((currentTime.value - startTime.value) / 1000);
 66 |     return {
 67 |       hours: Math.floor(totalSeconds / 3600).toString().padStart(2, '0'),
 68 |       minutes: Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0'),
 69 |       seconds: (totalSeconds % 60).toString().padStart(2, '0')
 70 |     };
 71 |   });
 72 | 
 73 |   const dateTime = computed(() => {
 74 |     const now = new Date(currentTime.value);
 75 |     return {
 76 |       dateOnly: now.toLocaleDateString('zh-CN', {
 77 |         year: 'numeric',
 78 |         month: 'long',
 79 |         day: 'numeric'
 80 |       }),
 81 |       weekday: now.toLocaleDateString('zh-CN', { weekday: 'long' }),
 82 |       timeWithoutSeconds: now.toLocaleTimeString('zh-CN', {
 83 |         hour: '2-digit',
 84 |         minute: '2-digit'
 85 |       })
 86 |     };
 87 |   });
 88 | 
 89 |   return {
 90 |     timeUnits,
 91 |     dateTime
 92 |   };
 93 | };
 94 | 
 95 | // === 简化组件状态管理 ===
 96 | const showCalendar = ref(false);
 97 | const isCalendarPinned = ref(false);
 98 | 
 99 | const { timeUnits, dateTime } = useTimeManager();
100 | 
101 | // 简化事件处理
102 | const handleMouseEnter = () => showCalendar.value = true;
103 | const handleMouseLeave = () => !isCalendarPinned.value && (showCalendar.value = false);
104 | const toggleCalendar = () => {
105 |   isCalendarPinned.value = !isCalendarPinned.value;
106 |   showCalendar.value = true;
107 | };
108 | </script>
109 | 
110 | <style scoped lang="less">
111 | /* 基础组件样式 */
112 | .visit-timer-container {
113 |   position: fixed;
114 |   z-index: 100;
115 |   pointer-events: none;
116 |   width: 100%;
117 |   height: 0;
118 | 
119 |   /* 在移动端隐藏组件 */
120 |   @media (max-width: 768px) {
121 |     display: none;
122 |   }
123 | }
124 | 
125 | .visit-timer, .calendar-popup {
126 |   pointer-events: auto;
127 |   position: fixed;
128 |   left: 50%;
129 |   transform: translateX(-50%);
130 |   border: 1px solid var(--border-color);
131 |   backdrop-filter: blur(10px);
132 |   font-weight: bold;
133 | }
134 | 
135 | .visit-timer {
136 |   bottom: 50px;
137 |   padding: 8px 15px;
138 |   border-radius: 20px;
139 |   transition: all 0.3s ease;
140 |   cursor: pointer;
141 | 
142 |   &:hover {
143 |     transform: translateX(-50%) translateY(-5px);
144 |     box-shadow: 0 2px 8px var(--shadow-color);
145 |   }
146 | 
147 |   .timer-content {
148 |     display: flex;
149 |     align-items: baseline;
150 |     gap: 5px;
151 |     font-size: 0.9em;
152 | 
153 |     .time {
154 |       display: flex;
155 |     }
156 |   }
157 | }
158 | 
159 | /* 时间单位样式 */
160 | .time-wrapper {
161 |   position: relative;
162 |   width: 1.6em;
163 |   height: 1.2em;
164 |   overflow: visible;
165 | 
166 |   .time-unit {
167 |     display: inline-block;
168 |     width: 1.6em;
169 |     text-align: center;
170 |     height: 1.2em;
171 |     line-height: 1.2em;
172 |   }
173 | }
174 | 
175 | .separator { 
176 |   margin: 0 2px; 
177 | }
178 | 
179 | /* 日历弹窗样式 */
180 | .calendar-popup {
181 |   bottom: calc(50px + 50px);
182 |   padding: 12px;
183 |   border-radius: 8px;
184 |   box-shadow: 0 2px 12px var(--shadow-color);
185 |   min-width: 188px;
186 | 
187 |   .calendar-header {
188 |     text-align: center;
189 |     font-weight: bold;
190 |   }
191 | 
192 |   .calendar-time {
193 |     display: flex;
194 |     align-items: center;
195 |     justify-content: center;
196 |     gap: 8px;
197 |     margin-top: 5px;
198 |     font-weight: bold;
199 |   }
200 | }
201 | 
202 | /* 固定图钉样式 */
203 | .pin-indicator {
204 |   position: absolute;
205 |   left: 0;
206 |   top: 0;
207 |   display: flex;
208 |   align-items: center;
209 |   justify-content: center;
210 |   width: 30px;
211 |   height: 30px;
212 |   margin: -10px;
213 |   border-radius: 50%;
214 |   background-color: var(--background-color);
215 |   box-shadow: 0 2px 12px var(--shadow-color);
216 |   color: red;
217 |   transform: rotate(45deg);
218 |   animation: pin-in 0.6s cubic-bezier(0.23, 1, 0.32, 1);
219 | }
220 | 
221 | /* 添加图钉动画关键帧 */
222 | @keyframes pin-in {
223 |   0% {
224 |     transform: rotate(0deg) scale(0.5) translateY(-10px);
225 |     opacity: 0;
226 |   }
227 |   30% {
228 |     transform: rotate(0deg) scale(1.2) translateY(0);
229 |     opacity: 1;
230 |   }
231 |   100% {
232 |     transform: rotate(45deg) scale(1) translateY(0);
233 |     opacity: 1;
234 |   }
235 | }
236 | 
237 | /* 动画样式 */
238 | .calendar {
239 |   &-enter-active,
240 |   &-leave-active {
241 |     transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
242 |   }
243 | 
244 |   &-enter-from,
245 |   &-leave-to {
246 |     opacity: 0;
247 |     transform: translateX(-50%) translateY(20px) scale(0.5);
248 |   }
249 | }
250 | 
251 | .flip {
252 |   &-enter-active,
253 |   &-leave-active {
254 |     transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
255 |     position: absolute;
256 |     width: 100%;
257 |     left: 0;
258 |   }
259 | 
260 |   &-enter-from {
261 |     transform: translateY(20px);
262 |     opacity: 0;
263 |   }
264 | 
265 |   &-leave-to {
266 |     transform: translateY(-20px);
267 |     opacity: 0;
268 |   }
269 | }
270 | </style>


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content">
  3 |     <div class="user-profile-container">
  4 |       <div class="user-profile-image" v-motion-pop>
  5 |         <img :src="profileImage" alt="头像" @click.stop="toggleInfo">
  6 |         <span class="status-ball"></span>
  7 |       </div>
  8 |       <div class="user-name" v-motion-slide-left>
  9 |         <h1>Hi,</h1>
 10 |         <h1>I'm <span class="name-style">{{ userName }}</span></h1>
 11 |       </div>
 12 |     </div>
 13 |     <div class="description">
 14 |       <p ref="descriptionElement"></p>
 15 |     </div>
 16 |     <div class="contact-section" v-motion-pop>
 17 |       <template v-for="contact in contacts" :key="contact.type">
 18 |         <a v-if="contact.url" :href="contact.url" target="_blank" class="contact-item" :style="{ '--hover-color': contact.hoverColor }">
 19 |           <i :class="contact.icon"></i>
 20 |           <span class="tooltip">{{ contact.type }}</span>
 21 |         </a>
 22 |         <span v-else @click="toggleQRCode(contact.qrCode)" class="contact-item" :style="{ '--hover-color': contact.hoverColor }">
 23 |           <i :class="contact.icon"></i>
 24 |           <span class="tooltip">{{ contact.type }}</span>
 25 |         </span>
 26 |       </template>
 27 |       <span class="contact-item" @click="toggleDarkMode" :style="{ '--hover-color': isDarkMode ? '#ffcc00' : '#666' }">
 28 |         <i :class="darkModeIconClass"></i>
 29 |         <span class="tooltip">{{ isDarkMode ? '浅色' : '深色' }}</span>
 30 |       </span>
 31 |     </div>
 32 |     <Website /> 
 33 |     <VisitTimer />
 34 | 
 35 |     <Transition name="fade">
 36 |       <div v-if="showAbout" class="overlay" @click="showAbout = false">
 37 |         <div class="modal-content">
 38 |           <AboutPage @close="showAbout = false" />
 39 |         </div>
 40 |       </div>
 41 |     </Transition>
 42 | 
 43 |     <Transition name="fade">
 44 |       <div v-if="showQR" class="overlay" @click="hideQRCode">
 45 |         <div class="modal-content">
 46 |           <img :src="qrCodeSrc" alt="QR Code" class="qr-image" @click.stop>
 47 |         </div>
 48 |       </div>
 49 |     </Transition>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script setup>
 54 | import { ref, onMounted } from 'vue';
 55 | import contactsData from '../config/links.json';
 56 | import Website from './Website.vue';
 57 | import AboutPage from './AboutPage.vue';
 58 | import VisitTimer from './VisitTimer.vue';
 59 | import Typed from 'typed.js';
 60 | 
 61 | const contacts = ref(contactsData);
 62 | const showQR = ref(false);
 63 | const showAbout = ref(false);
 64 | const qrCodeSrc = ref('');
 65 | const profileImage = ref(import.meta.env.VITE_APP_PROFILE_IMAGE_URL);
 66 | const userName = ref(import.meta.env.VITE_APP_USER_NAME);
 67 | const descriptionElement = ref(null);
 68 | 
 69 | const predefinedDescriptions = [
 70 |   "你好鸭，欢迎来到我的主页！！",
 71 |   "随时可以联系我，期待与你交流。",
 72 |   "愿你历尽千帆，归来仍是少年。",
 73 |   "梦想还是要有的，万一实现了呢？",
 74 |   "I hope you have a happy day every day."
 75 | ];
 76 | 
 77 | let typedInstance = null;
 78 | 
 79 | const initializeTyped = () => {
 80 |   typedInstance = new Typed(descriptionElement.value, {
 81 |     strings: predefinedDescriptions,
 82 |     typeSpeed: 120,
 83 |     backSpeed: 80,
 84 |     showCursor: true,
 85 |     cursorChar: '|',
 86 |     loop: true,
 87 |   });
 88 | };
 89 | 
 90 | onMounted(() => {
 91 |   initializeTyped();
 92 | });
 93 | 
 94 | const toggleQRCode = (qrCode) => {
 95 |   qrCodeSrc.value = qrCode || '';
 96 |   showQR.value = !showQR.value;
 97 | };
 98 | 
 99 | const hideQRCode = () => {
100 |   showQR.value = false;
101 | };
102 | 
103 | const toggleInfo = () => {
104 |   showAbout.value = !showAbout.value;
105 | };
106 | 
107 | const isDarkMode = ref(false);
108 | const darkModeIconClass = ref('fas fa-moon');
109 | 
110 | const toggleDarkMode = () => {
111 |   isDarkMode.value = !isDarkMode.value;
112 |   document.body.classList.toggle('dark-mode', isDarkMode.value);
113 | 
114 |   localStorage.setItem('darkMode', isDarkMode.value);
115 | 
116 |   darkModeIconClass.value = isDarkMode.value ? 'fas fa-sun' : 'fas fa-moon';
117 | };
118 | 
119 | onMounted(() => {
120 |   const savedDarkMode = localStorage.getItem('darkMode');
121 |   if (savedDarkMode !== null) {
122 |     isDarkMode.value = savedDarkMode === 'true';
123 |     document.body.classList.toggle('dark-mode', isDarkMode.value);
124 |   }
125 | 
126 |   darkModeIconClass.value = isDarkMode.value ? 'fas fa-sun' : 'fas fa-moon';
127 | });
128 | </script>
129 | 
130 | <style scoped>
131 | .content {
132 |   flex: 1;
133 |   display: flex;
134 |   justify-content: center;
135 |   flex-direction: column;
136 |   align-items: center;
137 |   gap: 30px;
138 |   margin-top: 20px;
139 | 
140 |   .user-profile-container {
141 |     display: flex;
142 |     align-items: center;
143 |     gap: 30px;
144 |   }
145 | 
146 |   .user-profile-image {
147 |     display: flex;
148 |     border-radius: 50%;
149 |     box-shadow: 0 2px 8px var(--shadow-color);
150 |     padding: 5px;
151 |     border: 3px solid var(--border-color);
152 |     position: relative;
153 | 
154 |     img {
155 |       width: 150px;
156 |       height: 150px;
157 |       border-radius: 50%;
158 |       background-size: cover;
159 |       background-position: center;
160 |     }
161 | 
162 |     .status-ball {
163 |       position: absolute;
164 |       background: #00c800;
165 |       width: 2em;
166 |       height: 2em;
167 |       border-radius: 20px;
168 |       border: 3px solid #eee;
169 |       bottom: 5px;
170 |       right: 15px;
171 |       display: flex;
172 |       justify-content: center;
173 |       align-items: center;
174 |       transition: all 0.3s ease;
175 |       z-index: 1;
176 |       cursor: pointer;
177 |       overflow: hidden;
178 | 
179 |       &::before {
180 |         content: "在线中";
181 |         color: #00c800;
182 |         opacity: 0;
183 |         transition: opacity 0.3s ease-in-out, color 0.1s ease-in-out;
184 |       }
185 | 
186 |       &:hover {
187 |         width: 4.5em;
188 |         height: 2em;
189 |       }
190 | 
191 |       &:hover::before {
192 |         opacity: 1;
193 |         color: #eee;
194 |       }
195 |     }
196 |   }
197 | 
198 |   .user-name {
199 |     display: flex;
200 |     flex-direction: column;
201 |     align-items: flex-start;
202 |     font-size: 1.3em;
203 | 
204 |     h1 {
205 |       margin: 0;
206 |     }
207 |   }
208 | 
209 |   .name-style {
210 |     position: relative;
211 | 
212 |     &:before {
213 |       position: absolute;
214 |       border-radius: 5px;
215 |       bottom: 0;
216 |       left: 50%;
217 |       transform: translate(-50%);
218 |       z-index: -1;
219 |       content: "";
220 |       background: #ffcc00ad;
221 |       height: 30%;
222 |       width: 110%;
223 |       transition: height 0.3s ease-in-out;
224 |     }
225 |     &:hover::before {
226 |       height: 60%;
227 |     }
228 |   }
229 | 
230 |   .description {
231 |     display: flex;
232 |     min-height: 32px;
233 |     width: 100%;
234 |     max-width: 500px;
235 |     font-family: 'Georgia', serif;
236 |     font-size: 1.2rem;
237 |     white-space: nowrap;
238 |     text-overflow: ellipsis;
239 |     align-items: center;
240 |     justify-content: center;
241 |     transition: all 0.3s ease-in-out;
242 | 
243 |     &::before,
244 |     &::after {
245 |       content: '"';
246 |       font-size: 1.5em;
247 |       color: #999;
248 |       margin: 0 10px;
249 |     }
250 | 
251 |     p {
252 |       margin: 0;
253 |       white-space: nowrap;
254 |       overflow: hidden;
255 |       text-overflow: ellipsis;
256 |     }
257 |   }
258 | 
259 |   .contact-section {
260 |     display: flex;
261 |     justify-content: center;
262 |     gap: 20px;
263 |     padding: 5px 10px;
264 |     border: 1px solid transparent;
265 |     border-radius: var(--border-radius);
266 |     transition: all 0.3s ease-in-out;
267 | 
268 |     .contact-item {
269 |       color: var(--text-color);
270 |       font-size: var(--icon-size);
271 |       cursor: pointer;
272 |       transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
273 |       position: relative;
274 | 
275 |       .fas.fa-moon {
276 |         width: 20px;
277 |         height: 20px;
278 |         display: inline-flex;
279 |         justify-content: center;
280 |         align-items: center;
281 |       }
282 | 
283 |       &:hover {
284 |         transform: translateY(-5px) rotate(10deg);
285 |         color: var(--hover-color);
286 | 
287 |         .tooltip {
288 |           opacity: 1;
289 |           transform: translate(-50%, 0);
290 |         }
291 |       }
292 | 
293 |       .tooltip {
294 |         position: absolute;
295 |         bottom: 100%;
296 |         left: 50%;
297 |         transform: translate(-50%, 10px);
298 |         opacity: 0;
299 |         transition: opacity 0.3s ease, transform 0.3s ease;
300 |         white-space: nowrap;
301 |         pointer-events: none;
302 |       }
303 |     }
304 | 
305 |     &:hover {
306 |       backdrop-filter: blur(10px);
307 |       border: 1px solid var(--border-color);
308 |       box-shadow: 0 2px 8px var(--shadow-color);
309 |       background-color: rgba(var(--background-color-rgb), 0.2);
310 |     }
311 |   }
312 | 
313 |   .overlay {
314 |     position: fixed;
315 |     top: 0;
316 |     left: 0;
317 |     width: 100%;
318 |     height: 100%;
319 |     background: rgba(0, 0, 0, 0.6);
320 |     display: flex;
321 |     justify-content: center;
322 |     align-items: center;
323 |     z-index: 1000;
324 |   }
325 | 
326 |   .fade-enter-active,
327 |   .fade-leave-active {
328 |     transition: all 0.3s ease-out;
329 |     
330 |     .modal-content {
331 |       transition: all 0.3s ease-out;
332 |     }
333 |   }
334 | 
335 |   .fade-enter-from,
336 |   .fade-leave-to {
337 |     opacity: 0;
338 |     
339 |     .modal-content {
340 |       transform: translateY(30px) scale(0.8);
341 |       opacity: 0;
342 |     }
343 |   }
344 | 
345 |   .fade-enter-to,
346 |   .fade-leave-from {
347 |     opacity: 1;
348 |     
349 |     .modal-content {
350 |       transform: translateY(0) scale(1);
351 |       opacity: 1;
352 |     }
353 |   }
354 | 
355 |   .qr-image {
356 |     width: 300px;
357 |     height: 300px;
358 |     background: white;
359 |     padding: 20px;
360 |     border-radius: var(--border-radius);
361 |     box-shadow: 0 4px 8px var(--shadow-color);
362 |     transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
363 |     &:hover {
364 |       transform: scale(1.03) translateY(-5px);
365 |       box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
366 |     }
367 |   }
368 | }
369 | 
370 | @media screen and (max-width: 768px) {
371 |   .content {
372 |     gap: 15px;
373 |   }
374 |   .content .user-profile-container {
375 |     flex-direction: column;
376 |     gap: 0;
377 |   }
378 | 
379 |   h1 {
380 |     font-size: 1.5em;
381 |   }
382 | }
383 | </style>


--------------------------------------------------------------------------------
/src/style.less:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --border-radius: 10px;
  3 |   --text-size: 16px;
  4 |   --icon-size: 20px;
  5 |   --text-color: #333;
  6 |   --background-color: #eee;
  7 |   --background-color-rgb: 238, 238, 238;
  8 |   --shadow-color: rgba(0, 0, 0, 0.2);
  9 |   --border-color: rgb(193 193 193 / 50%);
 10 |   --hover-link-color: #ffcc00;
 11 |   --hover-other-color:  #555;
 12 |   --background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgMTkyIDE5Mic+PHBhdGggZmlsbD0nI2QzZDNkMycgZmlsbC1vcGFjaXR5PScwLjUnIGQ9J00xOTIgMTV2MmExMSAxMSAwIDAgMC0xMSAxMWMwIDEuOTQgMS4xNiA0Ljc1IDIuNTMgNi4xMWwyLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxIDEuMjIgNy41NmwtLjQzLjg0YTguMDggOC4wOCAwIDAgMS02LjY2IDQuMTNIMTQ1djM1LjAyYTYuMSA2LjEgMCAwIDAgMy4wMyA0Ljg3bC44NC40M2MxLjU4Ljc5IDQgLjQgNS4yNC0uODVsMi4zNi0yLjM2YTEyLjA0IDEyLjA0IDAgMCAxIDcuNTEtMy4xMSAxMyAxMyAwIDEgMSAuMDIgMjYgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNhNi4xIDYuMSAwIDAgMC0zLjAzIDQuODdWMTQzaDM1LjAyYTguMDggOC4wOCAwIDAgMSA2LjY2IDQuMTNsLjQzLjg0YTYuOTEgNi45MSAwIDAgMS0xLjIyIDcuNTZsLTIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxODEgMTY0YTExIDExIDAgMCAwIDExIDExdjJhMTMgMTMgMCAwIDEtMTMtMTMgMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRhNi4xIDYuMSAwIDAgMC00Ljg3LTMuMDNIMTQ1djM1LjAyYTguMDggOC4wOCAwIDAgMS00LjEzIDYuNjZsLS44NC40M2E2LjkxIDYuOTEgMCAwIDEtNy41Ni0xLjIybC0yLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTI0IDE4MWExMSAxMSAwIDAgMC0xMSAxMWgtMmExMyAxMyAwIDAgMSAxMy0xM2MyLjQ3IDAgNS43OSAxLjM3IDcuNTMgMy4xMWwyLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwIDUuMjQuODVsLjg0LS40M2E2LjEgNi4xIDAgMCAwIDMuMDMtNC44N1YxNDVoLTM1LjAyYTguMDggOC4wOCAwIDAgMS02LjY2LTQuMTNsLS40My0uODRhNi45MSA2LjkxIDAgMCAxIDEuMjItNy41NmwyLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTA3IDEyNGExMSAxMSAwIDAgMC0yMiAwYzAgMS45NCAxLjE2IDQuNzUgMi41MyA2LjExbDIuMzYgMi4zNmE2LjkzIDYuOTMgMCAwIDEgMS4yMiA3LjU2bC0uNDMuODRhOC4wOCA4LjA4IDAgMCAxLTYuNjYgNC4xM0g0OXYzNS4wMmE2LjEgNi4xIDAgMCAwIDMuMDMgNC44N2wuODQuNDNjMS41OC43OSA0IC40IDUuMjQtLjg1bDIuMzYtMi4zNmExMi4wNCAxMi4wNCAwIDAgMSA3LjUxLTMuMTFBMTMgMTMgMCAwIDEgODEgMTkyaC0yYTExIDExIDAgMCAwLTExLTExYy0xLjk0IDAtNC43NSAxLjE2LTYuMTEgMi41M2wtMi4zNiAyLjM2YTYuOTMgNi45MyAwIDAgMS03LjU2IDEuMjJsLS44NC0uNDNhOC4wOCA4LjA4IDAgMCAxLTQuMTMtNi42NlYxNDVIMTEuOThhNi4xIDYuMSAwIDAgMC00Ljg3IDMuMDNsLS40My44NGMtLjc5IDEuNTgtLjQgNCAuODUgNS4yNGwyLjM2IDIuMzZhMTIuMDQgMTIuMDQgMCAwIDEgMy4xMSA3LjUxQTEzIDEzIDAgMCAxIDAgMTc3di0yYTExIDExIDAgMCAwIDExLTExYzAtMS45NC0xLjE2LTQuNzUtMi41My02LjExbC0yLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxLTEuMjItNy41NmwuNDMtLjg0YTguMDggOC4wOCAwIDAgMSA2LjY2LTQuMTNINDd2LTM1LjAyYTYuMSA2LjEgMCAwIDAtMy4wMy00Ljg3bC0uODQtLjQzYy0xLjU5LS44LTQtLjQtNS4yNC44NWwtMi4zNiAyLjM2QTEyIDEyIDAgMCAxIDI4IDEwOWExMyAxMyAwIDEgMSAwLTI2YzIuNDcgMCA1Ljc5IDEuMzcgNy41MyAzLjExbDIuMzYgMi4zNmE0Ljk0IDQuOTQgMCAwIDAgNS4yNC44NWwuODQtLjQzQTYuMSA2LjEgMCAwIDAgNDcgODQuMDJWNDlIMTEuOThhOC4wOCA4LjA4IDAgMCAxLTYuNjYtNC4xM2wtLjQzLS44NGE2LjkxIDYuOTEgMCAwIDEgMS4yMi03LjU2bDIuMzYtMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxMSAyOCAxMSAxMSAwIDAgMCAwIDE3di0yYTEzIDEzIDAgMCAxIDEzIDEzYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NEE2LjEgNi4xIDAgMCAwIDExLjk4IDQ3SDQ3VjExLjk4YTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCA2OCAxMSAxMSAxMSAwIDAgMCA3OSAwaDJhMTMgMTMgMCAwIDEtMTMgMTMgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNBNi4xIDYuMSAwIDAgMCA0OSAxMS45OFY0N2gzNS4wMmE4LjA4IDguMDggMCAwIDEgNi42NiA0LjEzbC40My44NGE2LjkxIDYuOTEgMCAwIDEtMS4yMiA3LjU2bC0yLjM2IDIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgODUgNjhhMTEgMTEgMCAwIDAgMjIgMGMwLTEuOTQtMS4xNi00Ljc1LTIuNTMtNi4xMWwtMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMS0xLjIyLTcuNTZsLjQzLS44NGE4LjA4IDguMDggMCAwIDEgNi42Ni00LjEzSDE0M1YxMS45OGE2LjEgNi4xIDAgMCAwLTMuMDMtNC44N2wtLjg0LS40M2MtMS41OS0uOC00LS40LTUuMjQuODVsLTIuMzYgMi4zNkExMiAxMiAwIDAgMSAxMjQgMTNhMTMgMTMgMCAwIDEtMTMtMTNoMmExMSAxMSAwIDAgMCAxMSAxMWMxLjk0IDAgNC43NS0xLjE2IDYuMTEtMi41M2wyLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxIDcuNTYtMS4yMmwuODQuNDNhOC4wOCA4LjA4IDAgMCAxIDQuMTMgNi42NlY0N2gzNS4wMmE2LjEgNi4xIDAgMCAwIDQuODctMy4wM2wuNDMtLjg0Yy44LTEuNTkuNC00LS44NS01LjI0bC0yLjM2LTIuMzZBMTIgMTIgMCAwIDEgMTc5IDI4YTEzIDEzIDAgMCAxIDEzLTEzek04NC4wMiAxNDNhNi4xIDYuMSAwIDAgMCA0Ljg3LTMuMDNsLjQzLS44NGMuOC0xLjU5LjQtNC0uODUtNS4yNGwtMi4zNi0yLjM2QTEyIDEyIDAgMCAxIDgzIDEyNGExMyAxMyAwIDEgMSAyNiAwYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NGE2LjEgNi4xIDAgMCAwIDQuODcgMy4wM0gxNDN2LTM1LjAyYTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxNjQgMTA3YTExIDExIDAgMCAwIDAtMjJjLTEuOTQgMC00Ljc1IDEuMTYtNi4xMSAyLjUzbC0yLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxLTcuNTYgMS4yMmwtLjg0LS40M2E4LjA4IDguMDggMCAwIDEtNC4xMy02LjY2VjQ5aC0zNS4wMmE2LjEgNi4xIDAgMCAwLTQuODcgMy4wM2wtLjQzLjg0Yy0uNzkgMS41OC0uNCA0IC44NSA1LjI0bDIuMzYgMi4zNmExMi4wNCAxMi4wNCAwIDAgMSAzLjExIDcuNTFBMTMgMTMgMCAxIDEgODMgNjhhMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRBNi4xIDYuMSAwIDAgMCA4NC4wMiA0OUg0OXYzNS4wMmE4LjA4IDguMDggMCAwIDEtNC4xMyA2LjY2bC0uODQuNDNhNi45MSA2LjkxIDAgMCAxLTcuNTYtMS4yMmwtMi4zNi0yLjM2QTEwLjA2IDEwLjA2IDAgMCAwIDI4IDg1YTExIDExIDAgMCAwIDAgMjJjMS45NCAwIDQuNzUtMS4xNiA2LjExLTIuNTNsMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMSA3LjU2LTEuMjJsLjg0LjQzYTguMDggOC4wOCAwIDAgMSA0LjEzIDYuNjZWMTQzaDM1LjAyeic+PC9wYXRoPjwvc3ZnPg==);
 13 | }
 14 | 
 15 | .dark-mode {
 16 |   --text-color: #eee;
 17 |   --background-color: #333;
 18 |   --background-color-rgb: 51, 51, 51;
 19 |   --shadow-color: rgba(255, 255, 255, 0.2);
 20 |   --border-color: rgb(131 131 131 / 50%);
 21 |   --background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgMTkyIDE5Mic+PHBhdGggZmlsbD0nIzVhNWE1YScgZmlsbC1vcGFjaXR5PScwLjUnIGQ9J00xOTIgMTV2MmExMSAxMSAwIDAgMC0xMSAxMWMwIDEuOTQgMS4xNiA0Ljc1IDIuNTMgNi4xMWwyLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxIDEuMjIgNy41NmwtLjQzLjg0YTguMDggOC4wOCAwIDAgMS02LjY2IDQuMTNIMTQ1djM1LjAyYTYuMSA2LjEgMCAwIDAgMy4wMyA0Ljg3bC44NC40M2MxLjU4Ljc5IDQgLjQgNS4yNC0uODVsMi4zNi0yLjM2YTEyLjA0IDEyLjA0IDAgMCAxIDcuNTEtMy4xMSAxMyAxMyAwIDEgMSAuMDIgMjYgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNhNi4xIDYuMSAwIDAgMC0zLjAzIDQuODdWMTQzaDM1LjAyYTguMDggOC4wOCAwIDAgMSA2LjY2IDQuMTNsLjQzLjg0YTYuOTEgNi45MSAwIDAgMS0xLjIyIDcuNTZsLTIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxODEgMTY0YTExIDExIDAgMCAwIDExIDExdjJhMTMgMTMgMCAwIDEtMTMtMTMgMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRhNi4xIDYuMSAwIDAgMC00Ljg3LTMuMDNIMTQ1djM1LjAyYTguMDggOC4wOCAwIDAgMS00LjEzIDYuNjZsLS44NC40M2E2LjkxIDYuOTEgMCAwIDEtNy41Ni0xLjIybC0yLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTI0IDE4MWExMSAxMSAwIDAgMC0xMSAxMWgtMmExMyAxMyAwIDAgMSAxMy0xM2MyLjQ3IDAgNS43OSAxLjM3IDcuNTMgMy4xMWwyLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwIDUuMjQuODVsLjg0LS40M2E2LjEgNi4xIDAgMCAwIDMuMDMtNC44N1YxNDVoLTM1LjAyYTguMDggOC4wOCAwIDAgMS02LjY2LTQuMTNsLS40My0uODRhNi45MSA2LjkxIDAgMCAxIDEuMjItNy41NmwyLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTA3IDEyNGExMSAxMSAwIDAgMC0yMiAwYzAgMS45NCAxLjE2IDQuNzUgMi41MyA2LjExbDIuMzYgMi4zNmE2LjkzIDYuOTMgMCAwIDEgMS4yMiA3LjU2bC0uNDMuODRhOC4wOCA4LjA4IDAgMCAxLTYuNjYgNC4xM0g0OXYzNS4wMmE2LjEgNi4xIDAgMCAwIDMuMDMgNC44N2wuODQuNDNjMS41OC43OSA0IC40IDUuMjQtLjg1bDIuMzYtMi4zNmExMi4wNCAxMi4wNCAwIDAgMSA3LjUxLTMuMTFBMTMgMTMgMCAwIDEgODEgMTkyaC0yYTExIDExIDAgMCAwLTExLTExYy0xLjk0IDAtNC43NSAxLjE2LTYuMTEgMi41M2wtMi4zNiAyLjM2YTYuOTMgNi45MyAwIDAgMS03LjU2IDEuMjJsLS44NC0uNDNhOC4wOCA4LjA4IDAgMCAxLTQuMTMtNi42NlYxNDVIMTEuOThhNi4xIDYuMSAwIDAgMC00Ljg3IDMuMDNsLS40My44NGMtLjc5IDEuNTgtLjQgNCAuODUgNS4yNGwyLjM2IDIuMzZhMTIuMDQgMTIuMDQgMCAwIDEgMy4xMSA3LjUxQTEzIDEzIDAgMCAxIDAgMTc3di0yYTExIDExIDAgMCAwIDExLTExYzAtMS45NC0xLjE2LTQuNzUtMi41My02LjExbC0yLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxLTEuMjItNy41NmwuNDMtLjg0YTguMDggOC4wOCAwIDAgMSA2LjY2LTQuMTNINDd2LTM1LjAyYTYuMSA2LjEgMCAwIDAtMy4wMy00Ljg3bC0uODQtLjQzYy0xLjU5LS44LTQtLjQtNS4yNC44NWwtMi4zNiAyLjM2QTEyIDEyIDAgMCAxIDI4IDEwOWExMyAxMyAwIDEgMSAwLTI2YzIuNDcgMCA1Ljc5IDEuMzcgNy41MyAzLjExbDIuMzYgMi4zNmE0Ljk0IDQuOTQgMCAwIDAgNS4yNC44NWwuODQtLjQzQTYuMSA2LjEgMCAwIDAgNDcgODQuMDJWNDlIMTEuOThhOC4wOCA4LjA4IDAgMCAxLTYuNjYtNC4xM2wtLjQzLS44NGE2LjkxIDYuOTEgMCAwIDEgMS4yMi03LjU2bDIuMzYtMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxMSAyOCAxMSAxMSAwIDAgMCAwIDE3di0yYTEzIDEzIDAgMCAxIDEzIDEzYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NEE2LjEgNi4xIDAgMCAwIDExLjk4IDQ3SDQ3VjExLjk4YTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCA2OCAxMSAxMSAxMSAwIDAgMCA3OSAwaDJhMTMgMTMgMCAwIDEtMTMgMTMgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNBNi4xIDYuMSAwIDAgMCA0OSAxMS45OFY0N2gzNS4wMmE4LjA4IDguMDggMCAwIDEgNi42NiA0LjEzbC40My44NGE2LjkxIDYuOTEgMCAwIDEtMS4yMiA3LjU2bC0yLjM2IDIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgODUgNjhhMTEgMTEgMCAwIDAgMjIgMGMwLTEuOTQtMS4xNi00Ljc1LTIuNTMtNi4xMWwtMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMS0xLjIyLTcuNTZsLjQzLS44NGE4LjA4IDguMDggMCAwIDEgNi42Ni00LjEzSDE0M1YxMS45OGE2LjEgNi4xIDAgMCAwLTMuMDMtNC44N2wtLjg0LS40M2MtMS41OS0uOC00LS40LTUuMjQuODVsLTIuMzYgMi4zNkExMiAxMiAwIDAgMSAxMjQgMTNhMTMgMTMgMCAwIDEtMTMtMTNoMmExMSAxMSAwIDAgMCAxMSAxMWMxLjk0IDAgNC43NS0xLjE2IDYuMTEtMi41M2wyLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxIDcuNTYtMS4yMmwuODQuNDNhOC4wOCA4LjA4IDAgMCAxIDQuMTMgNi42NlY0N2gzNS4wMmE2LjEgNi4xIDAgMCAwIDQuODctMy4wM2wuNDMtLjg0Yy44LTEuNTkuNC00LS44NS01LjI0bC0yLjM2LTIuMzZBMTIgMTIgMCAwIDEgMTc5IDI4YTEzIDEzIDAgMCAxIDEzLTEzek04NC4wMiAxNDNhNi4xIDYuMSAwIDAgMCA0Ljg3LTMuMDNsLjQzLS44NGMuOC0xLjU5LjQtNC0uODUtNS4yNGwtMi4zNi0yLjM2QTEyIDEyIDAgMCAxIDgzIDEyNGExMyAxMyAwIDEgMSAyNiAwYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NGE2LjEgNi4xIDAgMCAwIDQuODcgMy4wM0gxNDN2LTM1LjAyYTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxNjQgMTA3YTExIDExIDAgMCAwIDAtMjJjLTEuOTQgMC00Ljc1IDEuMTYtNi4xMSAyLjUzbC0yLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxLTcuNTYgMS4yMmwtLjg0LS40M2E4LjA4IDguMDggMCAwIDEtNC4xMy02LjY2VjQ5aC0zNS4wMmE2LjEgNi4xIDAgMCAwLTQuODcgMy4wM2wtLjQzLjg0Yy0uNzkgMS41OC0uNCA0IC44NSA1LjI0bDIuMzYgMi4zNmExMi4wNCAxMi4wNCAwIDAgMSAzLjExIDcuNTFBMTMgMTMgMCAxIDEgODMgNjhhMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRBNi4xIDYuMSAwIDAgMCA4NC4wMiA0OUg0OXYzNS4wMmE4LjA4IDguMDggMCAwIDEtNC4xMyA2LjY2bC0uODQuNDNhNi45MSA2LjkxIDAgMCAxLTcuNTYtMS4yMmwtMi4zNi0yLjM2QTEwLjA2IDEwLjA2IDAgMCAwIDI4IDg1YTExIDExIDAgMCAwIDAgMjJjMS45NCAwIDQuNzUtMS4xNiA2LjExLTIuNTNsMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMSA3LjU2LTEuMjJsLjg0LjQzYTguMDggOC4wOCAwIDAgMSA0LjEzIDYuNjZWMTQzaDM1LjAyeic+PC9wYXRoPjwvc3ZnPg==);
 22 | }
 23 | 
 24 | * {
 25 |   -webkit-user-select: none;
 26 |   -moz-user-select: none;
 27 |   -ms-user-select: none;
 28 |   user-select: none;
 29 |   box-sizing: border-box;
 30 | }
 31 | 
 32 | a {
 33 |     text-decoration: none;
 34 | }
 35 | 
 36 | ul {
 37 |   padding: 0;
 38 |   list-style: none;
 39 |   margin: 0;
 40 | }
 41 | 
 42 | body, html {
 43 |   height: 100%;
 44 |   margin: 0;
 45 |   display: flex;
 46 |   flex-direction: column;
 47 |   font-family: 'HarmonyOS_Regular', 'MiSans', 'HarmonyOS Sans SC', sans-serif;
 48 |   color: var(--text-color);
 49 |   overflow: hidden;
 50 | }
 51 | 
 52 | body.dark-mode {
 53 |   filter: brightness(0.7);
 54 | }
 55 | 
 56 | /* App 页面 */
 57 | #app {
 58 |   flex: 1;
 59 |   display: flex;
 60 |   flex-direction: column;
 61 |   padding: 0 10px;
 62 | }
 63 | 
 64 | .background {
 65 |   position: fixed;
 66 |   top: 0;
 67 |   left: 0;
 68 |   width: 100vw;
 69 |   height: 100vh;
 70 |   display: flex;
 71 |   align-items: center;
 72 |   justify-content: center;
 73 |   z-index: -2;
 74 |   background: var(--background-color) var(--background-image) repeat;
 75 | }
 76 | 
 77 | 
 78 | footer {
 79 |   padding: 10px 0;
 80 |   display: flex;
 81 |   justify-content: center;
 82 |   margin: 0;
 83 |   font-size: var(--text-size);
 84 |   gap: 8px;
 85 | 
 86 |   a {
 87 |     color: var(--text-color);
 88 |     transition: all 0.3s ease-in-out;
 89 |     &:hover {
 90 |       color: var(--hover-link-color);
 91 |     }
 92 |   }
 93 | }
 94 | 
 95 | .police_link {
 96 |   display: flex;
 97 |   align-items: center;
 98 | 
 99 |   .police_img {
100 |     display: inline-block;
101 |     width: 20px;
102 |     height: 20px;
103 |     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAACglBMVEUAAAD89dn+/ODz6KrcrGreqFfYrn3x16769M3oxnyaaVzhs2ifaFXbrGLkvFnpyF7v2X/kwm3cp1nhsGfqw3rntVzjrFPt3oDjvGnbnFGti3q0lH7ktoLryXn9v1T4znr/74bnvGz034v+2I/ktoDz6ZLkwY/Dfz7buoftzYbq2IPr0pjs3bLv6KPRrnbKhFv/+dDZr4Lx38f/+cH/95f42oL7/97s2Y3++uzTk3AAAXgCAWbmulrdmUXWHRcBAm7uzWbpwmLsxl3ktV3qvFr/0ljmwFHksE7fo0raSijXPSDWAgjPAAJrdoeUj4EAAICRiXb143Pyy27w1Gz+z2XtymH/217qyVy7jluTeFrrwFfislP+xVJRNlHpuFDpsErVkEbysETajkPpgj7ThT3ilDvXdTg5FDjdhTXtcTDWZTC7TCbuXiPTOCLJPR/TLhzJJxP9LA+0Bw/QFg2Ej5kcPpdyhZSptJEACJFpfo4AG44XMInFvYfTvIejmYRyeoJzdoK9un7FrnwAEHp8enny2HjWwHjKtnhcX3jYzHfu2HWsonPNwnH70m9WTm8AAW//723pym3dtmm0o2ZeWWb/4mPtwmJuYmL/vmB5ZGAMAF2njVn4xFjYnli0mVjiqVfyyVbmtlbXkVPlvFLNrFKjfVLuvlBgHlDsuU9ODk7/2E02Gk3jqkqEaUr/tUngjkf7n0b6xERCJETdn0K1gD/ooD3Ulj3TZT3WjjzOeDqBWDr3pDlMADnbbTf2gjbkbzaTYDZpAjbplzTEazPXXzOeXzDMPi38jizJWSrVSCrzfCjVdCjTQCbFUiTlYCPiRh7SIRrRDBG/ABHBDAvEGArJAAJrcyAdAAAAOnRSTlMAGghC4MasaVv7+/n39fTw7Ozr5+bk5OHg0tHLx8TDwb68urKxq5+cmJWTjIN8b11MSEFBNTApJyEUZZQtrgAAAW1JREFUGNNigAJGdmkpdkYGZGDMxnN019qlXGwGCDGmiPQDh89lTupOj2CCa5WPjTzlnevps6E8Vhkqasa9esrxC3b5nsWXZ/huEjEHC5oE+M/O8c63u5h7NafRPsAUrFnOz2rLeW87Ly87H6/O/hYFC6Cg3u46/3n7fE5sc1tfnNlj7+eqABTUONRUMX1jdl5W2t6kqTOtahLVgIIsGUGl9tnJJ/OOnNm/3bq6NZUFKAgY7851ZVZFhVln05ILL1lXxqRIAAVVNofUVu0pulJQ4HnsYHN7b7QmUFAmaX5IiZW19crls6yt6sOc18gCBTnnLkoNaov0nbyko69h2lZbdwGgIMdij4TTc8JWxSS6TnDNSMgOZ2YAifK7pexwcHG3cQi2tZ0oCBZjMBIOd1oY5eQY6uJhE+woBBFUCuxydnZxd4yz9bCxcQhUhYSmFl/cgmXxK+KjnNxCxXVhAWqpr84qKSbKqqhtCOYDALPYc2hoS0J5AAAAAElFTkSuQmCC");
104 |   }
105 | }
106 | 
107 | @media screen and (max-width: 768px) {
108 |   .police_link {
109 |     display: none;
110 |   }
111 | }


--------------------------------------------------------------------------------