fix(miniprogram): put workbench user actions on full-width row below title
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
ddff1212ae
commit
83db2fd996
2 files changed
+34
-22
No files matched your search
@@ -70,25 +70,27 @@ const handleLogout = async () => {
|
||||
<template>
|
||||
<view class="mp-page mp-page--tab">
|
||||
<view class="sq-nav-header sq-nav-header--tall" :style="safeAreaStyle">
|
||||
<!-- 第一行:标题左对齐,右侧避开胶囊 -->
|
||||
<view class="sq-nav-header__nav">
|
||||
<view class="sq-nav-header__main">
|
||||
<view class="sq-nav-header__left sq-nav-header__left--stack">
|
||||
<text class="sq-nav-header__title">工作台</text>
|
||||
<text class="sq-nav-header__meta">选择业务模块,进入对应功能办理</text>
|
||||
</view>
|
||||
<view class="sq-nav-header__user">
|
||||
<text class="sq-nav-header__user-name">{{ displayName }}</text>
|
||||
<text
|
||||
class="sq-nav-header__logout"
|
||||
:class="{ 'sq-nav-header__logout--disabled': loggingOut }"
|
||||
@click="handleLogout"
|
||||
>
|
||||
{{ loggingOut ? '退出中…' : '退出登录' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="sq-nav-header__left sq-nav-header__left--stack">
|
||||
<text class="sq-nav-header__title">工作台</text>
|
||||
<text class="sq-nav-header__meta">选择业务模块,进入对应功能办理</text>
|
||||
</view>
|
||||
<view /><!-- 胶囊占位 -->
|
||||
</view>
|
||||
<!-- 第二行:用户区独立全宽右对齐,不受胶囊列挤压 -->
|
||||
<view class="sq-nav-header__user-row">
|
||||
<view class="sq-nav-header__user">
|
||||
<text class="sq-nav-header__user-name">{{ displayName }}</text>
|
||||
<text
|
||||
class="sq-nav-header__logout"
|
||||
:class="{ 'sq-nav-header__logout--disabled': loggingOut }"
|
||||
@click="handleLogout"
|
||||
>
|
||||
{{ loggingOut ? '退出中…' : '退出登录' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mp-section">
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 工作台等:加高,容纳标题+副文案+右侧用户 */
|
||||
/* 工作台等:加高,标题行 + 独立用户行 */
|
||||
.sq-nav-header--tall {
|
||||
height: auto;
|
||||
min-height: calc(var(--sq-header-height, 88px) + 72px);
|
||||
padding-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.sq-nav-header__nav {
|
||||
@@ -84,14 +84,24 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 用户行:与标题分行;全宽右对齐,不预留胶囊列 */
|
||||
.sq-nav-header__user-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px 0;
|
||||
}
|
||||
|
||||
.sq-nav-header__user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
max-width: 42%;
|
||||
max-width: 100%;
|
||||
text-align: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user