|
|
|
@ -1,6 +1,17 @@ |
|
|
|
<template> |
|
|
|
<view class="page1"> |
|
|
|
<view>444444444444</view> |
|
|
|
<!-- 固定顶部导航栏（悬浮在背景图之上） --> |
|
|
|
<view class="nav-bar" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
|
|
|
<view class="back-btn" @tap="back"> |
|
|
|
<uni-icons type="left" size="28"></uni-icons> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 背景头图（随页面滚动） --> |
|
|
|
<view class="title"> |
|
|
|
<view class="hero-spark spark-a"></view> |
|
|
|
<view class="hero-spark spark-b"></view> |
|
|
|
<view class="hero-spark spark-c"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -8,31 +19,73 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
menuButtonInfo: {}, |
|
|
|
} |
|
|
|
}, |
|
|
|
props:{ |
|
|
|
onLoad(option) { |
|
|
|
|
|
|
|
}, |
|
|
|
watch: { |
|
|
|
|
|
|
|
onShow() { |
|
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
back() { |
|
|
|
const pages = getCurrentPages(); |
|
|
|
if (pages.length > 1) { |
|
|
|
uni.navigateBack(); |
|
|
|
} else { |
|
|
|
uni.switchTab({ |
|
|
|
url: '/pages/index/index' |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
page{ |
|
|
|
<style lang="scss"> |
|
|
|
page { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
font-size: 28rpx; |
|
|
|
background: #F0FFF0; |
|
|
|
font-size: 24rpx; |
|
|
|
background: #F5F8F5; |
|
|
|
color: #00231C; |
|
|
|
} |
|
|
|
|
|
|
|
.page1 { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
font-size: 28rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat; |
|
|
|
width: 100%; |
|
|
|
height: 340rpx; |
|
|
|
background-size: 100%; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-bar { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
z-index: 100; |
|
|
|
padding: 16rpx 24rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.back-btn { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
</style> |
