<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>