haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: align community tabs with points entry

Browse Source
This commit is contained in:
hajimi
2026-08-02 00:55:13 +08:00
parent 0b46d497ae
commit 41aeaa5163
1 changed files with 35 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/pages/community/community.vue
+35 -23
View File
@@ -10,7 +10,14 @@
<AiAssistantEntry size="compact" variant="orb" /> <AiAssistantEntry size="compact" variant="orb" />
</view> </view>
<view class="community-header__tools"> <view class="community-toolbar">
<view class="community-nav">
<view v-for="item in feedTabs" :key="item.key" class="community-nav__item"
:class="{ 'community-nav__item--active': activeFeed === item.key }" @tap="switchFeed(item.key)">
<text>{{ item.label }}</text>
</view>
</view>
<view class="community-wallet" @tap="openPoints"> <view class="community-wallet" @tap="openPoints">
<view class="community-wallet__coin"> <view class="community-wallet__coin">
<u-icon name="coupon" size="28" color="#1468f5" /> <u-icon name="coupon" size="28" color="#1468f5" />
@@ -21,13 +28,6 @@
</view> </view>
</view> </view>
<view class="community-nav">
<view v-for="item in feedTabs" :key="item.key" class="community-nav__item"
:class="{ 'community-nav__item--active': activeFeed === item.key }" @tap="switchFeed(item.key)">
<text>{{ item.label }}</text>
</view>
</view>
<view class="community-topics"> <view class="community-topics">
<scroll-view scroll-x class="community-topics__scroll" show-scrollbar="false"> <scroll-view scroll-x class="community-topics__scroll" show-scrollbar="false">
<view class="community-topics__list"> <view class="community-topics__list">
@@ -403,24 +403,29 @@ onShow(() => {
} }
} }
&__tools { }
display: flex;
justify-content: flex-end; .community-toolbar {
padding: 16rpx 0 14rpx; height: 88rpx;
} display: flex;
align-items: flex-end;
gap: 18rpx;
} }
.community-wallet { .community-wallet {
height: 56rpx; max-width: 210rpx;
height: 52rpx;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8rpx; gap: 8rpx;
padding: 0 18rpx 0 10rpx; margin-bottom: 14rpx;
padding: 0 14rpx 0 9rpx;
border: 1rpx solid #bdd5ff; border: 1rpx solid #bdd5ff;
border-radius: 999rpx; border-radius: 999rpx;
color: #1468f5; color: #1468f5;
background: #fafdff; background: #fafdff;
box-sizing: border-box; box-sizing: border-box;
flex-shrink: 0;
&__coin { &__coin {
width: 38rpx; width: 38rpx;
@@ -433,31 +438,38 @@ onShow(() => {
} }
text { text {
font-size: 25rpx; min-width: 0;
overflow: hidden;
font-size: 23rpx;
font-weight: 600; font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.community-nav { .community-nav {
height: 90rpx; flex: 1;
min-width: 0;
height: 88rpx;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: 62rpx; gap: 0;
padding: 0 42rpx; padding: 0;
flex-shrink: 0; background: transparent;
background: #fff;
box-sizing: border-box; box-sizing: border-box;
&__item { &__item {
position: relative; position: relative;
height: 90rpx; flex: 1;
min-width: 0;
height: 88rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #667085; color: #667085;
text { text {
font-size: 31rpx; font-size: 29rpx;
font-weight: 500; font-weight: 500;
} }