xiongmao/pages/my/message/message.vue

<!-- 消息 -->
<template>
	<view class="wrap">

		<view class="message-list">
			<view class="message-item">
				<image src="../../../static/message-1.png" mode="" class="message-item-img"></image>
				<view class="menu-item-sidebar">
					<view class="menu-item-column">
						<view class="name">交易物流通知</view>
						<view class="msg">您的包裹到达新的站点</view>
					</view>
					<view class="menu-item-row">
						<view class="time">10:47</view>
						<view class="circle"></view>
					</view>
				</view>
			</view>
			<view class="message-item">
				<image src="../../../static/message-2.png" mode="" class="message-item-img"></image>
				<view class="menu-item-sidebar">
					<view class="menu-item-column">
						<view class="name">视频上新通知</view>
						<view class="msg">亚健康到底是什么</view>
					</view>
					<view class="menu-item-row">
						<view class="time">10:47</view>
						<view class="circle"></view>
					</view>
				</view>
			</view>
			<view class="message-item">
				<image src="../../../static/message-3.png" mode="" class="message-item-img"></image>
				<view class="menu-item-sidebar">
					<view class="menu-item-column">
						<view class="name">优惠活动</view>
						<view class="msg">双十一第二波预售开启</view>
					</view>
					<view class="menu-item-row">
						<view class="time">10:47</view>
						<view class="circle"></view>
					</view>
				</view>
			</view>
			<view class="message-item">
				<image src="../../../static/message-4.png" mode="" class="message-item-img"></image>
				<view class="menu-item-sidebar">
					<view class="menu-item-column">
						<view class="name">客服消息</view>
						<view class="msg">亲亲 求求你了 我也不想打扰你</view>
					</view>
					<view class="menu-item-row">
						<view class="time">昨天</view>
					</view>
				</view>
			</view>
			<!-- 无内容时显示 -->
			<!-- <view class="normal-box">
				<image src="../../../static/normal-6.png" mode="widthFix"></image>
				暂无消息
			</view> -->
		</view>

		<view class="bottom">
			<view class="label">
				本周热销
			</view>
			<view class="product-list">
				<view class="product-item">
					<view class="product-item-column">
						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill">
						</image>
						<view class="product-item-column-bottom">
							<view class="product-item-column-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
							<view class="product-item-column-row-between">
								<view class="product-item-column-price">
									￥394.00
									<text>￥34.00</text>
								</view>
								<button type="default" class="product-item-column-btn">
									<image src="../../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="product-item">
					<view class="product-item-column">
						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill">
						</image>
						<view class="product-item-column-bottom">
							<view class="product-item-column-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
							<view class="product-item-column-row-between">
								<view class="product-item-column-price">
									￥394.00
									<text>￥34.00</text>
								</view>
								<button type="default" class="product-item-column-btn">
									<image src="../../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="product-item">
					<view class="product-item-column">
						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill">
						</image>
						<view class="product-item-column-bottom">
							<view class="product-item-column-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
							<view class="product-item-column-row-between">
								<view class="product-item-column-price">
									￥394.00
									<text>￥34.00</text>
								</view>
								<button type="default" class="product-item-column-btn">
									<image src="../../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="product-item">
					<view class="product-item-column">
						<image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill">
						</image>
						<view class="product-item-column-bottom">
							<view class="product-item-column-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
							<view class="product-item-column-row-between">
								<view class="product-item-column-price">
									￥394.00
									<text>￥34.00</text>
								</view>
								<button type="default" class="product-item-column-btn">
									<image src="../../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	@import "./message.css";
</style>