feat(UI): 首页与个人中心按原型改版，修复纯白图标在白底上不可见
一、首页两个入口按钮改版（用户反馈「太小了」） 原为「裸图标 + 单行文字」的矮按钮（min-height 76rpx），改为 「白色圆角图标块 + 右侧主副两行文字」的大卡片（padding 22rpx 20rpx）： - 自主填报：便捷填报，快速提交 - 填报记录：历史记录，随时查看 主按钮渐变由 #f97316→#ef4444 改为 #f9863c→#f2620f 并加橙色投影。 结构对齐 create.vue 已有的 sales-entry-* 卡片。 二、个人中心三张卡片改版（用户提供原型图） - 积分卡：改为「绿底图标块 + 大号数字 + 我的积分」，右侧新增 「积分明细 ›」胶囊按钮；去掉原先那条突兀的 20px 绿色粗顶边。 数字字号 30rpx → 40rpx。 - 自主填报 / 客户拜访：由单行居中文字改为「图标块 + 主标题 + 副标题」， 副标题分别为「及时上报、真实记录」「拜访记录、有效跟进」。 - 药审核：改为整行卡片（图标 + 药审核/待审核任务 + 红色数字徽标 + 箭头）， 徽标数据来自新增接口 /yxe/yxe-audit/pending-count（见 yxe-java 侧提交）， 仅 can_auth === 1 时拉取，退出登录时清零。 三、修复纯白图标在近白底上不可见（用户反馈「图片是白色的看不清」） 根因不在 opacity 或主题色，而是图源本身就是纯白图形 + 透明背景： 文件 颜色构成 内容占画布 0fd31838....png (驻店) 透明 + #FFFFFF 75% x 50% f5fbb2e4....png (跑店) 白色及半透明白 88% x 88% 9c6c9884....png (新任务) 纯白 90% x 90% eebe6469....png (已完成) 纯白 - 而承载它们的底色分别是 #f8fafc（选择页卡片）与平均亮度 250/255 的 近白底图（首页 tab），白图标贴白底自然完全看不见。此类图标只适合 放在深色/彩色底上，同一张 0fd31838....png 在个人中心药审核卡里 配金色底时一直正常，故长期未暴露。 改法：统一垫一层绿色圆角底块反衬白色图形 - select.vue：新增 .type-icon-wrap（未选中 #2fc6a7→#1aa88c， 选中加深为 #16a085→#0e7a66 + 投影，顺带强化选中态） - index.vue：新增 .tab-icon-wrap（未激活绿圆底；激活时置 background:none，避免两层绿有色差露出一圈描边） 顺带修一个隐藏问题：两张填报图源的内容占比差很多，同尺寸渲染会让 驻店图标明显偏小，故为 store 单独放大（.type-icon-store 92rpx）。 验证：用 Pillow 按 rpx→px 实际比例合成修复前后对比图逐张核对， 确认修复前未激活图标完全不可见、修复后清晰、激活态无色差边。 模板标签、style 括号、类名定义/引用均通过脚本校验。 注：f5fbb2e4....png 渲染出来实际是「时钟」形状，用在「跑店填报」 语义是否合适待确认，本次只解决可见性，未更换图标资源。
This commit is contained in:
+90
-25
@@ -29,12 +29,22 @@
|
||||
<!-- </view>-->
|
||||
<view class="self-report-entry">
|
||||
<view class="entry-btn primary" @tap="openSelfReportCreate">
|
||||
<u-icon name="edit-pen" size="18" color="#ffffff"/>
|
||||
<text>自主填报</text>
|
||||
<view class="entry-icon">
|
||||
<u-icon name="edit-pen" size="26" color="#f97316"/>
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">自主填报</text>
|
||||
<text class="entry-desc">便捷填报，快速提交</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="entry-btn" @tap="openSelfReportRecord">
|
||||
<u-icon name="order" size="18" color="#d9661f"/>
|
||||
<text>填报记录</text>
|
||||
<view class="entry-icon">
|
||||
<u-icon name="order" size="26" color="#f97316"/>
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">填报记录</text>
|
||||
<text class="entry-desc">历史记录，随时查看</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -43,15 +53,17 @@
|
||||
<view v-for="tab in tabs" :key="tab" :class="['tab', activeTab === tab ? 'active' : '']"
|
||||
@tap="activeTab = tab">
|
||||
<view class="tab-main">
|
||||
<image v-if="tab === '新任务'" class="tab-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/9c6c98843c2e30247355d86ea47552aa.png"
|
||||
mode="aspectFit"/>
|
||||
<image v-if="tab === '待执行'" class="tab-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260127/f5fbb2e4be31bcc830156f174e7931b8.png"
|
||||
mode="aspectFit"/>
|
||||
<image v-if="tab === '已完成'" class="tab-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/eebe6469eb153413dc881f513063f821.png"
|
||||
mode="aspectFit"/>
|
||||
<view class="tab-icon-wrap">
|
||||
<image v-if="tab === '新任务'" class="tab-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/9c6c98843c2e30247355d86ea47552aa.png"
|
||||
mode="aspectFit"/>
|
||||
<image v-if="tab === '待执行'" class="tab-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260127/f5fbb2e4be31bcc830156f174e7931b8.png"
|
||||
mode="aspectFit"/>
|
||||
<image v-if="tab === '已完成'" class="tab-icon"
|
||||
src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/eebe6469eb153413dc881f513063f821.png"
|
||||
mode="aspectFit"/>
|
||||
</view>
|
||||
<text class="tab-text">{{ tab }}</text>
|
||||
</view>
|
||||
<view v-if="tab === '待执行' && pendingCount" class="tab-badge">{{ pendingCount }}</view>
|
||||
@@ -736,9 +748,29 @@ export default {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* tab 图标是纯白图形 + 透明底，而 tab 底图接近纯白，
|
||||
未激活时白图标贴白底看不清，所以垫一层浅绿圆底反衬。
|
||||
激活态下 .tab-main 自己已填 #2fc6a7，两层绿会透出一圈色差边，
|
||||
所以激活时改成完全透明，白图标直接坐在药丸底上。 */
|
||||
.tab-icon-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #2fc6a7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab.active .tab-icon-wrap {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.tab.active .tab-main {
|
||||
@@ -845,23 +877,56 @@ export default {
|
||||
|
||||
.entry-btn {
|
||||
flex: 1;
|
||||
min-height: 76rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #f2a75e;
|
||||
background: #fff4de;
|
||||
color: #d9661f;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 22rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 1rpx solid #f6dcb4;
|
||||
background: #fff5e2;
|
||||
color: #e0631a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.entry-btn.primary {
|
||||
background: linear-gradient(to right, #f97316, #ef4444);
|
||||
background: linear-gradient(135deg, #f9863c, #f2620f);
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 8rpx 20rpx rgba(242, 98, 15, 0.25);
|
||||
}
|
||||
|
||||
.entry-icon {
|
||||
flex-shrink: 0;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.entry-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.entry-desc {
|
||||
font-size: 20rpx;
|
||||
line-height: 1.2;
|
||||
opacity: 0.72;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.category-wrap {
|
||||
|
||||
Reference in New Issue
Block a user