陈誉午
994b267f5c
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
113 lines
2.2 KiB
SCSS
113 lines
2.2 KiB
SCSS
/* pages/live/h5Room/index.wxss */
|
|
page {
|
|
height: 100%;
|
|
background: #eaf6ff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.h5-room {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.h5-room__nav {
|
|
position: relative;
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #edf8ff 0%, #dbeeff 48%, #cae5ff 100%);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 -1px 0 rgba(120, 180, 255, 0.14);
|
|
}
|
|
|
|
.h5-room__nav-status {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.h5-room__nav-bg,
|
|
.h5-room__nav-grid,
|
|
.h5-room__nav-glow,
|
|
.h5-room__nav-bubble {
|
|
position: absolute;
|
|
}
|
|
|
|
.h5-room__nav-bg {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background:
|
|
radial-gradient(circle at 14% 82%, rgba(74, 183, 255, 0.26) 0%, rgba(74, 183, 255, 0) 28%),
|
|
radial-gradient(circle at 88% 22%, rgba(93, 255, 240, 0.22) 0%, rgba(93, 255, 240, 0) 20%),
|
|
radial-gradient(circle at 76% 84%, rgba(123, 152, 255, 0.18) 0%, rgba(123, 152, 255, 0) 24%),
|
|
linear-gradient(135deg, #edf8ff 0%, #dbeeff 48%, #cae5ff 100%);
|
|
}
|
|
|
|
.h5-room__nav-grid {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0.42;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
|
|
background-size: 18px 18px;
|
|
background-position: center center;
|
|
}
|
|
|
|
.h5-room__nav-glow {
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, 0.28);
|
|
}
|
|
|
|
.h5-room__nav-glow--left {
|
|
top: 20rpx;
|
|
left: -36rpx;
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
}
|
|
|
|
.h5-room__nav-glow--right {
|
|
right: -30rpx;
|
|
bottom: -72rpx;
|
|
width: 260rpx;
|
|
height: 260rpx;
|
|
background: rgba(147, 177, 255, 0.2);
|
|
}
|
|
|
|
.h5-room__nav-bubble {
|
|
border-radius: 50%;
|
|
background: rgba(71, 170, 255, 0.5);
|
|
box-shadow: 0 0 0 10rpx rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.h5-room__nav-bubble--sm {
|
|
top: 22rpx;
|
|
right: 184rpx;
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: rgba(89, 187, 255, 0.8);
|
|
}
|
|
|
|
.h5-room__nav-bubble--md {
|
|
top: 66rpx;
|
|
left: 112rpx;
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
background: rgba(79, 165, 255, 0.58);
|
|
}
|
|
|
|
.h5-room__nav-bubble--lg {
|
|
right: 64rpx;
|
|
bottom: 18rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
background: rgba(120, 157, 255, 0.38);
|
|
}
|