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
51
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
82
83
84
85
86
87
88
<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;
align-items: center;
border-top: 1px solid #dcdcdc;
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background: #fff;
z-index: 100;
height: 88rpx;
padding-bottom: env(safe-area-inset-bottom);
view {
width: 25%;
text-align: center;
}
i {
display: block;
width: 44rpx;
height: 44rpx;
margin: 0 auto;
position: relative;
top: 16rpx;
}
.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>