feat: update home empty state design
This commit is contained in:
czz
@@ -1,48 +1,322 @@
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 46rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16rpx;
|
||||
color: #0f172a;
|
||||
.home-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: 24rpx 24rpx 148rpx;
|
||||
box-sizing: border-box;
|
||||
background: #1b2130;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.8;
|
||||
color: #475569;
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: -54rpx;
|
||||
right: -36rpx;
|
||||
width: 340rpx;
|
||||
height: 340rpx;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle, rgba(67, 78, 109, 0.18) 0 30%, transparent 31% 47%, rgba(67, 78, 109, 0.12) 48% 66%, transparent 67%),
|
||||
radial-gradient(circle at center, rgba(87, 212, 184, 0.12), transparent 70%);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 28rpx;
|
||||
.home-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 14rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin-bottom: 12rpx;
|
||||
line-height: 1.8;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
margin-top: 28rpx;
|
||||
.login-pill {
|
||||
min-width: 94rpx;
|
||||
height: 48rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(135deg, #1aad19 0%, #138a15 100%);
|
||||
background: linear-gradient(90deg, #34e5b4 0%, #18c9b7 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
font-size: 22rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 10rpx 24rpx rgba(32, 214, 181, 0.24);
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: block;
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #64748b;
|
||||
.device-summary {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 22rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.device-summary__content {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.device-summary__title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #eff4ff;
|
||||
}
|
||||
|
||||
.device-summary__count {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #ff9d57;
|
||||
}
|
||||
|
||||
.device-summary__arrow {
|
||||
font-size: 28rpx;
|
||||
color: #7f889f;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 38rpx 30rpx 34rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(43, 49, 67, 0.94);
|
||||
box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 74rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(90deg, #39e7aa 0%, #1cc9c1 100%);
|
||||
box-shadow: 0 14rpx 26rpx rgba(20, 184, 166, 0.18);
|
||||
}
|
||||
|
||||
.action-button + .action-button {
|
||||
margin-top: 34rpx;
|
||||
}
|
||||
|
||||
.action-button__icon {
|
||||
position: relative;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.action-button__icon-core {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.95);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.action-button__icon--scan .action-button__icon-core::before,
|
||||
.action-button__icon--scan .action-button__icon-core::after,
|
||||
.action-button__icon--tag .action-button__icon-core::before,
|
||||
.action-button__icon--tag .action-button__icon-core::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.action-button__icon--scan .action-button__icon-core::before {
|
||||
left: 6rpx;
|
||||
right: 6rpx;
|
||||
top: 14rpx;
|
||||
height: 2rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.action-button__icon--scan .action-button__icon-core::after {
|
||||
top: 6rpx;
|
||||
bottom: 6rpx;
|
||||
left: 14rpx;
|
||||
width: 2rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.action-button__icon--tag .action-button__icon-core {
|
||||
transform: rotate(45deg) scale(0.8);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.action-button__icon--tag .action-button__icon-core::before {
|
||||
top: 9rpx;
|
||||
left: 9rpx;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.action-button__icon--tag .action-button__icon-core::after {
|
||||
right: -7rpx;
|
||||
top: 14rpx;
|
||||
width: 10rpx;
|
||||
height: 2rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.action-button__label {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 22rpx;
|
||||
padding: 22rpx 24rpx 24rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #fbefc7;
|
||||
color: #977244;
|
||||
box-shadow: 0 12rpx 24rpx rgba(6, 10, 22, 0.14);
|
||||
}
|
||||
|
||||
.notice-card__title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.notice-card__speaker {
|
||||
position: relative;
|
||||
width: 20rpx;
|
||||
height: 16rpx;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 4rpx;
|
||||
background: #ff9d57;
|
||||
}
|
||||
|
||||
.notice-card__speaker::before,
|
||||
.notice-card__speaker::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.notice-card__speaker::before {
|
||||
right: -8rpx;
|
||||
top: 2rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6rpx solid transparent;
|
||||
border-bottom: 6rpx solid transparent;
|
||||
border-left: 8rpx solid #ff9d57;
|
||||
}
|
||||
|
||||
.notice-card__speaker::after {
|
||||
right: -16rpx;
|
||||
top: 2rpx;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-top: 2rpx solid #ff9d57;
|
||||
border-right: 2rpx solid #ff9d57;
|
||||
border-radius: 0 8rpx 0 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.notice-card__title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #af7e42;
|
||||
}
|
||||
|
||||
.notice-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.notice-item {
|
||||
font-size: 22rpx;
|
||||
line-height: 1.7;
|
||||
color: #9f7a4c;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
padding: 16rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: rgba(31, 36, 49, 0.98);
|
||||
box-shadow: 0 -8rpx 24rpx rgba(4, 8, 20, 0.34);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 88rpx;
|
||||
}
|
||||
|
||||
.tab-item__icon {
|
||||
position: relative;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-bottom: 8rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 2rpx solid #8f97a9;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.tab-item__icon::before,
|
||||
.tab-item__icon::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.tab-item__icon::before {
|
||||
left: 8rpx;
|
||||
right: 8rpx;
|
||||
top: 10rpx;
|
||||
height: 2rpx;
|
||||
background: currentColor;
|
||||
color: #8f97a9;
|
||||
}
|
||||
|
||||
.tab-item__icon::after {
|
||||
left: 8rpx;
|
||||
right: 8rpx;
|
||||
bottom: 10rpx;
|
||||
height: 2rpx;
|
||||
background: currentColor;
|
||||
color: #8f97a9;
|
||||
}
|
||||
|
||||
.tab-item__icon--active {
|
||||
border-color: #36e4aa;
|
||||
background: rgba(54, 228, 170, 0.12);
|
||||
}
|
||||
|
||||
.tab-item__icon--active::before,
|
||||
.tab-item__icon--active::after {
|
||||
color: #36e4aa;
|
||||
}
|
||||
|
||||
.tab-item__badge {
|
||||
position: absolute;
|
||||
top: -4rpx;
|
||||
right: -4rpx;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background: #ff4d4f;
|
||||
box-shadow: 0 0 0 4rpx rgba(31, 36, 49, 0.98);
|
||||
}
|
||||
|
||||
.tab-item__label {
|
||||
font-size: 20rpx;
|
||||
color: #b0b6c4;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tab-item__label--active {
|
||||
color: #36e4aa;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user