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>
相关推荐
前端Hardy6 分钟前
HTML&CSS：高颜值视差滚动3D卡片
前端·javascript·html
前端无涯9 分钟前
Vue---vue使用AOS(滚动动画)库
前端·javascript·vue.js
前端Hardy10 分钟前
HTML&CSS：超好看的数据卡片
前端·javascript·html
牧码岛11 分钟前
Web前端之隐藏元素方式的区别、Vue循环标签的时候在同一标签上隐藏元素的解决办法、hidden、display、visibility
前端·css·vue·html·web·web前端
CUIYD_198914 分钟前
Vue 中组件命名与引用
javascript·vue.js·node.js
面朝大海，春不暖，花不开15 分钟前
Spring Boot MVC自动配置与Web应用开发详解
前端·spring boot·mvc
知否技术15 分钟前
2025微信小程序开发实战教程（一）
前端·微信小程序
玲小珑17 分钟前
Auto.js 入门指南（五）实战项目——自动脚本
android·前端
Sparkxuan17 分钟前
IntersectionObserver的用法
前端
玲小珑17 分钟前
Auto.js 入门指南（四）Auto.js 基础概念
android·前端
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04基于STM32的智能电池管理系统05DeepSeek各版本说明与优缺点分析06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07Coze扣子平台完整体验和实践（附国内和国际版对比）08VMware虚拟机安装Win7专业版保姆级教程（附镜像包）09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10山东大学2024深度学习期末考试回忆