原因:微信 <button> 自带 min-height 88rpx 和固有 line-height, 会顶歪自定义高度。改用 <view> + flex 居中。 - 5 个 button 改为 view(保留 class/bindtap/data-id) - action-btn / edit-btn / delete-btn 改 flex 居中 - add-btn 加 inline-flex 居中 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -12,8 +12,8 @@
|
|||||||
<text wx:if="{{person.remark}}" class="person-remark">{{person.remark}}</text>
|
<text wx:if="{{person.remark}}" class="person-remark">{{person.remark}}</text>
|
||||||
|
|
||||||
<view class="actions">
|
<view class="actions">
|
||||||
<button class="action-btn" bindtap="onEditPerson">编辑</button>
|
<view class="action-btn" bindtap="onEditPerson">编辑</view>
|
||||||
<button class="action-btn danger" bindtap="onDeletePerson">删除</button>
|
<view class="action-btn danger" bindtap="onDeletePerson">删除</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
<view class="section">
|
<view class="section">
|
||||||
<view class="section-header">
|
<view class="section-header">
|
||||||
<text class="section-title">纪念日列表 ({{anniversaries.length}})</text>
|
<text class="section-title">纪念日列表 ({{anniversaries.length}})</text>
|
||||||
<button class="add-btn" bindtap="onAddAnniversary">+ 添加纪念日</button>
|
<view class="add-btn" bindtap="onAddAnniversary">+ 添加纪念日</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view wx:if="{{anniversaries.length === 0}}" class="empty-state">
|
<view wx:if="{{anniversaries.length === 0}}" class="empty-state">
|
||||||
@@ -54,8 +54,8 @@
|
|||||||
<view wx:if="{{item.remark}}" class="anniversary-remark">{{item.remark}}</view>
|
<view wx:if="{{item.remark}}" class="anniversary-remark">{{item.remark}}</view>
|
||||||
|
|
||||||
<view class="anniversary-actions">
|
<view class="anniversary-actions">
|
||||||
<button class="edit-btn" bindtap="onEditAnniversary" data-id="{{item.id}}">编辑</button>
|
<view class="edit-btn" bindtap="onEditAnniversary" data-id="{{item.id}}">编辑</view>
|
||||||
<button class="delete-btn" bindtap="onDeleteAnniversary" data-id="{{item.id}}">删除</button>
|
<view class="delete-btn" bindtap="onDeleteAnniversary" data-id="{{item.id}}">删除</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -68,7 +68,9 @@
|
|||||||
.action-btn {
|
.action-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 72rpx;
|
height: 72rpx;
|
||||||
line-height: 72rpx;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -122,8 +124,11 @@
|
|||||||
color: #FAF6ED;
|
color: #FAF6ED;
|
||||||
border-radius: 36rpx;
|
border-radius: 36rpx;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
border: none;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-btn::after {
|
.add-btn::after {
|
||||||
@@ -258,7 +263,9 @@
|
|||||||
.delete-btn {
|
.delete-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 60rpx;
|
height: 60rpx;
|
||||||
line-height: 60rpx;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
border: 1rpx solid #E8E2D5;
|
border: 1rpx solid #E8E2D5;
|
||||||
|
|||||||
Reference in New Issue
Block a user