From 5ac2aea9e7bba77d4bcbe02bd00c5e81b14a4668 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <17683872107czx>
Date: Fri, 18 Aug 2023 18:46:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E4=BA=8E=E6=B7=BB=E5=8A=A0=E8=BF=BD?=
 =?UTF-8?q?=E7=95=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 settings.yaml                                 |  33 +++++-
 templates/assets/zhheo/zhheoblog.css          | 102 ++++++++++++++++++
 .../modules/widgets/about-widgets/game.html   |  20 +++-
 3 files changed, 153 insertions(+), 2 deletions(-)

diff --git a/settings.yaml b/settings.yaml
index ad987294..abbfc9cd 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -1857,24 +1857,55 @@ spec:
           name: game2
           label: 爱好游戏 2
           value:
+            game2_type: img
             game2_tips: 爱好游戏
             game2_title: 狼人杀
             game2_uid: ID 1333E3FF
             game2_bg: https://img.zhheo.com/i/2022/08/31/630efa916a851.webp
           children:
+            - $formkit: radio
+              name: game2_type
+              id: game2_type
+              key: game2_type
+              options:
+                - label: 图片
+                  value: img
+                - label: 追番
+                  value: comic
             - $formkit: text
               name: game2_tips
               label: 提示文字
               placeholder: 请输入内容
             - $formkit: text
               name: game2_title
-              label: 游戏标题
+              label: 标题
               placeholder: 请输入内容
+            - $formkit: repeater
+              name: comic_list
+              id: comic_list
+              key: comic_list
+              if: $get(game2_type).value == 'comic'
+              label: 追番列表
+              children:
+                - $formkit: text
+                  name: title
+                  label: 标题
+                  placeholder: 请输入内容
+                - $formkit: textarea
+                  name: url
+                  label: 链接
+                  placeholder: 请输入内容
+                - $formkit: attachment
+                  name: bg
+                  label: 背景
+                  placeholder: 请输入内容
             - $formkit: text
+              if: $get(game2_type).value == 'img'
               name: game2_uid
               label: 游戏 ID
               placeholder: 请输入内容
             - $formkit: attachment
+              if: $get(game2_type).value == 'img'
               name: game2_bg
               label: 游戏背景
               placeholder: 请输入内容
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index ca90f880..0f5b5f65 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -16547,6 +16547,108 @@ span.hexo-douban-pagenum {
     left: 0;
 }
 
+.author-content-item.comic-content {
+    width: 39%;
+    min-height: 300px;
+    overflow: hidden
+}
+
+.author-content-item.comic-content .comic-box {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    width: 120%;
+    height: 100%;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%)
+}
+
+.author-content-item.comic-content .author-content-item-tips,.author-content-item.comic-content .author-content-item-title {
+    z-index: 2;
+    color: var(--heo-white);
+    pointer-events: none
+}
+
+.author-content-item.comic-content .comic-item {
+    height: 100%;
+    color: #fff;
+    width: 20%;
+    -webkit-transform: skew(-10deg,0deg);
+    -moz-transform: skew(-10deg,0deg);
+    -o-transform: skew(-10deg,0deg);
+    -ms-transform: skew(-10deg,0deg);
+    transform: skew(-10deg,0deg);
+    -webkit-transition: .8s;
+    -moz-transition: .8s;
+    -o-transition: .8s;
+    -ms-transition: .8s;
+    transition: .8s;
+    position: relative;
+    overflow: hidden
+}
+
+.author-content-item.comic-content .comic-item:hover {
+    width: 46%
+}
+
+.author-content-item.comic-content .comic-item:hover .comic-item-cover {
+    left: 16%;
+    -webkit-transform: skew(10deg,0deg) scale(1.6);
+    -moz-transform: skew(10deg,0deg) scale(1.6);
+    -o-transform: skew(10deg,0deg) scale(1.6);
+    -ms-transform: skew(10deg,0deg) scale(1.6);
+    transform: skew(10deg,0deg) scale(1.6)
+}
+
+.author-content-item.comic-content .comic-item .comic-item-cover {
+    position: absolute;
+    top: 0;
+    left: -50%;
+    height: 100%;
+    -webkit-transform: skew(10deg,0deg);
+    -moz-transform: skew(10deg,0deg);
+    -o-transform: skew(10deg,0deg);
+    -ms-transform: skew(10deg,0deg);
+    transform: skew(10deg,0deg);
+    object-fit: cover;
+    -webkit-transition: scale .2s,all .8s;
+    -moz-transition: scale .2s,all .8s;
+    -o-transition: scale .2s,all .8s;
+    -ms-transition: scale .2s,all .8s;
+    transition: scale .2s,all .8s
+}
+
+.author-content-item.comic-content .comic-item .comic-item-cover img {
+    height: 100%;
+    -webkit-transition: .8s;
+    -moz-transition: .8s;
+    -o-transition: .8s;
+    -ms-transition: .8s;
+    transition: .8s;
+    max-width: none;
+    border-radius: 0
+}
+
+.author-content-item.comic-content::after {
+    -webkit-box-shadow: 0 -48px 203px 11px #fbe9b8 inset;
+    box-shadow: 0 -48px 203px 11px #fbe9b8 inset;
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0
+}
+
 /* 关注领域 */
 .author-content-item.like-technology {
     background: url(https://img.zhheo.com/i/2022/08/31/630efac3ecef3.webp) no-repeat;
diff --git a/templates/modules/widgets/about-widgets/game.html b/templates/modules/widgets/about-widgets/game.html
index 415b42c5..4c5d7e95 100644
--- a/templates/modules/widgets/about-widgets/game.html
+++ b/templates/modules/widgets/about-widgets/game.html
@@ -17,7 +17,7 @@
             </div>
         </div>
     </div>
-    <div class="author-content-item game-wolf"
+    <div th:if="${#strings.equals(theme.config.about.game2.game2_type, 'img')}" class="author-content-item game-wolf"
         th:style="'background: url('+ @{${theme.config.about.game2.game2_bg}} +') top / cover no-repeat'">
         <div class="card-content">
             <div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}">
@@ -29,6 +29,24 @@
             </div>
         </div>
     </div>
+    <div th:if="${#strings.equals(theme.config.about.game2.game2_type, 'comic')}" class="author-content-item comic-content">
+        <div class="card-content">
+            <div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}"></div>
+            <div class="author-content-item-title" th:text="${theme.config.about.game2.game2_title}"></div>
+            <div class="comic-box" >
+                <a  th:each="comic : ${theme.config.about.game2.comic_list}"
+                    class="comic-item"
+                    th:href="${comic.url}"
+                    rel="external nofollow noreferrer" target="_blank" th:title="${comic.title}" draggable="false">
+                    <div class="comic-item-cover"><img
+                            th:src="${comic.bg}"
+                            th:alt="${comic.title}"
+                            draggable="false" >
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
     <style>
         .loading-bar::after {
             content: "";