vue-insagent-app/pages/index/flashSale.vue

<template>
	<view class="page">
		<view class="headers">
			<view class="dis a-c j-start">
				<u-icon name="arrow-left" size="40" color="#fff" @tap="back"></u-icon>
				<text style="margin:auto;">限时秒杀</text>
			</view>
		</view>
		<view class="" style="padding-top:96px ;">

		</view>
		<image class="headerImg" src="../../static/image/index/flashSale-img/flashSale.png" mode=""></image>
		<view class="content dis a-c j-c">
			<image class="icon" src="../../static/image/index/flashSale-img/flashSaleicon.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: calc(100vh - 96px);
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 50px 16px 14px;
		height: auto;
		background: linear-gradient(90deg, #FF5A30 0%, #FF6E39 57%, #FF5A30 100%);

		text {
			font-size: 18px;
			font-weight: bold;
			color: #fff;
		}
	}

	.headerImg {
		height: 574rpx;
	}

	.content {
		width: 100%;
		height: calc(100vh - 353px);
		background: #FFFFFF;
		border-radius: 10px 10px 0px 0px;
		background: #fff;
		margin-top: -30px;
		position: relative;
		bottom: 0;

		.icon {
			width: 200px;
			height: 200px;
		}
	}
</style>