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

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


这里就只简单的截图一些网站的整体样式。
下面主要分享在开发这个网站都用到了哪些技术：
使用技术
Vue2：采用 Vue2 构建前端页面，实现响应式布局和灵活的数据绑定，简化了前端开发过程。
Element-UI：UI 组件库选用 Element-UI，提供丰富的交互式组件，帮助快速构建简洁、易用的用户界面。
Node.js 16.20：使用 Node.js 作为开发环境，确保稳定性和兼容性
主要实现的页面内容如下：
首页：展示文山的概况、主要景点以及网站的导航，吸引用户进一步了解文山的独特魅力。
历史文化：介绍云南文山的历史背景与文化遗产，帮助游客或文化爱好者了解文山的文化底蕴。
多元民族文化：展示文山丰富的民族文化，包括各民族的风俗、节庆、服饰等，体现地方特色。
云南省东南大门：介绍文山作为云南省的东南大门的地理位置和重要性，强调其在区域发展中的作用。
气候宜居资源丰富：展示文山宜居的气候特点和丰富的自然资源，吸引更多人关注该地的居住和投资潜力。
特色产业：介绍文山的主要产业，如农业、手工艺品等，帮助用户了解这个地区的经济特色和发展潜力。
这个项目写完后，部署了一个预览的网址，有兴趣的小伙伴可以去看一看，可以拿来参考学习。
https://www.wwwoop.com/home/Index/projectInfo?goodsId=71&typeParam=2&subKey=1
代码目录结构如下：

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

<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>