blackwolf/content/aboutme/_index.html

<div class="pdf-viewer">
  <!-- iframe容器 -->
  <div class="pdf-frame-container">
    <iframe
        src="苏默小升初简历-18911763072.pdf#toolbar=0&navpanes=0&view=FitH"
        width="100%"
        height="100%"
        style="border: none;"
        title="简历预览 - 点击在新窗口全屏查看">
    </iframe>
    
    <!-- 透明覆盖层 -->
    <div class="click-overlay" onclick="window.open('苏默小升初简历-18911763072.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>点击全屏查看</span>
      </div>
    </div>
  </div>
  
  <!-- 操作按钮 -->
  <div class="action-buttons">
    <button onclick="window.open('苏默小升初简历-18911763072.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>
      新窗口全屏
    </button>
    <a href="苏默小升初简历-18911763072.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>
      下载PDF
    </a>
  </div>
</div>

<style>
.pdf-viewer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
}

/* iframe容器 - 精确70%宽度 */
.pdf-frame-container {
  position: relative;
  width: 60%; /* 固定70%宽度 */
  max-width: 800px; /* 最大宽度限制 */
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  background: #f8f9fa; /* 添加背景色 */
}

/* PDF参数说明：
   FitH - 适合高度，确保显示整页
   toolbar=0 - 隐藏工具栏
   navpanes=0 - 隐藏导航面板
*/

/* 透明覆盖层 */
.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: all 0.3s ease;
  z-index: 2;
}

.click-overlay:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.tooltip-content {
  background: rgba(0, 0, 0, 0.85);
  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: 20px;
  height: 20px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

.action-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  font-size: 14px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.action-btn.primary {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
}

.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
}

.action-btn.secondary {
  background: linear-gradient(135deg, #28a745, #1e7e34);
  color: white;
}

.action-btn.secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4);
}

.btn-icon {
  width: 16px;
  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-frame-container {
    width: 90%;
    height: 500px;
  }
  
  .action-buttons {
    flex-direction: column;
    width: 90%;
  }
  
  .action-btn {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .pdf-frame-container {
    width: 95%;
    height: 450px;
  }
  
  .tooltip-content {
    padding: 12px 20px;
    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>