xiamen-sb-uniapp/components/serve-list/serve-list.vue

<template>
	<view>
		<view v-for="(item, index) in orderList" :key="index" class="bg-color-white pb-2 wrap mt-2" :class="isMargin?'mx3':''">
			<view class="top d-flex j-between border-bottom pt-1 pb-2 a-center">
				<view class="d-flex a-center">
					<image src="/static/images/time.png" class="top-img"></image>
					<view class="ml-2 f-size-28" style="color: #757a94;">2021-05-05</view>
				</view>
				<view class="d-flex a-center">
					<view class="f-size-26 top-state-b">
						状态
					</view>
				</view>
			</view>
			<view class="bottom   mt-2">
				<view class="left one-ellipsis">
					<view class="mb-2 f-size-32 f-weight-6 one-ellipsis">名称</view>
				</view>
				<view class="d-flex j-between a-center">
					<text class="text-color-9 f-size-24 ">任务类别：类别</text>
					<view class="flex1 d-flex j-end f-size-36" style="color: #FA5445;">¥112</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsTypeMap: {},
				isConsignor: false,
				statusMap: {}
			};
		},
		props:{
			isMargin:{
				type:Boolean,
				default:true
			},
			isShowInfo:{
				type:Boolean,
				default:true
			},
			orderList: {
				type: Array,
				default: ()=>[]
			}
		},
		created(){
			
		},
		methods: {
		
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		border: 1px solid #eee;
		border-radius: 30rpx;
		padding: 30rpx 30rpx;
		box-shadow: 2px 2px 2px #eee;

		.top {
			&-img {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}

			&-state {
				color: #fff;
				background-color: #ff8905;
				border-radius: 20rpx;
				padding: 5rpx 20rpx;
			}

			&-state-b {
				color: #fff;
				background-color: #73db18;
				border-radius: 20rpx;
				padding: 5rpx 20rpx;

			}
		}

		.bottom {
			&-type {
				border-radius: 20rpx;
				background: linear-gradient(to right, #ff7956, #f53436);
				padding: 3rpx 20rpx;
			}
		}
	}
</style>