一、避坑指南
1.关于路径问题
也不要使用绝对路径
<template><div class="home"><!-- 开始部分 --><div class="signature"><div class="signature-text"><h4 id="hometitle1">在地图上绘制每一次冒险，让每条路线都成为记忆的高峰。</h4><p class="text1">平时在工作中也会经常用到Google Earth ，但都仅仅用来查看一下历史遥感影像，并没有深入的应用。偶然的机会看到「星球研究所」关于地理的作品，用三维地图从专业的角度解构世间万物。我便萌发了用三维地图记录自己户外的想法，于是去网上找各种资源教程，自学三维地图制作，并做了详细的笔记，作为帮助文档。这里分享一下笔记以及作品。</p></div></div></div> <div class="fenge1"><hr class="fengexian1"></div><!-- PDF 帮助文档区域 --><div class="pdf-gallery"><div v-for="(pdf, index) in pdfList" :key="index" class="pdf-item"><a :href="pdf.url" target="_blank"><img :src="pdf.thumbnail" :alt="pdf.name" class="pdf-thumbnail" /><p class="pdf-name">{{ pdf.name }}</p></a></div></div>
</template><script>export default {data() {return {pdfList: [{name: '05-1地标属性设置',url: '/sanweimap/wendanglist/05-1地标属性设置.pdf',thumbnail: '/sanweimap/suoluetulist/05-1地标属性设置.jpg'},{name: '05-2地点间动画',url: '/sanweimap/wendanglist/05-2地点间动画（文件夹游览）.pdf',thumbnail: '/sanweimap/suoluetulist/05-2地点间动画（文件夹游览）.jpg'},{name: '06 添加路径以及摄像机路线规划',url: '/sanweimap/wendanglist/06 添加路径以及摄像机路线规划.pdf',thumbnail: '/sanweimap/suoluetulist/06 添加路径以及摄像机路线规划.jpg'},{name: '06让山峰更立体',url: '/sanweimap/wendanglist/06让山峰更立体.pdf',thumbnail: '/sanweimap/suoluetulist/06让山峰更立体.jpg'},{name: '06中国边界线显示和地理数据导入',url: '/sanweimap/wendanglist/06中国边界线显示和地理数据导入.pdf',thumbnail: '/sanweimap/suoluetulist/06中国边界线显示和地理数据导入.jpg'},{name: '07图形间的叠加次序',url: '/sanweimap/wendanglist/07图形间的叠加次序.pdf',thumbnail: '/sanweimap/suoluetulist/07图形间的叠加次序.jpg'}]};
}
}</script><style scoped>
/* -----------------------------------开头部分 -------------------------------------------------*/
.signature {display: flex;align-items: center;justify-content: space-between;position: absolute;top: 70px;left: 5%;width: 90%;text-align: left;
}.signature-text {width: 70%;
}.signature h4 {font-family: '楷体';font-size: 33px;color: #128304;
}.signature p {font-family: '楷体';font-size: 18px;font-weight: bold;color: #044868;line-height: 2;
}.fenge1 {display: flex;position: relative;top: 350px;height: 3px;width: 95%;background: linear-gradient(to right, #4CAF50, #2196F3);border: none;
}/* ---------------------------------PDF 帮助文档区域------------------------------------------ */
.pdf-gallery {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;margin-top: 20px;position: relative;top: 360px;
}.pdf-item {text-align: center;
}.pdf-thumbnail {width: 280px; /* 稍微缩小尺寸，减少视觉压迫感 */height: 180px; border: 2px solid #b0b3b8; /* 更柔和的边框色 */border-radius: 12px; /* 圆角更明显，增强现代感 */background: linear-gradient(145deg, #f0f0f3, #d9d9d9); /* 柔和的渐变背景 */box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1); /* 柔和阴影，增强立体感 */cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; /* 悬停时的平滑动画 */
}.pdf-thumbnail:hover {transform: scale(1.05); /* 悬停时轻微放大 */box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.2); /* 悬停时阴影更明显 */border-color: #6a6a6a; /* 悬停时边框颜色加深 */
}.pdf-name {margin-top: 8px; /* 增加顶部间距，布局更整齐 */font-size: 16px; /* 字体稍微变小，避免过于抢眼 */color: #044868; /* 使用深蓝色，增强专业感 */font-weight: 600; /* 提高文字的视觉权重 */text-decoration: none; /* 去掉下划线 */transition: color 0.3s ease; /* 悬停时颜色平滑变化 */
}.pdf-item a {text-decoration: none; /* 链接去掉默认下划线 */
}.pdf-name:hover {color: #128304; /* 悬停时文字变为绿色，呼应标题样式 */
}</style>
