Skip to content

J
jz_Travel
Commit d96b5b3b authored by 黄奎's avatar 黄奎
Browse files
Options

11

parent 24fd0823
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 100 deletions
components/tabbar/index.vue
View file @ d96b5b3b
<style scoped> <style scoped>
/* .tabbarMain { .tabbarMain {
height: 100upx; height: 100upx;
position: fixed; position: fixed;
z-index: 50; z-index: 50;
...@@ -87,11 +87,11 @@ ...@@ -87,11 +87,11 @@
z-index: 1; z-index: 1;
bottom: 10upx; bottom: 10upx;
border-radius: 150upx; border-radius: 150upx;
} */ }
</style> </style>
<!-- <template> <template>
<view <view
class="tabbarMain" class="tabbarMain bar-box"
:class="[flagTypeInfo ? 'tabbarMainIphone' : '']" :class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
v-if="navs && navs.length > 0" v-if="navs && navs.length > 0"
> >
...@@ -128,9 +128,9 @@ ...@@ -128,9 +128,9 @@
</view> </view>
</view> </view>
</view> </view>
</template> --> </template>
<!-- <script> <script>
export default { export default {
data() { data() {
return { return {
...@@ -205,71 +205,75 @@ export default { ...@@ -205,71 +205,75 @@ export default {
}, },
}; };
</script> </script>
-->
<template> <!-- <template>
<view class="bar-box"> <view class="bar-box">
<div class="bar-box-line"> <div class="bar-box-line">
<view class="bar-item" v-for="(x,i) in menus" @click="changeMenuHandler(x)"> <view class="bar-item" v-for="(x,i) in menus" @click="changeMenuHandler(x)">
<i class="icon iconfont" :class="[x.icon]" v-if="current != x.page"></i> <i class="icon iconfont" :class="[x.icon]" v-if="current != x.page"></i>
<view class="acitve" v-else> <view class="acitve" v-else>
{{x.name}} {{x.name}}
</view> </view>
</view> </view>
</div> </div>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
menus:[], menus: [],
current:'' current: ''
}; };
}, },
mounted() { mounted() {
let pages = getCurrentPages() let pages = getCurrentPages()
this.current="/"+pages[pages.length - 1].route??'' this.current = "/" + pages[pages.length - 1].route ? ? ''
this.menus=[{ this.menus = [{
name:'首页', name: '首页',
icon:'icon-home', icon: 'icon-home',
page:'/pages/index/index' page: '/pages/index/index'
}, },
{ {
name:'订单', name: '订单',
icon:'icon-Work', icon: 'icon-Work',
page:'/pages/jiuzhai/jz_MyOrder' page: '/pages/jiuzhai/jz_MyOrder'
}, },
{ {
name:'我的', name: '我的',
icon:'icon-my1', icon: 'icon-my1',
page:'/pages/user-center/user-center'}] page: '/pages/user-center/user-center'
}
]
}, },
methods:{ methods: {
changeMenuHandler(menu){ changeMenuHandler(menu) {
this.current=menu.page this.current = menu.page
if(menu.page.indexOf('pages')!=-1){ if (menu.page.indexOf('pages') != -1) {
uni.redirectTo({ uni.redirectTo({
url:menu.page url: menu.page
}) })
} }
} }
} }
} }
</script> </script>
<style> -->
<style>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face { @font-face {
font-family: "nav-font";src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/tcIItWsk6dTo.woff2") format("woff2"), font-family: "nav-font";
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/RZzswoFvsjUs.woff") format("woff"); src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/tcIItWsk6dTo.woff2") format("woff2"),
font-display: swap; url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/RZzswoFvsjUs.woff") format("woff");
font-display: swap;
} }
.bar-box{
padding-bottom: env(safe-area-inset-bottom); .bar-box {
background-color: #FFF; padding-bottom: env(safe-area-inset-bottom);
border-top-left-radius: 20rpx; background-color: #FFF;
border-top-right-radius: 20rpx; border-top-left-radius: 20rpx;
box-shadow: 0 0 6px rgba(0,0,0,.12); border-top-right-radius: 20rpx;
box-shadow: 0 0 6px rgba(0, 0, 0, .12);
position: fixed; position: fixed;
z-index: 50; z-index: 50;
flex: 1; flex: 1;
...@@ -277,46 +281,53 @@ export default { ...@@ -277,46 +281,53 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
z-index: 99999999; z-index: 99999999;
} }
.bar-box-line{
display: flex; .bar-box-line {
flex-direction: row; display: flex;
flex-wrap: nowrap; flex-direction: row;
align-items: center; flex-wrap: nowrap;
padding: 20upx 0 30upx; align-items: center;
} padding: 20upx 0 30upx;
.bar-box-line.uninset{ }
padding: 20upx 0 40upx;
} .bar-box-line.uninset {
.bar-box-line.inset{ padding: 20upx 0 40upx;
padding: 20upx 0; }
}
.bar-box-line .bar-item{ .bar-box-line.inset {
flex: 1; padding: 20upx 0;
width: 1px; }
text-align: center;
color: #abadb9; .bar-box-line .bar-item {
position: relative; flex: 1;
} width: 1px;
.bar-box-line .bar-item .icon{ text-align: center;
font-size: 50rpx; color: #abadb9;
} position: relative;
.bar-box-line .bar-item .acitve{ }
font-size: 32rpx;
font-weight: bold; .bar-box-line .bar-item .icon {
color: #1F2429; font-size: 50rpx;
text-align: center; }
font-family: nav-font;
} .bar-box-line .bar-item .acitve {
.bar-box-line .bar-item .acitve::after{ font-size: 32rpx;
display: inline-block; font-weight: bold;
content: ' '; color: #1F2429;
width:4px; text-align: center;
height: 4px; font-family: nav-font;
border-radius: 4px; }
background-color: #1F2429;
position: absolute; .bar-box-line .bar-item .acitve::after {
left: calc(50% - 2px); display: inline-block;
top: 60rpx; content: ' ';
} width: 4px;
</style> height: 4px;
\ No newline at end of file border-radius: 4px;
background-color: #1F2429;
position: absolute;
left: calc(50% - 2px);
top: 60rpx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment