BottomBar.vue 6.1 KB
Newer Older
王建威's avatar
王建威 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<template>
	<view>
		<view class="bottom-bar">
			<view @click="jumpPhpPage()">
				<i class="home_icon"></i>
				<text>首页</text>
			</view>
			<view @click="jumpPhpPage('app=category')">
				<i class="cate_icon"></i>
				<text>分类</text>
			</view>
			<view @click="jumpPhpPage('app=cart')">
				<i class="cart_icon"></i>
				<text>购物车</text>
			</view>
			<view @click="jumpPhpPage('app=member')">
				<i class="shop_icon"></i>
				<text>我的商城</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { php } from '../../common/host.js';
	export default {
		data() {
			return {
				php: php
			}
		},
		methods: {
			jumpPhpPage(url) {
				let link = url ? `${php}${url}` : php;
				window.location.href =  link;
			}
		}
	}
</script>

<style lang="less" scoped>
	.bottom-bar {
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #dcdcdc;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		background: #fff;
王建威's avatar
王建威 committed
51
		z-index: 100;
王建威's avatar
王建威 committed
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
		i {
			display: block;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
			position: relative;
			top: 14rpx;
		}
		.home_icon {
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAABSlBMVEUAAAAlFhQUDgkTDwpfX18SDQoSDQcwMDAWDwkZFQ0cEBAIAQQIAgMTDgkUDgoVDQ0TDwkIAQQhGQskGwsnHQuuhCESEQwTDggIAQMUDwjjryjhrCiqgiATDgr//5UTDgingR8TDwgIAQQIAQQJAQT6wC0TDwgJAgP7wSz6wC3+wjAZFQv/1Uf6wCwTDwn5wCwJAQMaEgkUDgj5wCyYdR0TDglKORAUDgkTDgkOCQf5wS0IAgQJAwT7wC77wi0QDggYEAwgICD1uyvpsisJAQP6wCz6wC0TDwnXpSf5wC0IAQTAkyOfeR4TDwkUDwkJAQS1iyGxiSH6vy0wJA07LBB0WRgIAQTfrChhSRT5vy35wC0JAgP6vy0UDgkUDwn5wC35wS0UEAn6wCwUDgnHmCP8wCz7wjAUDwpANQv/yDf/0S4TDgj6vywIAQO/pr9xAAAAa3RSTlMADGNyAnQ5BR0TEL6dyUIg7djS0M7NJvz59unnzGoB+Mu7uLSsnpWRdGYsFwb07+bl3tjVx8fBpZ+Eg31URT4tHwj57+7r6uPe3dnU0tLR0dDPzMjEwMC/v7SrpZSNiomHcG1YV1E7MxgOC7YxrVcAAAHjSURBVDjL1dRXc5tAEMDxBSMksMDESdQSSbEk1yiOa2zHLU7vvTf3uvD9X73HMVoQZ439Zv+fgPvNaWc4AVe7rKZqw1BQ10F1xYVCt60W8cwmzaQ1sVeelcBihqWcptmURR3t/ahUKreoN19oaSS5cfSAq435sseDiGUbuEXEugVd7Uf6IyJW+bFdRlyAVA8jPY34jp9uI6KZxu37En9LLM8gvmeT2vpJGXERoiweKtmBL/uKOGmAbJ3wXRU+ifDbGHARZ0BZNHSFcIGxo8affVkMm4helsVof1hLA/gl7csYHqDrDOPXQVgpBzAs8QMCGsiMF4hFnd99KcR9dLkV2p9khzrLu0jxILqweaB2hP1Ei/VD6DTCWLQUBI3wdlXgm7SoA6cnMTSn5Ijt5xEe6MIGcPlrIBu7CK4N98KWzdgg0p7tgT80sx08+nRDDHKbFh914RqEIPi+LnGuFTQAYFyJQbYcBM3l/qlMqxTkxY9shjinxlD4I99gwwSq9qoXpjRzZcW1gRJT+HdUWNXEvfPjtWe+EnuKbeUJnYv+VIzLepwdT6yO/531O6e5biQ+zbG7td80KDdX5NPMGX1DjuPMzw9S10U3RNNIuSn8D8/qP6TyUJ1XBcUUyTIy3dXgknUK0SzgDYs5mO8AAAAASUVORK5CYII=)no-repeat center center;
			background-size: 100%;
		}
		.cate_icon {
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAABF1BMVEUAAAAcHBwUDwgUDgkTDgkTDggTDggUDggTDwkTDwk+Pj4cFAkUDggUDgkTDgkUDgkUDwkUDgkWEQsbFQ07LQ49Lw8TDwgUDwkTDwoWEgkUDwoTDggTDwgTDggTDwgTDgkUDggTDgoUDwoVDgslGwsdFgkUDggTDggTDwkUDwgUEQo0KQ0UEAocGA0aEgkVFRUTDwkTDgg/MA9AMQ9AMg8VDwgTDwkVEAoVEAsUEAkVFQojEREtIQsUDwguIw04Kw4UDwlCMhBBMQ8UDwkUDghAMBBAMRE+Lg4VDgk4KxAXDw8TDgj5vyx4WxdvVRYXEQgqHwwgGQryuivmsCiCYxlNOxHRoCbGmCS2jCKpgR9sUxY6LA4tIg3/BqV7AAAAS3RSTlMACJnD5fzYtKnwBBv36a+Pc1ctEtfOnZSEODL58vG6oX5pZ0b+/tzU0V1LPz8nHQvuyMG3kXp3YmBQFw709PPfwaOdjIB/eG9tTiLqLyxHAAAB5ElEQVQ4y+WU13KbQBhGkQUqCIiMbHXJ6sVWcY0dO70nRwmRS/r7P0eIWLOLx+YumczkXAD/t2fZZfhB+19IjEsZn2I+F0a5w/1Nn4M3iRtuJYWg3hHRqz6CxztR1/itZbNZAyivomcAy+WyD3iqnUhhlFfrz9dtjKp/sePR+3a+8Lm49Hio7OQYysoijn/agC8LwSW8lnIRCmGRxPaPPa4W11zAvpQd7MhM/wjfFyE9NuR4Gl0Wa0L+KOVPf0fOYJkx8rnHppRbsB0jf4XnUp5a6O6d8uefeFNNch9qzdK9FUMh//gQcOXBoaZglpAIWeHA1CJMmo/ukPtP3t3W0iHR4o+Qc2fmLXEh7zxNXiPMkg7sFqc33W0dhVU0tggw8lG3C9RSAdlA7gCptXxpBLxU3TMd660ZeYNVAyu443EDuorchmBAymk4kcuOFHkLzqLyqUFTHXbj+vkBtEUtihi5DZUwmUE5Tj5RO7wKR3HyBFph0oF19QGNhDKz4ffsLnZB+V8V1N6XU3MNksGX5gQ3MIuwpklmdeyJcJMw9s/zIQy7Cc2s7EHjVFPoAKOMT9KC9Cp6PwCMQQ2AF5rKkR8KHLG/QoaAvXqwS4m7Ncj66E0ldltOMl2ualU7Ksczd7V/iV/8C5Mn329uRwAAAABJRU5ErkJggg==)no-repeat center center;
			background-size: 100%;
		}
		.cart_icon {
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAA9lBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD6wi0AAAAAAAAAAAAAAAAAAAAAAAAAAAAKCAEAAAAAAAAAAAAAAAADAwAAAAAAAAAAAAD/xTAAAAD/1DoAAAAAAAAAAAAAAAD7wyz8xC77xC8uIwgWEQNTPw5GNgz7wiwmHgcAAAAAAAD7wS0AAAD7wSwAAAAAAAAAAAD6wS38wy37wS0AAAD/xjD//0AAAAD6wSxQPg54XRUuIwg4KwlaRQ9pURLyuirstinqtCnVpCXDliKyiR+NbBhyWBQzKAkyJggBVTZuAAAAQHRSTlMAQwziMyEYFvf9B6Sj5sQD25plKc+Ubkck/vbwuK6pXFEvJxAL7Na/sX9NPP7+/fzt5+HGtZqQi4mDa1U+OB0ECOMiggAAAVhJREFUOMvN1OdOwzAUhmG3lKQ2DQltuvde7L35ApQ97/9mCJGKTl278h8Er5QfR+dRZCmK2Z8nXGOa9rljGdoqwhqG7wVQ7seNbLsLXjc9ch44YKblgBibya1Xe0tyXoSyQGHGFnyoGrCwFcCm1nKUltdVuAZ0c5m4nGAKnAfUH4hgOjaYKfZQco1xGT6LEglam0WlZnESqyyqApq3GFdB83+wpcLuMk1osarfxK3xaFyT8c7ad4fD07Pz1mWnc8VYpzUa7m8HYXcyngRRb7fT1sPnPQgW4U/QikpcmuKXG9qrEjvYCPRNAEFwH3jW2scidqVfckuL74EsxcIDNp+U9CG0ZZvRYgD4x/V8kyKAtHw3cGg7YnKJiprzvbzySkvE5ruw52Eh3WRS2mWzBN7Q2UQSnB4lC6AiI7ockPkEQE2HjwGkyGz34GR02PKkpZsRTJsIl/+qL/pUf+OcGQ4QAAAAAElFTkSuQmCC)no-repeat center center;
			background-size: 100%;
		}
		.shop_icon {
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAA3lBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD7wiwAAAAAAAAAAAD7wi0AAAAAAAAAAAD/yTL6wiwAAAD7wSwAAAAAAAD6wi0AAAAAAAAAAAD8wi0AAAAAAAAAAAD/2U77wiz6wi0AAAD7wi38wi37wSz6wyz8wy78wiz7wS7/xC//xjkAAAD7wSyT/PkuAAAASHRSTlMA4bj75ncK9vGbIstBEwfZ1KGBamNfNCUD3pOOilJNQy8pHQ7s6L6xq3x8cD4S1M68taWhl4dzT0g5NwbxzMK0k4RuXktCKwmQ/edfAAABrUlEQVQ4y82U2VbiQBCGGzuBJBCWJAQBARFRFtFxm1Fn37+8/wtN4gyDJ6mOXvpdpE/V+XNS/VdV1GulOuna4ch7ibRxWuORtl1V5RxdssMalWrvLdCX0b13OB5YwO2+WXtYg73ptnQ7jYZGrV+B4EkcW9A1iW9gmP+S48vanqaeqzGEA1l8C5Ncar/FsXzHNpVCzoYzsXFwU/QH3oolS/mqwb0HiIpZTUcSe2Cnx3L+6298/fG9UjODHU1w0+Nrcr7JwmUyT8UxrJVEHSt9/j5P5ssf398kybs0CiAWxSvIxmyT6lI+ZNpmBcswnjVaTZXy88vn62+bfzavlMwBuas3NJZpA2ZtcJu7+M6BsTLhHUN9215/oDMzzfRawEUQdbthtop6rcrwXc1/2mfP7HadHc6qbL9npwD9xVWns/ikAWtSWrF2p9uKogrosMwL7+m0BIIfsssZYwctOn2FMLoNjXNU1MZwIexmCG4xe4KO5cHVU2FPFrLzwq6soaFE+rSKVThKZgi9wvsnBvEI7nKpGtZegcduPhR+pVWNROaxPxjkJyToVyQi9Rr5A0ULTH4PXjfXAAAAAElFTkSuQmCC)no-repeat center center;
			background-size: 100%;
		}
		text {
			font-size: 20rpx;
			color: #6e6e6e;
		}
	}
</style>