checkpoint: pre-refactor state before fixing P0/P1 issues
This commit is contained in:
@@ -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; }
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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' })
|
||||
},
|
||||
|
||||
@@ -1,68 +1,71 @@
|
||||
<view class="feed-page">
|
||||
<!-- 状态栏占位 -->
|
||||
<view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
|
||||
|
||||
<!-- 主导航栏：与胶囊按钮同高，右侧留出胶囊空间 -->
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="topbar-logo">汪<text class="logo-accent">圈</text></view>
|
||||
</view>
|
||||
|
||||
<!-- 次级菜单栏：位于胶囊按钮下方，全宽可用 -->
|
||||
<view class="subbar">
|
||||
<view class="topbar-tabs">
|
||||
<view
|
||||
wx:for="{{feedTabs}}"
|
||||
wx:key="key"
|
||||
class="feed-tab {{activeTab === item.key ? 'feed-tab-active' : ''}}"
|
||||
bindtap="onSwitchTab"
|
||||
data-key="{{item.key}}"
|
||||
>{{item.label}}</view>
|
||||
</view>
|
||||
<view class="topbar-actions">
|
||||
<view class="topbar-btn" bindtap="onSearch">🔍</view>
|
||||
<view class="topbar-btn {{hasUnread ? 'has-badge' : ''}}" bindtap="onNotify">🔔</view>
|
||||
<!-- 固定液态玻璃顶栏:标题 + 搜索图标(紧贴胶囊按钮) -->
|
||||
<view class="glass-topbar">
|
||||
<view style="height: {{statusBarHeight}}px;"></view>
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="topbar-logo">汪<text class="logo-accent">圈</text></view>
|
||||
<view class="navbar-action" bindtap="onSearch">
|
||||
<view class="icon-line icon-search-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 故事圈 -->
|
||||
<scroll-view class="stories-scroll" scroll-x="true" enhanced="true" show-scrollbar="false">
|
||||
<!-- 我的故事 -->
|
||||
<view class="story" bindtap="onMyStory">
|
||||
<view class="story-ring story-ring-me">
|
||||
<view class="story-inner" style="background: {{myAvatarGradient}}">
|
||||
<text class="story-emoji">{{myEmoji}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="story-name">我的</text>
|
||||
</view>
|
||||
<!-- 关注的宠物故事 -->
|
||||
<view
|
||||
wx:for="{{stories}}"
|
||||
wx:key="_id"
|
||||
class="story"
|
||||
bindtap="onStoryTap"
|
||||
data-id="{{item._id}}"
|
||||
>
|
||||
<view class="story-ring {{item.hasNew ? '' : 'story-ring-seen'}}">
|
||||
<view class="story-inner" style="background: {{item.gradient}}">
|
||||
<text class="story-emoji">{{item.emoji}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="story-name">{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 顶栏占位 -->
|
||||
<view style="height: {{statusBarHeight + navbarHeight}}px; flex-shrink: 0;"></view>
|
||||
|
||||
<!-- 信息流 -->
|
||||
<!-- 信息流:tabs、故事圈与帖子同在滚动区,下拉刷新只在真正顶部触发 -->
|
||||
<scroll-view
|
||||
class="feed-scroll"
|
||||
scroll-y="true"
|
||||
enhanced="true"
|
||||
bounces="{{false}}"
|
||||
show-scrollbar="false"
|
||||
bindscrolltolower="onLoadMore"
|
||||
refresher-enabled="true"
|
||||
bindrefresherrefresh="onRefresh"
|
||||
refresher-triggered="{{refreshing}}"
|
||||
>
|
||||
<!-- 次级菜单栏:信息流 tabs -->
|
||||
<view class="subbar">
|
||||
<view class="topbar-tabs">
|
||||
<view
|
||||
wx:for="{{feedTabs}}"
|
||||
wx:key="key"
|
||||
class="feed-tab {{activeTab === item.key ? 'feed-tab-active' : ''}}"
|
||||
bindtap="onSwitchTab"
|
||||
data-key="{{item.key}}"
|
||||
>{{item.label}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 故事圈 -->
|
||||
<scroll-view class="stories-scroll" scroll-x="true" enhanced="true" show-scrollbar="false">
|
||||
<!-- 我的故事 -->
|
||||
<view class="story" bindtap="onMyStory">
|
||||
<view class="story-ring story-ring-me">
|
||||
<view class="story-inner" style="background: {{myAvatarGradient}}">
|
||||
<text class="story-emoji">{{myEmoji}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="story-name">我的</text>
|
||||
</view>
|
||||
<!-- 关注的宠物故事 -->
|
||||
<view
|
||||
wx:for="{{stories}}"
|
||||
wx:key="_id"
|
||||
class="story"
|
||||
bindtap="onStoryTap"
|
||||
data-id="{{item._id}}"
|
||||
>
|
||||
<view class="story-ring {{item.hasNew ? '' : 'story-ring-seen'}}">
|
||||
<view class="story-inner" style="background: {{item.gradient}}">
|
||||
<text class="story-emoji">{{item.emoji}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="story-name">{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 骨架屏 -->
|
||||
<view wx:if="{{loading && posts.length === 0}}" class="skeleton-wrap">
|
||||
<view wx:for="{{[1,2,3]}}" wx:key="index" class="skeleton-card">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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' })
|
||||
},
|
||||
|
||||
@@ -1,12 +1,18 @@
|
||||
<view class="friends-page">
|
||||
<!-- 状态栏占位 -->
|
||||
<view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
|
||||
|
||||
<!-- 主导航栏：与胶囊等高，右侧避让胶囊 -->
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="topbar-logo">汪<text class="logo-accent">友</text></view>
|
||||
<!-- 固定液态玻璃顶栏:标题 + 通知铃铛(紧贴胶囊按钮) -->
|
||||
<view class="glass-topbar">
|
||||
<view style="height: {{statusBarHeight}}px;"></view>
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="topbar-logo">汪<text class="logo-accent">友</text></view>
|
||||
<view class="navbar-action {{hasUnread ? 'has-badge' : ''}}" bindtap="onNotify">
|
||||
<view class="icon-line icon-bell-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 顶栏占位 -->
|
||||
<view style="height: {{statusBarHeight + navbarHeight}}px; flex-shrink: 0;"></view>
|
||||
|
||||
<!-- 次级菜单栏：位于胶囊下方，全宽可用 -->
|
||||
<view class="subbar">
|
||||
<view class="topbar-tabs">
|
||||
@@ -36,6 +42,7 @@
|
||||
scroll-y="true"
|
||||
class="friends-scroll"
|
||||
enhanced="true"
|
||||
bounces="{{false}}"
|
||||
show-scrollbar="false"
|
||||
refresher-enabled="true"
|
||||
bindrefresherrefresh="onRefresh"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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)',
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<view class="nearby-page">
|
||||
<!-- 状态栏占位 -->
|
||||
<view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
|
||||
|
||||
<!-- 主导航栏：与胶囊等高，右侧避让胶囊 -->
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="topbar-logo">附<text class="logo-accent">近</text></view>
|
||||
<!-- 固定液态玻璃顶栏:标题 -->
|
||||
<view class="glass-topbar">
|
||||
<view style="height: {{statusBarHeight}}px;"></view>
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="topbar-logo">附<text class="logo-accent">近</text></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 顶栏占位 -->
|
||||
<view style="height: {{statusBarHeight + navbarHeight}}px; flex-shrink: 0;"></view>
|
||||
|
||||
<!-- 次级菜单栏：位于胶囊下方，全宽可用 -->
|
||||
<view class="subbar">
|
||||
<view class="view-toggle">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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()
|
||||
},
|
||||
|
||||
|
||||
@@ -1,10 +1,17 @@
|
||||
<view class="page">
|
||||
<view class="safe-top" style="height: {{statusBarHeight}}px"></view>
|
||||
<view class="nav">
|
||||
<view class="nav-back" bindtap="onBack">‹</view>
|
||||
<view class="nav-title">消息通知</view>
|
||||
<view class="nav-right" bindtap="onReadAll">全部已读</view>
|
||||
<!-- 固定液态玻璃顶栏:返回 + 标题 + 全部已读(右侧避让胶囊按钮) -->
|
||||
<view class="glass-topbar">
|
||||
<view style="height: {{statusBarHeight}}px;"></view>
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="nav-back" bindtap="onBack">‹</view>
|
||||
<view class="navbar-title">消息通知</view>
|
||||
<view class="nav-right" bindtap="onReadAll">全部已读</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 顶栏占位 -->
|
||||
<view style="height: {{statusBarHeight + navbarHeight}}px;"></view>
|
||||
|
||||
<scroll-view scroll-y="true" enhanced="true" show-scrollbar="false">
|
||||
<view wx:if="{{list.length === 0}}" class="empty">
|
||||
<text class="empty-emoji">🔔</text>
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -253,7 +253,7 @@ Page({
|
||||
title: '删除宠物档案',
|
||||
content: '确定要删除吗？',
|
||||
confirmText: '删除',
|
||||
confirmColor: '#ff4f91',
|
||||
confirmColor: '#d4596a',
|
||||
success: res => {
|
||||
if (!res.confirm) return
|
||||
wx.showLoading({ title: '删除中...' })
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
<!-- 宠物头像 -->
|
||||
<view class="avatar-section" bindtap="onChoosePhoto">
|
||||
<view class="pet-avatar" style="background: linear-gradient(135deg, #c9f7df, #d9d2ff);">
|
||||
<view class="pet-avatar" style="background: linear-gradient(135deg, #d9d2fb, #efedfd);">
|
||||
<text class="pet-emoji-big">{{form.emoji || '🐾'}}</text>
|
||||
</view>
|
||||
<text class="avatar-tip">点击更换照片</text>
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
<view class="profile-page">
|
||||
<!-- 状态栏占位 -->
|
||||
<view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
|
||||
|
||||
<!-- 主导航栏：与胶囊等高，右侧避让胶囊，放置设置按钮 -->
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="navbar-title">我的</view>
|
||||
<view class="settings-btn" bindtap="onSettings">⚙️</view>
|
||||
<!-- 固定液态玻璃顶栏:标题 + 设置按钮(紧贴胶囊按钮) -->
|
||||
<view class="glass-topbar">
|
||||
<view style="height: {{statusBarHeight}}px;"></view>
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="navbar-title">我的</view>
|
||||
<view class="navbar-action" bindtap="onSettings">⚙️</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 顶栏占位 -->
|
||||
<view style="height: {{statusBarHeight + navbarHeight}}px; flex-shrink: 0;"></view>
|
||||
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="profile-scroll"
|
||||
enhanced="true"
|
||||
bounces="{{false}}"
|
||||
show-scrollbar="false"
|
||||
refresher-enabled="true"
|
||||
bindrefresherrefresh="onRefresh"
|
||||
@@ -75,7 +79,7 @@
|
||||
bindtap="onPetTap"
|
||||
data-pid="{{item._id}}"
|
||||
>
|
||||
<view class="pet-avatar" style="background: {{item.gradient || 'linear-gradient(135deg, #c9f7df, #d9d2ff)'}}">
|
||||
<view class="pet-avatar" style="background: {{item.gradient || 'linear-gradient(135deg, #d9d2fb, #efedfd)'}}">
|
||||
<text class="pet-emoji">{{item.emoji || '🐾'}}</text>
|
||||
</view>
|
||||
<view class="pet-info">
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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()
|
||||
},
|
||||
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
<view class="page">
|
||||
<view class="safe-top" style="height: {{statusBarHeight}}px"></view>
|
||||
<!-- 固定液态玻璃顶栏:返回 + 标题,右侧避让小程序胶囊按钮 -->
|
||||
<view class="glass-topbar">
|
||||
<view style="height: {{statusBarHeight}}px;"></view>
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
||||
<view class="back" bindtap="onBack">‹</view>
|
||||
<view class="navbar-title">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 顶栏占位 -->
|
||||
<view style="height: {{statusBarHeight + navbarHeight}}px;"></view>
|
||||
|
||||
<!-- 搜索框:位于标题栏下方,全宽可用,不受胶囊遮挡 -->
|
||||
<view class="search-bar">
|
||||
<view class="back" bindtap="onBack">‹</view>
|
||||
<view class="input-wrap">
|
||||
<text class="search-icon">🔍</text>
|
||||
<input
|
||||
|
||||
@@ -1,30 +1,45 @@
|
||||
.page { min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); }
|
||||
/* ── 搜索页: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; }
|
||||
|
||||
.back { font-size: 60rpx; color: #1b1b20; font-weight: 300; line-height: 1; padding: 0 10rpx; }
|
||||
|
||||
/* 搜索框行:标题栏下方,全宽 */
|
||||
.search-bar { display: flex; align-items: center; gap: 14rpx; padding: 14rpx 28rpx; }
|
||||
.back { font-size: 60rpx; color: #272235; font-weight: 300; line-height: 1; }
|
||||
.input-wrap { flex: 1; display: flex; align-items: center; background: rgba(255,255,255,0.88); border: 1rpx solid rgba(255,255,255,0.72); border-radius: 999rpx; padding: 0 20rpx; height: 76rpx; gap: 10rpx; box-shadow: 0 8rpx 18rpx rgba(78,56,96,0.08); }
|
||||
.input-wrap { flex: 1; display: flex; align-items: center; background: #ffffff; border-radius: 999rpx; padding: 0 20rpx; height: 76rpx; gap: 10rpx; box-shadow: var(--shadow-soft); }
|
||||
.search-icon { font-size: 30rpx; }
|
||||
.search-input { flex: 1; font-size: 28rpx; color: #272235; }
|
||||
.clear { font-size: 36rpx; color: #9b8fa8; }
|
||||
.search-btn { font-size: 28rpx; font-weight: 800; color: #ff4f91; padding: 0 6rpx; }
|
||||
.search-input { flex: 1; font-size: 28rpx; color: #1b1b20; }
|
||||
.clear { font-size: 36rpx; color: #b9bdc6; }
|
||||
.search-btn { font-size: 28rpx; font-weight: 600; color: #7563e0; padding: 0 6rpx; }
|
||||
|
||||
.hot-section { padding: 20rpx 28rpx; }
|
||||
.section-title { display: block; font-size: 26rpx; font-weight: 900; color: #9b8fa8; margin-bottom: 20rpx; }
|
||||
.hot-tags { display: flex; flex-direction: column; gap: 0; background: rgba(255,255,255,0.88); border-radius: 36rpx; overflow: hidden; border: 1rpx solid rgba(255,255,255,0.72); box-shadow: 0 12rpx 26rpx rgba(78,56,96,0.08); }
|
||||
.hot-tag { display: flex; align-items: center; gap: 20rpx; padding: 22rpx 28rpx; border-bottom: 1rpx solid rgba(43,37,61,0.05); }
|
||||
.section-title { display: block; font-size: 26rpx; font-weight: 600; color: #b9bdc6; margin-bottom: 20rpx; }
|
||||
.hot-tags { display: flex; flex-direction: column; gap: 0; background: #ffffff; border-radius: 36rpx; overflow: hidden; box-shadow: var(--shadow-soft); }
|
||||
.hot-tag { display: flex; align-items: center; gap: 20rpx; padding: 22rpx 28rpx; border-bottom: 1rpx solid rgba(27, 27, 32, 0.04); }
|
||||
.hot-tag:last-child { border-bottom: none; }
|
||||
.tag-rank { font-size: 30rpx; font-weight: 900; color: #ff4f91; width: 32rpx; text-align: center; }
|
||||
.hot-tag:nth-child(n+4) .tag-rank { color: #9b8fa8; }
|
||||
.tag-text { flex: 1; font-size: 28rpx; font-weight: 700; color: #272235; }
|
||||
.tag-count { font-size: 24rpx; color: #9b8fa8; }
|
||||
.tag-rank { font-size: 30rpx; font-weight: 700; color: #7563e0; width: 32rpx; text-align: center; font-variant-numeric: tabular-nums; }
|
||||
.hot-tag:nth-child(n+4) .tag-rank { color: #b9bdc6; }
|
||||
.tag-text { flex: 1; font-size: 28rpx; font-weight: 600; color: #1b1b20; }
|
||||
.tag-count { font-size: 24rpx; color: #b9bdc6; font-variant-numeric: tabular-nums; }
|
||||
|
||||
.results-tabs { display: flex; padding: 0 28rpx 20rpx; gap: 8rpx; }
|
||||
.rtab { font-size: 28rpx; font-weight: 700; color: #9b8fa8; padding: 10rpx 20rpx; border-radius: 999rpx; }
|
||||
.rtab-on { color: #ff4f91; background: rgba(255,79,145,0.10); font-weight: 900; }
|
||||
.rtab { font-size: 28rpx; font-weight: 600; color: #6e7280; padding: 10rpx 20rpx; border-radius: 999rpx; }
|
||||
.rtab-on { color: #1b1b20; background: #ffffff; font-weight: 700; box-shadow: 0 8rpx 18rpx rgba(27, 27, 32, 0.08); }
|
||||
|
||||
.user-result { display: flex; align-items: center; gap: 20rpx; padding: 20rpx 28rpx; background: rgba(255,255,255,0.80); border-bottom: 1rpx solid rgba(43,37,61,0.05); }
|
||||
.u-avatar { width: 88rpx; height: 88rpx; border-radius: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; }
|
||||
.u-name { display: block; font-size: 28rpx; font-weight: 800; color: #272235; }
|
||||
.u-bio { display: block; font-size: 24rpx; color: #9b8fa8; margin-top: 4rpx; }
|
||||
.user-result { display: flex; align-items: center; gap: 20rpx; padding: 20rpx 28rpx; background: #ffffff; border-bottom: 1rpx solid rgba(27, 27, 32, 0.04); }
|
||||
.u-avatar { width: 88rpx; height: 88rpx; border-radius: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 700; color: rgba(27, 27, 32, 0.65); flex-shrink: 0; }
|
||||
.u-name { display: block; font-size: 28rpx; font-weight: 600; color: #1b1b20; }
|
||||
.u-bio { display: block; font-size: 24rpx; color: #b9bdc6; margin-top: 4rpx; }
|
||||
|
||||
.empty { text-align: center; font-size: 26rpx; color: #9b8fa8; padding: 80rpx; }
|
||||
.empty { text-align: center; font-size: 26rpx; color: #b9bdc6; padding: 80rpx; }
|
||||
.results-scroll { }
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.story-page { width: 100vw; height: 100vh; background: #111; position: relative; overflow: hidden; }
|
||||
.story-page { width: 100vw; height: 100vh; background: #121214; position: relative; overflow: hidden; }
|
||||
.progress-row { position: absolute; top: calc(env(safe-area-inset-top, 44rpx) + 16rpx); left: 16rpx; right: 16rpx; display: flex; gap: 6rpx; z-index: 10; }
|
||||
.progress-bar { flex: 1; height: 4rpx; background: rgba(255,255,255,0.35); border-radius: 2rpx; overflow: hidden; }
|
||||
.progress-fill { height: 100%; background: #fff; border-radius: 2rpx; transition: width 0.1s linear; }
|
||||
.story-nav { position: absolute; top: calc(env(safe-area-inset-top, 44rpx) + 28rpx); left: 20rpx; right: 20rpx; display: flex; align-items: center; gap: 14rpx; z-index: 10; }
|
||||
.story-avatar { width: 72rpx; height: 72rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 800; color: rgba(39,34,53,0.72); border: 3rpx solid rgba(255,255,255,0.72); }
|
||||
.story-author { display: block; font-size: 28rpx; font-weight: 800; color: #fff; }
|
||||
.story-avatar { width: 72rpx; height: 72rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 700; color: rgba(27, 27, 32, 0.65); border: 3rpx solid rgba(255,255,255,0.72); }
|
||||
.story-author { display: block; font-size: 28rpx; font-weight: 700; color: #fff; }
|
||||
.story-time { display: block; font-size: 22rpx; color: rgba(255,255,255,0.72); }
|
||||
.close-btn { margin-left: auto; font-size: 40rpx; color: rgba(255,255,255,0.80); padding: 10rpx; }
|
||||
.story-content { width: 100%; height: 100%; }
|
||||
|
||||
Reference in New Issue
Block a user