vue2练习项目 家乡特色网站—前端静态网站模板

Json_2025-04-22 17:54

最近一直在学习前端 vue2 开发，基础知识已经学习的差不多了，那肯定需要写几个项目来练习一下自己学习到的知识点。今天就分享一个使用 vue2 开发的一个前端静态网站**【家乡特色网站】 **

先给大家看一下网站的样式：

这里就只简单的截图一些网站的整体样式。

下面主要分享在开发这个网站都用到了哪些技术：

使用技术

Vue2： 采用 Vue2 构建前端页面，实现响应式布局和灵活的数据绑定，简化了前端开发过程。

Element-UI： UI 组件库选用 Element-UI，提供丰富的交互式组件，帮助快速构建简洁、易用的用户界面。

Node.js 16.20： 使用 Node.js 作为开发环境，确保稳定性和兼容性

主要实现的页面内容如下：

首页： 展示文山的概况、主要景点以及网站的导航，吸引用户进一步了解文山的独特魅力。

历史文化： 介绍云南文山的历史背景与文化遗产，帮助游客或文化爱好者了解文山的文化底蕴。

多元民族文化： 展示文山丰富的民族文化，包括各民族的风俗、节庆、服饰等，体现地方特色。

云南省东南大门： 介绍文山作为云南省的东南大门的地理位置和重要性，强调其在区域发展中的作用。

气候宜居资源丰富： 展示文山宜居的气候特点和丰富的自然资源，吸引更多人关注该地的居住和投资潜力。

特色产业：介绍文山的主要产业，如农业、手工艺品等，帮助用户了解这个地区的经济特色和发展潜力。

这个项目写完后，部署了一个预览的网址，有兴趣的小伙伴可以去看一看，可以拿来参考学习。

www.wwwoop.com/home/Index/...

代码目录结构如下：

因为代码内容还是比较多的，就简单分享一部分源代码内容。

xml 复制代码 
<template>
  <div class="home">
    <Header />
    <div class="main-content">
      <div class="hero-section" :style="{ backgroundImage: 'url(' + require('@/assets/images/1.jpg') + ')' }">
        <div class="hero-content">
          <h1>欢迎来到云南文山</h1>
          <p>探索壮族苗族文化的瑰宝，感受独特的自然风光</p>
        </div>
      </div>

      <section class="features">
        <h2>文山特色</h2>
        <div class="feature-grid">
          <div class="feature-card">
            <div class="feature-image" :style="{ backgroundImage: 'url(' + require('@/assets/images/2.jpg') + ')' }"></div>
            <h3>民族文化</h3>
            <p>体验壮族苗族的传统文化，感受少数民族的独特魅力</p>
          </div>
          <div class="feature-card">
            <div class="feature-image" :style="{ backgroundImage: 'url(' + require('@/assets/images/3.jpg') + ')' }"></div>
            <h3>城市名片</h3>
            <p>三七之乡、普者黑景区，展现文山独特魅力</p>
          </div>
          <div class="feature-card">
            <div class="feature-image" :style="{ backgroundImage: 'url(' + require('@/assets/images/4.jpg') + ')' }"></div>
            <h3>特色美食</h3>
            <p>品尝岜夯鸡、花糯饭、酸汤鱼等地道美食</p>
          </div>
        </div>
      </section>

      <section class="city-intro">
        <h2>走进文山</h2>
        <div class="intro-content">
          <div class="intro-text">
            <h3>文山概况</h3>
            <p>文山壮族苗族自治州位于云南省东南部，是云南通往广西、粤港澳的重要门户。这里地处滇黔桂三省区结合部，是一片具有独特魅力的土地。</p>
            <div class="intro-details">
              <div class="detail-item">
                <h4>地理位置</h4>
                <p>东经103°68′～105°05′，北纬23°05′～24°38′之间</p>
              </div>
              <div class="detail-item">
                <h4>行政区划</h4>
                <p>辖八县市：文山市、砚山县、西畴县、麻栗坡县、马关县、丘北县、广南县、富宁县</p>
              </div>
            </div>
          </div>
          <div class="intro-image" :style="{ backgroundImage: 'url(' + require('@/assets/images/5.jpg') + ')' }"></div>
        </div>
      </section>

      <section class="news-preview">
        <h2>最新动态</h2>
        <div class="news-grid">
          <div class="news-card">
            <h3>2024文山旅游节即将开幕</h3>
            <p>一年一度的文山旅游节将于下月盛大开幕，带您领略文山的自然与人文之美...</p>
            <router-link to="/news" class="read-more">查看详情</router-link>
          </div>
          <div class="news-card">
            <h3>文山特色民宿推荐</h3>
            <p>精选文山最具特色的民宿，让您住进当地人的生活...</p>
            <router-link to="/news" class="read-more">查看详情</router-link>
          </div>
        </div>
      </section>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'

export default {
  name: 'Home',
  components: {
    Header,
    Footer
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.hero-section {
  text-align: center;
  padding: 6rem 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin-bottom: 3rem;
  position: relative;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.hero-section h1 {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 1rem;
}

.hero-section p {
  font-size: 1.2rem;
  color: #f5f5f5;
}

.features {
  margin-bottom: 3rem;
}

.features h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #2c3e50;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.feature-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.feature-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.3rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: #666;
}

.city-intro {
  margin-bottom: 3rem;
}

.city-intro h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #2c3e50;
}

.intro-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  background: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.intro-text h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.intro-text p {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.intro-details {
  display: grid;
  gap: 1rem;
}

.detail-item h4 {
  font-size: 1.1rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.detail-item p {
  color: #666;
  margin-bottom: 0;
}

.intro-image {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}

.news-preview {
  margin-bottom: 3rem;
}

.news-preview h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #2c3e50;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.news-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.news-card h3 {
  font-size: 1.2rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.news-card p {
  color: #666;
  margin-bottom: 1rem;
}

.read-more {
  color: #42b983;
  text-decoration: none;
  font-weight: bold;
}

.read-more:hover {
  text-decoration: underline;
}
</style>
相关推荐
微学AI7 分钟前
详细介绍：MCP（大模型上下文协议）的架构与组件，以及MCP的开发实践
前端·人工智能·深度学习·架构·llm·mcp
liangshanbo121537 分钟前
CSS 包含块
前端·css
Mitchell_C38 分钟前
语义化 HTML (Semantic HTML)
前端·html
倒霉男孩40 分钟前
CSS文本属性
前端·css
皓月盈江42 分钟前
使用谷歌浏览器自带功能将网页转换为PDF文件
chrome·pdf·html·网页转pdf·谷歌浏览器打印功能
晚风3081 小时前
前端
前端
JiangJiang1 小时前
🚀 Vue 人如何玩转 React 自定义 Hook？从 Mixins 到 Hook 的华丽转身
前端·react.js·面试
鱼樱前端1 小时前
让人头痛的原型和原型链知识
前端·javascript
用户19727304821961 小时前
传说中的开发增效神器-Trae，让我在开发智能旅拍小程序节省40%时间
前端
lianghj1 小时前
前端高手必备：深度解析高频场景解决方案与性能优化实战
前端·javascript·面试
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02我决定放弃搞 Java 了03RAG 实践- Ollama+RagFlow 部署本地知识库04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05YOLOv8改进 | 细节创新篇 | iAFF迭代注意力特征融合助力多目标细节涨点06DeepSeek各版本说明与优缺点分析07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08Scipy||第三章 线性代数 (scipy.linalg)09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10如何在WPS和Word/Excel中直接使用DeepSeek功能