refactor: 收口公共AppBar组件
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
.device-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: calc(var(--top-safe-height, 0px) + 24rpx) 24rpx 156rpx;
|
||||
padding: 0 24rpx 156rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, var(--color-bg-page-gradient-start) 0%, var(--color-bg-page-gradient-end) 100%);
|
||||
overflow: hidden;
|
||||
@@ -34,40 +34,48 @@
|
||||
.device-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-right: calc(var(--menu-safe-width, 0px) + 12rpx);
|
||||
margin-bottom: 8rpx;
|
||||
min-height: calc((var(--menu-top, 0px) - var(--top-safe-height, 0px) - 24rpx) + var(--menu-height, 32px) + 36rpx + 6rpx);
|
||||
}
|
||||
|
||||
.device-header__top-actions {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 12rpx 0 18rpx;
|
||||
}
|
||||
|
||||
.device-header__login {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(var(--menu-top, 0px) - var(--top-safe-height, 0px) - 24rpx);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 92rpx;
|
||||
height: var(--menu-height, 32px);
|
||||
min-height: 56rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(90deg, var(--color-brand-start) 0%, var(--color-brand-end) 100%);
|
||||
color: var(--color-text-white);
|
||||
font-size: 22rpx;
|
||||
line-height: var(--menu-height, 32px);
|
||||
text-align: center;
|
||||
box-shadow: 0 12rpx 24rpx var(--color-brand-shadow);
|
||||
}
|
||||
|
||||
.device-header__add {
|
||||
position: absolute;
|
||||
right: calc(var(--menu-safe-width, 0px) + 2rpx);
|
||||
top: calc((var(--menu-top, 0px) - var(--top-safe-height, 0px) - 24rpx) + var(--menu-height, 32px) + 6rpx);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 2rpx solid var(--color-border-strong);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.device-header__login-text {
|
||||
color: var(--color-text-white);
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.device-header__add-text {
|
||||
color: var(--color-text-white);
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.device-summary {
|
||||
|
||||
Reference in New Issue
Block a user