xiongmao/pages/my/my-appointment/my-appointment.vue

<!-- 我的预约 -->
<template>
	<view class="wrap">
		<view class="appointment-list">
			<view class="appointment-item">
				<image src="../../../static/img-4.png" class="appointment-img" mode="aspectFill"></image>
				<view class="appointment-sidebar">
					<view class="appointment-row-between">
						<view class="appointment-name">陶太萌油蟠桃(黄肉油蟠桃)</view>
						<image class="icon" src="../../../static/icon-2.png" mode="widthFix"></image>
					</view>
					<view class="time">2020-02-24 14:3:23</view>
					<view class="row-end">
						<button type="default">更换地址</button>
					</view>
				</view>
			</view>
			<view class="appointment-item">
				<image src="../../../static/img-4.png" class="appointment-img" mode="aspectFill"></image>
				<view class="appointment-sidebar">
					<view class="appointment-row-between">
						<view class="appointment-name">陶太萌油蟠桃(黄肉油蟠桃)</view>
						<image class="icon" src="../../../static/icon-2.png" mode="widthFix"></image>
					</view>
					<view class="time">2020-02-24 14:3:23</view>
					<view class="row-end">
						<button type="default">更换地址</button>
					</view>
				</view>
			</view>
			<!-- 无内容时显示 -->
			<!-- <view class="normal-box">
				<image src="../../../static/normal-1.png" mode="widthFix"></image>
				暂无预约
			</view> -->
		</view>
		<view class="bottom">
			<view class="label">
				猜你想要
			</view>
			<view class="recommend-list">
				<view class="recommend-item">
					<image src="../../../static/img-4.png" class="recommend-img" mode="aspectFill"></image>
					<view class="recommend-sidebar">
						<view class="recommend-name">陶太萌油蟠桃(黄肉油蟠桃)</view>
						<view class="recommend-tag">
							<image src="../../../static/icon-3.png" mode=""></image>
							口干多汁，品质极佳
						</view>
						<view class="recommend-msg">7月、8月采摘 | 新疆</view>
						<view class="recommend-row">
							限量100份 <text class="margin">已预订<text class="red">56</text>份</text>
						</view>
						<view class="recommend-price">￥394.00</view>
					</view>
				</view>
				<view class="recommend-item">
					<image src="../../../static/img-4.png" class="recommend-img" mode="aspectFill"></image>
					<view class="recommend-sidebar">
						<view class="recommend-name">陶太萌油蟠桃(黄肉油蟠桃)</view>
						<view class="recommend-tag">
							<image src="../../../static/icon-3.png" mode=""></image>
							口干多汁，品质极佳
						</view>
						<view class="recommend-msg">7月、8月采摘 | 新疆</view>
						<view class="recommend-row">
							限量100份 <text class="margin">已预订<text class="red">56</text>份</text>
						</view>
						<view class="recommend-price">￥394.00</view>
					</view>
				</view>
				<!-- 无内容时显示 -->
				<!-- <view class="normal-box">
					<image src="../../../static/normal-2.png" mode="widthFix"></image>
					暂无数据
				</view> -->
			</view>
		</view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	@import "./my-appointment.css";
</style>