46 lines
2.2 KiB
Vue
46 lines
2.2 KiB
Vue
<template>
|
|
<div class="mobile-layout">
|
|
<div class="mobile-header" v-if="!hideHeader">
|
|
<button v-if="canGoBack" class="back-btn" @click="$router.back()">←</button>
|
|
<h1>{{ $route.meta.title || 'HealthLink' }}</h1>
|
|
</div>
|
|
<div class="mobile-content" :class="{ 'no-header': hideHeader }">
|
|
<router-view />
|
|
</div>
|
|
<div class="mobile-tabs" v-if="showTabs">
|
|
<div v-for="tab in tabs" :key="tab.path" class="tab-item" :class="{ active: $route.path === tab.path }" @click="$router.push(tab.path)">
|
|
<span class="tab-icon">{{ tab.icon }}</span>
|
|
<span class="tab-label">{{ tab.label }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
const route = useRoute()
|
|
const canGoBack = computed(() => route.path !== '/mobile/home')
|
|
const hideHeader = computed(() => ['/mobile/login'].includes(route.path))
|
|
const showTabs = computed(() => route.path.startsWith('/mobile/'))
|
|
const tabs = [
|
|
{ path: '/mobile/home', icon: '🏠', label: '首页' },
|
|
{ path: '/mobile/tasks', icon: '📋', label: '任务' },
|
|
{ path: '/mobile/patients', icon: '👥', label: '患者' },
|
|
{ path: '/mobile/mine', icon: '👤', label: '我的' }
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mobile-layout { display: flex; flex-direction: column; height: 100vh; background: #f5f5f5; }
|
|
.mobile-header { height: 48px; background: #1890ff; color: #fff; display: flex; align-items: center; padding: 0 16px; position: sticky; top: 0; z-index: 10; }
|
|
.mobile-header h1 { font-size: 18px; margin: 0; flex: 1; text-align: center; }
|
|
.back-btn { background: none; border: none; color: #fff; font-size: 20px; position: absolute; left: 16px; }
|
|
.mobile-content { flex: 1; overflow-y: auto; }
|
|
.mobile-content.no-header { padding-bottom: 56px; }
|
|
.mobile-tabs { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: #fff; display: flex; border-top: 1px solid #e8e8e8; z-index: 10; padding-bottom: env(safe-area-inset-bottom); }
|
|
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: #999; }
|
|
.tab-item.active { color: #1890ff; }
|
|
.tab-icon { font-size: 20px; margin-bottom: 2px; }
|
|
</style>
|