完成关于本机页面上滑毛玻璃效果

This commit is contained in:
tangxinyue 2026-05-19 16:34:22 +08:00
parent 2d488612b4
commit 1bb582d51a
3 changed files with 96 additions and 20 deletions

View File

@ -29,7 +29,7 @@ export function createApp() {
app.config.globalProperties.$system = plus.os.name; app.config.globalProperties.$system = plus.os.name;
// #endif // #endif
app.config.globalProperties.$systemInfo = systemInfo app.config.globalProperties.$systemInfo = systemInfo
uni.setStorageSync('version', '1.0.5.sp1') uni.setStorageSync('version', '1.0.5.sp3')
app.config.globalProperties.$version = uni.getStorageSync('version') app.config.globalProperties.$version = uni.getStorageSync('version')
app.use(globalMethods); app.use(globalMethods);
return { return {

View File

@ -1,12 +1,19 @@
<template> <template>
<view> <view>
<nav-bar title="关于本机" bgColor="#F2F1F6"> <!-- Custom Nav Bar -->
<template v-slot:left> <view class="custom-nav-bar">
<image class="back-icon" src="/static/image/common/iphone-back.png" style="width: 86rpx;height: 86rpx;" <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
@click="back"> <view class="nav-content">
</image> <view class="left-icon" @click="back">
</template> <image class="back-icon" src="/static/image/common/iphone-back.png" />
</nav-bar> </view>
<view class="title">关于本机</view>
<view class="right-placeholder"></view>
</view>
</view>
<!-- Placeholder to push content down -->
<view class="nav-placeholder" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="info-container"> <view class="info-container">
<block v-for="(group, groupIndex) in listData" :key="groupIndex"> <block v-for="(group, groupIndex) in listData" :key="groupIndex">
@ -50,14 +57,26 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 水印 -->
<view v-if="$isVip()">
<watermark dark="light" source="uni_alipay_shopping_about_iphone" />
<liu-drag-button :canDocking="false"
@clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_about_iphone')">
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
</liu-drag-button>
</view>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted, getCurrentInstance } from 'vue';
import { util } from '@/utils/common.js' import { util } from '@/utils/common.js'
import { onShow, onLoad, onPageScroll } from '@dcloudio/uni-app'
const { proxy } = getCurrentInstance();
const CACHE_KEY = 'about_iphone_data'; const CACHE_KEY = 'about_iphone_data';
// Removed scroll logic, styling is now fully CSS-driven
const defaultData = [ const defaultData = [
{ {
groupTitle: '', groupTitle: '',
@ -123,8 +142,30 @@ const defaultData = [
]; ];
const listData = ref([]); const listData = ref([]);
const statusBarHeight = ref(0);
onShow(() => {
// #ifdef APP-PLUS
util.setAndroidSystemBarColor('#F2F1F6')
setTimeout(() => {
plus.navigator.setStatusBarStyle("dark");
}, 500);
// #endif
})
onLoad(() => {
proxy.$apiUserEvent('all', {
type: 'event',
key: 'ios-about-phone',
prefix: '.uni.other.',
value: '设置-关于本机'
})
})
onMounted(() => { onMounted(() => {
const systemInfo = uni.getSystemInfoSync();
statusBarHeight.value = systemInfo.statusBarHeight || 0;
const cached = uni.getStorageSync(CACHE_KEY); const cached = uni.getStorageSync(CACHE_KEY);
if (cached) { if (cached) {
try { try {
@ -173,28 +214,61 @@ const confirmModal = () => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
::v-deep .nav-box { .custom-nav-bar {
height: auto !important; opacity: .97;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: linear-gradient(180deg, rgba(242, 242, 246, 0.5) 0%, rgba(242, 242, 246, 0) 100%);
backdrop-filter: saturate(220%) blur(14px);
-webkit-backdrop-filter: saturate(220%) blur(14px);
-webkit-mask-image: linear-gradient(180deg, rgba(242, 242, 246, 0.5) 0%, rgba(242, 242, 246, 0) 100%);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(100% - 50rpx), rgba(0, 0, 0, 0) 100%);
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 26rpx 50rpx;
}
.left-icon,
.right-placeholder {
width: 86rpx;
display: flex;
align-items: center;
}
.title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: 500;
color: #1A1A1A;
}
} }
::v-deep .nav-bar-title { .nav-placeholder {
font-size: 32rpx !important; width: 100%;
padding-top: 146rpx;
} }
::v-deep .uni-navbar__header { /* .blur-nav removed */
height: auto !important;
padding: 10rpx 26rpx;
}
.back-icon { .back-icon {
box-shadow: 0rpx 0rpx 20rpx 0rpx #E1E1E6; box-shadow: 0rpx 0rpx 20rpx 0rpx #E1E1E6;
border: 2rpx solid #FFFFFF; border: 2rpx solid #FFFFFF;
border-radius: 50%; border-radius: 50%;
width: 86rpx;
height: 86rpx;
} }
.info-container { .info-container {
padding: 30rpx; padding: 30rpx;
padding-bottom: 60rpx; padding-bottom: 60rpx;
margin-top: 60rpx;
} }
.info-group { .info-group {
@ -245,8 +319,10 @@ const confirmModal = () => {
} }
.header-text { .header-text {
font-size: 28rpx; font-size: 32rpx;
color: #8A8A8D; line-height: 32rpx;
margin-bottom: 16rpx;
color: #85858A;
} }
.custom-modal-mask { .custom-modal-mask {

View File

@ -25,7 +25,7 @@
</view> </view>
</template> </template>
</nav-bar> </nav-bar>
<view class="map-box"> <view v-if="order.statusType == 'wait_recv'" class="map-box">
<image style="width: 100%;opacity: 0;" src="/static/image/shopping/taobao/waimai/map1.png" mode="widthFix"> <image style="width: 100%;opacity: 0;" src="/static/image/shopping/taobao/waimai/map1.png" mode="widthFix">
</image> </image>
<view class="qishou flex-align-center flex-column"> <view class="qishou flex-align-center flex-column">