109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
|
<view class="ant-layout-footer">
|
|
<view class="btn-group">
|
|
<view class="ant-btn-block" :class="isActive(item.path)" @click="btnClick(item)" v-for="(item, index) in menu" :key="index">
|
|
<template v-if="item.key == 1">
|
|
<uni-icons type="tune-filled" size="30"
|
|
:color="isActive(item.path) == 'primary' ? '#fff' : '#777d90'"></uni-icons>
|
|
</template>
|
|
<template v-if="item.key == 2">
|
|
<uni-icons type="list" size="30"
|
|
:color="isActive(item.path) == 'primary' ? '#fff' : '#777d90'"></uni-icons>
|
|
</template>
|
|
<template v-if="item.key == 3">
|
|
<uni-icons type="gear" size="30"
|
|
:color="isActive(item.path) == 'primary' ? '#fff' : '#777d90'"></uni-icons>
|
|
</template>
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'page-footer',
|
|
|
|
data() {
|
|
return {
|
|
menu: [
|
|
{key: 1, label: '存储', path: 'pages/index'},
|
|
{key: 2, label: '日志', path: 'pages/log'},
|
|
{key: 3, label: '设置', path: 'pages/setting'},
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
isActive() {
|
|
return (path) => {
|
|
const pages = getCurrentPages();
|
|
const cur = pages[pages.length - 1].route
|
|
return cur == path ? 'primary' : 'default'
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
btnClick(item) {
|
|
if (item.path) {
|
|
uni.navigateTo({
|
|
url: '/' + item.path,
|
|
animationType: 'fade-in'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ant-layout-footer{
|
|
height: 70px;
|
|
padding: 0;
|
|
}
|
|
|
|
.btn-group{
|
|
width: 100%;
|
|
}
|
|
.ant-btn-block{
|
|
height: 70px;
|
|
line-height: 70px;
|
|
/* border-radius: 0;
|
|
border-bottom: 0; */
|
|
box-shadow: none;
|
|
font-size: 30px;
|
|
font-weight: 400;
|
|
background: #2f3242;
|
|
border-color: #2f3242;
|
|
color: #777d90;
|
|
flex:1;
|
|
}
|
|
.ant-btn-block.primary{
|
|
color: #fff;
|
|
}
|
|
|
|
.ant-btn-block{
|
|
border-right: 1px solid #fff;
|
|
}
|
|
.ant-btn-block:last-child{
|
|
border-right: 0;
|
|
}
|
|
|
|
|
|
.ant-btn-group > .ant-btn:last-child:not(:first-child),
|
|
.ant-btn-group > span:last-child:not(:first-child) > .ant-btn {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.ant-btn-group > .ant-btn:first-child:not(:last-child),
|
|
.ant-btn-group > span:first-child:not(:last-child) > .ant-btn {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
/* border-right-color: #2F3242; */
|
|
}
|
|
.ant-btn-group > .ant-btn-group .ant-btn-primary:first-child:not(:last-child){
|
|
border-right-color: #fff;
|
|
}
|
|
</style> |