star-uni/pages/task/task.vue

<template>
	<view class="content">
		<view class="task-header">
			<cu-custom>
				<block slot="content">任务广场</block>
			</cu-custom>
			<view class="sub-name">任务多，变现快!</view>
			<view class="sub-logo" :style="style"><image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/task-star-small.png" mode="widthFix"></image></view>
		</view>
		<view class="task-content">
			
		</view>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			style:""
		}
	},
	onLoad() {
		app = this;
		var StatusBar= this.StatusBar;
		var style = `top:${StatusBar}px;`;
		app.style = style;
	},
	methods: {

	}
}
</script>

<style lang="scss">
page{background-color: #f8f8f8;}
.task-header{position: relative;background-image: linear-gradient(180deg, #85DFFE 9%, #D5F4FF 62.55%, #f8f8f8 100%);height: 290rpx;}
.task-header .sub-name{font-size: 32rpx;font-weight: 800;font-family: "bluevBold";padding-left: 20rpx;padding-top: 20rpx;}
.task-header .sub-logo{
	position: absolute;
	top: 40rpx;
	/* #ifdef MP-WEIXIN */
	right: 220upx;
	/* #endif */
	/* #ifdef MP-ALIPAY */
	right: 150upx;
	/* #endif */
}
.task-header .sub-logo image{width: 220rpx;max-height: 220rpx;}
.task-content{background-image: linear-gradient(180deg, #ffffff, #f8f8f8);height: 100vh;border-radius: 40upx 40upx 0 0;}
</style>