No.70 Vue---实践--我的网站

一、避坑指南

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>