fix:修复了隐私保护的模糊效果没有在safari中正常显示的问题

This commit is contained in:
Kakune55 2024-04-22 08:55:08 +08:00
parent 314ddc4751
commit b5c58e1216
4 changed files with 13 additions and 7 deletions

View File

@ -76,14 +76,14 @@
<div class="header"> <div class="header">
<div class="movie-poster"> <div class="movie-poster">
<!-- 封面 --> <!-- 封面 -->
<img src="/api/img/{{ id }}/1?mini=yes" alt="封面" style="max-width: 100%;"> <img class="img-thumbnail" src="/api/img/{{ id }}/1?mini=yes" alt="封面" style="max-width: 100%;">
</div> </div>
<div class="movie-details"> <div class="movie-details">
<!-- 详细信息 --> <!-- 详细信息 -->
<h1>{{ data[0][2] }}</h1> <h1>{{ data[0][2] }}</h1>
<h2>时间: {{time}}</h2> <h2>时间: {{time}}</h2>
<h2>暂无评价</h2> <h2>暂无评价</h2>
<button onclick="window.location.href='/view/{{ id }}'">在线浏览</button> <button class="btn btn-primary" onclick="window.location.href='/view/{{ id }}'">在线浏览</button>
</div> </div>
</div> </div>
<div class="comments-section"> <div class="comments-section">

View File

@ -47,6 +47,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* 模糊度可以根据需要调整 */ /* 模糊度可以根据需要调整 */
transition: display; transition: display;
z-index: 1; z-index: 1;
@ -54,7 +55,7 @@
pointer-events: none; pointer-events: none;
/* 确保遮罩不影响下方元素的交互 */ /* 确保遮罩不影响下方元素的交互 */
opacity: 0; opacity: 0;
transition: opacity 0.3s ease transition: opacity 0.1s ease
} }
</style> </style>
</head> </head>

View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-cn"> <html lang="zh-cn">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -16,6 +17,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container mt-5"> <div class="container mt-5">
<h2 class="text-center text-primary mb-4">文件上传</h2> <h2 class="text-center text-primary mb-4">文件上传</h2>
@ -25,9 +27,10 @@
<button class="btn btn-primary btn-block" onclick="to_upload_file()" id="upload_button">上传</button> <button class="btn btn-primary btn-block" onclick="to_upload_file()" id="upload_button">上传</button>
</div> </div>
</div> </div>
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
<div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated"></div> <div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated"></div>
</div> </div>
<div class="text-center" id="loading">上传进度0%</div> <div class="text-center" id="loading">上传进度0%</div>
</div> </div>
@ -84,4 +87,5 @@
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -40,6 +40,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* 模糊度可以根据需要调整 */ /* 模糊度可以根据需要调整 */
transition: display; transition: display;
z-index: 1; z-index: 1;
@ -47,7 +48,7 @@
pointer-events: none; pointer-events: none;
/* 确保遮罩不影响下方元素的交互 */ /* 确保遮罩不影响下方元素的交互 */
opacity: 0; opacity: 0;
transition: opacity 0.3s ease transition: opacity 0.1s ease
} }
</style> </style>
</head> </head>