zhxy-desk/components/honor.vue

<template>
	<view class="honor">


		<view v-for="(item,index) in list" :key="index" class="honor-item">

			<view class="honor-item-left">
				<image style="width: 100%;height: 100%;border-radius: 10rpx;border: 2px solid #999;" :src="item.img" mode=""></image>
			</view>
			<view class="honor-item-right">
				<view class="honor-item-right-title">
					{{item.active_honor_name}}
				</view>
				<!-- 	<view class="honor-table">
					<view :style="`
					background-color:${item1.bgcColor} ;
					color:${item1.color} ;
					`" v-for="(item1,index1) in item.honor" :key="index1" class="honor-table-item">
						{{item1.title}}
					</view>
				</view> -->
				<view class="honor-date">
					{{item.create_time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "honor",
		props: {
			list: {
				default: () => [],
				type: Array
			}
		},
		data() {
			return {

			};
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.honor {
		width: 100%;


		.honor-item {
			width: 100%;
			margin-bottom: 32rpx;
			display: flex;

		}

		.honor-item-left {
			width: 224rpx;
			height: 140rpx;
			margin-right: 32rpx;

		}

		.honor-item-right {
			font-size: 24rpx;
			line-height: 30rpx;

			.honor-table {
				display: flex;
				margin-bottom: 15rpx;
				margin-top: 5rpx;

				.honor-table-item {
					padding: 6rpx 10rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
				}
			}
		}

		.honor-date {
			color: #999;
		}

		.honor-item-right-title {
			height: 60rpx;
			font-size: 32rpx;
			margin-bottom: 50rpx;
		}
	}
</style>