|  |  | @ -1,61 +1,9 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  | <template> |  |  |  | <template> | 
			
		
	
		
		
			
				
					
					|  |  |  |     <div> |  |  |  |   个人空间 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |       <!-- 爱心按钮,点击后会变红,并带有过渡效果 --> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |       <button @click="toggleLike" :class="{'liked': isLiked}"> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |         <span v-if="isLiked">❤️</span> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |         <span v-else>🤍</span> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |       </button> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     </div> |  |  |  |  | 
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  | </template> |  |  |  | </template> | 
			
		
	
		
		
			
				
					
					|  |  |  |    |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | <script> |  |  |  | <script> | 
			
		
	
		
		
			
				
					
					|  |  |  | export default { |  |  |  | export default { | 
			
		
	
		
		
			
				
					
					|  |  |  |       name:'AaA', |  |  |  |   name: 'spaceIndex', // 添加组件名称 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |     data() { |  |  |  |   // 其他组件选项 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |       return { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |         isLiked: false, // 用于存储是否已点赞 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |       }; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     }, |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     methods: { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |       toggleLike() { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |         this.isLiked = !this.isLiked; // 切换点赞状态 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |       }, |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     }, |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   }; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   </script> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |    |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   <style scoped> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   /* 默认的按钮样式 */ |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   button { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     background: none; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     border: none; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     font-size: 3rem; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     cursor: pointer; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     outline: none; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     padding: 0; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   } |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |    |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   /* 点赞后的红色样式 */ |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   @keyframes scaleAnimation { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   0% { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     transform: scale(1); |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   } |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   50% { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     transform: scale(1.2); |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   } |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   100% { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |     transform: scale(1); |  |  |  |  | 
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					|  |  |  | } |  |  |  | } | 
			
		
	
		
		
			
				
					
					|  |  |  | } |  |  |  | </script> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | /* .liked 类,应用动画 */ |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | .liked { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   color: red; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   animation: scaleAnimation 0.5s ease-in-out; |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | } |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |    |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |    |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |   </style> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |    |  |  |  |  |