hookehuyr

style(ui): 统一查看按钮图标并优化交互样式

- 将计划列表中的查看按钮图标从 "order" 更改为 "eye" 以保持一致性
- 在物料列表项中移除整个项的点击事件,改为独立的查看按钮,避免误触
- 为物料列表的查看按钮添加明确的视觉样式和点击反馈
......@@ -21,8 +21,8 @@
<div class="px-[32rpx] mt-[32rpx]">
<div class="flex flex-col gap-[24rpx]">
<div v-for="(item, index) in list" :key="index"
class="material-item bg-white rounded-[24rpx] p-[24rpx] shadow-sm flex items-start active:scale-[0.98] transition-all duration-200 border border-gray-50"
:style="{ animationDelay: `${index * 50}ms` }" @click="onView(item)">
class="material-item bg-white rounded-[24rpx] p-[24rpx] shadow-sm flex items-start transition-all duration-200 border border-gray-50"
:style="{ animationDelay: `${index * 50}ms` }">
<!-- 左侧图标 -->
<div
......@@ -53,7 +53,8 @@
</div>
</div>
<!-- 底部信息:文件大小 -->
<!-- 底部信息:文件类型、大小和查看按钮 -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-[12rpx]">
<span
class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-gray-100 text-gray-500 text-[20rpx] font-medium rounded-[8rpx]">
......@@ -63,6 +64,15 @@
{{ item.size }}
</span>
</div>
<!-- 查看按钮 -->
<view
class="flex items-center justify-center px-[20rpx] py-[10rpx] bg-blue-50 rounded-full active:bg-blue-100 transition-colors"
@tap.stop="onView(item)">
<IconFont name="eye" size="14" color="#2563EB" class="mr-[6rpx]" />
<text class="text-[24rpx] text-blue-600 font-medium leading-none">查看</text>
</view>
</div>
</div>
</div>
</div>
......
......@@ -55,7 +55,7 @@
<!-- Actions -->
<view class="flex justify-end gap-[24rpx]">
<view class="flex items-center text-blue-600" @tap="onView(item)">
<IconFont name="order" size="14" class="mr-[8rpx]" />
<IconFont name="eye" size="14" class="mr-[8rpx]" />
<text class="text-[24rpx]">查看</text>
</view>
<view class="flex items-center text-red-500" @tap="onDelete(item)">
......