hexo-afdian-plugin
Version:
爱发电插件，用于展示爱发电赞助信息
228 lines (212 loc) • 10 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hexo爱发电插件演示 - 顶部图片样式</title>
<link rel="stylesheet" href="../assets/afdian.css">
<style>
body {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background-color: #f7f9fe;
margin: 0;
padding: 0;
}
.header {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 20px;
text-align: center;
}
.header h1 {
margin: 0;
color: #333;
font-size: 24px;
}
.header p {
margin: 10px 0 0;
color: #666;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
box-sizing: border-box;
}
.info-box {
background-color: #f0f7ff;
border: 1px solid #d0e3ff;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
.info-box h3 {
margin-top: 0;
color: #0066cc;
}
.top-image {
width: 100%;
height: 200px;
background-image: url('https://picsum.photos/1200/200');
background-size: cover;
background-position: center;
border-radius: 12px;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.header h1 {
font-size: 20px;
}
.container {
padding: 0 15px;
}
.top-image {
height: 150px;
}
}
@media screen and (max-width: 480px) {
.top-image {
height: 120px;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Hexo爱发电插件演示 - 顶部图片样式</h1>
<p>展示爱发电赞助信息的Hexo插件</p>
</div>
<div class="container">
<div class="info-box">
<h3>关于此演示</h3>
<p>这是Hexo爱发电插件的顶部图片样式演示页面，展示了带有顶部图片的布局。实际使用时，赞助者数据将通过爱发电API动态获取。</p>
</div>
<div class="nav-tabs">
<a href="index.html" class="nav-tab">默认样式</a>
<a href="style-top-image.html" class="nav-tab active">顶部图片样式</a>
<a href="style-scroll.html" class="nav-tab">滚动样式</a>
<a href="style-shop.html" class="nav-tab">商品展示样式</a>
</div>
<div class="afdian-container">
<div id="about-page">
<div class="top-image"></div>
<div class="author-content">
<div class="author-content-item single reward" id="about-reward">
<div class="author-content-item-tips">致谢</div>
<span class="author-content-item-title">感谢我的赞赏者们</span>
<div class="author-content-item-description">
感谢赞赏的人，因为你们，让我感受到写博客这件事情能够给你们创造价值。这会让我在这条路上走得更远。
</div>
<div class="about-reward">
<div id="con"></div>
<div id="TA-con" onclick="alert('这是演示页面，点击后将跳转到您的爱发电主页')">
<div id="text-con">
<div id="linght"></div>
<div id="TA">赞赏作者</div>
</div>
</div>
<div id="tube-con">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#e5e9ef"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg>
<div id="mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#f25d8e"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg>
</div>
<div id="orange-mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#ffd52b"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg>
</div>
<p id="people">共<b>3</b>人</p>
</div>
</div>
<div class="reward-list-all">
<!-- 示例赞助者数据 -->
<div class="reward-list-item" onclick="alert('这是演示页面，点击后将跳转到赞助者主页')">
<div>
<div>
<div class="reward-list-item-avatar">
<img alt="赞助者1" src="https://via.placeholder.com/100" onerror="this.src='../static/images/default-avatar.svg'; this.onerror=null;">
</div>
<div style="z-index:20;float: left;" class="reward-list-item-avatar-group">
<div class="reward-list-item-name" title="赞助者1">赞助者1</div>
</div>
</div>
<div class="reward-list-bottom-group">
<div class="reward-list-item-money">
¥ <b>50</b>
</div>
<time class="datatime reward-list-item-time">2023-05-15</time>
</div>
</div>
</div>
<div class="reward-list-item" onclick="alert('这是演示页面，点击后将跳转到赞助者主页')">
<div>
<div>
<div class="reward-list-item-avatar">
<img alt="赞助者2" src="https://via.placeholder.com/100" onerror="this.src='../static/images/default-avatar.svg'; this.onerror=null;">
</div>
<div style="z-index:20;float: left;" class="reward-list-item-avatar-group">
<div class="reward-list-item-name" title="赞助者2">赞助者2</div>
</div>
</div>
<div class="reward-list-bottom-group">
<div class="reward-list-item-money vip">
¥ <b>88</b>
</div>
<time class="datatime reward-list-item-time">2023-06-20</time>
</div>
</div>
</div>
<div class="reward-list-item" onclick="alert('这是演示页面，点击后将跳转到赞助者主页')">
<div>
<div>
<div class="reward-list-item-avatar">
<img alt="赞助者3" src="https://via.placeholder.com/100" onerror="this.src='../static/images/default-avatar.svg'; this.onerror=null;">
</div>
<div style="z-index:20;float: left;" class="reward-list-item-avatar-group">
<div class="reward-list-item-name" title="赞助者3">赞助者3</div>
</div>
</div>
<div class="reward-list-bottom-group">
<div class="reward-list-item-money vip">
¥ <b>100</b>
</div>
<time class="datatime reward-list-item-time">2023-07-05</time>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>