style: Update donation section styling

2881099 · Sep 3, 2024 · d6ff722 · d6ff722
1 parent 6c289e5
commit d6ff722
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/docs/.vuepress/public/aliyun.png b/docs/.vuepress/public/aliyun.png
diff --git a/docs/.vuepress/public/rhino-design.png b/docs/.vuepress/public/rhino-design.png
diff --git a/docs/README.md b/docs/README.md
@@ -53,15 +53,30 @@ footer: MIT Licensed | Copyright © 2018-present nicye
 
 > 扫码捐助请作者喝一杯咖啡
 
-<img src="/barcode_2x1.png" style="width:400px;height:255px;" />
+<div class="vp-donation">
+    <div class="vp-donation-item">
+        <img src="/barcode_2x1.png" style="width:400px;height:255px;" />
+    </div>
+    <div class="vp-donation-item">
+        <a style="margin-left:20px;cursor:pointer" target="_blank" href="https://curl.qcloud.com/lj8Rbc9Y">
+            <img src="/rhino-design.png" style="width:400px;" />
+            <h4>【腾讯云】2核2G云服务器新老同享 99元/年，续费同价</h4>
+        </a>
+    </div> 
+    <div class="vp-donation-item">
+        <a style="margin-left:20px;cursor:pointer" target="_blank" href="https://t.aliyun.com/U/rs0mOj">
+            <img src="/aliyun.png" style="width:400px;" />
+            <h4>【阿里云】云服务器经济型e实例/2核2G/3M/40g，新人专享渠道特惠价只要99元！</h4>
+        </a> 
+    </div> 
+</div>
 
 ## 👯 Contributors (贡献者)
 
 <a href="https://contributors-img.web.app/image?repo=dotnetcore/FreeSql">
   <img src="https://contributors-img.web.app/image?repo=dotnetcore/FreeSql" />
 </a>
 
-
 ## 🗄 License (许可证)
 
 [MIT](https://github.com/dotnetcore/FreeSql/blob/master/LICENSE)
@@ -72,3 +87,53 @@ footer: MIT Licensed | Copyright © 2018-present nicye
      data-ad-slot="3532742594"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
+
+<style>
+.vp-donation {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center; /* 确保项目在交叉轴上居中对齐 */
+    padding: 20px;
+}
+
+.vp-donation-item {
+    flex-basis: calc(33.333% - 20px); /* 基础大小为三分之一减去间距 */
+    max-width: calc(33.333% - 20px); /* 最大宽度也是三分之一减去间距 */
+    margin: 10px;
+    text-align: center;
+}
+
+.vp-donation-item img {
+    width: 100%; /* 图片宽度充满容器 */
+    height: auto; /* 高度自动调整 */
+}
+
+.vp-donation-item a {
+    text-decoration: none;
+    color: inherit;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.vp-donation-item h4 {
+    margin: 5px 0;
+    font-size: 16px;
+}
+
+/* 媒体查询，针对中等屏幕设备 */
+@media (max-width: 1024px) {
+    .vp-donation-item {
+        flex-basis: calc(50% - 20px); /* 中等屏幕宽度下，一行显示两个 */
+        max-width: calc(50% - 20px);
+    }
+}
+
+/* 媒体查询，针对小屏幕设备 */
+@media (max-width: 600px) {
+    .vp-donation-item {
+        flex-basis: 100%; /* 小屏幕宽度下，一行显示一个 */
+        max-width: 100%;
+    }
+}
+</style>