1
---
2

3
const currentYear = new Date().getFullYear()
4
---
5

6
<footer class="fuwari-compatible-footer">
7
  <div class="footer-row">
8
    <span id="runningtime" class="footer-runtime"></span>
9
  </div>
10
  <div class="footer-row">
11
    <a class="badge-link" href="https://beian.miit.gov.cn/" target="_blank"
12
      onclick="event.preventDefault(); copyAndJump('桂ICP备2025069002号-1', this.href)">
13
      <img src="https://img.shields.io/badge/ICP备-桂ICP备2025069002号--1-blue" alt="ICP备案号">
14
    </a>
15
    <a class="badge-link" href="https://beian.mps.gov.cn/" target="_blank"
16
      onclick="event.preventDefault(); copyAndJump('浙公网安备33080202000712号', this.href)">
17
      <img src="https://img.shields.io/badge/公安备-浙公网安备33080202000712号-green" alt="公安备案号">
18
    </a>
19
  </div>
20
  <div class="footer-row">
21
    <a class="badge-link" href="https://icp.gov.moe/?keyword=20257776" target="_blank">
22
      <img src="https://img.shields.io/badge/萌ICP备-20257776号-ff69b4" alt="萌ICP备案号">
23
    </a>
24
    <a class="badge-link" href="https://icp.wudu.ltd/id.php?keyword=00000000" target="_blank">
25
      <img src="https://img.shields.io/badge/雾备-00000000号-7ed6df" alt="雾备备案号">
26
    </a>
27
    <a class="badge-link" href="https://icp.redcha.cn/beian/ICP-2025080132.html" target="_blank">
28
      <img src="https://img.shields.io/badge/茶ICP备-2025080132号-7474e1" alt="茶ICP备案号">
29
    </a>
30
  </div>
31
  <div class="footer-row powered-by">
32
    <span>本网站由</span>
33
    <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" rel="noopener">
34
      <img src="https://cdn.jsdelivr.net/gh/sjhxlll/fuwari-img@master/upyun_logos/%E5%8F%88%E6%8B%8D%E4%BA%91_logo2.png" alt="又拍云 Upyun" width="59" height="30" style="vertical-align:middle;" />
35
    </a>
36
    <span>提供 CDN 加速</span>
37
  </div>
38
</footer>
39

40
<script is:inline>
41

42
  function runtime() {
43
    // 记得把这里的日期改成你自己网站的上线日期哦！
44
    const t = new Date("07/21/2025 16:58:58"), n = new Date, s = n - t;
45
    const o = Math.floor(s / 1e3 / 86400), i = Math.floor(s / 1e3 % 86400 / 3600), a = Math.floor(s / 1e3 % 3600 / 60), r = Math.floor(s / 1e3 % 60);
46
    const el = document.getElementById("runningtime");
47
    if (el) el.innerHTML = `⭐本站已运行: ${o}天${i}小时${a}分${r}秒 ☁️`;
48
  }
49
  setInterval(runtime, 1000);
50

51
  function copyAndJump(text, url) {
52
    navigator.clipboard.writeText(text).then(() => {
53
      if (window.confirm('备案号已复制：' + text + '\n是否前往备案网站？')) {
54
        window.open(url, '_blank');
55
      }
56
    });
57
  }
58
</script>
59

60
<style>
61

62
  .fuwari-compatible-footer {
63
    width: 100%;
64
    padding: 2rem 1rem; /* 增加上下边距，看起来更舒服 */
65
    margin-top: 5rem; /* 和上面的内容拉开距离 */
66
    border-top: 1px solid var(--color-border); /* 使用主题的边框颜色，增加一条分割线 */
67

68
    /* 2. 颜色适配：全部使用fuwari主题的CSS变量 */
69
    background: transparent; /* 背景设为透明，它会自动使用页面的背景色 */
70
    color: var(--color-text-sub); /* 使用主题的次要文字颜色 */
71

72
    /* 3. 内容对齐 */
73
    display: flex;
74
    flex-direction: column;
75
    align-items: center;
76
    gap: 0.8rem; /* 调整行间距 */
77
    font-size: 0.875rem; /* 调整字体大小，更精致 */
78
    transition: all 0.3s; /* 保留一个平滑的过渡效果 */
79
  }
80

81
  .footer-row {
82
    display: flex;
83
    justify-content: center;
84
    align-items: center;
85
    gap: 12px;
86
    flex-wrap: wrap; /* 允许换行，适配移动端 */
87
    width: 100%;
88
  }
89

90
  .fuwari-compatible-footer .badge-link img {
91
    transition: all 0.25s ease-in-out;
92
    vertical-align: middle;
93
    height: 22px; /* 保持徽章大小 */
94
    border-radius: 4px; /* 加一点小圆角，更可爱 */
95
  }
96

97
  .fuwari-compatible-footer .badge-link:hover img {
98
    transform: translateY(-2px) scale(1.05); /* 鼠标悬浮时，稍微放大并上移一点点 */
99
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
100
  }
101

102
  .powered-by {
103
    display: flex;
104
    align-items: center;
105
    gap: 5px;
106
  }
107

108
  /* 链接颜色也用主题的强调色 */
109
  .powered-by a {
110
    color: var(--color-accent); /* 使用主题的强调色 */
111
    text-decoration: none;
112
    font-weight: bold;
113
    opacity: 0.8;
114
  }
115

116
  .powered-by a:hover {
117
    opacity: 1; /* 鼠标悬浮时不透明 */
118
  }
119

120
  .footer-runtime {
121
    font-weight: 500;
122
    white-space: nowrap;
123
    text-align: center;
124
  }
125

126
  /* 不再需要单独为暗黑模式写样式了，因为CSS变量会自动切换！*/
127
</style>