<template>
	<view class="container">
		<view class="top">
			<view class="switch">
				<view class="switch-item select">
					<image src="../../static/order2.png"></image>
					<text>堂食/外卖</text>
				</view>
				<view class="switch-item">
					<image src="../../static/order4.png"></image>
					<text>外送</text>
				</view>
			</view>
			<view class="menu">
				<view class="menu-item select">全部订单</view>
				<view class="menu-item">礼品卡订单</view>
				<view class="menu-item">权益订单</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item" @click="toDetail">
				<view class="list-status">
					<view>共1份餐品</view>
					<view class="status">已取消</view>
				</view>
				<view class="list-product">
					<image src="../../static/img.jpg"></image>
					<view class="list-product-name">
						<view>老北京鸡肉卷+百事可乐(中)</view>
						<view>2024-12-17 13:11:33</view>
					</view>
					<view class="list-product-price">￥35.3</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			toDetail(){
				uni.navigateTo({
					url:'/pages/order/info'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background: #f0f0f0;
		overflow: scroll;
		font-family: Avenir, Helvetica, Arial, sans-serif;

		.top {
			padding: 30rpx;
			padding-bottom: 40rpx;
			background-color: #fff;
			border-radius: 0 0 40rpx 40rpx;
			box-shadow: 1rpx 1rpx 10rpx 0 rgba(0, 0, 0, .1);

			.switch {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-item {
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx solid #313131;
					border-radius: 10rpx;
					padding: 30rpx 0;
					width: 45%;
					color: rgba(0, 0, 0, .9);
					font-size: 30rpx;

					image {
						width: 66rpx;
						height: 66rpx;
						margin-right: 15rpx;
					}
				}
			}

			.menu {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				&-item {
					border: 1rpx solid #313131;
					border-radius: 10rpx;
					width: 25%;
					text-align: center;
					padding: 10rpx 0;
				}
			}

			.select {
				border: 1rpx solid #d90209;
				background: #fdf0f0;
				color: #d90209;
			}
		}

		.list {
			&-item {
				margin: 20rpx;
				box-shadow: 1rpx 1rpx 10rpx 0 rgba(0, 0, 0, .1);
				background: #fff;
				border-radius: 10rpx;
				padding: 30rpx;
			}

			&-status {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 30rpx;

				.status {
					color: rgba(0, 0, 0, .3);
					font-size: 28rpx;
					font-weight: normal;
				}
			}

			&-product {
				display: flex;
				justify-content: space-between;
				// align-items: center;

				image {
					width: 170rpx;
					height: 124rpx;
				}

				&-name {
					width: 50%;
					position: relative;

					&>view:first-child {
						position: absolute;
						top: 0;
						left: 0;
						color: rgba(0, 0, 0, .9);
						font-size: 28rpx;
						font-weight: normal;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					&>view:last-child {
						position: absolute;
						bottom: 0;
						left: 0;
						    color: rgba(0, 0, 0, .5);
							font-size: 24rpx;
					}
				}

				&-price {
					font-weight: 600;
					color: rgba(0, 0, 0, .9);
					font-size: 28rpx;
				}
			}
		}
	}
</style>