04-开发底部导航

2018-12-26  本文已影响0人  wshsdm

1 为项目下载修改全局样式文件 /static/css/reset.css

这个样式文件能够让整体项目保持全局一致性,原本的网址http://meyerweb.com/eric/tools/css/reset/

在原本的内容中,添加自定义的部分

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

html,body,div,span,applet,object,iframe,

h1,h2,h3,h4,h5,h6,p,blockquote,pre,

a,abbr,acronym,address,big,cite,code,

del,dfn,em,img,ins,kbd,q,s,samp,

small,strike,strong,sub,sup,tt,var,

b,u,i,center,

dl,dt,dd,ol,ul,li,

fieldset,form,label,legend,

table,caption,tbody,tfoot,thead,tr,th,td,

article,aside,canvas,details,embed,

figure,figcaption,footer,header,hgroup,

menu,nav,output,ruby,section,summary,

time,mark,audio,video {

margin:0;

padding:0;

border:0;

font-size:100%;

font:inherit;

vertical-align:baseline;

}

/* HTML5 display-role reset for older browsers */

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

display:block;

}

body {

line-height:1;

}

ol,ul {

list-style:none;

}

blockquote,q {

quotes:none;

}

blockquote:before,blockquote:after,

q:before,q:after {

content:'';

content:none;

}

table {

border-collapse:collapse;

border-spacing:0;

}

/* 自定义 */

a {

color:#7e8c8d;

text-decoration:none;

-webkit-backface-visibility:hidden;

}

li {

list-style:none;

}

::-webkit-scrollbar {

width:5px;

height:5px;

}

::-webkit-scrollbar-track-piece {

background-color:rgba(0,0,0,0.2);

-webkit-border-radius:6px;

}

::-webkit-scrollbar-thumb:vertical {

height:5px;

background-color:rgba(125,125,125,0.7);

-webkit-border-radius:6px;

}

::-webkit-scrollbar-thumb:horizontal {

width:5px;

background-color:rgba(125,125,125,0.7);

-webkit-border-radius:6px;

}

html,body {

width:100%;

height:100%;

}

body {

-webkit-text-size-adjust:none;

-webkit-tap-highlight-color:rgba(0,0,0,0);

}

/*显示省略号*/

.ellipsis{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

2 修改项目入口页面index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<!--添加移动端的支持-->

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

<title>HBIS</title>

<!--引入reset文件-->

<link rel="stylesheet" href="./static/css/reset.css">

<!--引入自定义的阿里自定义字体库-->

<link rel="stylesheet" href="http://at.alicdn.com/t/font_983381_cqucs5xbbxv.css">

<!--解决移动设备.3秒延迟问题-->

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>

<script>

if ('addEventListener' in document) {

document.addEventListener('DOMContentLoaded',function() {

FastClick.attach(document.body);

},false);

}if(!window.Promise) {

document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');

}

</script>

</head>

<body>

<div id="app"></div>

  </body>

</html>

3 修改底部导航组件内容,src/components/FooterGuide/FooterGuide.vue

<template>

<footer class="footer_guide border_1px">

<a href="javascript:;" class="guide_item" @click="goto('/home')" :class="{on:isCurrent('/home')}">

<span class="item_icon">

<i class="iconfont icon-ios-home"></i>

</span>

<span>首页</span>

</a>

<a href="javascript:;" class="guide_item"  @click="goto('/search')" :class="{on:isCurrent('/search')}">

<span class="item_icon ">

<i class="iconfont icon-ios-search"></i>

</span>

<span>搜索</span>

</a>

<a href="javascript:;" class="guide_item" @click="goto('/order')" :class="{on:isCurrent('/order')}">

<span class="item_icon ">

<i class="iconfont icon-ios-list-box"></i>

</span>

<span>订单</span>

</a>

<a href="javascript:;" class="guide_item" @click="goto('/profile')" :class="{on:isCurrent('/profile')}">

<span class="item_icon ">

<i class="iconfont icon-ios-contact"></i>

</span>

<span>我的</span>

</a>

</footer>

</template>

<script>

export default {

name:"FooterGuide",

methods:{

goto(path){

this.$router.replace(path)

},

isCurrent(path){

return this.$route.path===path

}

}

}

</script>

<style lang="stylus" rel="stylesheet/stylus">

.footer_guide

      top-border-1px(#e4e4e4)

     position:fixed

      z-index 1000

      left 0

      right 0

      bottom 0

      background #fff

      width 100%

      height 50px

      display  flex

      .guide_item

           display:flex

           flex 1

          text-align center

          flex-direction column

          align-items center

          margin 5px

          & .on

               color #0000ff

         span

            font-size 12px

            margin-top 2px

            margin-bottom 2px

           .iconfont

                font-size 25px

</style>

上一篇下一篇

猜你喜欢

热点阅读