From d55ed609079c045f9897f98b1168a1e7bc0e1629 Mon Sep 17 00:00:00 2001 From: chenwu Date: Thu, 11 Jun 2026 18:40:59 +0800 Subject: [PATCH] checkpoint: pre-refactor state before fixing P0/P1 issues --- cloudfunctions/createPost/index.js | 5 + cloudfunctions/getPosts/index.js | 120 ++++++-- i18n/base.json | 11 + miniprogram/app.json | 6 +- miniprogram/app.miniapp.json | 5 + miniprogram/app.wxss | 266 +++++++++++----- .../components/post-card/post-card.wxss | 68 ++--- miniprogram/custom-tab-bar/index.ts | 3 +- miniprogram/custom-tab-bar/index.wxml | 26 +- miniprogram/custom-tab-bar/index.wxss | 285 ++++++------------ miniprogram/pages/chat/chat.wxss | 24 +- .../pages/edit-profile/edit-profile.wxss | 23 +- miniprogram/pages/feed/feed.ts | 11 +- miniprogram/pages/feed/feed.wxml | 103 ++++--- miniprogram/pages/feed/feed.wxss | 107 +++---- miniprogram/pages/friends/friends.ts | 5 + miniprogram/pages/friends/friends.wxml | 19 +- miniprogram/pages/friends/friends.wxss | 90 +++--- miniprogram/pages/login/login.wxss | 70 ++--- miniprogram/pages/nearby/nearby.ts | 8 +- miniprogram/pages/nearby/nearby.wxml | 15 +- miniprogram/pages/nearby/nearby.wxss | 161 ++++------ .../pages/notifications/notifications.ts | 14 +- .../pages/notifications/notifications.wxml | 17 +- .../pages/notifications/notifications.wxss | 38 ++- miniprogram/pages/pet-detail/pet-detail.wxss | 35 +-- miniprogram/pages/pet-edit/pet-edit.ts | 2 +- miniprogram/pages/pet-edit/pet-edit.wxml | 2 +- miniprogram/pages/pet-edit/pet-edit.wxss | 50 +-- .../pages/post-detail/post-detail.wxss | 61 ++-- miniprogram/pages/post/post.wxss | 166 +++++----- miniprogram/pages/profile/profile.ts | 2 +- miniprogram/pages/profile/profile.wxml | 20 +- miniprogram/pages/profile/profile.wxss | 169 ++++------- miniprogram/pages/search/search.ts | 9 +- miniprogram/pages/search/search.wxml | 15 +- miniprogram/pages/search/search.wxss | 55 ++-- miniprogram/pages/story/story.wxss | 6 +- miniprogram/utils/format.ts | 11 +- project.config.json | 9 +- project.miniapp.json | 68 +++++ 41 files changed, 1129 insertions(+), 1051 deletions(-) create mode 100644 i18n/base.json create mode 100644 miniprogram/app.miniapp.json create mode 100644 project.miniapp.json diff --git a/cloudfunctions/createPost/index.js b/cloudfunctions/createPost/index.js index 2cea1fa..335ca40 100644 --- a/cloudfunctions/createPost/index.js +++ b/cloudfunctions/createPost/index.js @@ -27,6 +27,11 @@ exports.main = async (event, context) => { updatedAt: db.serverDate(), } + // geo.near 距离查询字段；无定位时整个字段省略（写 null 会让地理索引构建失败） + if (location && typeof location.latitude === 'number' && typeof location.longitude === 'number') { + post.geo = db.Geo.Point(location.longitude, location.latitude) + } + const res = await db.collection('posts').add({ data: post }) // 更新用户帖子统计 diff --git a/cloudfunctions/getPosts/index.js b/cloudfunctions/getPosts/index.js index 9b8086a..daf4152 100644 --- a/cloudfunctions/getPosts/index.js +++ b/cloudfunctions/getPosts/index.js @@ -2,49 +2,119 @@ const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() const _ = db.command +const $ = db.command.aggregate const PAGE_SIZE = 10 +// 按 where 条件取一页，时间倒序（关注流 / 个人主页 / 附近兜底共用） +async function listByWhere(where, skip) { + const col = db.collection('posts').where(where) + const countRes = await col.count() + const res = await col + .orderBy('createdAt', 'desc') + .skip(skip) + .limit(PAGE_SIZE) + .get() + return { + posts: res.data, + total: countRes.total, + hasMore: skip + res.data.length < countRes.total, + } +} + +// 热门：热度分 = (点赞×3 + 评论×5 + 1) / (帖龄小时数 + 2)^1.5 +// 类 Hacker News 的重力衰减，互动加分、随时间下沉；同分按发布时间倒序 +async function listHot(skip) { + const countRes = await db.collection('posts').count() + const res = await db.collection('posts').aggregate() + .addFields({ + hotScore: $.divide([ + $.add([ + $.multiply([$.ifNull(['$likeCount', 0]), 3]), + $.multiply([$.ifNull(['$commentCount', 0]), 5]), + 1, + ]), + $.pow([ + $.add([ + $.divide([$.subtract([new Date(), '$createdAt']), 3600000]), + 2, + ]), + 1.5, + ]), + ]), + }) + .sort({ hotScore: -1, createdAt: -1 }) + .skip(skip) + .limit(PAGE_SIZE) + .end() + return { + posts: res.list, + total: countRes.total, + hasMore: skip + res.list.length < countRes.total, + } +} + +// 附近：geo.near 按距离由近到远，依赖 posts.geo 的地理位置索引； +// 索引未建或查询失败时回退为矩形围栏 + 时间倒序。 +// $near 不支持 count，用多取一条判断 hasMore，total 为近似值 +async function listNearby(latitude, longitude, skip) { + try { + const res = await db.collection('posts') + .where({ + geo: _.geoNear({ + geometry: db.Geo.Point(longitude, latitude), + maxDistance: 10000, + }), + }) + .skip(skip) + .limit(PAGE_SIZE + 1) + .get() + const hasMore = res.data.length > PAGE_SIZE + const posts = hasMore ? res.data.slice(0, PAGE_SIZE) : res.data + return { posts, total: skip + posts.length + (hasMore ? 1 : 0), hasMore } + } catch (e) { + return listByWhere( + _.and([ + { 'location.latitude': _.gt(latitude - 0.1) }, + { 'location.latitude': _.lt(latitude + 0.1) }, + { 'location.longitude': _.gt(longitude - 0.15) }, + { 'location.longitude': _.lt(longitude + 0.15) }, + ]), + skip + ) + } +} + exports.main = async (event, context) => { const { OPENID } = cloud.getWXContext() const { page = 0, type = 'hot', userId, latitude, longitude } = event + const skip = page * PAGE_SIZE try { - let query = db.collection('posts') - const skip = page * PAGE_SIZE + let result if (userId) { // 某用户的帖子 - query = query.where({ authorId: userId }) + result = await listByWhere({ authorId: userId }, skip) } else if (type === 'feed') { - // 关注的用户帖子 + // 关注流：我关注的人 + 自己 const followsRes = await db.collection('follows') .where({ followerId: OPENID }) .field({ followeeId: true }) .get() const followeeIds = followsRes.data.map(f => f.followeeId) followeeIds.push(OPENID) - query = query.where({ authorId: _.in(followeeIds) }) + result = await listByWhere({ authorId: _.in(followeeIds) }, skip) } else if (type === 'nearby' && latitude && longitude) { - // 附近帖子：使用地理围栏查询（简化版，用 geo_near） - query = query.where( - _.and([ - { 'location.latitude': _.gt(latitude - 0.1) }, - { 'location.latitude': _.lt(latitude + 0.1) }, - { 'location.longitude': _.gt(longitude - 0.15) }, - { 'location.longitude': _.lt(longitude + 0.15) }, - ]) - ) + result = await listNearby(latitude, longitude, skip) + } else { + result = await listHot(skip) } - // type === 'hot' 全量按热度排序 - const total = await query.count() - const postsRes = await query - .orderBy('createdAt', 'desc') - .skip(skip) - .limit(PAGE_SIZE) - .get() + const { posts, total, hasMore } = result - const posts = postsRes.data + if (posts.length === 0) { + return { code: 0, data: { list: [], total, hasMore: false } } + } // 批量获取作者信息 const authorIds = [...new Set(posts.map(p => p.authorId))] @@ -71,11 +141,7 @@ exports.main = async (event, context) => { return { code: 0, - data: { - list: enriched, - total: total.total, - hasMore: skip + posts.length < total.total, - }, + data: { list: enriched, total, hasMore }, } } catch (e) { return { code: -1, message: e.message } diff --git a/i18n/base.json b/i18n/base.json new file mode 100644 index 0000000..45a77c0 --- /dev/null +++ b/i18n/base.json @@ -0,0 +1,11 @@ +{ + "ios": { + "name": "汪圈" + }, + "android": { + "name": "汪圈" + }, + "common": { + "name": "汪圈" + } +} diff --git a/miniprogram/app.json b/miniprogram/app.json index a4ed4c8..1426619 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -18,8 +18,8 @@ ], "tabBar": { "custom": true, - "color": "#9b8fa8", - "selectedColor": "#ff4f91", + "color": "#b9bdc6", + "selectedColor": "#2b2b30", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/feed/feed", "text": "广场" }, @@ -31,7 +31,7 @@ "window": { "navigationStyle": "custom", "backgroundTextStyle": "dark", - "backgroundColor": "#fff9fb" + "backgroundColor": "#f1f2f6" }, "permission": { "scope.userLocation": { diff --git a/miniprogram/app.miniapp.json b/miniprogram/app.miniapp.json new file mode 100644 index 0000000..46bc76c --- /dev/null +++ b/miniprogram/app.miniapp.json @@ -0,0 +1,5 @@ +{ + "adapteByMiniprogram": { + "userName": "gh_994b4ce3ce01" + } +} diff --git a/miniprogram/app.wxss b/miniprogram/app.wxss index 23ffb1b..f26e969 100644 --- a/miniprogram/app.wxss +++ b/miniprogram/app.wxss @@ -1,49 +1,63 @@ -/* ── 全局设计令牌：毛玻璃配色系统 ── */ +/* ── 全局设计令牌:Vital 风格(参考 vital_style_reference.md)── + 单一紫色主色 + 黑白灰层级:强调动作用黑,品牌用紫,其余靠灰度撑层级 */ page { - --coral: #ff2d6e; - --tangerine: #ff7a1a; - --lemon: #ffd400; - --mint: #00d9a0; - --sky: #1f9bff; - --lilac: #8b5cf6; + /* 主色板 */ + --purple: #8b7cf6; + --purple-light: #a99bf8; + --purple-deep: #7563e0; + --accent-dark: #2b2b30; - /* 兼容旧变量名，逐步迁移 */ - --pink: var(--coral); - --pink-light: rgba(255, 45, 110, 0.14); - --orange: var(--tangerine); - --yellow: var(--lemon); + /* 兼容旧变量名:六彩体系全部收敛到 Vital 色板, + 旧渐变 coral→tangerine 自动变为 紫→浅紫 */ + --coral: var(--purple); + --tangerine: var(--purple-light); + --lemon: var(--purple-light); + --mint: #4bbe9a; + --sky: var(--purple); + --lilac: var(--purple); + + --pink: var(--purple); + --pink-light: rgba(139, 124, 246, 0.12); + --orange: var(--purple-light); + --yellow: var(--purple-light); --green: var(--mint); - --blue: var(--sky); - --violet: var(--lilac); - --ink: #2b2438; + --blue: var(--purple); + --violet: var(--purple); + --ink: #1b1b20; - --bg-primary: #ffffff; - --bg-page: #ffffff; + --bg-primary: #f1f2f6; + --bg-page: #f1f2f6; - --text-primary: #2b2438; - --text-secondary: #6e6480; - --text-tertiary: #a59cb5; + --text-primary: #1b1b20; + --text-secondary: #6e7280; + --text-tertiary: #b9bdc6; - --glass: rgba(255, 255, 255, 0.40); - --glass-strong: rgba(255, 255, 255, 0.58); - --glass-edge: rgba(255, 255, 255, 0.78); + /* 紫底上的半透明白(头部胶囊、次级卡片) */ + --on-primary: rgba(255, 255, 255, 0.22); + --on-primary-strong: rgba(255, 255, 255, 0.32); - --border-card: rgba(255, 255, 255, 0.72); - --border-subtle: rgba(43, 37, 61, 0.08); + /* 旧玻璃变量 → 实底白卡 */ + --glass: #ffffff; + --glass-strong: #ffffff; + --glass-edge: rgba(255, 255, 255, 0); - --shadow-soft: 0 22rpx 48rpx rgba(120, 70, 140, 0.16); - --shadow-card: 0 22rpx 48rpx rgba(120, 70, 140, 0.16); - --shadow-pop: 0 14rpx 32rpx rgba(255, 45, 110, 0.30); + --border-card: rgba(255, 255, 255, 0); + --border-subtle: rgba(27, 27, 32, 0.06); - --radius-sm: 16rpx; - --radius-md: 28rpx; - --radius-lg: 44rpx; + /* 中性阴影:大模糊、低不透明度,光源一致来自上方 */ + --shadow-soft: 0 16rpx 48rpx rgba(27, 27, 32, 0.06); + --shadow-card: 0 16rpx 48rpx rgba(27, 27, 32, 0.06); + --shadow-pop: 0 12rpx 32rpx rgba(43, 43, 48, 0.22); + + --radius-sm: 20rpx; + --radius-md: 32rpx; + --radius-lg: 48rpx; --radius-full: 9999rpx; --tab-h: 112rpx; font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; - background: var(--bg-primary); + background: var(--bg-page); color: var(--text-primary); font-size: 28rpx; line-height: 1.5; @@ -68,64 +82,92 @@ button::after { border: none; } -/* ── 通用卡片（兼容旧用法） ── */ +/* ── 通用卡片:纯白实底、大圆角、柔和中性阴影 ── */ .card { - background: rgba(255, 255, 255, 0.86); - border: 1rpx solid var(--border-card); + background: #ffffff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; } -/* ── 真毛玻璃工具类：背景模糊 + 折射边缘 + 内高光 - 低端 Android 对 backdrop-filter 支持有限，已叠加半透明底色兜底 ── */ +/* ── 旧玻璃工具类 → 实底白卡(Vital 无毛玻璃,靠层叠和阴影做深度) ── */ .glass { - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); - box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.65), inset 0 -1rpx 0 rgba(255, 255, 255, 0.12); + background: #ffffff; + box-shadow: var(--shadow-soft); } .glass-strong { - background: var(--glass-strong); - backdrop-filter: blur(34rpx) saturate(180%); - -webkit-backdrop-filter: blur(34rpx) saturate(180%); - border: 1rpx solid var(--glass-edge); - box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.7); + background: #ffffff; + box-shadow: var(--shadow-soft); } -/* ── 贴纸式标签：略微旋转，像贴上去的 ── */ +/* ── 标签:白色小胶囊,不再旋转 ── */ .sticker-tag { position: absolute; - background: rgba(255, 255, 255, 0.55); - backdrop-filter: blur(20rpx) saturate(180%); - -webkit-backdrop-filter: blur(20rpx) saturate(180%); - color: var(--ink); + background: #ffffff; + color: var(--text-primary); font-size: 22rpx; - font-weight: 800; + font-weight: 600; padding: 10rpx 22rpx; - border-radius: 24rpx; - border: 1rpx solid rgba(255, 255, 255, 0.7); - box-shadow: 0 14rpx 30rpx rgba(120, 70, 150, 0.18); - transform: rotate(-3deg); + border-radius: var(--radius-full); + box-shadow: var(--shadow-soft); } .sticker-tag.tilt-r { - transform: rotate(3deg); + transform: none; } -/* ── 渐变按钮 ── */ +/* ── 主按钮:黑色胶囊(Vital 的 CTA 用强调黑,不用主题色) ── */ .btn-primary { display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, var(--coral), var(--tangerine)); + background: var(--accent-dark); color: #fff; border-radius: var(--radius-full); font-size: 28rpx; - font-weight: 800; + font-weight: 600; box-shadow: var(--shadow-pop); + transition: transform 0.15s ease, opacity 0.15s ease; +} + +.btn-primary:active { + transform: scale(0.98); + opacity: 0.9; +} + +/* ── 数字分级排版:整数超大加粗 + 小数/单位缩小变灰 ── */ +.num-xl { + font-size: 96rpx; + font-weight: 700; + letter-spacing: -2rpx; + line-height: 1; + color: var(--text-primary); + font-variant-numeric: tabular-nums; +} + +.num-sub { + font-size: 40rpx; + font-weight: 600; + color: var(--text-tertiary); + font-variant-numeric: tabular-nums; +} + +/* ── 信息行:左数字、右说明 + chevron,中间渐隐细线 ── */ +.row-line { + flex: 1; + height: 2rpx; + margin: 0 20rpx; + background: linear-gradient(90deg, rgba(27, 27, 32, 0.10), rgba(27, 27, 32, 0.02)); +} + +.chevron { + width: 16rpx; + height: 16rpx; + border-top: 4rpx solid var(--text-tertiary); + border-right: 4rpx solid var(--text-tertiary); + transform: rotate(45deg); + flex-shrink: 0; } /* ── 页面顶部状态栏占位 ── */ @@ -133,40 +175,44 @@ button::after { height: env(safe-area-inset-top, 44rpx); } +/* ── 紫色渐变淡出头部:从顶部主色向下融入页面背景,无分界线 ── */ +.hero-fade { + background: linear-gradient(180deg, #9181f4 0%, #a99bf8 55%, rgba(169, 155, 248, 0) 100%); +} + /* ── 滚动区通用 ── */ .scroll-view { width: 100%; } -/* ── Hashtag 标签 ── */ +/* ── Hashtag 标签:主色淡紫底 ── */ .hashtag { display: inline-flex; align-items: center; font-size: 22rpx; - font-weight: 800; - color: #8a3fe0; - background: rgba(167, 139, 250, 0.16); - border: 1rpx solid rgba(167, 139, 250, 0.28); + font-weight: 600; + color: var(--purple-deep); + background: var(--pink-light); border-radius: var(--radius-full); padding: 6rpx 14rpx; } -/* ── 在线绿点 ── */ +/* ── 在线绿点(语义色,保留但降饱和) ── */ .online-dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: var(--mint); flex-shrink: 0; - box-shadow: 0 0 0 5rpx rgba(0, 217, 160, 0.18); + box-shadow: 0 0 0 5rpx rgba(75, 190, 154, 0.16); } -/* ── 骨架屏占位 ── */ +/* ── 骨架屏占位:中性冷灰 ── */ .skeleton { - background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%); + background: linear-gradient(90deg, #ebecf1 25%, #e2e4ea 50%, #ebecf1 75%); background-size: 200% 100%; animation: skeleton-shine 1.4s infinite; - border-radius: 8rpx; + border-radius: 12rpx; } @keyframes skeleton-shine { @@ -174,6 +220,84 @@ button::after { 100% { background-position: -200% 0; } } +/* ── 固定顶栏:液态玻璃,置于图层顶层,高度固定(状态栏 + 导航栏) ── + 下层内容滚动/下拉时始终钉在顶部 */ +.glass-topbar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + background: + radial-gradient(120% 180% at 18% -50%, rgba(255, 255, 255, 0.42), transparent 60%), + rgba(255, 255, 255, 0.52); + backdrop-filter: blur(40rpx) saturate(180%); + -webkit-backdrop-filter: blur(40rpx) saturate(180%); + border-bottom: 1rpx solid rgba(255, 255, 255, 0.55); + box-shadow: + 0 8rpx 28rpx rgba(27, 27, 32, 0.05), + inset 0 1rpx 0 rgba(255, 255, 255, 0.7); +} + +/* 顶栏上的标题:玻璃上用深色文字 */ +.glass-topbar .topbar-logo, +.glass-topbar .navbar-title { + color: #1b1b20; +} + +.glass-topbar .logo-accent { + color: var(--purple); +} + +/* ── 顶栏图标按钮:线条化图标,右侧紧贴小程序胶囊按钮 ── */ +.navbar-action { + margin-left: auto; + margin-right: 8rpx; + width: 64rpx; + height: 64rpx; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.navbar-action:active { + opacity: 0.6; +} + +/* 线条图标:单色 alpha 蒙版 + background-color 上色 */ +.icon-line { + width: 44rpx; + height: 44rpx; + background-color: #1b1b20; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; +} + +/* 搜索:线条放大镜 */ +.icon-search-line { + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSIyMSIgY3k9IjIxIiByPSIxMi41Ii8+PHBhdGggZD0iTTMwLjUgMzAuNUw0MSA0MSIvPjwvZz48L3N2Zz4="); +} + +/* 通知:线条铃铛 */ +.icon-bell-line { + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjQgN2ExMyAxMyAwIDAgMC0xMyAxM3Y3LjVMNyAzNWgzNGwtNC03LjVWMjBBMTMgMTMgMCAwIDAgMjQgN1oiLz48cGF0aCBkPSJNMTkuNSAzOC41YTQuOCA0LjggMCAwIDAgOSAwIi8+PC9nPjwvc3ZnPg=="); +} + +/* 图标按钮上的未读红点 */ +.navbar-action.has-badge::after { + content: ''; + position: absolute; + top: 6rpx; + right: 6rpx; + width: 14rpx; + height: 14rpx; + border-radius: 50%; + background: var(--purple); + border: 2rpx solid #fff; +} + /* ── 安全区 ── */ .safe-top { background: transparent; diff --git a/miniprogram/components/post-card/post-card.wxss b/miniprogram/components/post-card/post-card.wxss index 109527c..a527bec 100644 --- a/miniprogram/components/post-card/post-card.wxss +++ b/miniprogram/components/post-card/post-card.wxss @@ -1,12 +1,10 @@ +/* ── 帖子卡片:纯白实底、大圆角、中性柔和阴影(Vital 风格) ── */ .post-card { margin: 0 28rpx 32rpx; - background: rgba(255, 255, 255, 0.40); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border-radius: 56rpx; - border: 1rpx solid rgba(255, 255, 255, 0.78); + background: #ffffff; + border-radius: 48rpx; overflow: hidden; - box-shadow: 0 22rpx 48rpx rgba(120, 70, 140, 0.16), inset 0 1rpx 0 rgba(255, 255, 255, 0.65); + box-shadow: 0 16rpx 48rpx rgba(27, 27, 32, 0.06); } /* 头部 */ @@ -25,11 +23,9 @@ align-items: center; justify-content: center; font-size: 32rpx; - font-weight: 800; - color: rgba(43, 36, 56, 0.72); + font-weight: 700; + color: rgba(27, 27, 32, 0.65); flex-shrink: 0; - border: 3rpx solid rgba(255, 255, 255, 0.85); - box-shadow: 0 10rpx 22rpx rgba(120, 70, 150, 0.16); } .post-meta { @@ -40,8 +36,8 @@ .post-username { display: block; font-size: 28rpx; - font-weight: 800; - color: #2b2438; + font-weight: 600; + color: #1b1b20; } .post-loc { @@ -55,7 +51,7 @@ .loc-text { font-size: 22rpx; - color: #a59cb5; + color: #b9bdc6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -63,7 +59,7 @@ .post-time { font-size: 22rpx; - color: #a59cb5; + color: #b9bdc6; flex-shrink: 0; } @@ -76,24 +72,21 @@ width: 100%; height: 360rpx; display: block; - background: #f0eef5; + background: #eef0f5; } +/* 心情标签:白色小胶囊,不旋转 */ .post-tag-chip { position: absolute; top: 22rpx; left: 22rpx; - background: rgba(255, 255, 255, 0.55); - backdrop-filter: blur(20rpx) saturate(180%); - -webkit-backdrop-filter: blur(20rpx) saturate(180%); - color: #2b2438; + background: #ffffff; + color: #1b1b20; font-size: 21rpx; - font-weight: 800; + font-weight: 600; padding: 10rpx 22rpx; - border-radius: 24rpx; - border: 1rpx solid rgba(255, 255, 255, 0.7); - box-shadow: 0 14rpx 30rpx rgba(120, 70, 150, 0.18); - transform: rotate(-3deg); + border-radius: 999rpx; + box-shadow: 0 10rpx 26rpx rgba(27, 27, 32, 0.12); } .post-img-grid { @@ -124,7 +117,7 @@ .img-grid-item { width: 100%; height: 100%; - background: #f0eef5; + background: #eef0f5; } /* 正文区 */ @@ -135,7 +128,7 @@ .post-caption { display: block; font-size: 28rpx; - color: #2b2438; + color: #1b1b20; line-height: 1.6; margin-bottom: 16rpx; } @@ -151,10 +144,9 @@ display: inline-flex; align-items: center; font-size: 22rpx; - font-weight: 800; - color: #8a3fe0; - background: rgba(167, 139, 250, 0.16); - border: 1rpx solid rgba(167, 139, 250, 0.28); + font-weight: 600; + color: #7563e0; + background: rgba(139, 124, 246, 0.12); border-radius: 999rpx; padding: 6rpx 14rpx; } @@ -164,7 +156,7 @@ display: flex; gap: 14rpx; padding-top: 20rpx; - border-top: 1rpx solid rgba(255, 255, 255, 0.55); + border-top: 1rpx solid rgba(27, 27, 32, 0.06); } .action-btn { @@ -172,10 +164,9 @@ align-items: center; gap: 8rpx; font-size: 24rpx; - font-weight: 800; - color: #6e6480; - background: rgba(255, 255, 255, 0.42); - border: 1rpx solid rgba(255, 255, 255, 0.62); + font-weight: 600; + color: #6e7280; + background: #f1f2f6; border-radius: 999rpx; padding: 12rpx 22rpx; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease; @@ -185,11 +176,11 @@ transform: scale(0.95); } +/* 已赞:强调黑胶囊(动作强调不用主题色) */ .action-btn.liked { color: #fff; - background: linear-gradient(135deg, #ff2d6e, #ff7a1a); - border-color: transparent; - box-shadow: 0 12rpx 26rpx rgba(255, 45, 110, 0.32); + background: #2b2b30; + box-shadow: 0 10rpx 24rpx rgba(43, 43, 48, 0.24); } .action-icon { @@ -199,4 +190,5 @@ .action-count { font-size: 24rpx; + font-variant-numeric: tabular-nums; } diff --git a/miniprogram/custom-tab-bar/index.ts b/miniprogram/custom-tab-bar/index.ts index 6b11f9c..1103740 100644 --- a/miniprogram/custom-tab-bar/index.ts +++ b/miniprogram/custom-tab-bar/index.ts @@ -12,7 +12,8 @@ Component({ methods: { onTab(e: WechatMiniprogram.CustomEvent) { - const index = e.currentTarget.dataset.index as number + // dataset 取出的是字符串，必须转数字，否则 WXML 中 selected === n 严格比较失败 + const index = Number(e.currentTarget.dataset.index) const path = e.currentTarget.dataset.path as string if (index === this.data.selected) return this.setData({ selected: index }) diff --git a/miniprogram/custom-tab-bar/index.wxml b/miniprogram/custom-tab-bar/index.wxml index 961cf02..abf04c0 100644 --- a/miniprogram/custom-tab-bar/index.wxml +++ b/miniprogram/custom-tab-bar/index.wxml @@ -1,13 +1,8 @@ - - - - - - + 广场 @@ -15,10 +10,7 @@ - - - - + 附近 @@ -26,19 +18,14 @@ - - ＋ + - - - - - + {{unreadCount > 99 ? '99+' : unreadCount}} 汪友 @@ -47,10 +34,7 @@ - - - - + 我的 diff --git a/miniprogram/custom-tab-bar/index.wxss b/miniprogram/custom-tab-bar/index.wxss index 5f6582c..f17640c 100644 --- a/miniprogram/custom-tab-bar/index.wxss +++ b/miniprogram/custom-tab-bar/index.wxss @@ -1,214 +1,121 @@ -/* ── 底部导航：悬浮玻璃浮岛 ── - 绝对定位浮在内容上方，左右下三边露出底层内容； - 分层折射高光 + 缓慢流动的光泽，模拟液态玻璃透镜质感 */ +/* ── 底部导航:白色悬浮浮岛(Vital 风格)── + 纯白实底 + 中性柔和阴影,激活态用强调黑胶囊,不用主题色 */ .tab-dock { position: fixed; left: 16rpx; right: 16rpx; - bottom: 28rpx; + bottom: calc(28rpx + env(safe-area-inset-bottom) * 0.5); z-index: 999; display: flex; align-items: center; justify-content: space-around; - border-radius: 64rpx; - padding: 14rpx 8rpx calc(14rpx + env(safe-area-inset-bottom) * 0.6); + border-radius: 56rpx; + padding: 12rpx 10rpx; overflow: hidden; - isolation: isolate; - background: - radial-gradient(130% 160% at 16% -40%, rgba(255, 255, 255, 0.6), transparent 56%), - radial-gradient(110% 140% at 92% 145%, rgba(255, 255, 255, 0.16), transparent 60%), - rgba(255, 255, 255, 0.30); - backdrop-filter: blur(26rpx) saturate(200%); - -webkit-backdrop-filter: blur(26rpx) saturate(200%); - border: 1rpx solid rgba(255, 255, 255, 0.55); - box-shadow: - 0 20rpx 50rpx rgba(120, 70, 140, 0.18), - inset 0 1.5rpx 0 rgba(255, 255, 255, 0.7), - inset 0 -10rpx 22rpx rgba(255, 255, 255, 0.10), - inset 10rpx 0 22rpx rgba(255, 255, 255, 0.08), - inset -10rpx 0 22rpx rgba(180, 150, 210, 0.10); + background: #ffffff; + box-shadow: 0 20rpx 50rpx rgba(27, 27, 32, 0.10); } -/* 流动光泽：缓慢左右扫过的液态高光带 */ -.dock-sheen { - position: absolute; - top: -60%; - left: -15%; - right: -15%; - height: 220%; - background: linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, 0.40) 48%, transparent 64%); - filter: blur(14rpx); - animation: liquid-sheen 8s ease-in-out infinite; - pointer-events: none; - z-index: 0; - transform: translateX(-14%) rotate(-2deg); -} - -@keyframes liquid-sheen { - 0%, 100% { transform: translateX(-14%) rotate(-2deg); opacity: 0.45; } - 50% { transform: translateX(14%) rotate(2deg); opacity: 0.85; } -} - -/* ── Tab 项 ── */ +/* ── Tab 项:展开胶囊 ── + 未选中 = 浅灰图标;选中 = 横向展开为黑色胶囊(白图标 + 白文字) */ .tab-pill { position: relative; z-index: 1; - flex: 1; + flex: 0 0 auto; display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - gap: 6rpx; - border-radius: 36rpx; - padding: 12rpx 0 8rpx; - transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), background 0.25s ease, color 0.25s ease; + justify-content: center; + gap: 0; + border-radius: 999rpx; + padding: 10rpx 16rpx; + transition: + background 0.32s cubic-bezier(.34, 1.4, .64, 1), + padding 0.32s cubic-bezier(.34, 1.4, .64, 1), + box-shadow 0.32s ease; } .tab-pill.active { - background: rgba(255, 45, 110, 0.14); - transform: translateY(-6rpx) scale(1.04); + background: #2b2b30; + padding: 10rpx 26rpx; + box-shadow: 0 12rpx 26rpx rgba(43, 43, 48, 0.28); } +.tab-pill:active { + transform: scale(0.94); +} + +/* 文字标签:默认折叠隐藏,选中时从图标右侧平滑展开 */ .tab-label { - font-size: 20rpx; - font-weight: 700; - color: #a59cb5; + max-width: 0; + overflow: hidden; + white-space: nowrap; + font-size: 24rpx; + font-weight: 600; + color: transparent; line-height: 1; - transition: color 0.2s; + opacity: 0; + margin-left: 0; + transition: + max-width 0.32s cubic-bezier(.34, 1.4, .64, 1), + opacity 0.24s ease, + margin-left 0.32s cubic-bezier(.34, 1.4, .64, 1); } .tab-pill.active .tab-label { - color: #ff2d6e; - font-weight: 900; + max-width: 140rpx; + opacity: 1; + color: #fff; + margin-left: 12rpx; } /* ── 图标容器 ── */ .icon-wrap { - width: 44rpx; - height: 44rpx; + width: 66rpx; + height: 66rpx; display: flex; align-items: center; justify-content: center; } -/* ── 广场图标：2×2 圆角方块网格 ── */ -.icon-grid { - width: 34rpx; - height: 34rpx; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - gap: 5rpx; +/* ── Tab 图标:狗主题线性描边 SVG(base64 蒙版)── + 单色 alpha 蒙版 + background-color 上色, + 选中时浅灰→白平滑过渡,任意尺寸保持清晰 */ +.tab-icon { + width: 52rpx; + height: 52rpx; + background-color: #b9bdc6; + transition: background-color 0.2s; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; } -.icon-grid .sq { - background: #a59cb5; - border-radius: 4rpx; - transition: background 0.2s; +.tab-pill.active .tab-icon { + background-color: #fff; } -.tab-pill.active .icon-grid .sq { - background: #ff2d6e; +/* 广场:狗窝(拱形门 + 门上小骨头) */ +.icon-feed { + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNi41IDIxLjVWMzZhNS41IDUuNSAwIDAgMCA1LjUgNS41aDI0YTUuNSA1LjUgMCAwIDAgNS41LTUuNVYyMS41Ii8+PHBhdGggZD0iTTQgMTkuNUwyNCA0LjVMNDQgMTkuNSIvPjxwYXRoIGQ9Ik0xNy41IDQxLjV2LTcuNWE2LjUgNi41IDAgMCAxIDEzIDB2Ny41Ii8+PHBhdGggZD0iTTE5LjUgMTUuMmg5IiBzdHJva2Utd2lkdGg9IjQuNiIvPjwvZz48L3N2Zz4="); } -/* ── 附近图标：地图 Pin ── */ -.icon-pin { - display: flex; - flex-direction: column; - align-items: center; - gap: 0; +/* 附近:定位水滴 + 爪印 */ +.icon-nearby { + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTI0IDQ0QzEzLjUgMzQgOCAyNi44IDggMjBhMTYgMTYgMCAwIDEgMzIgMEM0MCAyNi44IDM0LjUgMzQgMjQgNDRaIi8+PGcgZmlsbD0iIzAwMCI+PGNpcmNsZSBjeD0iMTcuNiIgY3k9IjE1LjQiIHI9IjIuMyIvPjxjaXJjbGUgY3g9IjI0IiBjeT0iMTMiIHI9IjIuNSIvPjxjaXJjbGUgY3g9IjMwLjQiIGN5PSIxNS40IiByPSIyLjMiLz48cGF0aCBkPSJNMjQgMTkuMmMyLjkgMCA1LjIgMS45IDUuMiA0LjNjMCAyLjQtMi4zIDQuMi01LjIgNC4yYy0yLjkgMC01LjItMS44LTUuMi00LjJjMC0yLjQgMi4zLTQuMyA1LjItNC4zWiIvPjwvZz48L3N2Zz4="); } -.pin-head { - width: 22rpx; - height: 22rpx; - border-radius: 50% 50% 50% 0; - background: #a59cb5; - transform: rotate(-45deg); - transition: background 0.2s; +/* 汪友:交叉双骨头(前后交叠,交叠处留缝) */ +.icon-friends { + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PG1hc2sgaWQ9Im0iPjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0tNC4zNCAtMi42QTQuMiA0LjIgMCAxIDAgLTExLjIgMEE0LjIgNC4yIDAgMSAwIC00LjM0IDIuNkg0LjM0QTQuMiA0LjIgMCAxIDAgMTEuMiAwQTQuMiA0LjIgMCAxIDAgNC4zNCAtMi42WiIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjYuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgMjQpIHJvdGF0ZSgtNDUpIHNjYWxlKDEuMykiLz48L21hc2s+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIG1hc2s9InVybCgjbSkiPjxwYXRoIGQ9Ik0tNC4zNCAtMi42QTQuMiA0LjIgMCAxIDAgLTExLjIgMEE0LjIgNC4yIDAgMSAwIC00LjM0IDIuNkg0LjM0QTQuMiA0LjIgMCAxIDAgMTEuMiAwQTQuMiA0LjIgMCAxIDAgNC4zNCAtMi42WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgMjQpIHJvdGF0ZSg0NSkgc2NhbGUoMS4zKSIvPjwvZz48cGF0aCBkPSJNLTQuMzQgLTIuNkE0LjIgNC4yIDAgMSAwIC0xMS4yIDBBNC4yIDQuMiAwIDEgMCAtNC4zNCAyLjZINC4zNEE0LjIgNC4yIDAgMSAwIDExLjIgMEE0LjIgNC4yIDAgMSAwIDQuMzQgLTIuNloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDI0KSByb3RhdGUoLTQ1KSBzY2FsZSgxLjMpIi8+PC9nPjwvc3ZnPg=="); } -.pin-tail { - width: 4rpx; - height: 8rpx; - background: #a59cb5; - border-radius: 0 0 4rpx 4rpx; - margin-top: -2rpx; - transition: background 0.2s; +/* 我的:项圈 + 爱心狗牌 */ +.icon-profile { + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIxNy41IiByPSIxMS40Ii8+PGNpcmNsZSBjeD0iMjQiIGN5PSIzNi41IiByPSI2LjQiLz48L2c+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTI0IDQwYy0yLjItMS42LTMuMy0yLjctMy4zLTRhMS45IDEuOSAwIDAgMSAzLjMtMS4yYTEuOSAxLjkgMCAwIDEgMy4zIDEuMmMwIDEuMy0xLjEgMi40LTMuMyA0WiIvPjwvc3ZnPg=="); } -.tab-pill.active .pin-head, -.tab-pill.active .pin-tail { - background: #ff2d6e; -} - -/* ── 汪友图标：双人轮廓 ── */ -.icon-ppl { - width: 36rpx; - height: 30rpx; - position: relative; -} - -.ppl-head { - position: absolute; - width: 14rpx; - height: 14rpx; - border-radius: 50%; - background: #a59cb5; - top: 0; - transition: background 0.2s; -} - -.ppl-head-l { left: 2rpx; } -.ppl-head-r { right: 2rpx; } - -.ppl-body { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 14rpx; - background: #a59cb5; - border-radius: 8rpx 8rpx 0 0; - transition: background 0.2s; -} - -.tab-pill.active .ppl-head, -.tab-pill.active .ppl-body { - background: #ff2d6e; -} - -/* ── 我的图标：单人轮廓 ── */ -.icon-user { - width: 28rpx; - height: 34rpx; - display: flex; - flex-direction: column; - align-items: center; - gap: 4rpx; -} - -.user-head { - width: 18rpx; - height: 18rpx; - border-radius: 50%; - background: #a59cb5; - transition: background 0.2s; -} - -.user-body { - width: 28rpx; - height: 14rpx; - border-radius: 8rpx 8rpx 0 0; - background: #a59cb5; - transition: background 0.2s; -} - -.tab-pill.active .user-head, -.tab-pill.active .user-body { - background: #ff2d6e; -} - -/* ── 发布 FAB：液态玻璃凸透镜质感 ── */ +/* ── 发布按钮:黑色圆底 + 白色爪印(CTA 用强调黑) ── */ .tab-fab-wrap { flex: 0 0 auto; display: flex; @@ -219,50 +126,32 @@ .tab-fab { position: relative; - overflow: hidden; - isolation: isolate; - width: 100rpx; - height: 100rpx; + width: 84rpx; + height: 84rpx; border-radius: 50%; - background: linear-gradient(140deg, #ff2d6e, #ff7a1a 55%, #ffd400); - border: 5rpx solid rgba(255, 255, 255, 0.85); - box-shadow: 0 16rpx 36rpx rgba(255, 45, 110, 0.40), inset 0 1rpx 0 rgba(255, 255, 255, 0.6); + background: #2b2b30; display: flex; align-items: center; justify-content: center; - transform: translateY(-18rpx); + box-shadow: 0 10rpx 24rpx rgba(43, 43, 48, 0.30); transition: transform 0.2s ease; } .tab-fab:active { - transform: translateY(-18rpx) scale(0.92); + transform: scale(0.9); } -/* 液态高光：左上角玻璃透镜光斑 */ -.fab-shine { - position: absolute; - top: 6%; - left: 14%; - width: 46%; - height: 38%; - border-radius: 50%; - background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85), transparent 72%); - filter: blur(4rpx); - pointer-events: none; - z-index: 0; +/* 白色爪印(base64 SVG),任意尺寸保持清晰 */ +.fab-paw { + width: 52rpx; + height: 52rpx; + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0iI2ZmZiI+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjE4LjUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjE5LjUiIGN5PSIxMy41IiByPSIzLjkiLz48Y2lyY2xlIGN4PSIyOC41IiBjeT0iMTMuNSIgcj0iMy45Ii8+PGNpcmNsZSBjeD0iMzYuNSIgY3k9IjE4LjUiIHI9IjMuNiIvPjxwYXRoIGQ9Ik0yNCAyMmM1IDAgOSAzLjQgOSA3LjZjMCA0LjItNCA3LjQtOSA3LjRjLTUgMC05LTMuMi05LTcuNGMwLTQuMiA0LTcuNiA5LTcuNloiLz48L2c+PC9zdmc+"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; } -.fab-plus { - position: relative; - z-index: 1; - font-size: 56rpx; - color: #fff; - font-weight: 300; - line-height: 1; - margin-top: -4rpx; -} - -/* ── 未读角标 ── */ +/* ── 未读角标:主色紫 ── */ .badge { position: absolute; top: -4rpx; @@ -270,10 +159,10 @@ min-width: 30rpx; height: 30rpx; border-radius: 15rpx; - background: #ff2d6e; + background: #8b7cf6; color: #fff; font-size: 18rpx; - font-weight: 800; + font-weight: 600; display: flex; align-items: center; justify-content: center; diff --git a/miniprogram/pages/chat/chat.wxss b/miniprogram/pages/chat/chat.wxss index 7659cca..4a76641 100644 --- a/miniprogram/pages/chat/chat.wxss +++ b/miniprogram/pages/chat/chat.wxss @@ -1,16 +1,18 @@ -.chat-page { display: flex; flex-direction: column; height: 100vh; background: #f5f0ff; } -.chat-nav { display: flex; align-items: center; padding: 16rpx 28rpx; background: rgba(255,255,255,0.90); border-bottom: 1rpx solid rgba(43,37,61,0.08); } -.nav-back { font-size: 60rpx; color: #272235; font-weight: 300; padding: 0 10rpx; line-height: 1; } -.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; } -.nav-more { font-size: 36rpx; color: #9b8fa8; padding: 0 10rpx; } +/* ── 聊天页:Vital 风格 ── + 我的气泡 = 主色紫,对方 = 白卡;发送按钮 = 强调黑 */ +.chat-page { display: flex; flex-direction: column; height: 100vh; background: #f1f2f6; } +.chat-nav { display: flex; align-items: center; padding: 16rpx 28rpx; background: #ffffff; border-bottom: 1rpx solid rgba(27, 27, 32, 0.06); } +.nav-back { font-size: 60rpx; color: #1b1b20; font-weight: 300; padding: 0 10rpx; line-height: 1; } +.nav-title { flex: 1; font-size: 32rpx; font-weight: 700; color: #1b1b20; text-align: center; } +.nav-more { font-size: 36rpx; color: #b9bdc6; padding: 0 10rpx; } .msg-scroll { flex: 1; padding: 20rpx 28rpx; } .msg-row { display: flex; margin-bottom: 20rpx; } .msg-right { justify-content: flex-end; } .msg-left { justify-content: flex-start; } .msg-bubble { max-width: 75%; padding: 18rpx 24rpx; border-radius: 28rpx; font-size: 28rpx; line-height: 1.5; } -.bubble-me { background: linear-gradient(135deg, #ff4f91, #ff9f1c); color: #fff; border-bottom-right-radius: 8rpx; } -.bubble-peer { background: rgba(255,255,255,0.90); color: #272235; border-bottom-left-radius: 8rpx; box-shadow: 0 6rpx 14rpx rgba(78,56,96,0.09); } -.input-bar { display: flex; align-items: center; gap: 14rpx; padding: 16rpx 28rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.92); border-top: 1rpx solid rgba(43,37,61,0.08); } -.msg-input { flex: 1; height: 80rpx; background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.10); border-radius: 999rpx; padding: 0 24rpx; font-size: 28rpx; color: #272235; } -.send-btn { background: linear-gradient(135deg, #ff4f91, #ff9f1c); color: #fff; border-radius: 999rpx; padding: 18rpx 30rpx; font-size: 28rpx; font-weight: 800; flex-shrink: 0; } -.send-disabled { background: #e8e4f0; color: #9b8fa8; } +.bubble-me { background: linear-gradient(135deg, #8b7cf6, #a99bf8); color: #fff; border-bottom-right-radius: 8rpx; box-shadow: 0 10rpx 24rpx rgba(139, 124, 246, 0.22); } +.bubble-peer { background: #ffffff; color: #1b1b20; border-bottom-left-radius: 8rpx; box-shadow: 0 6rpx 14rpx rgba(27, 27, 32, 0.06); } +.input-bar { display: flex; align-items: center; gap: 14rpx; padding: 16rpx 28rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); background: #ffffff; border-top: 1rpx solid rgba(27, 27, 32, 0.06); } +.msg-input { flex: 1; height: 80rpx; background: #f1f2f6; border-radius: 999rpx; padding: 0 24rpx; font-size: 28rpx; color: #1b1b20; } +.send-btn { background: #2b2b30; color: #fff; border-radius: 999rpx; padding: 18rpx 30rpx; font-size: 28rpx; font-weight: 600; flex-shrink: 0; } +.send-disabled { background: #e7e9ef; color: #b9bdc6; } diff --git a/miniprogram/pages/edit-profile/edit-profile.wxss b/miniprogram/pages/edit-profile/edit-profile.wxss index 385d791..49c7a9f 100644 --- a/miniprogram/pages/edit-profile/edit-profile.wxss +++ b/miniprogram/pages/edit-profile/edit-profile.wxss @@ -1,15 +1,16 @@ -.page { min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); } +/* ── 资料编辑:Vital 风格表单页 ── */ +.page { min-height: 100vh; background: #f1f2f6; } .nav { display: flex; align-items: center; padding: 14rpx 28rpx; gap: 16rpx; } -.nav-back { font-size: 28rpx; font-weight: 700; color: #9b8fa8; } -.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; } -.nav-save { font-size: 28rpx; font-weight: 900; color: #ff4f91; } +.nav-back { font-size: 28rpx; font-weight: 600; color: #6e7280; } +.nav-title { flex: 1; font-size: 32rpx; font-weight: 700; color: #1b1b20; text-align: center; } +.nav-save { font-size: 28rpx; font-weight: 700; color: #7563e0; } .form { padding: 24rpx 28rpx; } -.field-group { background: rgba(255,255,255,0.90); border-radius: 36rpx; border: 1rpx solid rgba(255,255,255,0.72); overflow: hidden; box-shadow: 0 12rpx 26rpx rgba(78,56,96,0.08); } -.field-item { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 28rpx; border-bottom: 1rpx solid rgba(43,37,61,0.06); } +.field-group { background: #ffffff; border-radius: 36rpx; overflow: hidden; box-shadow: var(--shadow-soft); } +.field-item { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 28rpx; border-bottom: 1rpx solid rgba(27, 27, 32, 0.05); } .field-item:last-child { border-bottom: none; } .field-item-col { flex-direction: column; align-items: flex-start; gap: 14rpx; } -.field-label { font-size: 28rpx; font-weight: 700; color: #272235; flex-shrink: 0; margin-right: 20rpx; } -.field-input { flex: 1; font-size: 28rpx; color: #272235; text-align: right; } -.field-textarea { width: 100%; min-height: 80rpx; font-size: 28rpx; color: #272235; line-height: 1.6; } -.field-picker-val { flex: 1; font-size: 28rpx; color: #272235; text-align: right; } -.field-picker-val.placeholder { color: #c4b8d0; } +.field-label { font-size: 28rpx; font-weight: 600; color: #1b1b20; flex-shrink: 0; margin-right: 20rpx; } +.field-input { flex: 1; font-size: 28rpx; color: #1b1b20; text-align: right; } +.field-textarea { width: 100%; min-height: 80rpx; font-size: 28rpx; color: #1b1b20; line-height: 1.6; } +.field-picker-val { flex: 1; font-size: 28rpx; color: #1b1b20; text-align: right; } +.field-picker-val.placeholder { color: #b9bdc6; } diff --git a/miniprogram/pages/feed/feed.ts b/miniprogram/pages/feed/feed.ts index 144aa76..f949935 100644 --- a/miniprogram/pages/feed/feed.ts +++ b/miniprogram/pages/feed/feed.ts @@ -26,8 +26,7 @@ Page({ refreshing: false, hasMore: true, page: 0, - hasUnread: false, - myAvatarGradient: 'linear-gradient(135deg, #ffd6e8, #fff1a6)', + myAvatarGradient: 'linear-gradient(135deg, #d9d2fb, #efedfd)', myEmoji: '🐶', }, @@ -49,10 +48,6 @@ Page({ tabBar?.setSelected?.(0) }, - onPullDownRefresh() { - this.onRefresh() - }, - async onRefresh() { this.setData({ refreshing: true, page: 0, hasMore: true }) await this.loadFeed(true) @@ -121,10 +116,6 @@ Page({ wx.navigateTo({ url: '/pages/search/search' }) }, - onNotify() { - wx.navigateTo({ url: '/pages/notifications/notifications' }) - }, - onMyStory() { wx.navigateTo({ url: '/pages/post/post?type=story' }) }, diff --git a/miniprogram/pages/feed/feed.wxml b/miniprogram/pages/feed/feed.wxml index 7892906..19099ca 100644 --- a/miniprogram/pages/feed/feed.wxml +++ b/miniprogram/pages/feed/feed.wxml @@ -1,68 +1,71 @@ - - - - - - - - - - - - {{item.label}} - - - 🔍 - 🔔 + + + + + + + + - - - - - - - {{myEmoji}} - - - 我的 - - - - - - {{item.emoji}} - - - {{item.name}} - - + + - + + + + + {{item.label}} + + + + + + + + + + {{myEmoji}} + + + 我的 + + + + + + {{item.emoji}} + + + {{item.name}} + + + diff --git a/miniprogram/pages/feed/feed.wxss b/miniprogram/pages/feed/feed.wxss index 48d3fd7..ce0272c 100644 --- a/miniprogram/pages/feed/feed.wxss +++ b/miniprogram/pages/feed/feed.wxss @@ -1,11 +1,16 @@ +/* ── 广场页:Vital 风格 ── + 顶部紫色渐变向下淡出融入灰底,白卡信息流叠压其上 */ .feed-page { - min-height: 100vh; - background: #ffffff; + height: 100vh; + background-color: #f1f2f6; + background-image: linear-gradient(180deg, #9181f4 0%, #a99bf8 52%, rgba(241, 242, 246, 0) 100%); + background-repeat: no-repeat; + background-size: 100% 520rpx; display: flex; flex-direction: column; } -/* 主导航栏：与胶囊按钮同高，右侧避让胶囊 */ +/* 主导航栏:与胶囊按钮同高,右侧避让胶囊 */ .navbar { display: flex; align-items: center; @@ -14,7 +19,7 @@ box-sizing: border-box; } -/* 次级菜单栏：胶囊按钮下方，全宽 */ +/* 次级菜单栏:胶囊按钮下方,全宽 */ .subbar { display: flex; align-items: center; @@ -23,21 +28,14 @@ flex-shrink: 0; } +/* logo:玻璃顶栏上的深色标题(颜色由 .glass-topbar 统一控制) */ .topbar-logo { font-size: 46rpx; - font-weight: 800; + font-weight: 700; letter-spacing: -0.5rpx; - color: #2b2438; flex-shrink: 0; } -.logo-accent { - background: linear-gradient(120deg, #ff2d6e, #ff7a1a); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - .topbar-tabs { flex: 1; display: flex; @@ -45,54 +43,21 @@ justify-content: center; } +/* 紫底上的 tab:半透明白文字,激活态为白色胶囊 + 黑字 */ .feed-tab { font-size: 26rpx; - font-weight: 700; - color: #a59cb5; + font-weight: 600; + color: rgba(255, 255, 255, 0.72); padding: 8rpx 20rpx; border-radius: 999rpx; transition: all 0.2s; } .feed-tab-active { - color: #ff2d6e; - background: rgba(255, 45, 110, 0.12); - font-weight: 900; -} - -.topbar-actions { - display: flex; - gap: 12rpx; - flex-shrink: 0; -} - -.topbar-btn { - width: 64rpx; - height: 64rpx; - border-radius: 26rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); - box-shadow: var(--shadow-soft); - display: flex; - align-items: center; - justify-content: center; - font-size: 30rpx; - color: #6e6480; - position: relative; -} - -.has-badge::after { - content: ''; - position: absolute; - top: 8rpx; - right: 8rpx; - width: 14rpx; - height: 14rpx; - border-radius: 50%; - background: #ff2d6e; - border: 2rpx solid #fff; + color: #1b1b20; + background: #ffffff; + font-weight: 700; + box-shadow: 0 8rpx 20rpx rgba(27, 27, 32, 0.10); } /* 故事圈 */ @@ -111,22 +76,24 @@ white-space: normal; } +/* 故事环:未读 = 紫色渐变环(单一主色家族),已读 = 浅灰 */ .story-ring { width: 116rpx; height: 116rpx; border-radius: 40rpx; padding: 6rpx; box-sizing: border-box; - background: conic-gradient(from 130deg, #ff2d6e, #ff7a1a, #ffd400, #00d9a0, #1f9bff, #8b5cf6, #ff2d6e); - box-shadow: 0 18rpx 36rpx rgba(120, 70, 150, 0.20); + background: linear-gradient(135deg, #7563e0, #a99bf8); + box-shadow: 0 16rpx 36rpx rgba(27, 27, 32, 0.10); } .story-ring-seen { - background: rgba(165, 156, 181, 0.35); + background: rgba(27, 27, 32, 0.10); } +/* 我的故事:强调黑(与发布 CTA 呼应) */ .story-ring-me { - background: linear-gradient(135deg, #ff2d6e, #ff7a1a); + background: #2b2b30; } .story-inner { @@ -146,8 +113,8 @@ .story-name { font-size: 21rpx; - font-weight: 700; - color: #6e6480; + font-weight: 600; + color: #6e7280; } /* 信息流 */ @@ -163,11 +130,9 @@ .skeleton-card { margin: 0 28rpx 32rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); - border-radius: 56rpx; + background: #ffffff; + border-radius: 48rpx; + box-shadow: 0 16rpx 48rpx rgba(27, 27, 32, 0.06); overflow: hidden; padding-bottom: 20rpx; } @@ -209,7 +174,7 @@ .w40 { width: 40%; } .skeleton { - background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%); + background: linear-gradient(90deg, #ebecf1 25%, #e2e4ea 50%, #ebecf1 75%); background-size: 200% 100%; animation: shine 1.4s infinite; } @@ -231,7 +196,7 @@ width: 16rpx; height: 16rpx; border-radius: 50%; - background: #ff2d6e; + background: var(--purple); animation: bounce 1.2s infinite; } @@ -247,7 +212,7 @@ .end-tip { text-align: center; font-size: 24rpx; - color: #a59cb5; + color: var(--text-tertiary); padding: 32rpx; } @@ -267,13 +232,13 @@ .empty-title { font-size: 34rpx; - font-weight: 900; - color: #2b2438; + font-weight: 700; + color: var(--text-primary); } .empty-desc { font-size: 26rpx; - color: #a59cb5; + color: var(--text-tertiary); text-align: center; line-height: 1.6; } @@ -282,5 +247,5 @@ margin-top: 24rpx; padding: 22rpx 60rpx; font-size: 28rpx; - font-weight: 800; + font-weight: 600; } diff --git a/miniprogram/pages/friends/friends.ts b/miniprogram/pages/friends/friends.ts index c1d34d1..f493734 100644 --- a/miniprogram/pages/friends/friends.ts +++ b/miniprogram/pages/friends/friends.ts @@ -16,6 +16,7 @@ Page({ followersCount: 0, loading: false, refreshing: false, + hasUnread: false, }, onLoad() { @@ -84,6 +85,10 @@ Page({ wx.switchTab({ url: '/pages/nearby/nearby' }) }, + onNotify() { + wx.navigateTo({ url: '/pages/notifications/notifications' }) + }, + onGoNearby() { wx.switchTab({ url: '/pages/nearby/nearby' }) }, diff --git a/miniprogram/pages/friends/friends.wxml b/miniprogram/pages/friends/friends.wxml index e4ffcc5..b6c5813 100644 --- a/miniprogram/pages/friends/friends.wxml +++ b/miniprogram/pages/friends/friends.wxml @@ -1,12 +1,18 @@ - - - - - - + + + + + + + + + + + + @@ -36,6 +42,7 @@ scroll-y="true" class="friends-scroll" enhanced="true" + bounces="{{false}}" show-scrollbar="false" refresher-enabled="true" bindrefresherrefresh="onRefresh" diff --git a/miniprogram/pages/friends/friends.wxss b/miniprogram/pages/friends/friends.wxss index 0ea294f..e8540d8 100644 --- a/miniprogram/pages/friends/friends.wxss +++ b/miniprogram/pages/friends/friends.wxss @@ -1,6 +1,11 @@ +/* ── 汪友页:Vital 风格 ── + 紫色渐变淡出头部 + 白卡列表叠压 */ .friends-page { - min-height: 100vh; - background: #ffffff; + height: 100vh; + background-color: #f1f2f6; + background-image: linear-gradient(180deg, #9181f4 0%, #a99bf8 52%, rgba(241, 242, 246, 0) 100%); + background-repeat: no-repeat; + background-size: 100% 420rpx; display: flex; flex-direction: column; } @@ -21,46 +26,45 @@ flex-shrink: 0; } +/* logo:玻璃顶栏上的深色标题(颜色由 .glass-topbar 统一控制) */ .topbar-logo { font-size: 46rpx; - font-weight: 800; + font-weight: 700; letter-spacing: -0.5rpx; - color: #2b2438; -} - -.logo-accent { - background: linear-gradient(120deg, #ff2d6e, #ff7a1a); - -webkit-background-clip: text; - background-clip: text; - color: transparent; } .topbar-tabs { flex: 1; display: flex; gap: 6rpx; } +/* 紫底 tab:激活态为白色胶囊 + 黑字 */ .ftab { font-size: 28rpx; - font-weight: 700; - color: #a59cb5; + font-weight: 600; + color: rgba(255, 255, 255, 0.72); padding: 10rpx 20rpx; border-radius: 999rpx; } -.ftab-active { color: #ff2d6e; background: rgba(255, 45, 110, 0.12); font-weight: 900; } +.ftab-active { + color: #1b1b20; + background: #ffffff; + font-weight: 700; + box-shadow: 0 8rpx 20rpx rgba(27, 27, 32, 0.10); +} -.ftab-count { font-size: 22rpx; font-weight: 800; } +.ftab-count { font-size: 22rpx; font-weight: 600; font-variant-numeric: tabular-nums; } +/* 添加按钮:紫底上的半透明白 */ .topbar-btn { width: 64rpx; height: 64rpx; border-radius: 26rpx; - background: linear-gradient(135deg, #ff2d6e, #ff7a1a); + background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 40rpx; font-weight: 200; display: flex; align-items: center; justify-content: center; - box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.30); } /* 空态 */ @@ -82,31 +86,24 @@ .empty-emoji { font-size: 64rpx; - color: #8b5cf6; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 40rpx; padding: 28rpx; box-shadow: var(--shadow-soft); } -.empty-title { font-size: 34rpx; font-weight: 900; color: #2b2438; } +.empty-title { font-size: 34rpx; font-weight: 700; color: #1b1b20; } -.empty-desc { font-size: 26rpx; color: #6e6480; text-align: center; line-height: 1.6; } +.empty-desc { font-size: 26rpx; color: #6e7280; text-align: center; line-height: 1.6; } .go-btn { margin-top: 12rpx; padding: 22rpx 60rpx; font-size: 26rpx; - font-weight: 800; - border: 1.5rpx solid rgba(255, 255, 255, 0.7); - background: linear-gradient(135deg, #ff2d6e, #8b5cf6); - box-shadow: 0 18rpx 36rpx rgba(139, 92, 246, 0.32); + font-weight: 600; } -/* 好友列表 */ +/* 好友列表:白卡 */ .friends-scroll { flex: 1; } .friend-item { @@ -115,12 +112,9 @@ gap: 20rpx; padding: 22rpx; margin: 0 28rpx 20rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 44rpx; - box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.6); + box-shadow: var(--shadow-soft); } .friend-avatar { @@ -131,9 +125,8 @@ align-items: center; justify-content: center; font-size: 36rpx; - font-weight: 800; - color: rgba(43, 36, 56, 0.72); - border: 3rpx solid rgba(255, 255, 255, 0.8); + font-weight: 700; + color: rgba(27, 27, 32, 0.65); flex-shrink: 0; } @@ -146,36 +139,36 @@ margin-bottom: 6rpx; } -.friend-name { font-size: 28rpx; font-weight: 800; color: #2b2438; } +.friend-name { font-size: 28rpx; font-weight: 600; color: #1b1b20; } .online-tag { font-size: 20rpx; - font-weight: 800; - color: #00a87a; - background: rgba(0, 217, 160, 0.14); + font-weight: 600; + color: #2f9c7d; + background: rgba(75, 190, 154, 0.14); border-radius: 999rpx; padding: 4rpx 12rpx; } .friend-bio { font-size: 24rpx; - color: #a59cb5; + color: #b9bdc6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } +/* 关注:强调黑胶囊;已关注:浅灰静默态 */ .follow-btn { - background: linear-gradient(135deg, #ff2d6e, #ff7a1a); + background: #2b2b30; color: #fff; - border: 1.5rpx solid rgba(255, 255, 255, 0.7); border-radius: 999rpx; padding: 14rpx 28rpx; font-size: 24rpx; - font-weight: 800; + font-weight: 600; flex-shrink: 0; - box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.28); + box-shadow: 0 12rpx 24rpx rgba(43, 43, 48, 0.22); transition: transform 0.18s ease; } @@ -184,8 +177,7 @@ } .follow-btn.following { - background: rgba(255, 255, 255, 0.55); - border: 1rpx solid rgba(43, 36, 56, 0.12); - color: #a59cb5; + background: #f1f2f6; + color: #6e7280; box-shadow: none; } diff --git a/miniprogram/pages/login/login.wxss b/miniprogram/pages/login/login.wxss index 972eeb3..b58ef45 100644 --- a/miniprogram/pages/login/login.wxss +++ b/miniprogram/pages/login/login.wxss @@ -1,6 +1,8 @@ +/* ── 登录页:品牌主场(Vital 风格) ── + 整屏紫色渐变向下淡出,白卡特性列表 + 黑色 CTA */ .login-page { min-height: 100vh; - background: linear-gradient(160deg, #fff8bd 0%, #ffd6e8 34%, #cff7ff 68%, #e9ddff 100%); + background: linear-gradient(180deg, #9181f4 0%, #a99bf8 55%, #f1f2f6 100%); display: flex; align-items: center; justify-content: center; @@ -8,32 +10,11 @@ position: relative; } -/* 背景光晕 */ +/* 旧版彩色光晕已停用 */ .login-bg { position: absolute; inset: 0; pointer-events: none; } .bg-blob { - position: absolute; - border-radius: 50%; - filter: blur(60rpx); - opacity: 0.5; -} - -.blob1 { - width: 400rpx; height: 400rpx; - background: rgba(255, 79, 145, 0.25); - top: -80rpx; left: -80rpx; -} - -.blob2 { - width: 360rpx; height: 360rpx; - background: rgba(103, 232, 201, 0.30); - bottom: -60rpx; right: -60rpx; -} - -.blob3 { - width: 300rpx; height: 300rpx; - background: rgba(255, 225, 90, 0.30); - bottom: 20%; left: 10%; + display: none; } /* 内容 */ @@ -47,7 +28,7 @@ width: 100%; } -/* Logo */ +/* Logo:紫底白字 */ .app-logo { display: flex; flex-direction: column; @@ -59,23 +40,24 @@ font-size: 120rpx; line-height: 1; margin-bottom: 20rpx; - filter: drop-shadow(0 20rpx 30rpx rgba(95, 49, 104, 0.25)); + filter: drop-shadow(0 20rpx 30rpx rgba(27, 27, 32, 0.18)); } .logo-text { font-size: 80rpx; - font-weight: 900; - color: #272235; + font-weight: 700; + letter-spacing: -2rpx; + color: #ffffff; line-height: 1; margin-bottom: 12rpx; } -.logo-accent { color: #ff4f91; } +.logo-accent { color: rgba(255, 255, 255, 0.72); } .logo-tagline { font-size: 28rpx; - color: #6a6178; - font-weight: 600; + color: rgba(255, 255, 255, 0.78); + font-weight: 500; } /* 宠物 emoji 装饰 */ @@ -83,18 +65,16 @@ font-size: 52rpx; letter-spacing: 16rpx; margin-bottom: 56rpx; - text-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08); } -/* 特性列表 */ +/* 特性列表:白卡叠压在渐变上 */ .feature-list { width: 100%; - background: rgba(255, 255, 255, 0.65); - border: 1rpx solid rgba(255, 255, 255, 0.72); + background: #ffffff; border-radius: 40rpx; padding: 32rpx 36rpx; margin-bottom: 48rpx; - box-shadow: 0 18rpx 40rpx rgba(95, 49, 104, 0.10); + box-shadow: 0 20rpx 50rpx rgba(27, 27, 32, 0.12); display: flex; flex-direction: column; gap: 24rpx; @@ -110,20 +90,20 @@ .f-text { font-size: 28rpx; - font-weight: 700; - color: #272235; + font-weight: 600; + color: #1b1b20; } -/* 登录按钮 */ +/* 登录按钮:强调黑胶囊 CTA */ .login-btn { width: 100%; height: 96rpx; - background: linear-gradient(135deg, #ff4f91, #ff9f1c 55%, #ffe15a) !important; + background: #2b2b30 !important; border-radius: 999rpx !important; font-size: 32rpx !important; - font-weight: 900 !important; + font-weight: 600 !important; color: #fff !important; - box-shadow: 0 16rpx 32rpx rgba(255, 79, 145, 0.35) !important; + box-shadow: 0 16rpx 36rpx rgba(43, 43, 48, 0.30) !important; border: none !important; margin-bottom: 28rpx !important; display: flex; @@ -137,12 +117,12 @@ /* 隐私 */ .privacy-tip { font-size: 22rpx; - color: #9b8fa8; + color: #6e7280; text-align: center; line-height: 1.6; } .link-text { - color: #4d8dff; - font-weight: 700; + color: #7563e0; + font-weight: 600; } diff --git a/miniprogram/pages/nearby/nearby.ts b/miniprogram/pages/nearby/nearby.ts index 2979dd2..b99f80b 100644 --- a/miniprogram/pages/nearby/nearby.ts +++ b/miniprogram/pages/nearby/nearby.ts @@ -57,8 +57,8 @@ Page({ longitude: loc.longitude, radius: NEARBY_RADIUS_KM * 1000, strokeWidth: 2, - strokeColor: 'rgba(255, 79, 145, 0.3)', - fillColor: 'rgba(255, 79, 145, 0.05)', + strokeColor: 'rgba(139, 124, 246, 0.3)', + fillColor: 'rgba(139, 124, 246, 0.05)', }], }) app.globalData.currentLocation = loc @@ -117,7 +117,7 @@ Page({ color: '#ffffff', fontSize: 11, borderRadius: 12, - bgColor: '#ff4f91', + bgColor: '#8b7cf6', padding: 6, display: 'ALWAYS', }, @@ -133,7 +133,7 @@ Page({ height: 36, callout: { content: item.petName, - color: '#272235', + color: '#1b1b20', fontSize: 11, borderRadius: 12, bgColor: 'rgba(255,255,255,0.92)', diff --git a/miniprogram/pages/nearby/nearby.wxml b/miniprogram/pages/nearby/nearby.wxml index de0bc0f..ee73f63 100644 --- a/miniprogram/pages/nearby/nearby.wxml +++ b/miniprogram/pages/nearby/nearby.wxml @@ -1,12 +1,15 @@ - - - - - - + + + + + + + + + diff --git a/miniprogram/pages/nearby/nearby.wxss b/miniprogram/pages/nearby/nearby.wxss index b8598b1..f3578e4 100644 --- a/miniprogram/pages/nearby/nearby.wxss +++ b/miniprogram/pages/nearby/nearby.wxss @@ -1,90 +1,78 @@ +/* ── 附近页:Vital 风格工具页 ── + 浅灰底 + 白卡,地图浮层全部实底白卡,动作按钮用强调黑 */ .nearby-page { display: flex; flex-direction: column; height: 100vh; - background: #ffffff; + background: #f1f2f6; overflow: hidden; } -/* 主导航栏：与胶囊等高，右侧避让胶囊 */ +/* 主导航栏:与胶囊等高,右侧避让胶囊 */ .navbar { display: flex; align-items: center; padding-left: 28rpx; flex-shrink: 0; box-sizing: border-box; - background: #ffffff; } -/* 次级菜单栏：胶囊下方，全宽 */ +/* 次级菜单栏:胶囊下方,全宽 */ .subbar { display: flex; align-items: center; padding: 8rpx 28rpx 16rpx; gap: 16rpx; flex-shrink: 0; - background: #ffffff; } +/* logo:玻璃顶栏上的深色标题(颜色由 .glass-topbar 统一控制) */ .topbar-logo { font-size: 46rpx; - font-weight: 800; + font-weight: 700; letter-spacing: -0.5rpx; - color: #2b2438; flex-shrink: 0; } -.logo-accent { - background: linear-gradient(120deg, #ff2d6e, #ff7a1a); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - +/* 视图切换:灰底分段控件,激活为白色胶囊 */ .view-toggle { flex: 1; display: flex; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); + background: #e7e9ef; border-radius: 999rpx; padding: 6rpx; gap: 4rpx; - border: 1rpx solid var(--glass-edge); } .toggle-btn { flex: 1; text-align: center; font-size: 24rpx; - font-weight: 700; - color: #a59cb5; + font-weight: 600; + color: #6e7280; padding: 12rpx 0; border-radius: 999rpx; transition: all 0.2s ease; } .toggle-active { - background: rgba(255, 255, 255, 0.85); - color: #2b2438; - font-weight: 900; - box-shadow: 0 8rpx 18rpx rgba(120, 70, 140, 0.14); + background: #ffffff; + color: #1b1b20; + font-weight: 700; + box-shadow: 0 8rpx 18rpx rgba(27, 27, 32, 0.08); } .topbar-btn { width: 64rpx; height: 64rpx; border-radius: 26rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; font-size: 28rpx; - color: #6e6480; + color: #6e7280; } /* 地图 */ @@ -113,18 +101,15 @@ .map-ctrl-btn { width: 76rpx; height: 76rpx; - background: var(--glass-strong); - backdrop-filter: blur(34rpx) saturate(180%); - -webkit-backdrop-filter: blur(34rpx) saturate(180%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 26rpx; - box-shadow: var(--shadow-soft); + box-shadow: 0 12rpx 32rpx rgba(27, 27, 32, 0.12); display: flex; align-items: center; justify-content: center; font-size: 30rpx; - font-weight: 800; - color: #1f9bff; + font-weight: 700; + color: #2b2b30; } /* 宠物弹窗 */ @@ -133,16 +118,13 @@ bottom: 300rpx; left: 50%; transform: translateX(-50%); - background: var(--glass-strong); - backdrop-filter: blur(34rpx) saturate(180%); - -webkit-backdrop-filter: blur(34rpx) saturate(180%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 36rpx; padding: 22rpx 26rpx; display: flex; align-items: center; gap: 18rpx; - box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.7); + box-shadow: 0 20rpx 50rpx rgba(27, 27, 32, 0.14); min-width: 520rpx; z-index: 20; } @@ -163,21 +145,21 @@ .popup-name { display: block; font-size: 28rpx; - font-weight: 800; - color: #2b2438; + font-weight: 600; + color: #1b1b20; } .popup-sub { display: block; font-size: 22rpx; - color: #a59cb5; + color: #b9bdc6; margin-top: 4rpx; } .popup-hi { padding: 16rpx 24rpx; font-size: 24rpx; - font-weight: 800; + font-weight: 600; border-radius: 999rpx; flex-shrink: 0; } @@ -187,15 +169,12 @@ position: absolute; top: 20rpx; left: 20rpx; - background: var(--glass-strong); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 999rpx; padding: 10rpx 22rpx; font-size: 22rpx; - font-weight: 800; - color: #ff2d6e; + font-weight: 600; + color: #7563e0; box-shadow: var(--shadow-soft); z-index: 10; } @@ -207,10 +186,8 @@ left: 0; right: 0; z-index: 15; - background: var(--glass-strong); - backdrop-filter: blur(34rpx) saturate(180%); - -webkit-backdrop-filter: blur(34rpx) saturate(180%); - border-top: 1rpx solid var(--glass-edge); + background: #ffffff; + border-top: 1rpx solid rgba(27, 27, 32, 0.06); padding: 20rpx 0; } @@ -223,12 +200,10 @@ display: inline-flex; align-items: center; gap: 12rpx; - background: rgba(255, 255, 255, 0.50); - border: 1rpx solid rgba(255, 255, 255, 0.72); + background: #f1f2f6; border-radius: 26rpx; padding: 14rpx 18rpx; margin-right: 16rpx; - box-shadow: 0 12rpx 26rpx rgba(120, 70, 140, 0.12); } .preview-avatar { @@ -250,20 +225,21 @@ .preview-name { font-size: 26rpx; - font-weight: 800; - color: #2b2438; + font-weight: 600; + color: #1b1b20; } .preview-dist { font-size: 20rpx; - color: #1f9bff; - font-weight: 700; + color: #7563e0; + font-weight: 600; + font-variant-numeric: tabular-nums; } /* 列表视图 */ .list-scroll { flex: 1; - background: #ffffff; + background: #f1f2f6; } .list-header { @@ -275,33 +251,30 @@ .list-title { font-size: 32rpx; - font-weight: 800; - color: #2b2438; + font-weight: 700; + color: #1b1b20; } +/* 在线数:淡紫静默胶囊 */ .online-chip { font-size: 24rpx; - font-weight: 800; - color: #fff; - background: linear-gradient(135deg, #ff2d6e, #ff7a1a); + font-weight: 600; + color: #7563e0; + background: rgba(139, 124, 246, 0.12); border-radius: 999rpx; padding: 10rpx 22rpx; - box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.30); } -/* 列表项 */ +/* 列表项:白卡 */ .nearby-item { display: flex; align-items: center; gap: 18rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 48rpx; margin: 0 28rpx 20rpx; padding: 22rpx; - box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.6); + box-shadow: var(--shadow-soft); } .nearby-avatar { @@ -313,7 +286,6 @@ justify-content: center; font-size: 40rpx; flex-shrink: 0; - border: 3rpx solid rgba(255, 255, 255, 0.8); } .avatar-emoji { font-size: 40rpx; line-height: 1; } @@ -329,15 +301,15 @@ .nearby-pet-name { font-size: 28rpx; - font-weight: 800; - color: #2b2438; + font-weight: 600; + color: #1b1b20; } .breed-chip { font-size: 20rpx; - font-weight: 800; - color: #fff; - background: #ff2d6e; + font-weight: 600; + color: #7563e0; + background: rgba(139, 124, 246, 0.12); border-radius: 999rpx; padding: 4rpx 14rpx; } @@ -347,16 +319,16 @@ align-items: center; gap: 8rpx; font-size: 22rpx; - color: #a59cb5; + color: #b9bdc6; } .online-dot { width: 14rpx; height: 14rpx; border-radius: 50%; - background: #00d9a0; + background: #4bbe9a; flex-shrink: 0; - box-shadow: 0 0 0 4rpx rgba(0, 217, 160, 0.18); + box-shadow: 0 0 0 4rpx rgba(75, 190, 154, 0.16); } .nearby-right { @@ -369,19 +341,20 @@ .dist-text { font-size: 22rpx; - font-weight: 800; - color: #1f9bff; + font-weight: 600; + color: #7563e0; + font-variant-numeric: tabular-nums; } +/* 打招呼:强调黑胶囊 */ .say-hi { - background: linear-gradient(135deg, #ff2d6e, #ff7a1a); - border: 1.5rpx solid rgba(255, 255, 255, 0.7); + background: #2b2b30; border-radius: 999rpx; padding: 14rpx 26rpx; font-size: 22rpx; - font-weight: 800; + font-weight: 600; color: #fff; - box-shadow: 0 14rpx 28rpx rgba(255, 45, 110, 0.32); + box-shadow: 0 12rpx 28rpx rgba(43, 43, 48, 0.24); transition: transform 0.18s ease; } @@ -392,7 +365,7 @@ /* 骨架 */ .nearby-skeleton { height: 128rpx; - background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%); + background: linear-gradient(90deg, #ebecf1 25%, #e2e4ea 50%, #ebecf1 75%); background-size: 200% 100%; animation: shine 1.4s infinite; border-radius: 40rpx; @@ -417,13 +390,13 @@ .empty-title { font-size: 34rpx; - font-weight: 900; - color: #2b2438; + font-weight: 700; + color: #1b1b20; } .empty-desc { font-size: 26rpx; - color: #a59cb5; + color: #b9bdc6; text-align: center; line-height: 1.6; } diff --git a/miniprogram/pages/notifications/notifications.ts b/miniprogram/pages/notifications/notifications.ts index 9ceb143..bb28252 100644 --- a/miniprogram/pages/notifications/notifications.ts +++ b/miniprogram/pages/notifications/notifications.ts @@ -1,12 +1,20 @@ import { api } from '../../utils/api' import { getAvatarGradient, formatTime } from '../../utils/format' +import { AppGlobalData } from '../../types/index' + +const app = getApp<{ globalData: AppGlobalData }>() Page({ - data: { statusBarHeight: 0, list: [] as any[] }, + data: { + statusBarHeight: 0, + navbarHeight: 44, + navbarPaddingRight: 0, + list: [] as any[], + }, onLoad() { - const info = wx.getSystemInfoSync() - this.setData({ statusBarHeight: info.statusBarHeight }) + const { statusBarHeight, navbarHeight, navbarPaddingRight } = app.globalData.navBarInfo + this.setData({ statusBarHeight, navbarHeight, navbarPaddingRight }) this.loadNotifications() }, diff --git a/miniprogram/pages/notifications/notifications.wxml b/miniprogram/pages/notifications/notifications.wxml index 53ef552..faf8004 100644 --- a/miniprogram/pages/notifications/notifications.wxml +++ b/miniprogram/pages/notifications/notifications.wxml @@ -1,10 +1,17 @@ - - - ‹ - 消息通知 - 全部已读 + + + + + ‹ + 消息通知 + 全部已读 + + + + + 🔔 diff --git a/miniprogram/pages/notifications/notifications.wxss b/miniprogram/pages/notifications/notifications.wxss index f311916..4574416 100644 --- a/miniprogram/pages/notifications/notifications.wxss +++ b/miniprogram/pages/notifications/notifications.wxss @@ -1,15 +1,29 @@ -.page { min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); } -.nav { display: flex; align-items: center; padding: 14rpx 28rpx; gap: 16rpx; } -.nav-back { font-size: 60rpx; color: #272235; font-weight: 300; line-height: 1; } -.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; } -.nav-right { font-size: 26rpx; color: #9b8fa8; } +/* ── 通知页:Vital 风格 ── */ +.page { min-height: 100vh; background: #f1f2f6; } + +/* 顶栏内导航行:返回 + 标题 + 全部已读(玻璃样式由 .glass-topbar 提供) */ +.navbar { + display: flex; + align-items: center; + gap: 8rpx; + padding-left: 20rpx; + box-sizing: border-box; +} + +.navbar-title { font-size: 36rpx; font-weight: 700; } + +.nav-back { font-size: 60rpx; color: #1b1b20; font-weight: 300; line-height: 1; padding: 0 10rpx; } + +/* 全部已读:靠右紧贴胶囊 */ +.nav-right { margin-left: auto; margin-right: 8rpx; font-size: 26rpx; color: #6e7280; padding: 10rpx 0; } +.nav-right:active { opacity: 0.6; } .empty { display: flex; flex-direction: column; align-items: center; padding: 120rpx 60rpx; gap: 20rpx; } .empty-emoji { font-size: 80rpx; } -.empty-tip { font-size: 28rpx; color: #9b8fa8; } -.notify-item { display: flex; align-items: center; gap: 20rpx; padding: 22rpx 28rpx; background: rgba(255,255,255,0.80); border-bottom: 1rpx solid rgba(43,37,61,0.05); } -.notify-item.unread { background: rgba(255,229,240,0.40); } -.n-avatar { width: 80rpx; height: 80rpx; border-radius: 26rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; } +.empty-tip { font-size: 28rpx; color: #b9bdc6; } +.notify-item { display: flex; align-items: center; gap: 20rpx; padding: 22rpx 28rpx; background: #ffffff; border-bottom: 1rpx solid rgba(27, 27, 32, 0.04); } +.notify-item.unread { background: rgba(139, 124, 246, 0.08); } +.n-avatar { width: 80rpx; height: 80rpx; border-radius: 26rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; color: rgba(27, 27, 32, 0.65); flex-shrink: 0; } .n-body { flex: 1; } -.n-text { display: block; font-size: 28rpx; color: #272235; line-height: 1.5; } -.n-time { display: block; font-size: 22rpx; color: #9b8fa8; margin-top: 6rpx; } -.unread-dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: #ff4f91; flex-shrink: 0; } +.n-text { display: block; font-size: 28rpx; color: #1b1b20; line-height: 1.5; } +.n-time { display: block; font-size: 22rpx; color: #b9bdc6; margin-top: 6rpx; } +.unread-dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: #8b7cf6; flex-shrink: 0; } diff --git a/miniprogram/pages/pet-detail/pet-detail.wxss b/miniprogram/pages/pet-detail/pet-detail.wxss index 2b23edd..d801131 100644 --- a/miniprogram/pages/pet-detail/pet-detail.wxss +++ b/miniprogram/pages/pet-detail/pet-detail.wxss @@ -1,29 +1,30 @@ -.detail-page { min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); } +/* ── 用户/宠物详情:Vital 风格 ── */ +.detail-page { min-height: 100vh; background: #f1f2f6; } .detail-nav { display: flex; align-items: center; padding: 16rpx 28rpx; gap: 16rpx; } -.nav-back { font-size: 60rpx; color: #272235; font-weight: 300; padding: 0 10rpx; line-height: 1; } -.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; } -.nav-more { font-size: 36rpx; color: #9b8fa8; padding: 0 10rpx; } +.nav-back { font-size: 60rpx; color: #1b1b20; font-weight: 300; padding: 0 10rpx; line-height: 1; } +.nav-title { flex: 1; font-size: 32rpx; font-weight: 700; color: #1b1b20; text-align: center; } +.nav-more { font-size: 36rpx; color: #b9bdc6; padding: 0 10rpx; } .detail-scroll { min-height: 80vh; } -.user-card { margin: 0 28rpx 28rpx; background: rgba(255,255,255,0.88); border-radius: 48rpx; border: 1rpx solid rgba(255,255,255,0.72); padding: 28rpx; box-shadow: 0 18rpx 40rpx rgba(95,49,104,0.12); } +.user-card { margin: 0 28rpx 28rpx; background: #ffffff; border-radius: 48rpx; padding: 28rpx; box-shadow: 0 16rpx 48rpx rgba(27, 27, 32, 0.06); } .card-top { display: flex; gap: 24rpx; margin-bottom: 24rpx; } -.card-avatar { width: 120rpx; height: 120rpx; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; font-size: 52rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; } +.card-avatar { width: 120rpx; height: 120rpx; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; font-size: 52rpx; font-weight: 700; color: rgba(27, 27, 32, 0.65); flex-shrink: 0; } .card-meta { flex: 1; } -.card-name { display: block; font-size: 34rpx; font-weight: 900; color: #272235; margin-bottom: 8rpx; } -.card-location { display: block; font-size: 24rpx; color: #9b8fa8; margin-bottom: 10rpx; } -.card-bio { display: block; font-size: 26rpx; color: #6a6178; line-height: 1.5; } +.card-name { display: block; font-size: 34rpx; font-weight: 700; color: #1b1b20; margin-bottom: 8rpx; } +.card-location { display: block; font-size: 24rpx; color: #b9bdc6; margin-bottom: 10rpx; } +.card-bio { display: block; font-size: 26rpx; color: #6e7280; line-height: 1.5; } .pets-row { display: flex; gap: 16rpx; flex-wrap: wrap; margin-bottom: 24rpx; } -.pet-chip { display: flex; align-items: center; gap: 12rpx; background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(201,247,223,0.6)); border: 1rpx solid rgba(255,255,255,0.72); border-radius: 24rpx; padding: 16rpx 20rpx; } +.pet-chip { display: flex; align-items: center; gap: 12rpx; background: #f6f7fa; border-radius: 24rpx; padding: 16rpx 20rpx; } .chip-emoji { font-size: 36rpx; } -.chip-name { display: block; font-size: 26rpx; font-weight: 800; color: #272235; } -.chip-breed { display: block; font-size: 22rpx; color: #9b8fa8; } +.chip-name { display: block; font-size: 26rpx; font-weight: 600; color: #1b1b20; } +.chip-breed { display: block; font-size: 22rpx; color: #b9bdc6; } .action-row { display: flex; gap: 16rpx; } -.follow-action { flex: 1; background: linear-gradient(135deg, #ff4f91, #ff9f1c); color: #fff; border-radius: 999rpx; padding: 20rpx; text-align: center; font-size: 28rpx; font-weight: 800; box-shadow: 0 10rpx 22rpx rgba(255,79,145,0.28); } -.follow-action.following { background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.12); color: #9b8fa8; box-shadow: none; } -.msg-action { flex: 1; background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.10); border-radius: 999rpx; padding: 20rpx; text-align: center; font-size: 28rpx; font-weight: 800; color: #272235; } +.follow-action { flex: 1; background: #2b2b30; color: #fff; border-radius: 999rpx; padding: 20rpx; text-align: center; font-size: 28rpx; font-weight: 600; box-shadow: 0 12rpx 28rpx rgba(43, 43, 48, 0.24); } +.follow-action.following { background: #f1f2f6; color: #6e7280; box-shadow: none; } +.msg-action { flex: 1; background: #f1f2f6; border-radius: 999rpx; padding: 20rpx; text-align: center; font-size: 28rpx; font-weight: 600; color: #1b1b20; } .section-hd { padding: 20rpx 28rpx 10rpx; } -.section-title { font-size: 26rpx; font-weight: 900; color: #9b8fa8; } -.empty-posts { text-align: center; font-size: 26rpx; color: #9b8fa8; padding: 60rpx; } +.section-title { font-size: 26rpx; font-weight: 600; color: #b9bdc6; } +.empty-posts { text-align: center; font-size: 26rpx; color: #b9bdc6; padding: 60rpx; } diff --git a/miniprogram/pages/pet-edit/pet-edit.ts b/miniprogram/pages/pet-edit/pet-edit.ts index ee2fafe..cb528dd 100644 --- a/miniprogram/pages/pet-edit/pet-edit.ts +++ b/miniprogram/pages/pet-edit/pet-edit.ts @@ -253,7 +253,7 @@ Page({ title: '删除宠物档案', content: '确定要删除吗？', confirmText: '删除', - confirmColor: '#ff4f91', + confirmColor: '#d4596a', success: res => { if (!res.confirm) return wx.showLoading({ title: '删除中...' }) diff --git a/miniprogram/pages/pet-edit/pet-edit.wxml b/miniprogram/pages/pet-edit/pet-edit.wxml index c7e548f..1f9f63b 100644 --- a/miniprogram/pages/pet-edit/pet-edit.wxml +++ b/miniprogram/pages/pet-edit/pet-edit.wxml @@ -14,7 +14,7 @@ - + {{form.emoji || '🐾'}} 点击更换照片 diff --git a/miniprogram/pages/pet-edit/pet-edit.wxss b/miniprogram/pages/pet-edit/pet-edit.wxss index 8c9f168..7bd196b 100644 --- a/miniprogram/pages/pet-edit/pet-edit.wxss +++ b/miniprogram/pages/pet-edit/pet-edit.wxss @@ -1,44 +1,46 @@ -.page { min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); } +/* ── 宠物编辑:Vital 风格表单页 ── */ +.page { min-height: 100vh; background: #f1f2f6; } .nav { display: flex; align-items: center; padding: 14rpx 28rpx; gap: 16rpx; } -.nav-back { font-size: 28rpx; font-weight: 700; color: #9b8fa8; } -.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; } -.nav-save { font-size: 28rpx; font-weight: 900; color: #ff4f91; } +.nav-back { font-size: 28rpx; font-weight: 600; color: #6e7280; } +.nav-title { flex: 1; font-size: 32rpx; font-weight: 700; color: #1b1b20; text-align: center; } +.nav-save { font-size: 28rpx; font-weight: 700; color: #7563e0; } .scroll { } .form { padding: 0 28rpx; } .avatar-section { display: flex; flex-direction: column; align-items: center; padding: 28rpx 0 32rpx; gap: 12rpx; } -.pet-avatar { width: 140rpx; height: 140rpx; border-radius: 44rpx; display: flex; align-items: center; justify-content: center; box-shadow: 0 12rpx 24rpx rgba(78,56,96,0.15); } +.pet-avatar { width: 140rpx; height: 140rpx; border-radius: 44rpx; display: flex; align-items: center; justify-content: center; box-shadow: 0 12rpx 28rpx rgba(27, 27, 32, 0.10); } .pet-emoji-big { font-size: 72rpx; line-height: 1; } -.avatar-tip { font-size: 24rpx; color: #9b8fa8; } +.avatar-tip { font-size: 24rpx; color: #b9bdc6; } -.field-group { background: rgba(255,255,255,0.90); border-radius: 36rpx; border: 1rpx solid rgba(255,255,255,0.72); overflow: hidden; box-shadow: 0 12rpx 26rpx rgba(78,56,96,0.08); margin-bottom: 24rpx; } -.field-item { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 28rpx; border-bottom: 1rpx solid rgba(43,37,61,0.06); } +.field-group { background: #ffffff; border-radius: 36rpx; overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 24rpx; } +.field-item { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 28rpx; border-bottom: 1rpx solid rgba(27, 27, 32, 0.05); } .field-item:last-child { border-bottom: none; } .field-item-col { flex-direction: column; align-items: flex-start; gap: 14rpx; } -.field-label { font-size: 28rpx; font-weight: 700; color: #272235; flex-shrink: 0; } -.field-input { flex: 1; font-size: 28rpx; color: #272235; text-align: right; } -.field-select { display: flex; align-items: center; gap: 8rpx; font-size: 28rpx; color: #9b8fa8; } -.select-arrow { font-size: 36rpx; color: #c4b8d0; font-weight: 300; } -.field-textarea { width: 100%; min-height: 100rpx; font-size: 28rpx; color: #272235; line-height: 1.6; } +.field-label { font-size: 28rpx; font-weight: 600; color: #1b1b20; flex-shrink: 0; } +.field-input { flex: 1; font-size: 28rpx; color: #1b1b20; text-align: right; } +.field-select { display: flex; align-items: center; gap: 8rpx; font-size: 28rpx; color: #6e7280; } +.select-arrow { font-size: 36rpx; color: #b9bdc6; font-weight: 300; } +.field-textarea { width: 100%; min-height: 100rpx; font-size: 28rpx; color: #1b1b20; line-height: 1.6; } .gender-btns { display: flex; gap: 14rpx; } -.gender-btn { background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.12); border-radius: 999rpx; padding: 12rpx 24rpx; font-size: 26rpx; color: #9b8fa8; font-weight: 700; } -.g-active { background: #ffe5f0; border-color: #ffb6d0; color: #a91d5b; } +.gender-btn { background: #f1f2f6; border-radius: 999rpx; padding: 12rpx 24rpx; font-size: 26rpx; color: #6e7280; font-weight: 600; } +.g-active { background: #2b2b30; color: #fff; } -.placeholder-text { color: #c4b8d0; } +.placeholder-text { color: #b9bdc6; } .tags-section { margin-bottom: 28rpx; } .tags-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; } -.tags-title { font-size: 26rpx; font-weight: 900; color: #9b8fa8; } -.tags-count { font-size: 22rpx; color: #c4b8d0; } +.tags-title { font-size: 26rpx; font-weight: 600; color: #b9bdc6; } +.tags-count { font-size: 22rpx; color: #b9bdc6; font-variant-numeric: tabular-nums; } .tag-grid { display: flex; gap: 14rpx; flex-wrap: wrap; margin-bottom: 20rpx; } -.tag-chip { background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.10); border-radius: 999rpx; padding: 12rpx 24rpx; font-size: 26rpx; color: #6a6178; font-weight: 700; } -.tag-on { background: #f0e8ff; border-color: #d4b8ff; color: #8c5cff; } +.tag-chip { background: #ffffff; border-radius: 999rpx; padding: 12rpx 24rpx; font-size: 26rpx; color: #6e7280; font-weight: 600; } +.tag-on { background: rgba(139, 124, 246, 0.12); color: #7563e0; } .custom-tag-row { display: flex; gap: 14rpx; align-items: center; margin-top: 4rpx; } -.custom-tag-input { flex: 1; height: 68rpx; background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.10); border-radius: 999rpx; padding: 0 24rpx; font-size: 26rpx; color: #272235; } -.custom-tag-add { background: linear-gradient(135deg, #ff4f91, #ff9f1c); color: #fff; border-radius: 999rpx; padding: 14rpx 30rpx; font-size: 26rpx; font-weight: 800; flex-shrink: 0; } -.add-disabled { background: #e8e4f0; color: #9b8fa8; } +.custom-tag-input { flex: 1; height: 68rpx; background: #ffffff; border-radius: 999rpx; padding: 0 24rpx; font-size: 26rpx; color: #1b1b20; } +.custom-tag-add { background: #2b2b30; color: #fff; border-radius: 999rpx; padding: 14rpx 30rpx; font-size: 26rpx; font-weight: 600; flex-shrink: 0; } +.add-disabled { background: #e7e9ef; color: #b9bdc6; } -.delete-btn { text-align: center; font-size: 28rpx; color: #ff4f91; background: rgba(255,79,145,0.08); border-radius: 999rpx; padding: 24rpx; margin-top: 40rpx; } +/* 删除:唯一保留的警示色,降饱和处理 */ +.delete-btn { text-align: center; font-size: 28rpx; color: #d4596a; background: rgba(212, 89, 106, 0.08); border-radius: 999rpx; padding: 24rpx; margin-top: 40rpx; } diff --git a/miniprogram/pages/post-detail/post-detail.wxss b/miniprogram/pages/post-detail/post-detail.wxss index c224df7..ef79b5d 100644 --- a/miniprogram/pages/post-detail/post-detail.wxss +++ b/miniprogram/pages/post-detail/post-detail.wxss @@ -1,46 +1,47 @@ -.page { display: flex; flex-direction: column; min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); } +/* ── 帖子详情:Vital 风格 ── */ +.page { display: flex; flex-direction: column; min-height: 100vh; background: #f1f2f6; } .nav { display: flex; align-items: center; padding: 14rpx 28rpx; gap: 16rpx; } -.nav-back { font-size: 60rpx; color: #272235; font-weight: 300; line-height: 1; padding-right: 10rpx; } -.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; } -.nav-more { font-size: 36rpx; color: #9b8fa8; } +.nav-back { font-size: 60rpx; color: #1b1b20; font-weight: 300; line-height: 1; padding-right: 10rpx; } +.nav-title { flex: 1; font-size: 32rpx; font-weight: 700; color: #1b1b20; text-align: center; } +.nav-more { font-size: 36rpx; color: #b9bdc6; } .scroll { flex: 1; } -.post-wrap { margin: 0 28rpx; background: rgba(255,255,255,0.90); border-radius: 48rpx; border: 1rpx solid rgba(255,255,255,0.72); padding: 28rpx; box-shadow: 0 18rpx 40rpx rgba(95,49,104,0.10); } +.post-wrap { margin: 0 28rpx; background: #ffffff; border-radius: 48rpx; padding: 28rpx; box-shadow: 0 16rpx 48rpx rgba(27, 27, 32, 0.06); } .post-header { display: flex; align-items: center; gap: 20rpx; margin-bottom: 20rpx; } -.avatar { width: 80rpx; height: 80rpx; border-radius: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; } +.avatar { width: 80rpx; height: 80rpx; border-radius: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; color: rgba(27, 27, 32, 0.65); flex-shrink: 0; } .meta { flex: 1; } -.uname { display: block; font-size: 28rpx; font-weight: 800; color: #272235; } -.utime { display: block; font-size: 22rpx; color: #9b8fa8; margin-top: 4rpx; } -.content { display: block; font-size: 30rpx; color: #272235; line-height: 1.65; margin-bottom: 20rpx; } +.uname { display: block; font-size: 28rpx; font-weight: 600; color: #1b1b20; } +.utime { display: block; font-size: 22rpx; color: #b9bdc6; margin-top: 4rpx; } +.content { display: block; font-size: 30rpx; color: #1b1b20; line-height: 1.65; margin-bottom: 20rpx; } .images { display: flex; flex-wrap: wrap; gap: 8rpx; margin-bottom: 20rpx; border-radius: 24rpx; overflow: hidden; } -.img-full { width: 100%; height: 360rpx; border-radius: 24rpx; background: #f0eef5; } -.img-grid { width: calc(50% - 4rpx); height: 240rpx; background: #f0eef5; } +.img-full { width: 100%; height: 360rpx; border-radius: 24rpx; background: #eef0f5; } +.img-grid { width: calc(50% - 4rpx); height: 240rpx; background: #eef0f5; } .tags-row { display: flex; gap: 10rpx; flex-wrap: wrap; margin-bottom: 20rpx; } -.hashtag { font-size: 22rpx; font-weight: 800; color: #8b3cff; background: #f0e8ff; border-radius: 999rpx; padding: 6rpx 14rpx; } -.loc-tag { font-size: 22rpx; color: #9b8fa8; background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.10); border-radius: 999rpx; padding: 6rpx 14rpx; } -.mood-tag { font-size: 22rpx; color: #6f4b00; background: #fff0a8; border-radius: 999rpx; padding: 6rpx 14rpx; } +.hashtag { font-size: 22rpx; font-weight: 600; color: #7563e0; background: rgba(139, 124, 246, 0.12); border-radius: 999rpx; padding: 6rpx 14rpx; } +.loc-tag { font-size: 22rpx; color: #6e7280; background: #f1f2f6; border-radius: 999rpx; padding: 6rpx 14rpx; } +.mood-tag { font-size: 22rpx; color: #6e7280; background: #f1f2f6; border-radius: 999rpx; padding: 6rpx 14rpx; } -.actions { display: flex; gap: 16rpx; padding-top: 20rpx; border-top: 1rpx solid rgba(43,37,61,0.07); } -.action-btn { display: flex; align-items: center; gap: 8rpx; font-size: 24rpx; font-weight: 800; color: #6a6178; background: #f7f3ff; border-radius: 999rpx; padding: 10rpx 18rpx; } -.action-btn.liked { color: #ff4f91; background: #ffe5f0; } -.act-count { font-size: 24rpx; } +.actions { display: flex; gap: 16rpx; padding-top: 20rpx; border-top: 1rpx solid rgba(27, 27, 32, 0.06); } +.action-btn { display: flex; align-items: center; gap: 8rpx; font-size: 24rpx; font-weight: 600; color: #6e7280; background: #f1f2f6; border-radius: 999rpx; padding: 10rpx 18rpx; } +.action-btn.liked { color: #fff; background: #2b2b30; } +.act-count { font-size: 24rpx; font-variant-numeric: tabular-nums; } -.divider { height: 16rpx; background: rgba(43,37,61,0.04); margin: 16rpx 0; } +.divider { height: 16rpx; background: rgba(27, 27, 32, 0.03); margin: 16rpx 0; } .comments-section { padding: 0 28rpx; } -.comments-title { display: block; font-size: 26rpx; font-weight: 900; color: #9b8fa8; margin-bottom: 20rpx; } -.no-comment { text-align: center; font-size: 26rpx; color: #9b8fa8; padding: 40rpx 0; } +.comments-title { display: block; font-size: 26rpx; font-weight: 600; color: #b9bdc6; margin-bottom: 20rpx; } +.no-comment { text-align: center; font-size: 26rpx; color: #b9bdc6; padding: 40rpx 0; } .comment-item { display: flex; gap: 16rpx; margin-bottom: 24rpx; } -.c-avatar { width: 64rpx; height: 64rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; } -.c-body { flex: 1; background: rgba(255,255,255,0.80); border-radius: 24rpx; padding: 16rpx 20rpx; } -.c-name { display: block; font-size: 24rpx; font-weight: 800; color: #272235; margin-bottom: 6rpx; } -.c-text { display: block; font-size: 26rpx; color: #272235; line-height: 1.5; margin-bottom: 8rpx; } -.c-time { display: block; font-size: 20rpx; color: #9b8fa8; } +.c-avatar { width: 64rpx; height: 64rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 700; color: rgba(27, 27, 32, 0.65); flex-shrink: 0; } +.c-body { flex: 1; background: #ffffff; border-radius: 24rpx; padding: 16rpx 20rpx; } +.c-name { display: block; font-size: 24rpx; font-weight: 600; color: #1b1b20; margin-bottom: 6rpx; } +.c-text { display: block; font-size: 26rpx; color: #1b1b20; line-height: 1.5; margin-bottom: 8rpx; } +.c-time { display: block; font-size: 20rpx; color: #b9bdc6; } -.input-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14rpx; padding: 16rpx 28rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.92); border-top: 1rpx solid rgba(43,37,61,0.08); z-index: 100; } -.comment-input { flex: 1; height: 80rpx; background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.12); border-radius: 999rpx; padding: 0 24rpx; font-size: 28rpx; color: #272235; } -.send-btn { background: linear-gradient(135deg, #ff4f91, #ff9f1c); color: #fff; border-radius: 999rpx; padding: 18rpx 30rpx; font-size: 28rpx; font-weight: 800; flex-shrink: 0; } -.send-off { background: #e8e4f0; color: #9b8fa8; } +.input-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14rpx; padding: 16rpx 28rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); background: #ffffff; border-top: 1rpx solid rgba(27, 27, 32, 0.06); z-index: 100; } +.comment-input { flex: 1; height: 80rpx; background: #f1f2f6; border-radius: 999rpx; padding: 0 24rpx; font-size: 28rpx; color: #1b1b20; } +.send-btn { background: #2b2b30; color: #fff; border-radius: 999rpx; padding: 18rpx 30rpx; font-size: 28rpx; font-weight: 600; flex-shrink: 0; } +.send-off { background: #e7e9ef; color: #b9bdc6; } diff --git a/miniprogram/pages/post/post.wxss b/miniprogram/pages/post/post.wxss index c80411d..040158d 100644 --- a/miniprogram/pages/post/post.wxss +++ b/miniprogram/pages/post/post.wxss @@ -1,53 +1,52 @@ +/* ── 发布页:Vital 风格工具页 ── + 浅灰底 + 白卡输入区,选中态统一为强调黑胶囊 */ .post-page { min-height: 100vh; - background: #ffffff; + background: #f1f2f6; display: flex; flex-direction: column; } -/* 顶部：高度和右侧 padding 由 JS 动态设置，避让系统胶囊按钮 */ +/* 顶部:高度和右侧 padding 由 JS 动态设置,避让系统胶囊按钮 */ .post-header { display: flex; align-items: center; justify-content: space-between; padding-left: 28rpx; - background: var(--glass-strong); - backdrop-filter: blur(34rpx) saturate(180%); - -webkit-backdrop-filter: blur(34rpx) saturate(180%); - border-bottom: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 0 0 40rpx 40rpx; + box-shadow: 0 8rpx 24rpx rgba(27, 27, 32, 0.04); flex-shrink: 0; box-sizing: border-box; } .cancel-btn { font-size: 28rpx; - font-weight: 700; - color: #6e6480; + font-weight: 600; + color: #6e7280; padding: 10rpx; } .header-title { font-size: 32rpx; - font-weight: 800; - color: #2b2438; + font-weight: 700; + color: #1b1b20; } +/* 发布:强调黑胶囊 */ .submit-btn { - background: linear-gradient(135deg, #ff2d6e, #ff7a1a); + background: #2b2b30; color: #fff; - border: 1.5rpx solid rgba(255, 255, 255, 0.7); border-radius: 999rpx; padding: 14rpx 34rpx; font-size: 26rpx; - font-weight: 800; - box-shadow: 0 14rpx 28rpx rgba(255, 45, 110, 0.32); + font-weight: 600; + box-shadow: 0 12rpx 28rpx rgba(43, 43, 48, 0.24); } .submit-disabled { - background: rgba(165, 156, 181, 0.30); - color: #a59cb5; - border-color: transparent; + background: #e7e9ef; + color: #b9bdc6; box-shadow: none; } @@ -64,39 +63,33 @@ .upload-placeholder { width: 100%; height: 320rpx; - background: - radial-gradient(60% 80% at 30% 20%, rgba(255, 217, 61, 0.28), transparent 60%), - radial-gradient(60% 80% at 80% 80%, rgba(0, 217, 160, 0.22), transparent 60%), - rgba(255, 255, 255, 0.34); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 3rpx dashed rgba(43, 36, 56, 0.20); - border-radius: 56rpx; + background: #ffffff; + border: 3rpx dashed rgba(27, 27, 32, 0.14); + border-radius: 48rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18rpx; - box-shadow: var(--shadow-soft); } .upload-icon { font-size: 56rpx; - color: #ff2d6e; - background: rgba(255, 255, 255, 0.6); + color: var(--purple); + background: rgba(139, 124, 246, 0.10); border-radius: 28rpx; padding: 18rpx; } .upload-hint { font-size: 28rpx; - font-weight: 800; - color: #2b2438; + font-weight: 600; + color: #1b1b20; } .upload-sub { font-size: 22rpx; - color: #a59cb5; + color: #b9bdc6; } /* 图片网格 */ @@ -116,7 +109,7 @@ .img-preview { width: 100%; height: 100%; - background: #f0eef5; + background: #eef0f5; } .img-remove { @@ -126,15 +119,13 @@ width: 44rpx; height: 44rpx; border-radius: 50%; - background: rgba(43, 36, 56, 0.65); - backdrop-filter: blur(12rpx); - -webkit-backdrop-filter: blur(12rpx); + background: rgba(27, 27, 32, 0.65); color: #fff; font-size: 28rpx; display: flex; align-items: center; justify-content: center; - font-weight: 700; + font-weight: 600; } .img-uploading { @@ -149,8 +140,8 @@ .upload-spinner { width: 40rpx; height: 40rpx; - border: 4rpx solid rgba(255, 45, 110, 0.2); - border-top-color: #ff2d6e; + border: 4rpx solid rgba(139, 124, 246, 0.2); + border-top-color: var(--purple); border-radius: 50%; animation: spin 0.8s linear infinite; } @@ -160,10 +151,8 @@ .image-add { aspect-ratio: 1; border-radius: 20rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 3rpx dashed rgba(43, 36, 56, 0.20); + background: #ffffff; + border: 3rpx dashed rgba(27, 27, 32, 0.14); display: flex; align-items: center; justify-content: center; @@ -171,42 +160,40 @@ .add-plus { font-size: 60rpx; - color: #a59cb5; + color: #b9bdc6; font-weight: 200; } -/* 文字输入 */ +/* 文字输入:白卡 */ .content-input { width: 100%; min-height: 160rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 40rpx; padding: 24rpx 28rpx; font-size: 30rpx; - color: #2b2438; + color: #1b1b20; font-family: "PingFang SC", sans-serif; line-height: 1.6; box-shadow: var(--shadow-soft); margin-bottom: 8rpx; } -.input-placeholder { color: #c4b8d0; } +.input-placeholder { color: #b9bdc6; } .word-count { text-align: right; font-size: 22rpx; - color: #a59cb5; + color: #b9bdc6; margin-bottom: 28rpx; + font-variant-numeric: tabular-nums; } /* 通用 section */ .section-title { font-size: 22rpx; - font-weight: 800; - color: #a59cb5; + font-weight: 600; + color: #b9bdc6; letter-spacing: 0.6rpx; margin-bottom: 16rpx; } @@ -223,35 +210,32 @@ display: flex; align-items: center; gap: 10rpx; - background: var(--glass); - backdrop-filter: blur(24rpx) saturate(170%); - -webkit-backdrop-filter: blur(24rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 999rpx; padding: 16rpx 26rpx; font-size: 24rpx; - font-weight: 800; - color: #6e6480; + font-weight: 600; + color: #6e7280; } +/* 选中:强调黑 */ .tag-selected { - background: #ff2d6e; - border-color: #ff2d6e; + background: #2b2b30; color: #fff; - box-shadow: 0 14rpx 30rpx rgba(255, 45, 110, 0.32); + box-shadow: 0 12rpx 28rpx rgba(43, 43, 48, 0.24); } .tag-remove { width: 44rpx; height: 44rpx; border-radius: 50%; - background: rgba(255, 45, 110, 0.14); - color: #ff2d6e; + background: rgba(139, 124, 246, 0.12); + color: #7563e0; display: flex; align-items: center; justify-content: center; font-size: 28rpx; - font-weight: 700; + font-weight: 600; } /* 话题 */ @@ -266,26 +250,21 @@ .hashtag-input { flex: 1; height: 72rpx; - background: var(--glass); - backdrop-filter: blur(24rpx) saturate(170%); - -webkit-backdrop-filter: blur(24rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 999rpx; padding: 0 24rpx; font-size: 26rpx; - color: #2b2438; + color: #1b1b20; } .hashtag-add-btn { - background: var(--glass); - backdrop-filter: blur(24rpx) saturate(170%); - -webkit-backdrop-filter: blur(24rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 999rpx; padding: 14rpx 28rpx; font-size: 26rpx; - font-weight: 800; - color: #2b2438; + font-weight: 600; + color: #1b1b20; + box-shadow: var(--shadow-soft); } .hashtag-chip { @@ -293,18 +272,17 @@ align-items: center; gap: 8rpx; font-size: 24rpx; - font-weight: 800; - color: #8a3fe0; - background: rgba(167, 139, 250, 0.16); - border: 1rpx solid rgba(167, 139, 250, 0.28); + font-weight: 600; + color: #7563e0; + background: rgba(139, 124, 246, 0.12); border-radius: 999rpx; padding: 8rpx 16rpx; } .chip-remove { font-size: 26rpx; - color: #8a3fe0; - font-weight: 700; + color: #7563e0; + font-weight: 600; } .hot-tags { @@ -317,14 +295,13 @@ .hot-tags-label { font-size: 22rpx; - color: #a59cb5; + color: #b9bdc6; } .hot-tag { font-size: 22rpx; - color: #a59cb5; - background: rgba(255, 255, 255, 0.5); - border: 1rpx solid rgba(43, 36, 56, 0.10); + color: #6e7280; + background: #ffffff; border-radius: 999rpx; padding: 6rpx 16rpx; } @@ -338,15 +315,12 @@ } .mood-pill { - background: var(--glass); - backdrop-filter: blur(24rpx) saturate(170%); - -webkit-backdrop-filter: blur(24rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 999rpx; padding: 16rpx 28rpx; font-size: 24rpx; - font-weight: 800; - color: #6e6480; + font-weight: 600; + color: #6e7280; transition: transform 0.18s ease; } @@ -354,9 +328,9 @@ transform: scale(0.95); } +/* 选中:强调黑(与标签选中态一致) */ .mood-on { - background: #ffd400; - border-color: #ffd400; - color: #5b3d00; - box-shadow: 0 14rpx 30rpx rgba(255, 212, 0, 0.36); + background: #2b2b30; + color: #fff; + box-shadow: 0 12rpx 28rpx rgba(43, 43, 48, 0.24); } diff --git a/miniprogram/pages/profile/profile.ts b/miniprogram/pages/profile/profile.ts index 8bbebf6..c3677fc 100644 --- a/miniprogram/pages/profile/profile.ts +++ b/miniprogram/pages/profile/profile.ts @@ -19,7 +19,7 @@ Page({ pets: [], } as any, formattedLikes: '0', - avatarGradient: 'linear-gradient(135deg, #ffd6e8, #fff1a6)', + avatarGradient: 'linear-gradient(135deg, #d9d2fb, #efedfd)', posts: [] as Post[], postView: 'grid' as 'grid' | 'list', loading: false, diff --git a/miniprogram/pages/profile/profile.wxml b/miniprogram/pages/profile/profile.wxml index c021af5..76c68d6 100644 --- a/miniprogram/pages/profile/profile.wxml +++ b/miniprogram/pages/profile/profile.wxml @@ -1,17 +1,21 @@ - - - - - - 我的 - ⚙️ + + + + + 我的 + ⚙️ + + + + - + {{item.emoji || '🐾'}} diff --git a/miniprogram/pages/profile/profile.wxss b/miniprogram/pages/profile/profile.wxss index 92582fc..b19b70b 100644 --- a/miniprogram/pages/profile/profile.wxss +++ b/miniprogram/pages/profile/profile.wxss @@ -1,68 +1,48 @@ +/* ── 我的页:Vital 风格 ── + 紫色渐变淡出头部,白色英雄卡叠压其上,统计用大数字锚点 */ .profile-page { - min-height: 100vh; - background: #ffffff; + height: 100vh; + background-color: #f1f2f6; + background-image: linear-gradient(180deg, #9181f4 0%, #a99bf8 52%, rgba(241, 242, 246, 0) 100%); + background-repeat: no-repeat; + background-size: 100% 460rpx; display: flex; flex-direction: column; } -/* 主导航栏：与胶囊等高，右侧避让胶囊 */ +/* 主导航栏:与胶囊等高,右侧避让胶囊 */ .navbar { display: flex; align-items: center; - justify-content: space-between; padding-left: 28rpx; flex-shrink: 0; box-sizing: border-box; } +/* 标题颜色由 .glass-topbar 统一控制 */ .navbar-title { font-size: 36rpx; - font-weight: 800; - color: #2b2438; -} - -.settings-btn { - width: 64rpx; - height: 64rpx; - border-radius: 26rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); - box-shadow: var(--shadow-soft); - display: flex; - align-items: center; - justify-content: center; - font-size: 28rpx; + font-weight: 700; } .profile-scroll { flex: 1; } -/* 用户信息区：玻璃英雄卡 + 漂浮渐变光斑 */ +/* 用户信息区:白色英雄卡叠压在紫色头部上 */ .profile-header { position: relative; margin: 8rpx 28rpx 20rpx; padding: 32rpx 28rpx 26rpx; overflow: hidden; - border-radius: 56rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); - box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.65); + border-radius: 48rpx; + background: #ffffff; + box-shadow: 0 20rpx 50rpx rgba(27, 27, 32, 0.10); } +/* 旧版渐变光斑已停用(Vital 用纯白卡面) */ .hero-blob { - position: absolute; - border-radius: 50%; - filter: blur(70rpx); - opacity: 0.5; - pointer-events: none; + display: none; } -.hb1 { width: 260rpx; height: 260rpx; background: #ffd400; top: -100rpx; right: -60rpx; } -.hb2 { width: 200rpx; height: 200rpx; background: #00d9a0; bottom: -80rpx; left: -40rpx; } - .user-top { position: relative; z-index: 1; @@ -84,14 +64,13 @@ display: flex; align-items: center; justify-content: center; - border: 4rpx solid rgba(255, 255, 255, 0.85); - box-shadow: 0 18rpx 36rpx rgba(120, 70, 150, 0.22); + box-shadow: 0 14rpx 32rpx rgba(27, 27, 32, 0.10); } .avatar-text { font-size: 56rpx; - font-weight: 800; - color: rgba(43, 36, 56, 0.72); + font-weight: 700; + color: rgba(27, 27, 32, 0.65); } .avatar-edit { @@ -101,10 +80,8 @@ width: 46rpx; height: 46rpx; border-radius: 50%; - background: rgba(255, 255, 255, 0.85); - backdrop-filter: blur(16rpx); - -webkit-backdrop-filter: blur(16rpx); - box-shadow: 0 8rpx 18rpx rgba(120, 70, 150, 0.18); + background: #ffffff; + box-shadow: 0 8rpx 18rpx rgba(27, 27, 32, 0.14); display: flex; align-items: center; justify-content: center; @@ -126,37 +103,37 @@ .user-name { font-size: 34rpx; - font-weight: 800; - color: #2b2438; + font-weight: 700; + color: #1b1b20; } .user-handle { display: block; font-size: 24rpx; - color: #a59cb5; + color: #b9bdc6; margin-bottom: 10rpx; } .user-bio { display: block; font-size: 24rpx; - color: #6e6480; + color: #6e7280; line-height: 1.6; } +/* 编辑资料:浅灰静默胶囊 */ .edit-profile-btn { - background: rgba(255, 255, 255, 0.55); - border: 1.5rpx solid #8b5cf6; + background: #f1f2f6; border-radius: 999rpx; padding: 14rpx 28rpx; font-size: 24rpx; - font-weight: 800; - color: #8b5cf6; + font-weight: 600; + color: #1b1b20; flex-shrink: 0; align-self: flex-start; } -/* 数据统计 */ +/* 数据统计:大数字锚点(整数大、标签小且灰) */ .stats-row { position: relative; z-index: 1; @@ -169,27 +146,24 @@ flex: 1; padding: 22rpx 0; text-align: center; - background: var(--glass-strong); - backdrop-filter: blur(34rpx) saturate(180%); - -webkit-backdrop-filter: blur(34rpx) saturate(180%); - border: 1rpx solid var(--glass-edge); - border-radius: 36rpx; - box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.7); + background: #f6f7fa; + border-radius: 32rpx; } .stat-num { display: block; - font-size: 38rpx; - font-weight: 800; - color: #ff2d6e; + font-size: 44rpx; + font-weight: 700; + letter-spacing: -1rpx; + color: #1b1b20; font-variant-numeric: tabular-nums; } .stat-label { display: block; font-size: 21rpx; - font-weight: 700; - color: #a59cb5; + font-weight: 600; + color: #b9bdc6; margin-top: 4rpx; } @@ -207,21 +181,21 @@ .section-title { font-size: 22rpx; - font-weight: 800; - color: #a59cb5; + font-weight: 600; + color: #b9bdc6; letter-spacing: 0.6rpx; } .add-pet-btn { font-size: 24rpx; - font-weight: 800; - color: #ff2d6e; - background: rgba(255, 45, 110, 0.12); + font-weight: 600; + color: #7563e0; + background: rgba(139, 124, 246, 0.12); border-radius: 999rpx; padding: 8rpx 20rpx; } -/* 宠物卡片 */ +/* 宠物卡片:白卡 */ .pets-scroll { white-space: nowrap; padding: 0 28rpx 16rpx; @@ -231,22 +205,19 @@ display: inline-flex; align-items: center; gap: 18rpx; - background: var(--glass); - backdrop-filter: blur(28rpx) saturate(170%); - -webkit-backdrop-filter: blur(28rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #ffffff; border-radius: 40rpx; padding: 20rpx 24rpx; margin-right: 20rpx; - box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.6); + box-shadow: var(--shadow-soft); white-space: normal; vertical-align: top; max-width: 560rpx; } .pet-card-empty { - background: rgba(255, 255, 255, 0.40); - border: 3rpx dashed rgba(43, 36, 56, 0.18); + background: transparent; + border: 3rpx dashed rgba(27, 27, 32, 0.14); box-shadow: none; } @@ -257,11 +228,10 @@ display: flex; align-items: center; justify-content: center; - border: 2.5rpx solid rgba(255, 255, 255, 0.8); flex-shrink: 0; } -.pet-avatar-add { background: rgba(255, 255, 255, 0.55); border-style: dashed; color: #a59cb5; } +.pet-avatar-add { background: #f1f2f6; border: 2.5rpx dashed rgba(27, 27, 32, 0.14); color: #b9bdc6; } .pet-emoji { font-size: 44rpx; line-height: 1; } @@ -270,36 +240,32 @@ .pet-name { display: block; font-size: 28rpx; - font-weight: 800; - color: #2b2438; + font-weight: 600; + color: #1b1b20; margin-bottom: 6rpx; } .pet-breed { display: block; font-size: 22rpx; - color: #a59cb5; + color: #b9bdc6; } +/* 宠物徽章:淡紫静默胶囊,不旋转 */ .pet-badge { - background: linear-gradient(135deg, #ff2d6e, #8b5cf6); - color: #fff; - border-radius: 24rpx; + background: rgba(139, 124, 246, 0.12); + color: #7563e0; + border-radius: 999rpx; padding: 10rpx 18rpx; font-size: 20rpx; - font-weight: 800; + font-weight: 600; flex-shrink: 0; - transform: rotate(3deg); - box-shadow: 0 12rpx 24rpx rgba(139, 92, 246, 0.3); } -/* 视图切换 */ +/* 视图切换:灰底分段控件 */ .view-toggle { display: flex; - background: var(--glass); - backdrop-filter: blur(24rpx) saturate(170%); - -webkit-backdrop-filter: blur(24rpx) saturate(170%); - border: 1rpx solid var(--glass-edge); + background: #e7e9ef; border-radius: 18rpx; overflow: hidden; } @@ -307,13 +273,13 @@ .toggle-item { padding: 10rpx 20rpx; font-size: 24rpx; - color: #a59cb5; + color: #6e7280; } .toggle-item.active { - background: rgba(255, 45, 110, 0.14); - color: #ff2d6e; - font-weight: 800; + background: #ffffff; + color: #1b1b20; + font-weight: 700; } /* 动态网格 */ @@ -328,8 +294,7 @@ aspect-ratio: 1; border-radius: 26rpx; overflow: hidden; - background: rgba(255, 255, 255, 0.45); - border: 1rpx solid rgba(255, 255, 255, 0.6); + background: #ffffff; display: flex; align-items: center; justify-content: center; @@ -340,7 +305,7 @@ .grid-no-img { padding: 12rpx; font-size: 20rpx; - color: #a59cb5; + color: #b9bdc6; text-align: center; line-height: 1.4; } @@ -356,6 +321,6 @@ .empty-emoji { font-size: 72rpx; } -.empty-tip { font-size: 26rpx; color: #a59cb5; } +.empty-tip { font-size: 26rpx; color: #b9bdc6; } -.post-btn { padding: 18rpx 48rpx; font-size: 26rpx; font-weight: 800; margin-top: 8rpx; } +.post-btn { padding: 18rpx 48rpx; font-size: 26rpx; font-weight: 600; margin-top: 8rpx; } diff --git a/miniprogram/pages/search/search.ts b/miniprogram/pages/search/search.ts index c5923fc..d4090ec 100644 --- a/miniprogram/pages/search/search.ts +++ b/miniprogram/pages/search/search.ts @@ -1,9 +1,14 @@ import { api } from '../../utils/api' import { getAvatarGradient } from '../../utils/format' +import { AppGlobalData } from '../../types/index' + +const app = getApp<{ globalData: AppGlobalData }>() Page({ data: { statusBarHeight: 0, + navbarHeight: 44, + navbarPaddingRight: 0, keyword: '', resultTab: 'posts' as 'posts' | 'users', postResults: [] as any[], @@ -13,8 +18,8 @@ Page({ }, onLoad() { - const info = wx.getSystemInfoSync() - this.setData({ statusBarHeight: info.statusBarHeight }) + const { statusBarHeight, navbarHeight, navbarPaddingRight } = app.globalData.navBarInfo + this.setData({ statusBarHeight, navbarHeight, navbarPaddingRight }) this.loadHotTopics() }, diff --git a/miniprogram/pages/search/search.wxml b/miniprogram/pages/search/search.wxml index 48d23b3..c29ca15 100644 --- a/miniprogram/pages/search/search.wxml +++ b/miniprogram/pages/search/search.wxml @@ -1,7 +1,18 @@ - + + + + + ‹ + 搜索 + + + + + + + - ‹ 🔍