chore:蓝色背景弧度向上移动,分享二维码改成名片样式
This commit is contained in:
@@ -32,7 +32,7 @@
|
||||
</view>
|
||||
<view class="ca-item" @tap="openShare">
|
||||
<text class="ca-icon iconfont icon-erweima"></text>
|
||||
<text>分享二维码</text>
|
||||
<text>名片样式</text>
|
||||
</view>
|
||||
<view class="ca-item" @tap="goList">
|
||||
<text class="ca-icon iconfont icon-shuaxin"></text>
|
||||
@@ -355,7 +355,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.card-detail {
|
||||
min-height: 100vh;
|
||||
// 参考图: 蓝色渐隐到白底(非灰底)
|
||||
// 参考图: 蓝色以下为白底(非灰底)
|
||||
background-color: #ffffff;
|
||||
padding: 0 0 60rpx;
|
||||
box-sizing: border-box;
|
||||
@@ -372,16 +372,20 @@ export default {
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
// 蓝色背景层: 顶部与导航栏 #2aa5ff 无缝衔接, 下沿长距离渐隐进白底
|
||||
// bottom: 0 —— 蓝色一直铺到卡片下沿, 靠渐变尾巴收掉, 与参考图一致
|
||||
// 蓝色背景层: 纯色(无渐变), 顶部与导航栏 #2aa5ff 无缝衔接, 下沿是一条向下凸的弧线
|
||||
// 弧度做法: 底部两角用「横向 240rpx + 纵向 44rpx」的椭圆圆角, 两侧各一条大弧线
|
||||
// (中段被白卡完全盖住, 所以漏出来的只有左右两条弧边, 和参考图一致)
|
||||
// bottom: 48rpx —— 弧线最低点比卡片下沿上提 48rpx(向上移一点); 想再高/再低改这个值即可
|
||||
.card-wrap-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
bottom: 48rpx;
|
||||
z-index: 0;
|
||||
background: linear-gradient(180deg, #2aa5ff 0%, #0d7bf0 52%, rgba(13, 123, 240, 0) 100%);
|
||||
background-color: #2aa5ff;
|
||||
border-bottom-left-radius: 240rpx 44rpx;
|
||||
border-bottom-right-radius: 240rpx 44rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -118,10 +118,28 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 详情路由只认字符串 card_id(后端文档 1.3.2), 行数据里可能写成 card_id / cardId
|
||||
cardIdOf(item) {
|
||||
if (!item) return '';
|
||||
const raw = item.card_id || item.cardId;
|
||||
return raw ? String(raw) : '';
|
||||
},
|
||||
goDetail(item) {
|
||||
if (!item.card_id) return;
|
||||
const cardId = this.cardIdOf(item);
|
||||
if (!cardId) {
|
||||
// 之前这里是静默 return: 命中时点名片毫无反应, 用户只会认为"点不进去"
|
||||
console.warn('[card/list] 该行缺少 card_id, 无法打开详情; 可用字段:',
|
||||
item ? Object.keys(item) : item);
|
||||
uni.showToast({ title: '该名片缺少编号,无法打开', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages_tool/card/detail?card_id=' + encodeURIComponent(item.card_id)
|
||||
url: '/pages_tool/card/detail?card_id=' + encodeURIComponent(cardId),
|
||||
// navigateTo 默认无界面反馈(页面未注册/栈满都会静默失败), 显式暴露错误
|
||||
fail: err => {
|
||||
console.error('[card/list] 打开名片详情失败:', err);
|
||||
uni.showToast({ title: '打开失败,请稍后重试', icon: 'none' });
|
||||
}
|
||||
});
|
||||
},
|
||||
goCreate() {
|
||||
|
||||
Reference in New Issue
Block a user