139 lines
2.7 KiB
Vue
139 lines
2.7 KiB
Vue
<template>
|
||
<view class="save-money-container">
|
||
<!-- 沉浸式状态栏与高定自定义顶部导航条 -->
|
||
<view class="custom-nav-bar">
|
||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<view class="nav-header">
|
||
<view class="nav-back" @click="goBack">
|
||
<text class="back-arrow">〈</text>
|
||
</view>
|
||
<text class="nav-title">省钱攻略</text>
|
||
<view class="nav-right-placeholder"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 占位符防止图片被顶部悬浮遮挡 -->
|
||
<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
|
||
|
||
<!-- 核心内容区：无缝连接的两张全景自适应介绍照片 -->
|
||
<view class="photo-flow">
|
||
<image class="flow-img" src="https://img.bc.haodanku.com/cms_web/cms-save-money-1" mode="widthFix"></image>
|
||
<image class="flow-img" src="https://img.bc.haodanku.com/cms_web/cms-save-money-2" mode="widthFix"></image>
|
||
</view>
|
||
|
||
<!-- 底部专属版权说明 -->
|
||
<view class="custom-copyright">
|
||
<text class="copyright-txt">©️粉丝福利购专属优惠商城</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusBarHeight: 20
|
||
};
|
||
},
|
||
computed: {
|
||
navBarHeight() {
|
||
return this.statusBarHeight + 44;
|
||
}
|
||
},
|
||
onLoad() {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
if (systemInfo.statusBarHeight) {
|
||
this.statusBarHeight = systemInfo.statusBarHeight;
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.save-money-container {
|
||
min-height: 100vh;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 顶部沉浸式导航条 */
|
||
.custom-nav-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
z-index: 999;
|
||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
||
}
|
||
|
||
.status-bar {
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-header {
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.nav-back {
|
||
width: 60rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.back-arrow {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.nav-right-placeholder {
|
||
width: 60rpx;
|
||
}
|
||
|
||
/* 照片瀑布流底板 */
|
||
.photo-flow {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 0; /* 彻底清除图片间的空白缝隙 */
|
||
}
|
||
|
||
.flow-img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* 底部版权说明 */
|
||
.custom-copyright {
|
||
padding: 40rpx 0 60rpx;
|
||
text-align: center;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.copyright-txt {
|
||
font-size: 24rpx;
|
||
color: rgb(150, 151, 153);
|
||
letter-spacing: 2rpx;
|
||
}
|
||
</style>
|