compile

content/aboutme/_index.html

@@ -1,42 +1,55 @@
-<div class="pdf-container" onclick="openPdfFullscreen('cv_tiny.pdf')">
+<div class="pdf-preview">
-  <iframe
-      src="cv_tiny.pdf#view=FitH"
-      width="70%"
-      height="600px"
-      style="border: none;">
-  </iframe>
-</div>
-
-<script>
-function openPdfFullscreen(pdfUrl) {
-  // 打开新窗口，尝试全屏
-  const features = `
-    width=${screen.width},
-    height=${screen.height},
-    left=0,
-    top=0,
-    scrollbars=yes,
-    resizable=yes,
-    fullscreen=yes
-  `;
-  
-  window.open(pdfUrl, '_blank', features);
-  
-  // 备选方案：直接打开PDF
-  // window.open(pdfUrl, '_blank');
-}
-</script>
-
-<!-- 将iframe放在一个可点击的容器中 -->
-<div class="pdf-preview" onclick="window.open('cv_tiny.pdf', '_blank')">
   <iframe
       src="cv_tiny.pdf#toolbar=0&navpanes=0"
-      width="100%"
+      width="70%"
       height="600px"
-      style="border: none; cursor: pointer;"
+      style="border: none;"
-      title="点击在新窗口全屏查看PDF">
+      title="PDF预览">
   </iframe>
-  <div class="pdf-overlay">
+  
+  <!-- 透明覆盖层，用于捕获点击 -->
+  <div class="click-overlay" onclick="window.open('cv_tiny.pdf', '_blank')">
     <div class="pdf-tooltip">点击在新窗口全屏查看</div>
   </div>
 </div>
+
+<style>
+.pdf-preview {
+  position: relative;
+  width: 100%;
+  height: 600px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.click-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.click-overlay:hover {
+  opacity: 1;
+  background: rgba(0,0,0,0.03);
+}
+
+.pdf-tooltip {
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 25px;
+  font-size: 14px;
+  backdrop-filter: blur(4px);
+  pointer-events: none;
+}
+</style>