Botton.vue
2.2 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<template>
<view class="btnBottom">
<view class="btn" :class="{onbtn:flag==1}" @click="choosebtn">
<image class="img1" src="~@../../static/ic-tabbar-home-s.png" mode="" v-if="flag==1">
</image>
<image class="img1" src="~@../../static/ic-tabbar-home-n.png" mode="" v-else></image>
<text>首页</text>
</view>
<view class="newbtn" @click="choosebtn">
<view class="add">
<image src="~@../../static/ic-release.png" mode=""></image>
</view>
</view>
<view class="btn" :class="{onbtn:flag==2}" @click="choosemy">
<image class="img1" src="~@../../static/ic-tabbar-my-s.png" mode="" v-if="flag==2">
</image>
<image class="img1" src="~@../../static/ic-tabbar-my-n.png" mode="" v-else></image>
<text>我的</text>
</view>
</view>
</template>
<script>
export default {
name: "Botton",
props: ["flag"],
data() {
return {};
},
methods: {
choosebtn() {
uni.redirectTo({
url: "/pages/index/index"
})
},
choosemy() {
uni.redirectTo({
url: "/pages/mine/mine"
})
}
}
}
</script>
<style lang="scss">
.btnBottom {
position: fixed;
bottom: 0;
width: 100%;
padding: 12rpx 82rpx;
background-color: #ffffff;
display: flex;
align-items: flex-end;
box-sizing: border-box;
justify-content: space-between;
.btn {
display: flex;
flex-direction: column;
align-items: center;
color: rgba(0, 0, 0, 0.4);
font-size: 20rpx;
font-weight: 400;
font-family: "PingFang SC";
.img1 {
width: 48rpx;
height: 48rpx;
}
}
.onbtn {
color: rgba(0, 0, 0, 0.9);
font-size: 20rpx;
font-weight: 600;
}
.newbtn {
width: 132rpx;
height: 132rpx;
border-radius: 66rpx;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -30%);
background-color: #ffffff;
.add {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 112rpx;
height: 112rpx;
border-radius: 56rpx;
opacity: 1;
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56rpx;
height: 56rpx;
}
background: rgba(254, 208, 0, 1);
}
}
}
</style>