generated from dellevin/template
785 lines
28 KiB
HTML
785 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN"> <!-- 初始语言设为中文 -->
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="95后，全干开发者">
|
||
<meta name="keywords" content="Java,Spring,个人博客，微信小程序，博客">
|
||
<link rel="shortcut icon" href="./favicon.ico">
|
||
<!-- 百度统计 -->
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
(function () {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?d82271fd27b69793bf97f088c0a87fd4";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
<!-- 多语言 -->
|
||
<script src="./static/js/translations.js"></script>
|
||
<!-- umami统计 -->
|
||
<script defer src="https://umami.iletter.top/script.js"
|
||
data-website-id="ae6cd64c-5900-49c9-9c22-95cedc24a508"></script>
|
||
<!-- 今日诗词 -->
|
||
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
|
||
<script src="./static/js/axios.min.js"></script>
|
||
<script type="text/javascript">
|
||
if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
|
||
alert('朋友，上古浏览器不支持呢～');
|
||
}
|
||
</script>
|
||
<title data-i18n="page_title">白荼 - BAITU</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="letter-container">
|
||
<!-- 语言切换按钮 -->
|
||
<div class="lang-switch-container">
|
||
<img id="lang-switch-btn" src="./static/img/中文.png" alt="Switch Language" title="切换语言" />
|
||
</div>
|
||
|
||
<!-- 头部导航 -->
|
||
<div class="nav-tabs">
|
||
<div class="nav-tab active" data-tab="about"><span data-i18n="nav_about">关于我</span></div>
|
||
<div class="nav-tab" data-tab="website"><span data-i18n="nav_website">我的网站</span></div>
|
||
<div class="nav-tab" data-tab="tools"><span data-i18n="nav_tools">常用工具</span></div>
|
||
<div class="nav-tab" data-tab="games"><span data-i18n="nav_games">常玩游戏</span></div>
|
||
<div class="nav-tab" data-tab="memos"><span data-i18n="nav_memos">闲言碎语</span></div>
|
||
<div class="nav-tab" data-tab="contact"><span data-i18n="nav_contact">联系我</span></div>
|
||
</div>
|
||
|
||
<!-- 今日诗词 -->
|
||
<div id="jinrishici-sentence">正在加载今日诗词...</div>
|
||
|
||
<!-- 关于我内容 -->
|
||
<div class="tab-content active" id="about-content">
|
||
|
||
<div class="content-section about-me-content">
|
||
<h2 data-i18n="hello">你好</h2>
|
||
<p data-i18n="greeting">见字如面，展信舒颜。</p>
|
||
<p data-i18n="about_me_p1">我叫<strong
|
||
data-i18n="my_name">白荼</strong>，河北衡水人，土生土长的北方汉子，毕业于一所不知名的二本院校。信息管理与信息系统专业。
|
||
自学java、vue、linux、mysql、python等开发技术和一些软件逆向技术，同时还略懂些PS图片、PR视频、AE特效制作。做过系统，剪过网线，搞过plc耍过单片机，维护修理过服务器，运营过公众号和网站等等。可谓是会，但只会一点点。别人都觉得我是个大佬，其实我就是个小菜鸡。但我不会气馁，努力成为一个大佬的。正如永劫无间刘炼的一句话“天下万般之绝学，莫过于恒心。
|
||
”</p>
|
||
<p data-i18n="about_me_p2">
|
||
平时的爱好也就是玩玩游戏，看看书，刷刷动漫，不爱出门，肥宅一个。讨厌重复简单的工作，会想办法偷懒写写自己的顺手的小工具什么的，毕竟懒惰是我的生产力。我也经常混迹于各大网络论坛博客并在各个技术博主下面直呼"大佬666"、"大佬牛牛牛"。自己的博客也在断断续续中更新。主要是记录生活随笔和碰到的技术难题。
|
||
</p>
|
||
<p data-i18n="about_me_p3">本站秉承简约风格，采用纯HTML，Umami做网站底部的uv/pv
|
||
，闲言碎语模块使用memos接口。同时使用堡塔云WAF防护，nginx缓存加速网站静态资源。如果您有兴趣，可以直接下载本站的 <a
|
||
href="https://gitea.iletter.top/dellevin/BaiTu-homepage"
|
||
target="_blank">https://gitea.iletter.top/dellevin/BaiTu-homepage </a>并使用。</p>
|
||
<p data-i18n="about_me_p4">作为一个99年的码农，很庆幸我在工作之后还对技术有着极大的热情！如果你也对技术有着同样的兴趣，也很希望认识你！一同进步共同成长！</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 我的网站内容 -->
|
||
<div class="tab-content" id="website-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="my_website_h2">我的网站</h2>
|
||
|
||
<div class="website-links">
|
||
<h3 data-i18n="personal_blog_h3">个人博客</h3>
|
||
<a href="https://www.ittoolman.top/" target="_blank" data-i18n="personal_blog_link1"
|
||
data-i18n-attr="href">ittoolman.top - Github托管</a>
|
||
<a href="https://blog.iletter.top/" target="_blank" data-i18n="personal_blog_link2"
|
||
data-i18n-attr="href">blog.iletter.top - typecho用户的最后坚守</a>
|
||
<h3 data-i18n="online_apps_h3">在线应用</h3>
|
||
<a href="https://img.iletter.top/" target="_blank" data-i18n="online_app_link1"
|
||
data-i18n-attr="href">简单图床 - 图床工具</a>
|
||
<a href="https://gitea.iletter.top/" target="_blank" data-i18n="online_app_link2"
|
||
data-i18n-attr="href">Gitea - 私人git托管仓库</a>
|
||
<a href="http://openlist.iletter.top/" target="_blank" data-i18n="online_app_link3"
|
||
data-i18n-attr="href">OpenList - 在线云盘合集</a>
|
||
<a href="http://beszel.iletter.top/" target="_blank" data-i18n="online_app_link4"
|
||
data-i18n-attr="href">Beszel - 服务器监控</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系我内容 -->
|
||
<div class="tab-content" id="contact-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="contact_me_h2">联系我</h2>
|
||
<p data-i18n="contact_intro">欢迎通过以下方式与我联系：</p>
|
||
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<span class="contact-label" data-i18n="email_label">邮箱：</span>
|
||
<span>dellevin99@gmail.com</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<span class="contact-label" data-i18n="wechat_label">微信：</span>
|
||
<span>E-Levin_</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<span class="contact-label" data-i18n="qq_label">扣扣：</span>
|
||
<span>1754084631</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<span class="contact-label" data-i18n="address_label">地址：</span>
|
||
<span data-i18n="address_value">山东省·济南市·市中区</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 data-i18n="social_media_h3">社交媒体</h3>
|
||
<div class="website-links">
|
||
<a href="https://github.com/dellevin" target="_blank" data-i18n="social_link1"
|
||
data-i18n-attr="href">GitHub</a>
|
||
<a href="https://weibo.com/u/6094785109999999999" target="_blank" data-i18n="social_link2"
|
||
data-i18n-attr="href">微博</a>
|
||
<a href="https://www.zhihu.com/people/bing-xue-chen-xi-59" target="_blank" data-i18n="social_link3"
|
||
data-i18n-attr="href">知乎</a>
|
||
<a href="https://space.bilibili.com/403551212" target="_blank" data-i18n="social_link4"
|
||
data-i18n-attr="href">B站</a>
|
||
<a href="https://www.52pojie.cn/home.php?mod=space&uid=2059006" target="_blank"
|
||
data-i18n="social_link5" data-i18n-attr="href">52pojie</a>
|
||
</div>
|
||
<h3 data-i18n="leave_message_h3">留言</h3>
|
||
<p data-i18n="leave_message_p"><a href="https://blog.iletter.top/401.html" target="_blank"
|
||
data-i18n="leave_message_link" data-i18n-attr="href">点击此链接</a>去我的博客下面给我留言！</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工具内容 -->
|
||
<div class="tab-content" id="tools-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="my_tools_h2">我的工具</h2>
|
||
|
||
<div id="tools-container" class="tools-grid">
|
||
<div class="memo-loading" data-i18n="loading_tools">正在加载工具列表...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 游戏内容 -->
|
||
<div class="tab-content" id="games-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="my_games_h2">我常玩的游戏</h2>
|
||
<div id="games-container" class="games-grid">
|
||
<div class="memo-loading" data-i18n="loading_games">正在加载游戏列表...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 闲言碎语内容 -->
|
||
<div class="tab-content" id="memos-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="memos_h2">闲言碎语</h2>
|
||
<div id="memos-container" class="memos-container">
|
||
<div class="memo-loading" data-i18n="loading_memos">正在加载...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="letter-footer">
|
||
<span data-i18n="footer_text">我虽然是个废物,但我仍然选择用自己喜欢的方式度过自己的余生</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部版权信息和网站统计 - 在信纸外部 -->
|
||
<div id="footer-wrap">
|
||
<div class="webinfo">
|
||
<div class="webinfo-item">
|
||
<div class="webinfo-site-uv-name" data-i18n="visitor_count_label">本站访客数 :</div>
|
||
<div class="webinfo-site-uv-count" id="site_uv">-</div>
|
||
</div>
|
||
<div class="webinfo-item">
|
||
<div class="webinfo-site-name" data-i18n="visit_count_label">本站总访问量 :</div>
|
||
<div class="webinfo-site-pv-count" id="site_pv">-</div>
|
||
</div>
|
||
</div>
|
||
<div class="copyright" style="margin-top: 15px;"><a href="http://beian.miit.gov.cn"
|
||
target="_blank">冀ICP备2025122609号</a> ©<span>2020 - 2026</span> <span>Power BY</span> <span>Del Levin </span>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// ========== 语言切换逻辑 ==========
|
||
if (typeof translations === 'undefined') {
|
||
console.error('Translations file (translations.js) is not loaded!');
|
||
}
|
||
const switchButton = document.getElementById('lang-switch-btn');
|
||
const LANG_KEY = 'preferred_language';
|
||
function switchLanguage() {
|
||
let currentLang = localStorage.getItem(LANG_KEY) || 'zh';
|
||
let newLang = currentLang === 'zh' ? 'en' : 'zh';
|
||
|
||
localStorage.setItem(LANG_KEY, newLang);
|
||
updatePageContent(newLang);
|
||
updateLanguageIcon(newLang);
|
||
document.documentElement.lang = newLang;
|
||
|
||
location.reload();
|
||
}
|
||
|
||
function updatePageContent(lang) {
|
||
const elements = document.querySelectorAll('[data-i18n]');
|
||
elements.forEach(element => {
|
||
const key = element.getAttribute('data-i18n');
|
||
const translation = translations[lang][key];
|
||
if (translation !== undefined) {
|
||
// 检查是否需要更新 href 属性
|
||
if (element.hasAttribute('data-i18n-attr') && element.getAttribute('data-i18n-attr') === 'href') {
|
||
// 如果是 a 标签，更新 href 和内容
|
||
if (element.tagName.toLowerCase() === 'a') {
|
||
element.href = translation;
|
||
element.innerHTML = translation;
|
||
} else {
|
||
element.textContent = translation;
|
||
}
|
||
} else {
|
||
element.innerHTML = translation; // 使用 innerHTML 以保留 <strong> 等标签
|
||
}
|
||
} else {
|
||
console.warn(`Translation key '${key}' not found for language '${lang}'`);
|
||
}
|
||
});
|
||
}
|
||
function updateLanguageIcon(lang) {
|
||
if (lang === 'zh') {
|
||
switchButton.src = './static/img/中文.png';
|
||
switchButton.alt = 'Switch to English';
|
||
switchButton.title = '切换到英文';
|
||
} else {
|
||
switchButton.src = './static/img/英文.png';
|
||
switchButton.alt = 'Switch to Chinese';
|
||
switchButton.title = '切换到中文';
|
||
}
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const savedLang = localStorage.getItem(LANG_KEY) || 'zh';
|
||
updatePageContent(savedLang);
|
||
updateLanguageIcon(savedLang);
|
||
document.documentElement.lang = savedLang;
|
||
switchButton.addEventListener('click', switchLanguage);
|
||
});
|
||
|
||
|
||
|
||
// ==================== Umami Stats 请求 ====================
|
||
(async () => {
|
||
const webid = "ae6cd64c-5900-49c9-9c22-95cedc24a508";
|
||
const statsEndpoint =
|
||
"https://umami.iletter.top/api/websites/" + webid + "/stats";
|
||
const startAt = 1768060800000;
|
||
const endAt = Date.now(); // 当前时间的时间戳（毫秒）
|
||
const headers = {
|
||
Authorization:
|
||
"Bearer 3VvA8ETw0ahPhzuNNY+Zxi3agtfOBT2vNRbm0GcPqIyUhm7rExuwj8F8IwiQWcn/rOD2G/TnONPCFIvUECQYp6GuZRTnfOojki533vP/skqf0D6puOZDQQk8Y7ssihXnfyRu5naGhIoj1BCAC7S0D0RiYvzpSYF9zvZqvgxETrCbFazZsqUBolyJd8H2iZiM4Xx3VC+GnkZHZFgQfaaYUvm33a7CLM74PyFpPby63UExMjIPiLQRAOR2hs5wl5JAs5CTYUaq+QHCCz+tWgDQ4FPtIgoZoG8Ugnywv/YEEn1Jv9p3t8ge7m8ttThnPiZWw62PYPWQ3LpFh7nxX9jQX/Y/vaaAyacCoIP5J4VpiClA40GMMptZrThzEQjheegCilb9",
|
||
"Content-Type": "application/json",
|
||
};
|
||
const params = new URLSearchParams({
|
||
startAt: startAt.toString(),
|
||
endAt: endAt.toString(),
|
||
});
|
||
const requestUrl = `${statsEndpoint}?${params}`;
|
||
|
||
try {
|
||
const response = await fetch(requestUrl, {
|
||
method: "GET",
|
||
headers: headers,
|
||
});
|
||
if (!response.ok) {
|
||
// 如果响应不是 2xx，抛出错误
|
||
const errorText = await response.text();
|
||
throw new Error(
|
||
`HTTP error! status: ${response.status}, details: ${errorText}`
|
||
);
|
||
}
|
||
|
||
const data = await response.json();
|
||
// console.log('Umami Stats 请求成功:', data);
|
||
// 浏览量 data.pageviews.value
|
||
// 访问次数 data.visits.value
|
||
// 访客 data.visitors.value
|
||
document.getElementById("site_uv").textContent = JSON.stringify(
|
||
data.visitors.value
|
||
);
|
||
document.getElementById("site_pv").textContent = JSON.stringify(
|
||
data.pageviews.value
|
||
);
|
||
} catch (error) {
|
||
console.error("获取 Umami Stats 数据时发生错误:", error); // 控制台输出错误信息
|
||
}
|
||
})();
|
||
</script>
|
||
<script src="./static/js/game_my.js"></script>
|
||
<script src="./static/js/tools_my.js"></script>
|
||
<script src="./static/js/memos.js"></script>
|
||
<script>
|
||
// ==================== 标签切换功能 ====================
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const tabs = document.querySelectorAll('.nav-tab');
|
||
const contents = document.querySelectorAll('.tab-content');
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener('click', function () {
|
||
const tabId = this.getAttribute('data-tab');
|
||
// 移除所有激活状态
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
contents.forEach(c => c.classList.remove('active'));
|
||
// 添加当前激活状态
|
||
this.classList.add('active');
|
||
document.getElementById(`${tabId}-content`).classList.add('active');
|
||
});
|
||
});
|
||
// 点击我的工具函数
|
||
const toolsTab = document.querySelector('.nav-tab[data-tab="tools"]');
|
||
const toolsContent = document.getElementById('tools-content');
|
||
if (toolsTab && toolsContent) {
|
||
toolsTab.addEventListener('click', function () {
|
||
const hasRendered = toolsContent.querySelector('.tool-item') !== null;
|
||
if (!hasRendered) {
|
||
renderTools(toolsData);
|
||
}
|
||
});
|
||
} else {
|
||
console.warn("未找到“我的工具”标签或内容区域，将在页面加载时尝试渲染。");
|
||
renderTools(toolsData);
|
||
}
|
||
// 点击常玩游戏函数
|
||
const gamesTab = document.querySelector('.nav-tab[data-tab="games"]');
|
||
const gamesContent = document.getElementById('games-content');
|
||
if (gamesTab && gamesContent) {
|
||
gamesTab.addEventListener('click', function () {
|
||
const hasRendered = gamesContent.querySelector('.game-item') !== null;
|
||
if (!hasRendered) {
|
||
renderGames(gamesData);
|
||
}
|
||
});
|
||
} else {
|
||
console.warn("未找到“常玩游戏”标签或内容区域。");
|
||
renderGames(gamesData);
|
||
}
|
||
});
|
||
</script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Georgia', 'Times New Roman', 'STSong', serif;
|
||
line-height: 1.8;
|
||
color: #333;
|
||
padding: 20px;
|
||
background-position: 0 0, 10px 10px;
|
||
/* 信件背景（图片） */
|
||
background: #eeeeee url(./static/img/bj.png);
|
||
background-attachment: fixed;
|
||
background-repeat: repeat;
|
||
/* 信件背景（马赛克方格） */
|
||
/*background-color: #f0f0f0;*/
|
||
/*background-image:*/
|
||
/* linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%),*/
|
||
/* linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%);*/
|
||
/*background-size: 20px 20px;*/
|
||
}
|
||
|
||
.letter-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
padding: 40px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
/* 语言切换按钮样式 */
|
||
.lang-switch-container {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.lang-switch-container img {
|
||
width: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
opacity: 0.7;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.lang-switch-container img:hover {
|
||
opacity: 1.0;
|
||
}
|
||
|
||
/* 头部导航 */
|
||
.nav-tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.nav-tab {
|
||
padding: 15px 20px;
|
||
cursor: pointer;
|
||
border-bottom: 3px solid transparent;
|
||
transition: all 0.3s ease;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.nav-tab:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.nav-tab.active {
|
||
border-bottom-color: #333;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.tab-content {
|
||
display: none;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 信纸纹理效果 */
|
||
.letter-container {
|
||
background-image:
|
||
linear-gradient(transparent 29px, #f0f0f0 30px);
|
||
background-size: 100% 30px;
|
||
}
|
||
|
||
/* 通用内容样式 */
|
||
.content-section {
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.content-section h2 {
|
||
margin-bottom: 20px;
|
||
color: #222;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.content-section h3 {
|
||
margin: 25px 0 15px 0;
|
||
color: #444;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.content-section p {
|
||
margin-bottom: 15px;
|
||
text-align: justify;
|
||
}
|
||
|
||
/* 列表样式 */
|
||
.content-section ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.content-section li {
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.content-section li::before {
|
||
content: "▹";
|
||
color: #999;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
/* 联系方式 */
|
||
.contact-info {
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.contact-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.contact-label {
|
||
font-weight: bold;
|
||
color: #555;
|
||
}
|
||
|
||
/* 网站链接 */
|
||
.website-links a {
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
color: #666;
|
||
text-decoration: none;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.website-links a:hover {
|
||
color: #333;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 工具和游戏网格 */
|
||
.tools-grid,
|
||
.games-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.tool-item,
|
||
.game-item {
|
||
padding: 15px;
|
||
border: 1px solid #eee;
|
||
border-radius: 4px;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.tool-name,
|
||
.game-name {
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.tool-desc,
|
||
.game-desc {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 关于我页面特殊样式 */
|
||
.about-me-content {
|
||
text-align: justify;
|
||
}
|
||
|
||
.about-me-content p:first-child {
|
||
font-size: 18px;
|
||
font-style: italic;
|
||
color: #666;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.letter-container {
|
||
padding: 20px;
|
||
margin: 10px;
|
||
}
|
||
|
||
.nav-tabs {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.nav-tab {
|
||
padding: 10px 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tools-grid,
|
||
.games-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
/* 移动端调整语言按钮位置 */
|
||
.lang-switch-container {
|
||
top: 5px;
|
||
right: 5px;
|
||
}
|
||
}
|
||
|
||
/* 信纸底部页脚描述 */
|
||
.letter-footer {
|
||
text-align: center;
|
||
margin-top: 60px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #eee;
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 底部版权信息 - 在信纸外部 */
|
||
#footer-wrap {
|
||
max-width: 800px;
|
||
margin: 0 auto 20px auto;
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #999;
|
||
font-size: 12px;
|
||
background: white;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
background-image:
|
||
linear-gradient(transparent 29px, #f0f0f0 30px);
|
||
background-size: 100% 30px;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
#footer-wrap a {
|
||
color: #666;
|
||
text-decoration: none;
|
||
}
|
||
|
||
#footer-wrap a:hover {
|
||
color: #333;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
#footer-wrap img {
|
||
width: 50px;
|
||
vertical-align: middle;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* 今日诗词样式 */
|
||
#jinrishici-sentence {
|
||
position: absolute;
|
||
top: 111px;
|
||
right: 40px;
|
||
font-size: 14px;
|
||
font-style: italic;
|
||
color: #666;
|
||
text-align: right;
|
||
max-width: 300px;
|
||
}
|
||
|
||
/* 网站统计样式 */
|
||
.webinfo {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 30px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.webinfo-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
#jinrishici-sentence {
|
||
position: static;
|
||
text-align: center;
|
||
max-width: 100%;
|
||
margin-bottom: 20px;
|
||
padding: 10px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.webinfo {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
}
|
||
|
||
/* --- 新增的闲言碎语样式 --- */
|
||
.memos-container {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.memo-item {
|
||
background-color: #fafafa;
|
||
border: 1px solid #eee;
|
||
border-radius: 4px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.memo-date {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.memo-content {
|
||
margin-bottom: 8px;
|
||
word-break: break-word;
|
||
/* 防止长单词溢出 */
|
||
}
|
||
|
||
.memo-tags {
|
||
display: inline-block;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.memo-tag {
|
||
background-color: #e0e0e0;
|
||
color: #666;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.memo-pagination {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.memo-page-btn {
|
||
padding: 5px 10px;
|
||
border: 1px solid #ddd;
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.memo-page-btn:hover:not(.disabled) {
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.memo-page-btn.active {
|
||
background-color: #333;
|
||
color: white;
|
||
border-color: #333;
|
||
}
|
||
|
||
.memo-page-btn.disabled {
|
||
color: #ccc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.memo-loading,
|
||
.memo-error {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #999;
|
||
}
|
||
|
||
.memo-attachments {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
|
||
.memo-attachment-item {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.memo-attachment-image {
|
||
max-width: 100px;
|
||
max-height: 100px;
|
||
height: auto;
|
||
object-fit: cover;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* --- 新增的闲言碎语样式 END --- */
|
||
</style>
|
||
</body>
|
||
|
||
</html> |