fix: navbar commpontents
This commit is contained in:
@@ -1,17 +1,6 @@
|
||||
<template>
|
||||
<view class="greeting-page" :style="{ paddingTop: navBarTop + 'px' }">
|
||||
<!-- Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ height: navBarHeight + 'px', paddingTop: navBarTop + 'px' }"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view class="back-btn" @tap="goBack">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
<text class="title">我的新春祝福</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="greeting-page" >
|
||||
<NavBar title="我的祝福" />
|
||||
|
||||
<!-- Header Stats -->
|
||||
<view class="header-stats">
|
||||
@@ -111,7 +100,7 @@
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getMyCard } from "@/api/mine.js";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
const navBarTop = ref(0);
|
||||
const navBarHeight = ref(44);
|
||||
@@ -190,8 +179,6 @@ const onTouchEnd = (e, item) => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
navBarTop.value = sysInfo.statusBarHeight;
|
||||
fetchList(true);
|
||||
});
|
||||
|
||||
@@ -298,47 +285,6 @@ const onEdit = (item) => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
/* 增大点击区域 */
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
|
||||
.back-arrow {
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 50rpx; /* Balance back button */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
|
||||
@@ -1,26 +1,14 @@
|
||||
<template>
|
||||
<view class="help-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<!-- Custom Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{
|
||||
height: navBarHeight + 'px',
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<view class="nav-left" @click="goBack">
|
||||
<uni-icons type="left" size="24" color="#000" />
|
||||
</view>
|
||||
<text class="nav-title">帮助中心</text>
|
||||
</view>
|
||||
<view class="help-page" >
|
||||
<NavBar title="帮助中心" />
|
||||
|
||||
<!-- Search Bar -->
|
||||
<view class="search-box">
|
||||
<!-- <view class="search-box">
|
||||
<view class="search-input-box">
|
||||
<uni-icons type="search" size="18" color="#999" />
|
||||
<text class="placeholder">搜索你遇到的问题</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="content-scroll">
|
||||
<!-- Quick Start -->
|
||||
@@ -115,10 +103,10 @@
|
||||
<uni-icons type="chatbubbles-filled" size="20" color="#fff" />
|
||||
<text>在线客服</text>
|
||||
</button>
|
||||
<button class="c-btn">
|
||||
<!-- <button class="c-btn">
|
||||
<uni-icons type="world-filled" size="20" color="#fff" />
|
||||
<text>官方公众号</text>
|
||||
</button>
|
||||
</button> -->
|
||||
</view>
|
||||
<view class="bg-decor">
|
||||
<uni-icons
|
||||
@@ -144,14 +132,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
|
||||
|
||||
const navBarHeight = getBavBarHeight();
|
||||
const statusBarHeight = getStatusBarHeight();
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
const faqList = ref([
|
||||
{
|
||||
@@ -222,36 +203,6 @@ const toggleQuestion = (catIndex, itemIndex) => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
/* 增大点击区域 */
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 50rpx; /* Balance back button */
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
|
||||
@@ -1,18 +1,6 @@
|
||||
<template>
|
||||
<view class="profile-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<!-- Custom Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{
|
||||
height: navBarHeight + 'px',
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<view class="nav-left" @click="goBack">
|
||||
<uni-icons type="left" size="24" color="#000" />
|
||||
</view>
|
||||
<text class="nav-title">个人信息</text>
|
||||
</view>
|
||||
<view class="profile-page" >
|
||||
<NavBar title="个人信息" />
|
||||
|
||||
<!-- Content -->
|
||||
<view class="content">
|
||||
@@ -96,15 +84,10 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import {
|
||||
getBavBarHeight,
|
||||
getStatusBarHeight as getStatus,
|
||||
} from "@/utils/system";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { updateUserInfo } from "@/api/auth.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
const navBarHeight = getBavBarHeight();
|
||||
const statusBarHeight = getStatus();
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
@@ -132,10 +115,6 @@ watch(
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const handleAvatarClick = () => {
|
||||
// Navigate to avatar page or open picker
|
||||
uni.navigateTo({
|
||||
@@ -247,36 +226,6 @@ const handleSave = async () => {
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fcfcfc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
z-index: 100;
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
/* 增大点击区域 */
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 50rpx; /* Balance back button */
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
<template>
|
||||
<view class="vip-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<!-- Custom Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{
|
||||
height: navBarHeight + 'px',
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<view class="back" @click="goBack">‹</view>
|
||||
<text class="nav-title">会员中心</text>
|
||||
</view>
|
||||
<view class="vip-page" >
|
||||
<NavBar title="会员中心" />
|
||||
|
||||
<!-- Content -->
|
||||
<view class="content">
|
||||
@@ -118,15 +108,10 @@
|
||||
import { ref, onMounted } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import {
|
||||
getBavBarHeight,
|
||||
getStatusBarHeight as getStatus,
|
||||
} from "@/utils/system";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { createOrder, getVipPlan } from "@/api/pay.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
const navBarHeight = getBavBarHeight();
|
||||
const statusBarHeight = getStatus();
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
@@ -164,10 +149,6 @@ const getVipPlanList = async () => {
|
||||
plans.value = planRes;
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const selectPlan = (index) => {
|
||||
selectedPlanIndex.value = index;
|
||||
};
|
||||
@@ -228,37 +209,6 @@ const handlePurchase = async () => {
|
||||
padding-bottom: 200rpx; // Space for bottom bar
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.back {
|
||||
font-size: 50rpx;
|
||||
margin-right: 24rpx;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,6 @@
|
||||
<template>
|
||||
<view class="wallpaper-page" :style="{ paddingTop: navBarTop + 'px' }">
|
||||
<!-- Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ height: navBarHeight + 'px', paddingTop: navBarTop + 'px' }"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view class="back-btn" @tap="goBack">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
<text class="title">我的新春壁纸</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wallpaper-page" >
|
||||
<NavBar title="我的壁纸" />
|
||||
|
||||
<!-- Header Stats -->
|
||||
<view class="header-stats">
|
||||
@@ -61,9 +50,8 @@
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getMyWallpaper } from "@/api/mine.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
const navBarTop = ref(0);
|
||||
const navBarHeight = ref(44);
|
||||
const list = ref([]);
|
||||
const page = ref(1);
|
||||
const loading = ref(false);
|
||||
@@ -72,8 +60,6 @@ const isRefreshing = ref(false);
|
||||
const totalCount = ref(0);
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
navBarTop.value = sysInfo.statusBarHeight;
|
||||
fetchList(true);
|
||||
});
|
||||
|
||||
@@ -128,10 +114,6 @@ const onRefresh = () => {
|
||||
fetchList(true);
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
@@ -157,47 +139,6 @@ const onPreview = (item) => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
/* 增大点击区域 */
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
|
||||
.back-arrow {
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 50rpx; /* Balance back button */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
|
||||
Reference in New Issue
Block a user