compile

content/aboutme/_index.html

@@ -1,31 +1,34 @@
-<div class="pdf-container">
 <div class="pdf-viewer">
+  <!-- iframe容器 -->
+  <div class="pdf-frame-container">
     <iframe
-        src="cv_tiny.pdf#toolbar=0&navpanes=0"
+        src="cv_tiny.pdf#toolbar=0&navpanes=0&view=FitH"
-        width="70%"
+        width="100%"
         height="100%"
         style="border: none;"
         title="简历预览 - 点击在新窗口全屏查看">
     </iframe>
     
-    <div class="pdf-overlay" onclick="window.open('cv_tiny.pdf', '_blank')">
+    <!-- 透明覆盖层 -->
-      <div class="overlay-content">
+    <div class="click-overlay" onclick="window.open('cv_tiny.pdf', '_blank')">
+      <div class="tooltip-content">
         <svg class="fullscreen-icon" viewBox="0 0 24 24" fill="white">
           <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
         </svg>
-        <span class="overlay-text">点击全屏查看</span>
+        <span>点击全屏查看</span>
       </div>
     </div>
   </div>
   
-  <div class="pdf-actions">
+  <!-- 操作按钮 -->
-    <a href="cv_tiny.pdf" target="_blank" class="btn btn-primary">
+  <div class="action-buttons">
+    <button onclick="window.open('cv_tiny.pdf', '_blank')" class="action-btn primary">
       <svg class="btn-icon" viewBox="0 0 24 24">
         <path d="M19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
       </svg>
-      在新窗口打开
+      新窗口全屏
-    </a>
+    </button>
-    <a href="cv_tiny.pdf" download class="btn btn-secondary">
+    <a href="cv_tiny.pdf" download class="action-btn secondary">
       <svg class="btn-icon" viewBox="0 0 24 24">
         <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
       </svg>
@@ -35,138 +38,181 @@
 </div>
 
 <style>
-.pdf-container {
+.pdf-viewer {
   width: 100%;
-  max-width: 800px;
+  display: flex;
-  margin: 2rem auto;
+  flex-direction: column;
-  text-align: center;
+  align-items: center;
+  margin: 2rem 0;
 }
 
-.pdf-viewer {
+/* iframe容器 - 精确70%宽度 */
+.pdf-frame-container {
   position: relative;
-  width: 100%;
+  width: 70%; /* 固定70%宽度 */
+  max-width: 900px; /* 最大宽度限制 */
   height: 600px;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+  background: #f8f9fa; /* 添加背景色 */
 }
 
-.pdf-overlay {
+/* PDF参数说明：
+   FitH - 适合高度，确保显示整页
+   toolbar=0 - 隐藏工具栏
+   navpanes=0 - 隐藏导航面板
+*/
+
+/* 透明覆盖层 */
+.click-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,0.5);
+  background: transparent;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: all 0.3s ease;
+  z-index: 2;
 }
 
-.pdf-viewer:hover .pdf-overlay {
+.click-overlay:hover {
   opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
 }
 
-.overlay-content {
+.tooltip-content {
-  background: rgba(0,0,0,0.8);
+  background: rgba(0, 0, 0, 0.85);
-  padding: 20px 30px;
+  color: white;
+  padding: 15px 25px;
   border-radius: 30px;
   display: flex;
   align-items: center;
   gap: 12px;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
+  transform: translateY(10px);
+  transition: transform 0.3s ease;
+  pointer-events: none;
+}
+
+.click-overlay:hover .tooltip-content {
+  transform: translateY(0);
 }
 
 .fullscreen-icon {
-  width: 24px;
+  width: 20px;
-  height: 24px;
+  height: 20px;
 }
 
-.overlay-text {
+/* 操作按钮 */
-  color: white;
+.action-buttons {
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.pdf-actions {
   display: flex;
   gap: 15px;
-  justify-content: center;
   margin-top: 20px;
-  flex-wrap: wrap;
+  justify-content: center;
 }
 
-.btn {
+.action-btn {
   padding: 12px 24px;
-  text-decoration: none;
   border-radius: 8px;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  transition: all 0.3s;
+  cursor: pointer;
-  border: 2px solid transparent;
+  border: none;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  text-decoration: none;
 }
 
-.btn-primary {
+.action-btn.primary {
-  background: #007bff;
+  background: linear-gradient(135deg, #007bff, #0056b3);
   color: white;
 }
 
-.btn-primary:hover {
+.action-btn.primary:hover {
-  background: #0056b3;
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,123,255,0.3);
+  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
 }
 
-.btn-secondary {
+.action-btn.secondary {
-  background: #28a745;
+  background: linear-gradient(135deg, #28a745, #1e7e34);
   color: white;
 }
 
-.btn-secondary:hover {
+.action-btn.secondary:hover {
-  background: #1e7e34;
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(40,167,69,0.3);
+  box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4);
 }
 
 .btn-icon {
-  width: 18px;
+  width: 16px;
-  height: 18px;
+  height: 16px;
+  fill: currentColor;
 }
 
 /* 响应式设计 */
+@media (max-width: 1200px) {
+  .pdf-frame-container {
+    width: 75%;
+  }
+}
+
+@media (max-width: 992px) {
+  .pdf-frame-container {
+    width: 85%;
+    height: 550px;
+  }
+}
+
 @media (max-width: 768px) {
-  .pdf-viewer {
+  .pdf-frame-container {
+    width: 90%;
     height: 500px;
   }
   
-  .pdf-actions {
+  .action-buttons {
     flex-direction: column;
-    align-items: center;
+    width: 90%;
   }
   
-  .btn {
+  .action-btn {
-    width: 200px;
     justify-content: center;
   }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 576px) {
-  .pdf-viewer {
+  .pdf-frame-container {
-    height: 400px;
+    width: 95%;
+    height: 450px;
   }
   
-  .overlay-content {
+  .tooltip-content {
-    padding: 15px 20px;
+    padding: 12px 20px;
-  }
-  
-  .overlay-text {
     font-size: 14px;
   }
+  
+  .action-btn {
+    padding: 10px 20px;
+  }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .pdf-frame-container {
+    background: #2d2d2d;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  }
+  
+  .tooltip-content {
+    background: rgba(0, 0, 0, 0.9);
+  }
 }
 </style>