通用 css 样式引入 u-navbar

App.vue

@@ -15,4 +15,7 @@
 <style lang="scss">
 	/*每个页面公共css */
 	@import "@/uni_modules/uview-ui/index.scss";
+	@import "@/static/css/fui.css";
+	@import "@/static/css/flex.css";
+	@import "@/static/css/uflex.css";
 </style>

pages.json

@@ -187,13 +187,15 @@
 		{
 			"path": "pages/index/newcomerTasks",
 			"style": {
-				"navigationBarTitleText": "新人任务"
+				"navigationBarTitleText": "新人任务",
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/index/taskDetails",
 			"style": {
-				"navigationBarTitleText": "任务详情"
+				"navigationBarTitleText": "任务详情",
+				"navigationStyle": "custom" // 隐藏系统导航栏
 			}
 		},
 		{

pages/index/newcomerTasks.vue

@@ -1,6 +1,28 @@
 <template>
 	<view class="content">
-		新人任务
+		<image class="w h-454" src="/static/image/index/new_task_cover.png"></image>
+		<view class="box">
+			<view class="box-content">
+				<view class="text-32 text-600 text-070202 top_c">
+					做任务得奖励
+					<image class="under_line" src="/static/image/index/task_text_underline.png"></image>
+				</view>
+				<view class="item flex jc_between" v-for="(item,index) in list">
+					<view class="left_c ">
+						<view class="title">
+							{{ index+1 }}、{{ item.title }}({{item.current}}/{{item.total}})
+						</view>
+						<view class="amount">
+							现金奖励{{ item.amount }}元
+						</view>
+					</view>
+					<view :class="item.current == item.total? 'disabled_btn btn' : 'btn'"
+					@click="goFinish(item)">
+						{{  item.current == item.total?'已完成':'去完成' }}
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,18 +30,115 @@
 	export default {
 		data() {
 			return {
-				
+				list:[
+					{ 
+						title:'完成两个悬赏任务',
+						amount:'0.5',
+						current:2,
+						total:2,
+					},
+					{
+						title:'完成3个金额大于3元的悬赏',
+						amount:'0.5',
+						current:0,
+						total:3,
+					},
+					{
+						title:'分享平台',
+						amount:'0.1',
+						current:0,
+						total:3,
+					},
+					{
+						title:'邀请好友',
+						amount:'1',
+						current:0,
+						total:5,
+					},
+				]
 			}
 		},
 		onLoad() {
 
 		},
 		methods: {
-
+			goFinish(item){
+				if(item.current != item.total){
+					//  功能页 、分享
+					uni.navigateTo({
+						url:'/pages/index/taskDetails'
+					})
+				}else{
+					uni.showToast({
+						title:'任务已完成',
+						icon:'none'
+					})
+				}
+			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	
+	.box{
+		padding: 0 32rpx;
+		position: absolute;
+		margin-top: -94rpx;
+		z-index: 2;
+		.box-content{
+			width: 686rpx;
+			background-color: #fff;
+			border-radius: 24rpx;
+			box-shadow: 0 0 88rpx 0 #00000014;
+			padding: 28rpx 32rpx;
+			.top_c{
+				border-bottom: 1px dashed #afb0b2ff;
+				padding-bottom:8rpx;
+				.under_line{
+					width: 166rpx;
+					height: 24rpx;
+					margin-top: -4rpx;
+					margin-left: 12rpx;
+				}
+			}
+			.item{
+				padding: 26rpx 8rpx;
+				border-bottom:1rpx solid #eee;
+				align-items: center;
+				.left_c{
+					.title{
+						 color: #303030;
+						 font-family: "MiSans VF";
+						 font-size: 28rpx;
+						 font-style: normal;
+						 font-weight: 500;
+						 line-height: normal;
+					}
+					.amount{
+						 color: #e02e24;
+						 font-family: "MiSans VF";
+						 font-size: 24rpx;
+						 font-style: normal;
+						 font-weight: 400;
+						 line-height: normal;
+						 margin-left: 46rpx;
+					}
+				}
+				.btn{
+					width: 116rpx;
+					height: 52rpx;
+					line-height: 52rpx;
+					text-align: center;
+					flex-shrink: 0;
+					border-radius: 52rpx;
+					background: #FE6505;
+					color: #fff;
+					font-size: 24rpx;
+				}
+				.disabled_btn{
+					background: #FED0B4;
+				}
+			}
+		}
+	}
 </style>

pages/index/taskDetails - 副本.vue

@@ -0,0 +1,48 @@
+<template>
+	<view class="content">
+		 <u-navbar
+			title="任务详情"
+			@rightClick="rightClick"
+			:autoBack="true"
+			bgColor="#ffe6d9"
+		>
+		</u-navbar>
+		<view class="box_title">
+			
+		</view>
+		<view class="box_desc">
+			
+		</view>
+		<view class="box_step">
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			rightClick() {
+				console.log('rightClick');
+			},
+			leftClick() {
+				console.log('leftClick');
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.content{
+		height: 568rpx;
+		background: linear-gradient(to bottom, #ffe3d1, #ffffff);
+	}
+</style>

pages/index/taskDetails.vue

@@ -1,6 +1,20 @@
 <template>
 	<view class="content">
-		任务详情
+		 <u-navbar
+			title="任务详情"
+			:autoBack="true"
+			bgColor="transparent"
+		>
+		</u-navbar>
+		<view class="box_title">
+			
+		</view>
+		<view class="box_desc">
+			
+		</view>
+		<view class="box_step">
+			
+		</view>
 	</view>
 </template>
 
@@ -15,11 +29,13 @@
 
 		},
 		methods: {
-
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	
+	.content{
+		height: 568rpx;
+		background: linear-gradient(to bottom, #ffe3d1, #ffffff);
+	}
 </style>

static/css/fui.css

@@ -2274,6 +2274,9 @@ image {
 .h-420 {
 	height: 420rpx;
 }
+.h-454{
+	height: 454rpx;
+}
 .h-460 {
 	height: 460rpx;
 }