mobileHeader 优化
This commit is contained in:
tianfeng
parent
02b0ab26c0
commit
6b0265dc3a
@ -1,25 +1,31 @@
|
||||
<template>
|
||||
<div class="mobile-header">
|
||||
<button v-if="showBack" class="back-btn" @click="handleBack">
|
||||
<svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<button v-if="showHelp" class="help-btn" @click="$emit('help')">
|
||||
<svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div v-else class="placeholder"></div>
|
||||
<div class="mobile-header" :class="{ 'in-app': isInAppEnvironment }">
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" class="status-bar-spacer"></div>
|
||||
|
||||
<!-- header内容 -->
|
||||
<div class="header-content">
|
||||
<button v-if="showBack" class="back-btn" @click="handleBack">
|
||||
<svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<button v-if="showHelp" class="help-btn" @click="$emit('help')">
|
||||
<svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div v-else class="placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { closePage, isInApp } from '../utils/appBridge.js'
|
||||
|
||||
// 定义props
|
||||
@ -48,6 +54,9 @@ defineEmits(['help'])
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 检测是否在APP环境中
|
||||
const isInAppEnvironment = ref(false)
|
||||
|
||||
// 定义首页路由列表
|
||||
const homeRoutes = ['/host-center', '/agency-center', '/coin-seller', '/']
|
||||
|
||||
@ -73,51 +82,55 @@ const handleBack = () => {
|
||||
router.go(-1)
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时检测环境
|
||||
onMounted(() => {
|
||||
isInAppEnvironment.value = isInApp()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mobile-header {
|
||||
background: white;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 状态栏占位区域 - 固定30px */
|
||||
.status-bar-spacer {
|
||||
height: 30px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* header内容区域 - 固定60px */
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px; /* 减少上下内边距 */
|
||||
min-height: 44px; /* 设置最小高度而不是固定高度 */
|
||||
background: white; /* 保持白色背景 */
|
||||
border-bottom: 1px solid #f0f0f0; /* 更淡的边框 */
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* 轻微阴影 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
/* 适配手机屏幕的安全区域 */
|
||||
padding-top: max(8px, env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
/* 适配 iOS设备的屏幕顶部缺口 */
|
||||
@supports (padding: max(0px)) {
|
||||
.mobile-header {
|
||||
padding-top: max(8px, env(safe-area-inset-top));
|
||||
}
|
||||
padding: 12px 16px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.back-btn, .help-btn {
|
||||
width: 36px; /* 稍微减小尺寸 */
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
background: #f8f9fa; /* 浅灰色背景 */
|
||||
border-radius: 50%; /* 圆形按钮 */
|
||||
background: #f8f9fa;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #495057; /* 深灰色图标 */
|
||||
color: #495057;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid #e9ecef; /* 浅边框 */
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.back-btn:hover, .help-btn:hover {
|
||||
background: #e9ecef;
|
||||
color: #343a40; /* 更深的灰色 */
|
||||
transform: scale(1.05); /* 微微放大 */
|
||||
color: #343a40;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@ -130,17 +143,17 @@ const handleBack = () => {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: inherit;
|
||||
stroke-width: 2.5; /* 加粗线条确保清晰 */
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #212529; /* 深色标题 */
|
||||
color: #212529;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
letter-spacing: 0.3px; /* 轻微字母间距 */
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
@ -148,40 +161,6 @@ const handleBack = () => {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* 小屏幕优化 */
|
||||
@media (max-width: 375px) {
|
||||
.mobile-header {
|
||||
padding: 6px 12px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.back-btn, .help-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.back-icon, .help-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高分辨率屏幕优化 */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.back-icon, .help-icon {
|
||||
stroke-width: 2.2;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗黑模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.mobile-header {
|
||||
@ -189,6 +168,14 @@ const handleBack = () => {
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
.status-bar-spacer {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.back-btn, .help-btn {
|
||||
background: #2d2d2d;
|
||||
border-color: #444;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user