pcwl_yancheng/uni-fans-score
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style:调整样式

Browse Source
This commit is contained in:
ISFP_T
2025-10-28 18:32:23 +08:00
parent 449c63ecc4
commit 985d739324
9 changed files with 345 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/index.vue
+205 -62
View File
@@ -1,19 +1,36 @@
<template>
<view class="container fullscreen">
<view class="" style="font-size: 32rpx;font-weight: 600;margin: 15rpx 20rpx;">风电者共享风扇&暖手充电宝</view>
<view class="map-notice" v-if="noticeText">
<!-- 自定义导航栏 -->
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="navbar-content" :style="{ height: navBarHeight + 'px' }">
<text class="navbar-title">风电者共享风扇&暖手充电宝</text>
</view>
</view>
<view class="map-notice" v-if="noticeText" @click="openNoticePopup">
<uv-notice-bar :text="noticeText" :speed="50" :show-icon="true" color="#07c160" bg-color="#E8F8EF"
icon="volume"></uv-notice-bar>
</view>
<!-- 全屏地图组件 -->
<MapComponent v-if="!isLoading && userLocation" ref="mapRef" :userLocation="userLocation"
:positionList="positionList" :filteredPositions="filteredPositions" :searchKeyword="searchKeyword"
:enableMarkers="true"
@relocate="handleRelocate" @scan="handleScan" @showList="showLocationList" @markerTap="selectPosition"
@mapCenterChange="onMapCenterChange" />
<!-- 内容区域 -->
<view class="main-content" :style="{ paddingTop: (statusBarHeight) + 'px' }">
<!-- 全屏地图组件 -->
<MapComponent v-if="!isLoading && userLocation" ref="mapRef" :userLocation="userLocation"
:positionList="positionList" :filteredPositions="filteredPositions" :searchKeyword="searchKeyword"
:enableMarkers="true"
@relocate="handleRelocate" @scan="handleScan" @showList="showLocationList" @markerTap="selectPosition"
@mapCenterChange="onMapCenterChange" />
<!-- 地图加载状态 -->
<view v-if="isLoading || !userLocation" class="map-loading-placeholder">
<view class="loading-content">
<view class="loading-spinner"></view>
<text>正在获取位置信息...</text>
</view>
</view>
</view>
<!-- 底部操作栏：附近设备 / 扫码使用 / 我的 -->
<!-- 底部操作栏：附近设备 / 扫码使用 / 我的 -->
<view class="bottom-actions">
<!-- <view class="action-btn secondary small btn-nearby" @click="showLocationList">
<view class="icon-wrap">
@@ -44,16 +61,6 @@
</view>
</view>
<!-- 地图加载状态 -->
<view v-if="isLoading || !userLocation" class="map-loading-placeholder">
<view class="loading-content">
<view class="loading-spinner"></view>
<text>正在获取位置信息...</text>
</view>
</view>
<!-- 场地列表弹窗组件 -->
<LocationListSheet
:show="showLocationPopup"
@@ -95,33 +102,50 @@
</view>
</view>
<!-- 使用指南：居中弹出（ref 控制 open/close） -->
<uv-popup ref="guidePopup" mode="center" round="24" :overlay="true" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
<view class="guide-popup">
<view class="guide-header">
<text class="guide-title">使用指南</text>
<!-- <view class="guide-close" @click="closeGuidePopup">
<uv-icon name="close" size="20"></uv-icon>
</view> -->
</view>
<view class="guide-content">
<view class="guide-step" v-for="(step, idx) in guideSteps" :key="idx">
<view class="step-index">{{ idx + 1 }}</view>
<view class="step-info">
<view class="step-title">{{ step.title }}</view>
<view class="step-desc">{{ step.desc }}</view>
</view>
</view>
</view>
<view class="guide-actions">
<!-- <view class="primary-btn" @click="closeGuidePopup"></view> -->
<view class="primary-btn" @click="closeGuidePopup">
<uv-icon name="close" size="20"></uv-icon>
<!-- 使用指南：居中弹出（ref 控制 open/close） -->
<uv-popup ref="guidePopup" mode="center" round="24" :overlay="true" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
<view class="guide-popup">
<view class="guide-header">
<text class="guide-title">使用指南</text>
<!-- <view class="guide-close" @click="closeGuidePopup">
<uv-icon name="close" size="20"></uv-icon>
</view> -->
</view>
<view class="guide-content">
<view class="guide-step" v-for="(step, idx) in guideSteps" :key="idx">
<view class="step-index">{{ idx + 1 }}</view>
<view class="step-info">
<view class="step-title">{{ step.title }}</view>
<view class="step-desc">{{ step.desc }}</view>
</view>
</view>
</view>
</uv-popup>
</view>
<view class="guide-actions">
<!-- <view class="primary-btn" @click="closeGuidePopup"></view> -->
<view class="primary-btn" @click="closeGuidePopup">
<uv-icon name="close" size="20"></uv-icon>
</view>
</view>
</view>
</uv-popup>
<!-- 通知详情弹窗：居中弹出 -->
<uv-popup ref="noticePopup" mode="center" round="24" :overlay="true" :closeOnClickOverlay="true" :safeAreaInsetBottom="false">
<view class="notice-popup">
<view class="notice-header">
<text class="notice-title">通知公告</text>
</view>
<view class="notice-content">
<text class="notice-text">{{ noticeText }}</text>
</view>
<view class="notice-actions">
<view class="primary-btn" @click="closeNoticePopup">
<uv-icon name="close" size="20"></uv-icon>
</view>
</view>
</view>
</uv-popup>
</view>
</template>
<script setup>
@@ -177,6 +201,10 @@
const isLocationInitialized = ref(false)
const showLocationPopup = ref(false)
const isRelocating = ref(false) // 防抖标志：是否正在重新定位
// 导航栏高度相关
const statusBarHeight = ref(0)
const navBarHeight = ref(44) // 默认导航栏内容高度
// 使用指南步骤
const guideSteps = ref([
@@ -231,9 +259,10 @@
}
// 组件引用
const mapRef = ref(null)
const guidePopup = ref(null)
// 组件引用
const mapRef = ref(null)
const guidePopup = ref(null)
const noticePopup = ref(null)
// 计算属性
const searchPlaceholder = computed(() => {
@@ -243,8 +272,36 @@
return '搜索附近场地'
})
// 计算导航栏高度
const initNavBarHeight = () => {
try {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 0
// #ifdef MP-WEIXIN
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// 计算导航栏内容高度：(胶囊底部坐标 - 状态栏高度) 确保与胶囊对齐
navBarHeight.value = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height
// #endif
// #ifndef MP-WEIXIN
// 非微信小程序使用默认高度
navBarHeight.value = 44
// #endif
console.log('状态栏高度:', statusBarHeight.value)
console.log('导航栏内容高度:', navBarHeight.value)
} catch (error) {
console.error('获取导航栏高度失败:', error)
statusBarHeight.value = 20
navBarHeight.value = 44
}
}
// 生命周期
onMounted(() => {
initNavBarHeight()
init()
})
@@ -741,18 +798,31 @@
}
}
// 使用指南弹窗控制
const openPopup = () => {
try {
guidePopup.value && typeof guidePopup.value.open === 'function' && guidePopup.value.open()
} catch (e) {}
}
// 使用指南弹窗控制
const openPopup = () => {
try {
guidePopup.value && typeof guidePopup.value.open === 'function' && guidePopup.value.open()
} catch (e) {}
}
const closeGuidePopup = () => {
try {
guidePopup.value && typeof guidePopup.value.close === 'function' && guidePopup.value.close()
} catch (e) {}
}
const closeGuidePopup = () => {
try {
guidePopup.value && typeof guidePopup.value.close === 'function' && guidePopup.value.close()
} catch (e) {}
}
// 通知弹窗控制
const openNoticePopup = () => {
try {
noticePopup.value && typeof noticePopup.value.open === 'function' && noticePopup.value.open()
} catch (e) {}
}
const closeNoticePopup = () => {
try {
noticePopup.value && typeof noticePopup.value.close === 'function' && noticePopup.value.close()
} catch (e) {}
}
</script>
<script>
@@ -790,6 +860,37 @@
padding: 0;
}
/* 自定义导航栏 */
.custom-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 1000;
}
.navbar-content {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 20rpx;
}
.navbar-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
/* 主内容区域 */
.main-content {
flex: 1;
position: relative;
width: 100%;
height: 100%;
}
/* 顶部Logo和通知栏 */
.header-section {
width: 92%;
@@ -1271,7 +1372,7 @@
/* 地图加载状态 */
.map-loading-placeholder {
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
@@ -1403,10 +1504,7 @@
.map-notice {
margin: 0 20rpx;
// position: absolute;
// left: 20rpx;
// right: 20rpx;
// top: 20rpx;
margin-top: 10rpx;
border-radius: 20rpx;
z-index: 15;
}
@@ -1517,4 +1615,49 @@
font-size: 32rpx;
font-weight: 600;
}
/* 通知详情弹窗样式 */
.notice-popup {
width: 640rpx;
max-width: 86vw;
background: #ffffff;
border-radius: 24rpx;
padding: 24rpx 24rpx 16rpx;
box-sizing: border-box;
}
.notice-header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 16rpx;
}
.notice-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.notice-content {
max-height: 600rpx;
overflow-y: auto;
padding: 16rpx 12rpx;
box-sizing: border-box;
background: #F8F9FA;
border-radius: 12rpx;
}
.notice-text {
font-size: 28rpx;
color: #333;
line-height: 1.8;
word-break: break-all;
white-space: pre-wrap;
}
.notice-actions {
margin-top: 20rpx;
}
</style>