第六章 旅游网站首页开发
首页导航栏
根据设计稿完成页面的布局:
在正式编写代码之前,先来介绍一下stylus
这是一种与less、sass
一样的功能,可以帮助我们快速完成css代码的编写。请使用一下命令进行安装:
npm install stylus --save
npm install stylus-loader --save
开始编写header
页面:
<template>
<div class="header">
<div class="header-left">返回</div>
<div class="header-input">输入城市景点/游玩/主题</div>
<div class="header-right">城市</div>
</div>
</template>
<script>
export default {
name: 'HomeHeader'
}
</script>
<!-- 要使用stylus使用lang标识,只想对当前组件有效使用scoped -->
<style lang="stylus" scoped>
.header
display: flex
color: #fff
background: #00bcd4
line-height: .86rem
.header-left
width: .64rem
float: left
.header-input
flex: 1
background: #fff
margin-top: .12rem
height: .64rem
line-height: .64rem
margin-left: .2rem
border-radius: .05rem
color: #ccc
.header-right
width: 1.24rem
float:right
text-align: center
</style>
如果页面出现顶部有空白的情况,解决办法是在App.vue中的style
中设置内边距和外边距的值为0,一般情况下不会有出现,除非你真是出现了。
<style>
*{
padding: 0;
margin: 0;
}
</style>
现在我们向把“返回”换成一个图标的形式,就会用到下一节要说的内容。
iconfont的使用和代码优化
首先我们进入iconfont官网,没有账号的先进行注册,注册好了记得新建一个项目(travel)。
如果你已经注册好,点击图标库>官方图标库>选择任意一个,找到我们的需要的图标并且添加到购物车之中>点击右边的购物车并点击添加至项目>然后下载到本地
这时我们会得到一个包,我们只需要用到其中几个文件就可以。我们把需要用到的文件拷贝到我们项目中。
我们可以看到图中,我把除了.css
的的文件放在了style文件夹中,把其它类型的文件放在了新建的iconfont文件夹中。
这时我们在编辑器中打开iconfont.css
文件,我们需要修改一下它所使用到的文件的路径
下面的这一部分可以注释掉或者删除。根据自己的理解来使用,这里我选择不使用这种方法,因为它写的都是中文的拼音。
接下来我们将iconfont.js
引入到入口文件中。
import './assets/styles/iconfont.css'
完成以上的步骤,如果没有出错的话,我们就可以开始在页面中开始使用这些图标了。
在Header.vue
文件中这样写:
<template>
<div class="header">
<div class="header-left"><span class="iconfont"></span></div>
<div class="header-input"><span class="iconfont"></span>输入城市景点/游玩/主题</div>
<div class="header-right">城市<span class="iconfont"></span></div>
</div>
</template>
上面代码中的Unicode代码可以在iconfont官方你的项目文件中选择Unicode并复制代码,就可以得到了。这也就为什么我们前面要注释那些样式代码的原因了。
图标是有了,但是我们还需要做一些位置的优化:
<template>
<div class="header">
<div class="header-left"><div class="iconfont back-icon"></div></div>
<div class="header-input"><span class="iconfont search-icon"></span>输入城市景点/游玩/主题</div>
<div class="header-right">城市<span class="iconfont arrow-icon"></span></div>
</div>
</template>
<style lang="stylus" scoped>
.header
display: flex
color: #fff
background: #00bcd4
line-height: .86rem
.header-left
width: .64rem
float: left
.back-icon
text-align: center
font-size: .4rem
.header-input
flex: 1
background: #fff
margin-top: .12rem
height: .64rem
line-height: .64rem
margin-left: .02rem
border-radius: .05rem
padding-left: .2rem
color: #ccc
.search-icon
padding-right: .1rem
.header-right
width: 1.24rem
float:right
text-align: center
.arrow-icon
font-size: .24rem
</style>
完成以上的内容我们就可以看到现在的效果:
代码的优化:
由于我们这个项目的主题颜色,是绿色。在以后的很多组件都会用到这个颜色。我们可以定义一个变量,需要的时候直接引用就可以了。
首先需要在src/assets/styles
目录下新建一个varibles.styl
这样的一个文件,表示是一个stylus
格式的文件。并且在文件中写上一下内容。该文件可以用来写一些变量。
$bgColor = #00bcd4
下面就就要在Header.vue