Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7adf5100 1 parent 91d29c9b

feat(ScanCheckinList): 优化签到列表项UI与交互体验 

修复已打卡状态同时显示操作按钮的问题，替换文字标签为专用图标，添加悬停指针样式并扩大点击区域
Inline Side-by-side
Showing 2 changed files with 14 additions and 11 deletions
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
58 .scan-checkin-list-content { 58 .scan-checkin-list-content {
59 flex: 1; 59 flex: 1;
60 min-width: 0; 60 min-width: 0;
61 + cursor: pointer;
61 } 62 }
62 63
63 .scan-checkin-list-name { 64 .scan-checkin-list-name {
...@@ -87,15 +88,11 @@ ...@@ -87,15 +88,11 @@
87 flex-shrink: 0; 88 flex-shrink: 0;
88 } 89 }
89 90
90 -.scan-checkin-list-checked-tag { 91 +.scan-checkin-list-action-image {
91 - padding: 10rpx 18rpx; 92 + width: 72rpx;
92 - border-radius: 999rpx; 93 + height: 72rpx;
93 - background: rgba(54, 181, 187, 0.12);
94 - color: #2c9ca2;
95 - font-size: 24rpx;
96 - line-height: 1;
97 - font-weight: 500;
98 flex-shrink: 0; 94 flex-shrink: 0;
95 + cursor: pointer;
99 } 96 }
100 97
101 .scan-checkin-list-load-more, 98 .scan-checkin-list-load-more,
......
...@@ -21,13 +21,19 @@ ...@@ -21,13 +21,19 @@
21 <IconFont size="30" name="https://cdn.ipadbiz.cn/lls_prog/icon/check_list_logo.png" /> 21 <IconFont size="30" name="https://cdn.ipadbiz.cn/lls_prog/icon/check_list_logo.png" />
22 </view> 22 </view>
23 23
24 - <view class="scan-checkin-list-content"> 24 + <view class="scan-checkin-list-content" @click="goToDetail(point)">
25 <text class="scan-checkin-list-name">{{ point.title }}</text> 25 <text class="scan-checkin-list-name">{{ point.title }}</text>
26 </view> 26 </view>
27 27
28 - <text v-if="point.isChecked === true" class="scan-checkin-list-checked-tag">已打卡</text> 28 + <image
29 + v-if="point.isChecked === true"
30 + class="scan-checkin-list-action-image"
31 + src="https://cdn.ipadbiz.cn/lls_prog/icon/yidaka_icon.png"
32 + mode="aspectFit"
33 + @click="goToDetail(point)"
34 + />
29 35
30 - <view class="scan-checkin-list-action" @click="goToDetail(point)"> 36 + <view v-else class="scan-checkin-list-action" @click="goToDetail(point)">
31 <Scan2 size="20" /> 37 <Scan2 size="20" />
32 </view> 38 </view>
33 </view> 39 </view>
......