From 23057284b26db32fbd7175c6fee4d8eefbf2cf58 Mon Sep 17 00:00:00 2001
From: Clansty <i@gao4.pw>
Date: Mon, 22 Aug 2022 00:51:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/customize.js                         |  4 +++
 assets/customize.scss                       | 34 +++++++++++++++++++++
 content/zh-cn/docs/srs/china/sh411/index.md |  4 +--
 layouts/shortcodes/hiddenphoto.html         |  4 +++
 4 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 layouts/shortcodes/hiddenphoto.html

diff --git a/assets/customize.js b/assets/customize.js
index b9a3ae05..406b9c46 100644
--- a/assets/customize.js
+++ b/assets/customize.js
@@ -24,3 +24,7 @@ document.addEventListener(
   },
   { capture: true },
 );
+
+function showHiddenPhoto(elem) {
+  elem.classList.add('show');
+}
diff --git a/assets/customize.scss b/assets/customize.scss
index b93e03e3..b9347cc7 100644
--- a/assets/customize.scss
+++ b/assets/customize.scss
@@ -164,3 +164,37 @@ a.anchor {
 .footer__contents {
   text-align: left;
 }
+div.hidden-photo {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  img {
+    transition: filter 0.3s;
+    filter: blur(25px);
+  }
+  .mask {
+    position: absolute;
+    z-index: 1;
+    top: 0; bottom: 0; left: 0; right: 0;
+    background-color: rgba($color: #000000, $alpha: 0.5);
+    transition: opacity 0.3s;
+    opacity: 1;
+    &::before {
+      content: '点击查看';
+      color: white;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  &.show {
+    img {
+      filter: blur(0);
+    }
+    .mask {
+      opacity: 0;
+    }
+  }
+}
diff --git a/content/zh-cn/docs/srs/china/sh411/index.md b/content/zh-cn/docs/srs/china/sh411/index.md
index 99697606..b58f9e2d 100644
--- a/content/zh-cn/docs/srs/china/sh411/index.md
+++ b/content/zh-cn/docs/srs/china/sh411/index.md
@@ -172,9 +172,7 @@ keywords:
 ## 术后评价
 
 - 2021 年 6 月手术，术后 7 个月拍摄：
-  {{< expand "展开查看" >}}
-  ![srs-photo](postoperative-1.jpg)
-  {{< /expand >}}
+  {{< hiddenphoto "postoperative-1.jpg" >}}
 
 ## 其他事项
 
diff --git a/layouts/shortcodes/hiddenphoto.html b/layouts/shortcodes/hiddenphoto.html
new file mode 100644
index 00000000..c1bd46b4
--- /dev/null
+++ b/layouts/shortcodes/hiddenphoto.html
@@ -0,0 +1,4 @@
+<div class="hidden-photo" onclick="showHiddenPhoto(this)">
+  <img src="{{ .Get 0 }}" alt="{{ .Get 1 }}">
+  <div class="mask"></div>
+</div>
\ No newline at end of file