更新manifest.json以支持minimal-ui显示模式;在App.vue中为van-tabbar添加安全区域适配
This commit is contained in:
@@ -3,7 +3,7 @@
|
|||||||
"short_name": "账单管理",
|
"short_name": "账单管理",
|
||||||
"description": "个人账单管理与邮件解析系统",
|
"description": "个人账单管理与邮件解析系统",
|
||||||
"start_url": "/",
|
"start_url": "/",
|
||||||
"display": "standalone",
|
"display": "minimal-ui",
|
||||||
"background_color": "#ffffff",
|
"background_color": "#ffffff",
|
||||||
"theme_color": "#1989fa",
|
"theme_color": "#1989fa",
|
||||||
"orientation": "portrait-primary",
|
"orientation": "portrait-primary",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<van-config-provider :theme="theme">
|
<van-config-provider :theme="theme">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
<van-tabbar v-model="active" v-show="showTabbar">
|
<van-tabbar v-model="active" v-show="showTabbar" safe-area-inset-bottom>
|
||||||
<van-tabbar-item icon="notes-o" to="/calendar">
|
<van-tabbar-item icon="notes-o" to="/calendar">
|
||||||
日历
|
日历
|
||||||
</van-tabbar-item>
|
</van-tabbar-item>
|
||||||
@@ -62,5 +62,11 @@ const handleTabClick = (path) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* 仅在移动设备上添加底部安全区域适配 */
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
:deep(.van-tabbar) {
|
||||||
|
/* 为小白条添加额外高度 */
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user