besiweb/pages/order/detail.vue

<template>
	<view class="uni-main">
		<view class="sticky-nav">
			<view class="nav-box">
				<image src="../../static/index/gongdeng/back_arrow.png" class="back" ></image>
				<text class="header-text">详情</text>
				<image src="../../static/index/icon/menu_more_white.png"  class="header_operate" @click="showMask"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					
				},
				
			}
		},
		methods: {
			showMask(){
				
			}
		},
	}
</script>

<style lang="less" scoped>
	.uni-main {
		width: 100%;
		height: 100%;
		background-color: #f6f7f5;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	
	.sticky-nav {
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 1;
	}
	
	.nav-box {
		width: 100%;
		padding-top: 90rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		height: 135rpx;
		padding-bottom: 50rpx;
		
		.back {
			width: 85rpx;
			height: 85rpx;
			// padding-right: 35rpx;
		}
	
		.header-text {
			font-size: 45rpx;
			color: #fff;
			font-weight: bold;
			width: 100%;
			// text-align: center;
			margin-left: 20rpx;
		}
	
		.header_operate {
			width: 100rpx;
			height: 84rpx;
			float: right;
			margin-right: 20rpx;
		}
	}
</style>