zh_order_food_xcx/pages/index/index.vue

<template>
	<view class="flex-common-css">
		<Nav :leftShow='false' :customNav='true' title="" bgckgroundBox='#EF1F0C'></Nav>
		<view class="flex-1 flex-direction iPhone-bottom box-border-box">
			<image class="qd-bg" src="@/static/img/order-food/qd-bg.png" mode=""></image>
			<view class="order-food-box p-0-32 box-border-box">
				<view class="order-food p-32 box-border-box bgc-f b-rad-24" @click="goToUrl(1)">
					<view class="b-FFD7CC bc-FFEDE9-FFF1EE b-rad-24 p-20-32 box-border-box align-items-center flex-justify-space">
						<view class="flex-direction">
							<view class="align-items-center mb-8">
								<view class="fs-36 fc-3 fw-600">
									堂食扫码点餐
								</view>
								<image class="right-h" src="@/static/img/order-food/right-h.png" mode=""></image>
							</view>
							<view class="fs-28 fc-9">
								自助下单方便快捷
							</view>
						</view>
						<image class="zh-img" src="@/static/img/order-food/zh-img.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {}
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			goToUrl(shop_id) {
				uni.reLaunch({
					url: '/pages-takeout/shop?shop_id=' + shop_id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.qd-bg{
	width: 100%;
	height: 696rpx;
}
.order-food-box{
	position: relative;
}
.order-food{
	width: calc(100% - 64rpx);
	position: absolute;
	left: 32rpx;
	top: -90rpx;
}
.bc-FFEDE9-FFF1EE{
	background: linear-gradient( 90deg, #FFEDE9 0%, #FFF1EE 100%);
}
.zh-img {
	width: 148rpx;
	height: 148rpx;
}
.right-h{
	width: 40rpx;
	height: 40rpx;
}
</style>