front-end/mobile-code/src/components/module/order-list.vue

<template>
	<div class="list-module">
		<div class="list-left">
			<div class="image">
				<img src="../../static/images/logout.png" alt />
			</div>
			<div class="list-msg">
				<div class="title">天使面孔</div>
				<div class="desc">玫瑰花为主</div>
			</div>
		</div>
		<div class="list-right">
			<div class="price">￥300.00</div>
			<div class="num">*1</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'list-module',
	data() {
		return {}
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
	.list-module {
		@include disFlex(center, space-between);
		padding: 20px 0;
		border-bottom: 1px solid $borderColor;
		.list-left {
			@include disFlex(flex-start, space-between);
			.image {
				width: 140px;
			}
			.list-msg {
                margin-left: 20px;
				.title {
					font-size: 28px;
                    color: $fontColor2;
                    margin-bottom: 10px;
				}
				.desc {
					color: $fontColor3;
				}
			}
        }
        .list-right {
            text-align: right;
            color: $fontColor2;
            .price {
                margin-bottom: 70px;
                color: #333;
            }
        }
	}
</style>