hexo-afdian-plugin
Version:
爱发电插件，用于展示爱发电赞助信息
277 lines (257 loc) • 13.3 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;
}
@media screen and (max-width: 768px) {
.header h1 {
font-size: 20px;
}
.container {
padding: 0 15px;
}
}
</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">顶部图片样式</a>
<a href="style-scroll.html" class="nav-tab">滚动样式</a>
<a href="style-shop.html" class="nav-tab active">商品展示样式</a>
</div>
<div class="shop-container">
<div class="shop-header">
<h2>爱发电商品展示</h2>
<p>支持我的创作，获取专属内容和服务</p>
</div>
<div class="shop-items">
<!-- 示例商品数据 -->
<div class="shop-item" onclick="alert('这是演示页面，点击后将跳转到商品详情')">
<div class="shop-item-image" style="background-image: url('https://picsum.photos/400/300?random=1')"></div>
<div class="shop-item-content">
<div class="shop-item-title">月度赞助</div>
<div class="shop-item-description">每月定期支持，获取专属内容和优先回复服务。</div>
<div class="shop-item-price">¥20 / 月</div>
<button class="shop-item-button">立即赞助</button>
</div>
</div>
<div class="shop-item" onclick="alert('这是演示页面，点击后将跳转到商品详情')">
<div class="shop-item-image" style="background-image: url('https://picsum.photos/400/300?random=2')"></div>
<div class="shop-item-content">
<div class="shop-item-title">季度赞助</div>
<div class="shop-item-description">季度支持，享受更多专属内容和定制服务。</div>
<div class="shop-item-price">¥50 / 季</div>
<button class="shop-item-button">立即赞助</button>
</div>
</div>
<div class="shop-item" onclick="alert('这是演示页面，点击后将跳转到商品详情')">
<div class="shop-item-image" style="background-image: url('https://picsum.photos/400/300?random=3')"></div>
<div class="shop-item-content">
<div class="shop-item-title">年度赞助</div>
<div class="shop-item-description">年度支持，获取所有专属内容和VIP服务。</div>
<div class="shop-item-price">¥180 / 年</div>
<button class="shop-item-button">立即赞助</button>
</div>
</div>
<div class="shop-item" onclick="alert('这是演示页面，点击后将跳转到商品详情')">
<div class="shop-item-image" style="background-image: url('https://picsum.photos/400/300?random=4')"></div>
<div class="shop-item-content">
<div class="shop-item-title">一次性赞助</div>
<div class="shop-item-description">一次性支持，表达您的鼓励和支持。</div>
<div class="shop-item-price">¥10 起</div>
<button class="shop-item-button">立即赞助</button>
</div>
</div>
<div class="shop-item" onclick="alert('这是演示页面，点击后将跳转到商品详情')">
<div class="shop-item-image" style="background-image: url('https://picsum.photos/400/300?random=5')"></div>
<div class="shop-item-content">
<div class="shop-item-title">定制服务</div>
<div class="shop-item-description">提供个性化定制服务，满足您的特定需求。</div>
<div class="shop-item-price">¥100 起</div>
<button class="shop-item-button">立即赞助</button>
</div>
</div>
<div class="shop-item" onclick="alert('这是演示页面，点击后将跳转到商品详情')">
<div class="shop-item-image" style="background-image: url('https://picsum.photos/400/300?random=6')"></div>
<div class="shop-item-content">
<div class="shop-item-title">高级会员</div>
<div class="shop-item-description">成为高级会员，享受所有特权和专属内容。</div>
<div class="shop-item-price">¥300 / 年</div>
<button class="shop-item-button">立即赞助</button>
</div>
</div>
</div>
</div>
<div class="afdian-container" style="margin-top: 50px;">
<div id="about-page">
<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>6</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">
</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">
</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">
</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>