源代码地址:https://github.com/BokeChen/Vue-ziroom
接着讲:合租/整租 home页面的实现
4.编写Footer 公共组件
从页面布局来看,可以看出Footer是通过position:fixed来定位的,而且其他页面都有。所以把它归类为公共组件。
在src 的components下面新建Footer.vue 文件。
<template>
<div class="footer">
</div>
</template>
<script>
export default {
name: 'Footer',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../style/mixin.less';
.footer{
}
</style>
拷入footer用到的雪碧图(IconList1.png)到src的assets文件夹下面。IconList1.png 是通过手机截图然后ps切出来的整合的图片。手机截出来的原图是手机屏幕的两倍,为了省事,我修改了html的视口比例,设置initial-scale=0.5。这样css的尺寸就可以直接用截图的尺寸了。
footer公共组件创建好后,需要在首页里面引用。
home里面的引用:
<template>
...
<Footer activeTapIndex="0"></Footer>
...
</template>
<script>
import Footer from '../../components/Footer.vue';
export default {
...
mponents:{
Footer,//子组件声明
}
...
}
</script>
Footer:
<template>
<div class="footer">
<ul class="footer-ul">
<li v-for="(item ,index) in links">
<router-link v-bind:to="item" v-bind:class="(index==activeTapIndex)?('activeColor'+index):''">
<i class="footer-Icon"></i>
<p> {{linkContent[index]}}</p>
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Footer',
props: ["activeTapIndex"],//父组件的传值,告诉子组件要激活的选项
data () {
return {
links: ['/home','/apartment','/postStacks','lifeService','/main'],//导航的路由
linkContent: ['合租/整租','自如寓','民宿/驿栈','生活服务','我的'],//导航栏文字说明
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../style/mixin.less';//引进@rootFontSize等一些基本设定值
.footer{
height:120rem/@rootFontSize;
width:100%;
background-color:white;
ul{
display:flex;
justify-content: space-between;
p{color:@comonColorGray;}
}
//li 单独放出来了是为了缩减选择器的层级,推荐选择器的层级最好不大于3级
li{
padding-top:24rem/@rootFontSize;
width:20%;
text-align: center;
.footer-Icon{
display:inline-block;
width:49rem/@rootFontSize;
height:45rem/@rootFontSize;
background:url(../assets/IconList1.png) no-repeat 0 0;
background-size:736rem/@rootFontSize 518rem/@rootFontSize; //限制背景图的大小
}
}
li:nth-child(1) .footer-Icon{
background-position: 0 0;//雪碧图的取图方法
}
li:nth-child(2) .footer-Icon{
background-position: -149rem/@rootFontSize 0;//雪碧图的取图方法
}
li:nth-child(3) .footer-Icon{
background-position: -299rem/@rootFontSize 0;//雪碧图的取图方法
}
li:nth-child(4) .footer-Icon{
background-position: -446rem/@rootFontSize 0;//雪碧图的取图方法
}
li:nth-child(5) .footer-Icon{
background-position: -594rem/@rootFontSize 0;//雪碧图的取图方法
}
.activeColor0{
p{color:@comonColorBlack;}//被激活的菜单,字体变黑显示
.footer-Icon{
background-position: 5rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
}}
.activeColor1{
p{color:@comonColorBlack;}//被激活的菜单,字体变黑显示
.footer-Icon{
background-position: -149rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
}}
.activeColor2{
p{color:@comonColorBlack;}//被激活的菜单,字体变黑显示
.footer-Icon{
background-position: -299rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
}}
.activeColor3{
p{color:@comonColorBlack;}//被激活的菜单,字体变黑显示
.footer-Icon{
background-position: -446rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
}}
.activeColor4{
p{color:@comonColorBlack;}//被激活的菜单,字体变黑显示
.footer-Icon{
background-position: 594rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
}}
}
</style>
在公共样式里面添加.footer的类设置
common.less:
...
.footer{
position:fixed;
bottom:0;
left:0;
}
运行后的效果图:
5.编写Header公共组件
在components文件夹下面添加Header.vue 。header.vue 所需要的背景图放置的assets文件夹下面。
Header.vue:
<template>
<header class="header">
<div>
<p v-if="bannerScrollTop<50">
<img class="header-logo" v-bind:src="require('../assets/ziroomlogo.png')"/>
<span class="header-province">{{province}}</span>
</p>
<p v-else>
<i class="header-serchIcon"></i>
<input class="header-searchInp" type="text" />
</p>
<span class="header-msgTip"></span>
</div>
</header>
</template>
<script>
export default {
name: 'Header',
props: ["bannerScrollTop","searchInputShow","province"],//父组件的传值,告诉子组件要激活的选项
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../style/mixin.less';//引进@rootFontSize等一些基本设定值
.header{
width:100%;
height:76rem/@rootFontSize;
line-height:70rem/@rootFontSize;
background-color:@comonColorWhite;
div{
position:relative;
p{height:100%;line-height:76rem/@rootFontSize;}
.header-logo{
padding-left:28rem/@rootFontSize;
padding-right:30rem/@rootFontSize;
padding-top:19rem/@rootFontSize;
}
.header-province{
font-size:24rem/@rootFontSize;
padding-right:24rem/@rootFontSize;
background:url(../assets/IconList1.png) no-repeat -43rem/@rootFontSize -138rem/@rootFontSize;
background-size:@IconListWidth @IconListheight;
}
.header-msgTip{
position:absolute;
top:19rem/@rootFontSize;
right:26rem/@rootFontSize;
width:38rem/@rootFontSize;
height:38rem/@rootFontSize;
background:url(../assets/IconList1.png) no-repeat 0rem/@rootFontSize -139rem/@rootFontSize;
background-size:@IconListWidth @IconListheight;
}
.header-searchInp{
width:631rem/@rootFontSize;
height:61rem/@rootFontSize;
border-radius:63rem/@rootFontSize;
font-size:28rem/@rootFontSize;
border:none;
outline:none;
background-color:@comonColorGray;
margin-left:29rem/@rootFontSize;
padding-left:70rem/@rootFontSize;
padding-right:30rem/@rootFontSize;
}
.header-serchIcon{
position:absolute;
top:23rem/@rootFontSize;
left:54rem/@rootFontSize;
width:32rem/@rootFontSize;
height:32rem/@rootFontSize;
background:url(../assets/IconList1.png) no-repeat -156rem/@rootFontSize -146rem/@rootFontSize;
background-size:@IconListWidth @IconListheight;
}
}
}
</style>
在home.vue 里面引进Header.vue:
<template>
...
<Header bannerScrollTop="0" searchInputShow="1" province="北京"></Header>
...
</template>
<script>
import Header from '../../components/Header.vue';
export default{
...
components:{
Footer,//子组件声明
Header
}
...
}
</script>
在common.less 里面添加固定定位。
common.less
...
.header{
position:fixed;
top:0;
left:0;
z-index:1;
}
...
Head.vue 组件基本写完,就是还差点样式过渡效果。
其他组件的编写,都差不多这个思路。
现完成的首页的样式效果:
一个人切图拼图量尺寸,写html写样式,再写js,这些活都很需要时间,所以整体进度会有点点慢。如果这些页面都写完,后面我会考虑用nodejs+mySql写个后台。