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