feat:调整页面显示效果添加隐私保护功能

2025-09-15 19:59:39 +08:00 · 2024-04-21 23:45:41 +08:00
parent df7210d009
commit 314ddc4751
3 changed files with 96 additions and 41 deletions
--- a/templates/view.html
+++ b/templates/view.html
@@ -28,19 +28,38 @@
        img {
            display: block;
            width: 100%;
-            min-height: 100px;
+            min-height: 300px;
            margin-top: 10px;
        }
+
+        #global-blur {
+            background-color: rgba(255, 255, 255, 0.8);
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            backdrop-filter: blur(12px);
+            /* 模糊度可以根据需要调整 */
+            transition: display;
+            z-index: 1;
+            /* 保证遮罩在页面上方 */
+            pointer-events: none;
+            /* 确保遮罩不影响下方元素的交互 */
+            opacity: 0;
+            transition: opacity 0.3s ease
+        }
    </style>
 </head>

 <body>
    {% for i in index %}
-        <img data-src="/api/img/{{ id }}/{{ i }}" loading="lazy" alt="{{ i }}" class="imgs">
+    <img data-src="/api/img/{{ id }}/{{ i }}" loading="lazy" alt="{{ i }}" class="imgs">
    {% endfor %}
    <div style="display:flex;justify-content: center; align-items:center;">
        <img src="/static/loading.gif" id="loadingGIF">
    </div>
+    <div id="global-blur" onclick="unshow_global_blur()"></div>
    <script>
        var imgs = document.querySelectorAll('.imgs');

@@ -66,6 +85,23 @@
        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
+
+
+        document.addEventListener('visibilitychange', documentVisibilityChange)
+        global_blur = document.getElementById("global-blur")
+        function documentVisibilityChange() {
+            if (document.visibilityState === "hidden") {
+                global_blur.style.opacity = 1;
+                global_blur.style.pointerEvents = "auto";
+            }
+            if (document.visibilityState === "visible") {
+            }
+        }
+
+        function unshow_global_blur() {
+            global_blur.style.opacity = 0;
+            global_blur.style.pointerEvents = "none";
+        }
    </script>
 </body>