<template>
	<view class="content">
		<view class="honorList" v-for="item in honorList" :class="item.isHave==1?'class1':''">
			<view class="img">
				<img :src="item.img" />
			</view>
			<view class="name sizes" :style="item.isHave==1?'color:#2E1C10':''">{{item.title}}</view>
			<view class="name" v-if="item.isHave==0">{{item.haveTime}}</view>
		</view>
	</view>
</template>

<script>
	import {getMemberHonorWallAll} from '@/config/mine.js'
	export default {
		data() {
			return {
				honorList: []
			}
		},
		onLoad() {
				this.getData()
		},
		methods: {
			getData(){
				getMemberHonorWallAll().then(res=>{
					 this.honorList = res.rows;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 14rpx 11rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-image: url("~@/static/images/bg-color.png");
		
		// background-size: 100% 100%;
		min-height: 100vh;
		.honorList {
			margin: 14rpx 11rpx;
			width:280rpx;
			min-height: 280rpx;
			// height: 262rpx;
			background: #F5CB90;
			box-shadow: inset 0 0 40rpx 0 #BA7A12;
			border-radius: 20rpx;
			padding: 50rpx 30rpx;
			text-align: center;
			.img{
			  img{
			    width: 200rpx;
			    height: 200rpx;
			  }
			}
			  .name{
			    color: #7A3A0B;
			    font-size:26rpx;
			    margin-left: 8rpx;
			  }
			  .sizes{
			    font-size: 26rpx;
			    margin-top: 20rpx;
			  }
		}

		.class1 {
			background: #E6E6E6;
			box-shadow: inset 0 0 40rpx 0 #A8A8A8;
		}
	}
</style>