| /* 外部容器:左右布局 */ |
| .wrapper { |
| background:none; |
| border:none; |
| box-shadow: none; |
| display: flex; |
| align-items: flex-start; |
| justify-content: center; |
| padding: 40px; |
| gap: 60px; |
| } |
| |
| /* 宠物区域 */ |
| .petSection { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .petImage { |
| width: 200px; |
| height: 200px; |
| object-fit: cover; |
| cursor: pointer; |
| margin-bottom: 12px; |
| } |
| |
| /* 卡片区域:紧跟宠物图下方,模拟右下角 */ |
| .cardContainer { |
| align-self: flex-end; /* 让它贴底部对齐 */ |
| width: 280px; |
| } |
| |
| .card { |
| |
| border-radius: 16px; |
| |
| padding: 20px; |
| } |
| |
| .text { |
| font-size: 16px; |
| margin: 12px 0; |
| color: #333; |
| } |
| |
| .feedButton { |
| width: 100%; |
| padding: 12px; |
| font-size: 16px; |
| background-color: #ff9800; |
| color: white; |
| border: none; |
| border-radius: 10px; |
| cursor: pointer; |
| margin: 16px 0; |
| transition: background-color 0.2s; |
| } |
| |
| .feedButton:hover { |
| background-color: #fb8c00; |
| } |
| |
| .switchSection { |
| margin-top: 20px; |
| } |
| |
| .switchTitle { |
| font-weight: 600; |
| font-size: 14px; |
| } |