11

package1/tabbar/release.vue

@@ -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>
+<style lang="scss">
 	page {
 		width: 100%;
 		height: 100%;
-		font-size: 28rpx;
+		font-size: 24rpx;
-		background:	#F0FFF0;
+		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>