页面效果:

1.初始化默认布局

nuxtjs提供了一个公共布局组件layouts/default.vue,该布局组件默认作用于所有页面,所以我们可以在这里加上一些公共样式,在下一小结中还会导入公共组件。

替换layouts/default.vue代码如下:

<template>
<div>
<!-- 内容占位组件 -->
<nuxt />
</div>
</template> <script>
export default { }
</script> <style lang="less">
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
} *{
margin:0;
padding:0;
}
ul, li, ol{
list-style:none;
}
a{
text-decoration:none;
color:inherit;
}
a:hover{ }
em,i{
font-style: normal;
}
</style>

layouts/default.vue

2.新建公共组件

思路:

1.在components中新建需要复用的头部组件和页脚组件

2.在默认布局中layouts/default.vue中导入公共组件

组件约定:公共组件不需要放到子文件夹中

下拉组件文档:https://element.eleme.cn/#/zh-CN/component/dropdown#ji-chu-yong-fa

实现步骤

头部组件

components文件夹中新建头部组件components/header.vue

<template>
<div class="container">
<el-row type="flex" class="main" justify="space-between">
<!-- logo -->
<div class="logo">
<nuxt-link to="/">
<img src="http://157.122.54.189:9093/images/logo.jpg" alt />
</nuxt-link>
</div> <!-- 菜单 -->
<el-row type="flex" class="navs">
<nuxt-link to="/">首页</nuxt-link>
<nuxt-link to="/post">旅游攻略</nuxt-link>
<nuxt-link to="/hotel">酒店</nuxt-link>
<nuxt-link to="/air">机票</nuxt-link>
</el-row> <!-- 右侧登录注册 -->
<div class="right-login">
<div v-if="false">
<nuxt-link to="/user/login">登录/注册</nuxt-link>
</div> <div>
<el-dropdown>
<span class="el-dropdown-link">
<img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt="">
托马斯
<i class="el-icon-arrow-down el-icon--right"></i> <!-- 小箭头 -->
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-row>
</div>
</template> <script>
export default {};
</script> <style lang="less" scoped>
.container {
box-shadow: 0 2px 2px #ddd;
} .main {
width: 1000px;
margin: 0 auto;
height: 60px;
line-height: 60px; } .logo {
margin-right: 20px;
img {
width: 156px;
height: 42px;
margin-top: 9px;
}
} .navs {
margin: 0 20px;
flex: 1;/* 让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: */
a {
display: block;
padding: 0 20px;
height: 60px;
box-sizing: border-box; &:hover {
color: #409eff;
border-bottom: 5px #409eff solid;
}
} /deep/ .nuxt-link-exact-active { /* /deep/ 是为了重置element-ui组件中的样式*/
background: #409eff;
color: #fff; &:hover {
color: #fff;
}
}
} .el-dropdown-link{
img{
width: 36px;
height: 36px;
vertical-align: middle;
border-radius: 50%;
}
}
</style>

header.vue

layouts/default.vue中导入头部组件

<template>
<div>
<Header></Header>
<!-- 内容的占位符,类似router-view -->
<nuxt /> </div>
</template> <script>
import Header from '@/components/header'
export default {
// 注册组件
components: {
Header
}
}
</script> <style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
} *{
margin:0;
padding:0;
} ul, li, ol{
list-style: none;
} a{
color:inherit;
text-decoration: none;
} em,i{
font-style: normal;
}
</style>

default.vue

页脚组件

components文件夹中新建头部组件components/footer.vue

<template>
<div class="footer-wrapper">
<div class="footer">
<el-row class="info-list">
<el-col :span="6" :offset="1">
<h5>闲云旅游网</h5>
<p>上亿旅行者共同打造的旅游神器</p>
<p>
<span>60,000</span>多个全球旅游目的地
</p>
<p>
<span>60,000</span>个细分目的地新玩法
</p>
<p>
<span>760,000,000</span>次攻略下载
</p>
<p>
<span>38,000</span>家旅游产品供应商
</p>
</el-col> <el-col :span="5">
<h5>关于我们</h5>
<p>隐私政策 商标声明</p>
<p>服务协议 游记协议</p>
<p>商城平台服务协议</p>
<p>网络信息侵权通知指引</p>
<p>闲云旅游旅游网服务监督员</p>
<p>网站地图加入闲云旅游</p>
</el-col> <el-col :span="5">
<h5>旅行服务</h5>
<p>旅游攻略 酒店预订</p>
<p>旅游特价 国际租车</p>
<p>旅游问答 旅游保险</p>
<p>旅游指南 订火车票</p>
<p>旅游资讯 APP下载</p>
</el-col> <el-col :span="6" class="scan">
<p>
<img src="http://157.122.54.189:9093/images/1556522965.png" alt />
</p>关注我们
</el-col>
</el-row> <div class="licence">
京ICP备08001421号 京公网安备110108007702 Copyright © 2016-2019 博学谷 All Rights Reserved
</div>
</div>
</div>
</template> <script>
export default {};
</script> <style lang="less" scoped>
.footer-wrapper{
background: #333;
color: #ccc;
min-width: 1000px;
} .footer{
padding-top: 30px;
margin: 0 auto;
width: 1000px;
} .info-list{
h5{
font-weight: normal;
font-size: 16px;
margin-bottom: 10px;
} p{
font-size: 12px;
line-height: 1.8;
span{
color: skyblue;
font-weight: bold;
font-style: italic;
}
}
} .scan{
text-align: center; img{
width: 140px;
height: 140px;
} font-size: 12px;
}
.licence{
border-top: 1px #666 solid;
margin-top: 20px;
padding: 50px 0;
text-align: center;
font-size: 12px;
}
</style>

footer.vue

layouts/default.vue中导入页脚组件

<template>
<div>
<Header></Header>
<!-- 内容的占位符,类似router-view -->
<nuxt />
<Footer></Footer> </div>
</template> <script>
import Header from '@/components/header'
import Footer from '@/components/footer'
export default {
// 注册组件
components: {
Header,
Footer
}
}
</script>

总结:

  1. layouts/default.vue是默认的布局组件,会作用于任何页面。

  2. layouts/default.vue中导入全局的头部组件和页脚组件

3.首页轮播图和TAB栏

pages/index.vue内容替换成以下代码:

<template>
<div class="container">
<!-- 轮播图 -->
<el-carousel :interval="3000" arrow="hover">
<el-carousel-item v-for="(item,index) in banners" :key="index">
<div
class="banner-image"
:style="`
background: url(${$axios.defaults.baseURL + item.url}) center center no-repeat;
background-size:contain contain;
`"
></div>
</el-carousel-item>
</el-carousel> <!-- 搜索框 -->
<div class="banner-content">
<div class="search-bar">
<!-- tab栏 -->
<el-row type="flex" class="search-tab">
<span
v-for="(item, index) in tabs"
:key="index"
:class="{active: currentTab === index}"
@click="handleChangeTab(index)"
>
<i>{{item.name}}</i>
</span>
</el-row> <!-- 输入框 -->
<el-row type="flex" align="middle" class="search-input">
<input :placeholder="tabs[currentTab].placeholder" />
<i class="el-icon-search"></i>
</el-row>
</div>
</div>
</div>
</template> <script>
export default {
// data是一个函数,返回一个对象
data() {
return {
banners: [],
currentTab: 0,
// tab栏的数据
tabs: [
{ name: "攻略", placeholder: "搜索城市" },
{ name: "酒店", placeholder: "请输入搜索酒店的城市" },
{ name: "机票", placeholder: "", pageUrl: "/air" }
]
};
},
methods: {
// tab栏切换
handleChangeTab(index) {
// 如果点击的是机票,跳转到机票页面
if (index === 2) {
this.$router.push("/air");
} // 修改当前高亮显示
this.currentTab = index;
}
}, // 页面加载时自动执行的生命周期函数
mounted() {
// 这里可以使用this.$axios是因为框架已经自动帮我们把axios绑定到原型上了
// 手动将axios绑定到原型上的方法:Vue.prototype.$axios = axios
this.$axios({
url: "/scenics/banners",
method: "GET"
}).then(res => {
const { data } = res.data;
this.banners = data;
});
}
};
</script> <style lang="less" scoped>
.container {
min-width: 1000px;
margin: 0 auto;
position: relative; /* 相对定位 */ /deep/ .el-carousel__container {
height: 700px;
}
.banner-image {
width: 100%;
height: 100%;
} .banner-content {
z-index: 9;
width: 1000px;
position: absolute;
left: 50%;
top: 45%;
margin-left: -500px;
border-top: 1px transparent solid; .search-bar {
width: 552px;
margin: 0 auto;
} .search-tab {
.active {
i {
color: #333;
}
&::after {
background: #eee;
}
} span{
width: 82px;
height: 36px;
display: block;
position: relative;
margin-right: 8px;
cursor: pointer; i{
position: absolute;
z-index: 2;
display: block;
width: 100%;
height: 100%;
line-height: 30px;
text-align: center;
color: #fff;
} &::after{
position: absolute;
left: 0;
top: 0;
display: block;
content: "";
width: 100%;
height: 100%;
border: 1px rgba(255, 255, 255, .2) solid;
border-bottom: none;
transform: scale(1.1,1.3) perspective(.7em) rotateX(2.2deg);
transform-origin: bottom left;
background: rgba(0, 0, 0, .5);
border-radius: 1px 2px 0 0;
box-sizing: border-box;
}
}
} .search-input{
width: 550px;
height: 46px;
background: #ffffff;
border-radius: 0 4px 4px 4px;
border: 1px rgba(255, 255, 255, .2) solid;
border-top: none;
box-sizing: unset; input{
flex: 1;
height: 20px;
padding: 13px 15px;
outline: none;
border: 0;
font-size: 16px;
} .el-icon-search{
cursor: pointer;
font-size: 22px;
padding: 0 10px;
font-weight: bold;
}
}
}
}
</style>

Nuxt.js打造旅游网站第2篇_首页开发的更多相关文章

  1. Nuxt.js打造旅游网站第1篇_项目环境搭建

    1. 安装 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 注意:在NPM版本5.2.0默认安装了npx, ...

  2. Nuxt.js打造旅游网站第3篇_登录页面的编写

    主要知识点: 1.使用vuex/store管理数据 2.登录注册逻辑 3.Nuxt的本地存储 1.登录页面 1.1登录页面布局 替换pages/user/login.vue的代码如下 <temp ...

  3. Nuxt.js开启SSR渲染快速入门

    第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多 ...

  4. Nuxt.js入门学习

    Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用, ...

  5. Nuxt.js 学习笔记

    起源 最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作.搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成 ...

  6. 【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)

    本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢 ...

  7. Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  8. 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

    前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...

  9. [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

随机推荐

  1. AppServer初始化渠道

    1.写了一个拦截器(RequestInterceptor) 2.里边有个有一个doRequest()方法 3.初始化渠道的方法(initRequestContext()) -------------- ...

  2. windows 标准错误重定向

    最近在windows上运行tensorflow的时候,出现很多stderr 的信息,干扰了正常的输出:所以我们需要使用操作把这些输出屏蔽: 参考链接:https://support.microsoft ...

  3. 在C#应用中使用Common Logging日志接口

    我在C#应用中一般使用log4net来记录日志,但如果项目中有个多个工程,那么没有工程都需要引用log4neg,感觉很不爽.不过今日在开spring.net的时候,看到了有个通用日志接口Common ...

  4. CSS的color属性并非只能用于文本显示

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过 ...

  5. 学习Python笔记---if 语句

    条件测试 每条if语句的核心都是一个值为True或False的表达式,这种表达式被称为条件测试.Python根据条件测试的值True还是False来决定是否执行if语句中的代码.如果条件测试的值为Tr ...

  6. Vue.之.项目开发工具选用

    Vue.之.项目开发工具选用 上篇文章记录了创建项目,这篇文件记录,如何对创建的项目进行开发.这里选择一个工具:Visual Studio Code (请自行下载安装) 1. 打开VSCode工具,并 ...

  7. Codeforces 608E. Marbles

    E. Marbles time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  8. WordPress不同分类使用不同的文章模板

    倡萌昨天分享的 Custom Post Template 和 Single Post Template 可以让你自定义每篇文章的文章模板,今天来说说WordPress不同分类使用不同的文章模板. 方法 ...

  9. Vbulletin Used to Show Malicious Advertisements

    In the past, we have seen a massive amount of vBulletin websites compromised through theVBSeo Vulner ...

  10. 【JZOJ5060】【GDOI2017第二轮模拟day1】公路建设 线段树+最小生成树

    题面 在Byteland一共有n 个城市,编号依次为1 到n,它们之间计划修建m条双向道路,其中修建第i 条道路的费用为ci. Byteasar作为Byteland 公路建设项目的总工程师,他决定选定 ...