chenxing
97090eb08b
build / build (push) Successful in 1m16s
用户反馈整合后的身份选择观感不符预期，要求保留原「切换身份」样式， 仅在列表下方追加个人信息 / 后台管理 / 退出登录。 回滚内容（对齐原 .roleinfo-wrap .roles-ul li）： - 灰底 #f9f9f9 + 圆角 6px + 左右 8px 外边距 + 列表内 6px 上下留白 - 行高62px（原为 padding 9px 16px 的紧凑行） - hover 用 color.adjust(#f9f9f9, lightness -5%)，恢复 @use "sass:color" - 勾选圆点回到 20px + margin 0 16px - .who 恢复 border-bottom 1px #e9e9e9，末行不画（同原:last-child .user-wrap） 保留不变：卡片骨架、标题行、滚动条（max-height 310px + 6px 自绘）、 底部菜单与权限判定。实测 scrollHeight 570 > clientHeight 310 仍正确出滚动条。 验证：vite build 通过；mock 取证 9 条身份溢出滚动正常、1 条不滚动、 菜单行数管理员 2 / 普通用户 1。
466 lines
11 KiB
SCSS
466 lines
11 KiB
SCSS
@use "sass:color";
|
||
.default-header {
|
||
width: 100%;
|
||
height: var(--headerH);
|
||
display: flex;
|
||
padding: 0 32px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
z-index: 10;
|
||
background-image: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.65) 0%,
|
||
rgba(255, 255, 255, 0.6) 0.02%,
|
||
rgba(255, 255, 255, 0) 101.19%
|
||
);
|
||
&.base-mask {
|
||
background-image: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.65) 0%,
|
||
rgba(255, 255, 255, 0.6) 0.02%,
|
||
rgba(255, 255, 255, 0) 101.19%
|
||
);
|
||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
& .logo-box {
|
||
height: 36px;
|
||
}
|
||
|
||
& .operate-container {
|
||
flex-shrink: 1;
|
||
& > li {
|
||
float: left;
|
||
.icon-box {
|
||
width: 36px;
|
||
height: 36px;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 36px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin: 0 4px;
|
||
transition: all 0.2s;
|
||
cursor: pointer;
|
||
}
|
||
.icon-box:hover {
|
||
background: #d0e0eb;
|
||
}
|
||
&.active .icon-box {
|
||
background-color: #d0e0eb;
|
||
}
|
||
}
|
||
svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.search-box {
|
||
height: 36px;
|
||
margin-right: 2px;
|
||
background: #fff;
|
||
border-radius: 34px;
|
||
display: flex;
|
||
overflow: hidden;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
user-select: none;
|
||
input {
|
||
flex: 1;
|
||
outline: none;
|
||
border: none;
|
||
margin-left: 15px;
|
||
width: 210px;
|
||
}
|
||
.icon {
|
||
margin: 0 8px;
|
||
// animation: icon-turn 0.3s linear;
|
||
}
|
||
}
|
||
|
||
@keyframes fade-animation {
|
||
0% {
|
||
display: none;
|
||
}
|
||
|
||
75% {
|
||
display: none;
|
||
}
|
||
100% {
|
||
display: flex;
|
||
}
|
||
}
|
||
.fade1-enter-active,
|
||
.fade1-enter-to {
|
||
animation: fade-animation 0.5s;
|
||
}
|
||
|
||
.fade1-leave-from,
|
||
.fade1-leave-active {
|
||
display: none !important;
|
||
}
|
||
|
||
@keyframes search-animation {
|
||
0% {
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
20% {
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
21% {
|
||
width: 0;
|
||
display: block;
|
||
}
|
||
100% {
|
||
width: 210px;
|
||
}
|
||
}
|
||
|
||
@keyframes icon-animation {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.search-enter-active {
|
||
& input {
|
||
animation: search-animation 0.3s ease-in-out;
|
||
}
|
||
& .icon {
|
||
animation: icon-animation 0.4s;
|
||
}
|
||
}
|
||
|
||
.search-leave-active {
|
||
& input {
|
||
animation: search-animation 0.35s ease-out reverse;
|
||
}
|
||
& .icon {
|
||
animation: icon-animation 0.4s reverse;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.role-info {
|
||
height: 22px;
|
||
color: #6b8cf4 !important;
|
||
border-radius: 20px;
|
||
padding: 0 12px;
|
||
font-size: 13px;
|
||
line-height: 21px;
|
||
display: inline-block;
|
||
border: 1px solid #6b8cf4;
|
||
border-radius: 18px;
|
||
}
|
||
|
||
.userinfo-ul {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
li {
|
||
height: 42px;
|
||
display: flex;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
user-select: none;
|
||
padding: 0 20px;
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
.backend-manage-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
span {
|
||
color: #323233;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
li:hover {
|
||
background-color: #f9f9f9;
|
||
}
|
||
li.border {
|
||
border-bottom: 1px solid #e9e9e9;
|
||
}
|
||
li.header {
|
||
height: 50px;
|
||
padding-right: 10px;
|
||
justify-content: space-between;
|
||
&:hover {
|
||
background-color: #fff;
|
||
}
|
||
.name {
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
letter-spacing: 0.8px;
|
||
|
||
flex: 0 1 90px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
//规定段落中的文本不进行换行
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ===== 用户卡片（人像图标唯一入口，2026-10-08）=====
|
||
规格来源：design/05-Header用户卡片整合-切换身份+个人信息+后台管理+退出登录.html
|
||
全部复用既有变量，仅新增卡片骨架与滚动条 */
|
||
.user-card {
|
||
width: 260px;
|
||
background: #fff;
|
||
|
||
.user-card-hd {
|
||
height: 50px;
|
||
padding: 0 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #e8eaec;
|
||
|
||
svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
.ttl {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #272829;
|
||
}
|
||
.close {
|
||
margin-left: auto;
|
||
width: 22px;
|
||
height: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px;
|
||
color: #9aa0a8;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
background: #f2f3f5;
|
||
color: #5a5f68;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 身份列表：沿用原.roleinfo-wrap 的灰卡片形态（2026-10-08 回滚，用户要求保持原角色选择样式） */
|
||
.user-card-roles {
|
||
max-height: 310px;
|
||
overflow-y: scroll;
|
||
overscroll-behavior: contain;
|
||
padding: 6px 0;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
&::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
&::-webkit-scrollbar-thumb {
|
||
background: #d4d7dd;
|
||
border-radius: 3px;
|
||
}
|
||
&::-webkit-scrollbar-thumb:hover {
|
||
background: #b9bec7;
|
||
}
|
||
}
|
||
|
||
.u-role {
|
||
background-color: #f9f9f9;
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 62px;
|
||
margin: 0 8px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
background-color: color.adjust($color: #f9f9f9, $lightness: -5%);
|
||
}
|
||
&.active {
|
||
cursor: default;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
> svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: 0 16px;
|
||
flex: 0 0 20px;
|
||
}
|
||
|
||
.who {
|
||
flex: auto;
|
||
min-width: 0;
|
||
padding: 9px 16px 9px 0;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
|
||
.nm {
|
||
font-size: 15px;
|
||
color: #323233;
|
||
line-height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.t {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
.sch {
|
||
margin-top: 2px;
|
||
font-size: 12px;
|
||
color: #656667;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
/* 末行不画分隔线（原 .roles-ul li:last-child .user-wrap 同款） */
|
||
&:last-child .who {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.user-card-menu {
|
||
border-top: 1px solid #e9e9e9;
|
||
|
||
.arw {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
|
||
.user-card-logout {
|
||
padding: 10px 20px 16px;
|
||
|
||
.logout-btn {
|
||
width: 100%;
|
||
height: 38px;
|
||
border-radius: 19px;
|
||
background: #fff;
|
||
border: 1px solid #e2e5ea;
|
||
color: #323233;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
transition: all 0.18s;
|
||
|
||
&:hover {
|
||
border-color: #577afb;
|
||
background: #f7f9ff;
|
||
color: #577afb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.wallpaper-wrap {
|
||
min-height: 500px;
|
||
max-height: 500px;
|
||
padding: 16px;
|
||
}
|
||
.wallpaper-ul {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: flex-start;
|
||
|
||
li {
|
||
width: 140px;
|
||
height: 104px;
|
||
flex-shrink: 0;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
margin-bottom: 16px;
|
||
overflow: hidden;
|
||
user-select: none;
|
||
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.25);
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: cover no-repeat;
|
||
}
|
||
.context-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.check-box {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
}
|
||
label {
|
||
font-size: 12px;
|
||
// width: 30px;
|
||
padding: 0 10px;
|
||
text-align: center;
|
||
border-bottom-right-radius: 4px;
|
||
background-color: #14ae5c;
|
||
color: #fff;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
li .add-wrap {
|
||
width: 140px;
|
||
height: 104px;
|
||
cursor: pointer;
|
||
}
|
||
li .add-box {
|
||
width: 140px;
|
||
height: 50px;
|
||
padding: 27px 0;
|
||
box-sizing: content-box;
|
||
p {
|
||
color: #939393;
|
||
}
|
||
}
|
||
li .mask-box {
|
||
width: 100%;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
color: #fff;
|
||
border-radius: 0px 0px 4px 4px;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
position: absolute;
|
||
text-align: center;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
.menuwapper-modal {
|
||
}
|