97 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			97 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <!-- | ||
|  |  * @Descripttion:  | ||
|  |  * @version:  | ||
|  |  * @Author: 王三华 | ||
|  |  * @Date: 2024-09-19 11:15:25 | ||
|  | --> | ||
|  | <template> | ||
|  |   <view class="content"> | ||
|  |     <view | ||
|  |       v-for="(item, index) in awardsList" | ||
|  |       :key="index" | ||
|  |       :class="item.nowFlag == 0 ? 'huang' : 'kuang'" | ||
|  |     > | ||
|  |       <view class="kuang_t"> | ||
|  |         <view>{{ item.dateYear }}</view> | ||
|  |         <view>{{ item.dateMonth }}月</view> | ||
|  |       </view> | ||
|  |       <view class="kuang_b">{{ item.awardsName }}</view> | ||
|  |     </view> | ||
|  |   </view> | ||
|  | </template> | ||
|  | 
 | ||
|  | <script> | ||
|  | import * as api from "@/config/mine.js"; | ||
|  | export default { | ||
|  |   data() { | ||
|  |     return { | ||
|  |       awardsList: [], | ||
|  |     }; | ||
|  |   }, | ||
|  |   onLoad() { | ||
|  |     this.getData(); | ||
|  |   }, | ||
|  |   methods: { | ||
|  |     getData() { | ||
|  |       api.yearAwards().then((res) => { | ||
|  |         this.awardsList = res.data; | ||
|  |       }); | ||
|  |     }, | ||
|  |   }, | ||
|  | }; | ||
|  | </script> | ||
|  | 
 | ||
|  | <style lang="scss" scoped> | ||
|  | .content { | ||
|  |   padding: 20rpx 20rpx; | ||
|  |   .kuang { | ||
|  |     padding: 16rpx 20rpx; | ||
|  |     background: #fff; | ||
|  |     border-radius: 20rpx; | ||
|  |     margin-bottom: 20rpx; | ||
|  |     .kuang_t { | ||
|  |       display: flex; | ||
|  |       align-items: center; | ||
|  |       justify-content: space-between; | ||
|  |       :nth-child(1) { | ||
|  |         color: #5f5f5f; | ||
|  |       } | ||
|  |       :nth-child(2) { | ||
|  |         color: #333; | ||
|  |         font-size: 36rpx; | ||
|  |         font-weight: 600; | ||
|  |       } | ||
|  |     } | ||
|  |     .kuang_b { | ||
|  |       color: #333; | ||
|  |       font-size: 36rpx; | ||
|  |       font-weight: 600; | ||
|  |     } | ||
|  |   } | ||
|  |   .huang { | ||
|  |     padding: 16rpx 20rpx; | ||
|  |     background: linear-gradient(#dca665, #d1924d); | ||
|  |     border-radius: 20rpx; | ||
|  |     margin-bottom: 20rpx; | ||
|  |     .kuang_t { | ||
|  |       display: flex; | ||
|  |       align-items: center; | ||
|  |       justify-content: space-between; | ||
|  |       :nth-child(1) { | ||
|  |         color: #fff; | ||
|  |       } | ||
|  |       :nth-child(2) { | ||
|  |         color: #fff; | ||
|  |         font-size: 36rpx; | ||
|  |         font-weight: 600; | ||
|  |       } | ||
|  |     } | ||
|  |     .kuang_b { | ||
|  |       color: #fff; | ||
|  |       font-size: 36rpx; | ||
|  |       font-weight: 600; | ||
|  |     } | ||
|  |   } | ||
|  | } | ||
|  | </style> |