You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
273 lines
6.0 KiB
273 lines
6.0 KiB
1 year ago
|
<template>
|
||
|
|
<view :class="displaytype==1?'tab-bar_1':'tab-bar_2'">
|
||
|
|
<block v-if="displaytype==1">
|
||
|
|
<view v-if="currenttype=='1'" @click="jump(1)" class="tab-bar-item_1 ">
|
||
|
|
<img src="/static/tabbar/home-a.png" class="icon_1" />
|
||
|
|
<text lines="1" class="text_7">首页</text>
|
||
|
|
</view>
|
||
|
|
<view v-else class="tab-bar-item_1" @click="jump(1)">
|
||
|
|
<img src="/static/tabbar/home.png" class="icon_1" />
|
||
|
|
<text lines="1" class="text_8">首页</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="currenttype=='2'" @click="jump(2)" class="tab-bar-item_2">
|
||
|
|
<img src="/static/tabbar/yingyong-a.png" class="icon_2" />
|
||
|
|
<text lines="1" class="text_7">应用</text>
|
||
|
|
</view>
|
||
|
|
<view v-else @click="jump(2)" class="tab-bar-item_2">
|
||
|
|
<img src="/static/tabbar/yingyong.png" class="icon_2" />
|
||
|
|
<text lines="1" class="text_8">应用</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="currenttype=='3'" @click="jump(3)" class="tab-bar-item_3">
|
||
|
|
<img src="/static/tabbar/learn-a.png" class="icon_3" />
|
||
|
|
<text lines="1" class="text_7">学习</text>
|
||
|
|
</view>
|
||
|
|
<view v-else @click="jump(3)" class="tab-bar-item_3">
|
||
|
|
<img src="/static/tabbar/learn.png" class="icon_3" />
|
||
|
|
<text lines="1" class="text_8">学习</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="currenttype=='4'" @click="jump(4)" class="tab-bar-item_4">
|
||
|
|
<img src="/static/tabbar/user-a.png" class="icon_4" />
|
||
|
|
<text lines="1" class="text_7">我的</text>
|
||
|
|
</view>
|
||
|
|
<view v-else @click="jump(4)" class="tab-bar-item_4">
|
||
|
|
<img src="/static/tabbar/user.png" class="icon_4" />
|
||
|
|
<text lines="1" class="text_8">我的</text>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<block v-if="displaytype==2">
|
||
|
|
<view v-if="currenttype=='1'" @click="jump(1)" class="tab-bar-item_1">
|
||
|
|
<img src="/static/tabbar/home-a.png" class="icon_1" />
|
||
|
|
<text lines="1" class="text_7">首页</text>
|
||
|
|
</view>
|
||
|
|
<view v-else class="tab-bar-item_1" @click="jump(1)">
|
||
|
|
<img src="/static/tabbar/home-b.png" class="icon_1" />
|
||
|
|
<text lines="1" class="text_9">首页</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="currenttype=='2'" @click="jump(2)" class="tab-bar-item_2">
|
||
|
|
<img src="/static/tabbar/yingyong-a.png" class="icon_2" />
|
||
|
|
<text lines="1" class="text_7">应用</text>
|
||
|
|
</view>
|
||
|
|
<view v-else @click="jump(2)" class="tab-bar-item_2">
|
||
|
|
<img src="/static/tabbar/yingyong-b.png" class="icon_2" />
|
||
|
|
<text lines="1" class="text_9">应用</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="currenttype=='3'" @click="jump(3)" class="tab-bar-item_3">
|
||
|
|
<img src="/static/tabbar/learn-a.png" class="icon_3" />
|
||
|
|
<text lines="1" class="text_7">学习</text>
|
||
|
|
</view>
|
||
|
|
<view v-else @click="jump(3)" class="tab-bar-item_3">
|
||
|
|
<img src="/static/tabbar/learn-b.png" class="icon_3" />
|
||
|
|
<text lines="1" class="text_9">学习</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="currenttype=='4'" @click="jump(4)" class="tab-bar-item_4">
|
||
|
|
<img src="/static/tabbar/user-a.png" class="icon_4" />
|
||
|
|
<text lines="1" class="text_7">我的</text>
|
||
|
|
</view>
|
||
|
|
<view v-else @click="jump(4)" class="tab-bar-item_4">
|
||
|
|
<img src="/static/tabbar/user-b.png" class="icon_4" />
|
||
|
|
<text lines="1" class="text_9">我的</text>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "tabbar",
|
||
|
|
props: {
|
||
|
|
currenttype: {
|
||
|
|
type: String,
|
||
|
|
default: "1"
|
||
|
|
},
|
||
|
|
displaytype: {
|
||
|
|
type: String,
|
||
|
|
default: "1"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
jump(type) {
|
||
|
|
|
||
|
|
if (type == 1) {
|
||
|
|
console.log('hahhaha');
|
||
|
|
uni.reLaunch({
|
||
|
|
url: '/pages/index/index'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
if (type == 2) {
|
||
|
|
this.$navTo('pages/yingyong/yingyong')
|
||
|
|
}
|
||
|
|
|
||
|
|
if (type == 3) {
|
||
|
|
this.$navTo('pages/learn/learn')
|
||
|
|
}
|
||
|
|
|
||
|
|
if (type == 4) {
|
||
|
|
this.$navTo('pages/user/user')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.tab-bar_1 {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 105rpx;
|
||
|
|
background: url(/static/tabbarbg.png) 100% no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
flex-direction: row;
|
||
|
|
display: flex;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-bar_2 {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 105rpx;
|
||
|
|
background-image: unset !important;
|
||
|
|
background-color: #eee !important;
|
||
|
|
flex-direction: row;
|
||
|
|
display: flex;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-bar-item_1 {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 70rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 15rpx auto 0 81rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_1 {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_7 {
|
||
|
|
width: 38rpx;
|
||
|
|
height: 19rpx;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
color: rgba(230, 0, 18, 1);
|
||
|
|
font-size: 20rpx;
|
||
|
|
font-family: FZLTKHK--GBK1-0;
|
||
|
|
font-weight: normal;
|
||
|
|
text-align: left;
|
||
|
|
white-space: nowrap;
|
||
|
|
line-height: 20rpx;
|
||
|
|
margin: 7rpx 0 0 2rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-bar-item_2 {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 69rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin: 17rpx 0 0 139rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_2 {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_8 {
|
||
|
|
width: 37rpx;
|
||
|
|
height: 18rpx;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
color: rgba(255, 255, 255, 1);
|
||
|
|
font-size: 20rpx;
|
||
|
|
font-family: FZLTKHK--GBK1-0;
|
||
|
|
font-weight: normal;
|
||
|
|
text-align: left;
|
||
|
|
white-space: nowrap;
|
||
|
|
line-height: 20rpx;
|
||
|
|
margin: 7rpx 0 0 2rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-bar-item_3 {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin: 17rpx 0 0 151rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_3 {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_9 {
|
||
|
|
width: 37rpx;
|
||
|
|
height: 18rpx;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
color: #797979;
|
||
|
|
font-size: 20rpx;
|
||
|
|
font-family: FZLTKHK--GBK1-0;
|
||
|
|
font-weight: normal;
|
||
|
|
text-align: left;
|
||
|
|
white-space: nowrap;
|
||
|
|
line-height: 20rpx;
|
||
|
|
margin: 7rpx 0 0 2rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-bar-item_4 {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin: 17rpx 68rpx 0 135rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_4 {
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_10 {
|
||
|
|
width: 38rpx;
|
||
|
|
height: 18rpx;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
color: rgba(255, 255, 255, 1);
|
||
|
|
font-size: 20rpx;
|
||
|
|
font-family: FZLTKHK--GBK1-0;
|
||
|
|
font-weight: normal;
|
||
|
|
text-align: left;
|
||
|
|
white-space: nowrap;
|
||
|
|
line-height: 20rpx;
|
||
|
|
margin: 6rpx 0 0 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|