Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4f7c4c11 1 parent ed3bc88c

refactor(ui): 优化 ProductCard 组件视觉样式 

- 升级为高端专业风格（白色背景 + 细腻阴影 + 装饰光晕）
- 移除 nut-button 依赖，改用原生 view 实现精确样式控制
- 增加点击微缩放交互效果 (active:scale-[0.99])
- 优化标签样式和标题排版对比度

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 2 changed files with 69 additions and 34 deletions
......@@ -5,6 +5,26 @@
---
## [2026-02-10] - 优化 ProductCard 组件视觉质感
### 优化
- **UI 升级**：将产品卡片从基础样式升级为“高端专业”风格
- 背景：从 `bg-gray-50` 升级为 `bg-white` 配合细腻阴影 `box-shadow`，增加悬浮感
- 装饰：右上角增加淡蓝色光晕装饰，提升视觉层次
- 交互：增加点击时的微缩放效果 (`active:scale-[0.99]`)
- **组件重构**：
- 移除 `nut-button` 依赖，改用原生 `view` + Flexbox 实现按钮，便于精确控制样式
- 优化标签 (`tags`) 样式，增加动态边框逻辑
- 优化排版，增强标题对比度 (`font-bold`, `tracking-tight`)
**详细信息**：
- **影响文件**: src/components/cards/ProductCard.vue
- **技术栈**: Vue 3, Tailwind CSS
- **测试状态**: 待验证
- **备注**: 保持了品牌色 (#2563EB) 一致性，提升了整体精致度
---
## [2026-02-10] - 移除 Apifox MCP 集成
### 删除
......
<template>
<view class="bg-gray-50 rounded-[24rpx] p-[28rpx] product-card">
<!-- 产品名称 -->
<text class="block text-gray-800 text-[32rpx] font-medium mb-[20rpx]">{{ productName }}</text>
<view
class="relative bg-white rounded-[24rpx] p-[32rpx] border border-gray-100 product-card overflow-hidden transition-all duration-300 active:scale-[0.99]"
style="box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);"
>
<!-- 装饰背景: 右上角淡蓝色光晕 -->
<view class="absolute -right-[40rpx] -top-[40rpx] w-[160rpx] h-[160rpx] bg-blue-50 rounded-full opacity-60 blur-[30rpx] pointer-events-none"></view>
<!-- 产品标签 -->
<view v-if="tags && tags.length" class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
<view
v-for="tag in tags"
:key="tag.id"
class="text-[20rpx] px-[12rpx] py-[4rpx] rounded-full"
:style="{
backgroundColor: tag.bg_color,
color: tag.text_color
}"
>
<text class="text-[22rpx]">{{ tag.name }}</text>
<!-- 内容区域 -->
<view class="relative z-10">
<!-- 头部：标题与标签 -->
<view class="mb-[36rpx]">
<!-- 产品名称 -->
<text class="block text-gray-900 text-[34rpx] font-bold leading-[1.4] mb-[20rpx] tracking-tight">
{{ productName }}
</text>
<!-- 产品标签 -->
<view v-if="tags && tags.length" class="flex flex-wrap gap-[12rpx]">
<view
v-for="tag in tags"
:key="tag.id"
class="text-[22rpx] px-[16rpx] py-[6rpx] rounded-[8rpx] font-medium flex items-center justify-center transition-opacity"
:style="{
backgroundColor: tag.bg_color || '#F3F4F6',
color: tag.text_color || '#4B5563',
border: `1px solid ${tag.bg_color ? 'transparent' : '#E5E7EB'}`
}"
>
{{ tag.name }}
</view>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="flex justify-between gap-[24rpx]">
<nut-button
plain
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
@tap="handleDetail"
>
产品详情
</nut-button>
<nut-button
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
@tap="handlePlan"
>
计划书
</nut-button>
<!-- 操作按钮组 -->
<view class="flex justify-between gap-[24rpx]">
<!-- 详情按钮: 次级样式 -->
<view
class="flex-1 h-[80rpx] flex items-center justify-center rounded-[16rpx] bg-gray-50 active:bg-gray-100 transition-colors border border-gray-100"
@tap.stop="handleDetail"
>
<text class="text-[28rpx] text-gray-600 font-medium">产品详情</text>
</view>
<!-- 计划书按钮: 主要样式 -->
<view
class="flex-1 h-[80rpx] flex items-center justify-center rounded-[16rpx] bg-blue-600 active:bg-blue-700 transition-all shadow-md shadow-blue-100"
@tap.stop="handlePlan"
>
<text class="text-[28rpx] text-white font-medium">制作计划书</text>
</view>
</view>
</view>
</view>
</template>
......@@ -101,6 +116,6 @@ const handlePlan = () => {
<style lang="less" scoped>
.product-card {
// 可以添加卡片特定的样式
// 保持 scoped 样式块，方便未来扩展
}
</style>
......