Vue+Django 旅游网项目 首页前端实现
结构
- 公共的样式 src/assets/common.less
- 公共的js（工具函数、接口地址、配置文件） 接口地址配置 src/utils/apis.js 常量配置 src/utils/constants.js 工具函数 src/utils/filters.js
创建Vue项目
创建完成
启动项目
导入静态文件
新建一个style文件夹用于存储样式文件
新建utils文件夹
创建apis.js
创建 constants.js
创建filters.js 存放过滤器
; 首页
- 分析首页结构
- 新建页面
- 新建组件
components下创建 common存放公共组件 home存放首页的组件
下载导入Vant组件库
安装Vant
npm install vant -S
导入vant组件库
在main.js中添加
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
实现轮播图
components/home/ 下的 banner组件
<template>
<!-- 轮播图 -->
<div class="home-banner-box">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="item in bannerList"
:key="item.id">
<img :src="item.img" alt="">
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
data () {
return {
bannerList: []
}
},
methods: {
},
created () {
this.bannerList = [
{ id: 1, img: '/static/home/banner/banner1.jpg' },
{ id: 2, img: '/static/home/banner/banner2.jpg' },
{ id: 3, img: '/static/home/banner/banner3.jpg' }
]
}
}
</script>
home界面中导入
<template>
<!-- 轮播图 -->
<div class="home-banner-box">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="item in bannerList"
:key="item.id">
<img :src="item.img" alt="">
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
data () {
return {
bannerList: []
}
},
methods: {
},
created () {
this.bannerList = [
{ id: 1, img: '/static/home/banner/banner1.jpg' },
{ id: 2, img: '/static/home/banner/banner2.jpg' },
{ id: 3, img: '/static/home/banner/banner3.jpg' }
]
}
}
</script>
<style lang="less">
.home-banner-box {
img {
width: 100%;
height: auto;
}
}
</style>
显示结果
实现热门推荐
components/home/ 下的 hot组件
<template>
<div class="home-hot-box">
<!-- 导航 -->
<van-cell
icon="/static/home/hot/fire.png"
title="热门推荐"
title-style="text-align:left"
value="全部榜单"
is-link />
<!-- 列表 -->
<div class="box-main">
<a href="#" class="hot-item"
v-for="item in dataList"
:key="item.id">
<div class="img">
<span></span>
<img :src="item.img" alt="">
</div>
<h5 class="van-ellipsis">{{ item.name }}</h5>
<div class="line-price">
<span class="price">￥{{ item.price }}</span>起
</div>
</a>
</div>
</div>
</template>
<script>
export default {
data () {
return {
dataList: []
}
},
created () {
this.dataList = [
{ id: 1, img: '/static/home/hot/h1.jpg', name: '景点名称', price: 65 },
{ id: 2, img: '/static/home/hot/h2.jpg', name: '景点名称', price: 65 },
{ id: 3, img: '/static/home/hot/h3.jpg', name: '景点名称', price: 65 },
{ id: 4, img: '/static/home/hot/h4.jpg', name: '景点名称', price: 65 },
{ id: 5, img: '/static/home/hot/h5.jpg', name: '景点名称', price: 65 }
]
}
}
</script>
<style lang="less">
.home-hot-box {
padding: 0 10px;
.van-cell {
padding: 10px 0;
}
.box-main {
width: 100%;
display: flex;
padding-top: 10px;
overflow-x: scroll;
}
.hot-item {
display: flex;
flex-direction: column;
width: 100px;
margin-right: 10px;
padding-bottom: 10px;
.img {
position: relative;
span {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 42px;
height: 20px;
z-index: 10;
}
img {
width: 100px;
height: 100px;
}
}
h5 {
color: #212121;
padding: 2px 0;
font-size: 12px;
margin: 0;
}
.line-price {
color: #212121;
font-size: 12px;
.price {
color: #f50;
font-size: 13px;
}
}
&:nth-child(1) .img span {
background: url(/static/home/hot/top1.png) no-repeat;
background-size: 100% auto;
}
&:nth-child(2) .img span {
background: url(/static/home/hot/top2.png) no-repeat;
background-size: 100% auto;
}
&:nth-child(3) .img span {
background: url(/static/home/hot/top3.png) no-repeat;
background-size: 100% auto;
}
}
}
</style>
home界面中导入
<template>
<div class="home">
<h1>旅游网</h1>
<!-- 轮播图 -->
<Banner/>
<!-- 热门推荐 -->
<Hot/>
</div>
</template>
<script>
import Banner from '@/components/home/Banner'
import Hot from '@/components/home/Hot'
export default {
name: 'Home',
components: {
Banner,
Hot
}
}
</script>
演示结果
实现精选景点
创建景点列表公共组件
<template>
<a href="" class="sight-item">
<img src="/static/home/hot/h1.jpg" alt="">
<div class="right">
<h5>{{ item.name }}</h5>
<van-rate v-model="item.score" readonly/>
<div class="tips">4人点评 | 100%满意</div>
<div class="tips light">广东-广州</div>
<div class="line-price">￥ {{ item.price }} 起</div>
</div>
</a>
</template>
<script>
export default {
props: ['item']
}
</script>
<style lang="less">
.sight-item {
display: flex;
margin-top: 10px;
border-bottom: 1px solid #f6f6f6;
img {
width: 100px;
height: 100px;
}
h5 {
color: #212121;
font-size: 14px;
padding: 5px 0;
margin: 0;
}
.right {
text-align: left;
flex-grow: 1;
text-align: left;
justify-content: left;
padding-left: 5px;
position: relative;
}
.line-price {
position: absolute;
right: 10px;
top: 20px;
display: inline-block;
color: #f50;
font-size: 16px;
font-weight: bold;
}
.tips {
font-size: 12px;
color: #666;
&.light {
color: #999;
}
}
}
</style>
实现精选景点
components/home/ 下的 Fine组件
<template>
<!-- 精选景点 -->
<div class="home-fine-box">
<!-- 导航 -->
<van-cell
icon="location-o"
title="热门推荐"
title-style="text-align:left"
value="全部榜单"
is-link />
<!-- 列表 -->
<div class="box-main">
<SightItem v-for="item in dataList"
:key="item.id"
:item="item"/>
</div>
</div>
</template>
<script>
import SightItem from '@/components/common/ListSight'
export default {
components: {
SightItem
},
data () {
return {
dataList: []
}
},
created () {
this.dataList = [
{ id: 1, name: '景点名称', score: 4.5, price: 98 },
{ id: 2, name: '景点名称', score: 4.5, price: 98 },
{ id: 3, name: '景点名称', score: 4.5, price: 98 },
{ id: 4, name: '景点名称', score: 4.5, price: 98 },
{ id: 5, name: '景点名称', score: 4.5, price: 98 }
]
}
}
</script>
<style lang="less">
.home-fine-box {
padding: 0 10px;
.van-cell {
padding: 10px 0;
}
.box-main {
}
}
</style>
home界面中导入
<template>
<div class="home">
<h1>旅游网</h1>
<!-- 轮播图 -->
<Banner/>
<!-- 热门推荐 -->
<Hot/>
<!-- 精选景点 -->
<Fine/>
</div>
</template>
<script>
import Banner from '@/components/home/Banner'
import Hot from '@/components/home/Hot'
import Fine from '@/components/home/Fine'
export default {
name: 'Home',
components: {
Banner,
Hot,
Fine
}
}
</script>
效果
页面底部
components/common/ 下的 Footer组件
<template>
<!-- 底部导航 -->
<div>
<van-tabbar v-model="active">
<van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
<van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data () {
return {
active: 'home'
}
}
}
</script>
home界面导入
<template>
<div class="home">
<h1>旅游网</h1>
<!-- 轮播图 -->
<Banner/>
<!-- 热门推荐 -->
<Hot/>
<!-- 精选景点 -->
<Fine/>
<!-- 页面底部 -->
<TripFooter/>
</div>
</template>
<script>
import Banner from '@/components/home/Banner'
import Hot from '@/components/home/Hot'
import Fine from '@/components/home/Fine'
import TripFooter from '@/components/common/Footer'
export default {
name: 'Home',
components: {
Banner,
Hot,
Fine,
TripFooter
}
}
</script>
效果：
Original: https://blog.csdn.net/weixin_42403632/article/details/121530367
Author: 小旺不正经
Title: Vue+Django 旅游网项目 首页前端实现
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/735704/
转载文章受原作者版权保护。转载请注明原作者出处！