移动端公共底部

效果如下

共通出来的vue组件

<template>
  <div class="bottom_tabs">
		<div class="tabs_list">
			<ul>
				<li class="tabs_one">
					<a href="javascript:"><img src="~static/images/home1.png" alt=""></a>
					<span>首页</span>
				</li>
				<li class="tabs_two">
					<a href="javascript:"><img src="~static/images/home2.png" alt=""></a>
					<span>分类</span>
				</li>
				<li class="tabs_three">
					<a href="javascript:"><img src="~static/images/home3.png" alt=""></a>
					<span>购物车</span>
				</li>
				<li class="tabs_four">
					<a href="/"><img src="~static/images/home4.png" alt=""></a>
					<span>我的</span>
				</li>
			</ul>
		</div>
	</div>
</template>
<style lang="scss">
.bottom_tabs{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    ul{
        height: 65px;
        background: #fff;
        padding-top: 10px;
        padding-bottom: 5px;
        li{
            width: 25%;
            float: left;
            position: relative;
            a{
                display: inline-block;
                height: 50px;
                width: 100%;
                -webkit-tap-highlight-color:transparent;
                text-align: center;
                img{
                    width: 22px;
                }
            }
            span{
                display: inline-block;
                width: 100%;
                text-align: center;
                color: #404040;
                position: absolute;
                bottom: 0px;
                left: 0px;
            }
        }
    }
}
</style>