- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
56 lines
1.7 KiB
SCSS
56 lines
1.7 KiB
SCSS
.page {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
padding-bottom: 60rpx;
|
|
box-sizing: border-box;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.drug-header {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
padding: 30rpx 40rpx 30rpx;
|
|
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
|
}
|
|
|
|
.header-img { width: 100rpx; height: 100rpx; margin-bottom: 16rpx; }
|
|
|
|
.drug-meta { display: flex; gap: 14rpx; }
|
|
|
|
.meta-item {
|
|
font-size: 22rpx; color: #fff;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 6rpx 20rpx; border-radius: 20rpx;
|
|
}
|
|
|
|
.meta-item.rx { background: rgba(255, 59, 48, 0.3); }
|
|
|
|
.section {
|
|
margin: 24rpx 30rpx; background: #ffffff;
|
|
border-radius: 20rpx; padding: 30rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.section.warning { border-left: 6rpx solid #FF6B35; }
|
|
.section.tip { border-left: 6rpx solid #07C160; background: #f0faf5; }
|
|
|
|
.section-title { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; }
|
|
.section-content { font-size: 28rpx; color: #555; line-height: 1.8; }
|
|
|
|
.info-row {
|
|
display: flex; justify-content: space-between;
|
|
padding: 16rpx 0; border-top: 1rpx solid #f0f0f0; margin-top: 16rpx;
|
|
}
|
|
|
|
.info-label { font-size: 24rpx; color: #999; }
|
|
.info-value { font-size: 24rpx; color: #333; font-weight: 500; }
|
|
.info-value.price { color: #FF6B35; font-weight: 600; }
|
|
|
|
.precaution-item { font-size: 26rpx; color: #666; line-height: 1.9; margin-bottom: 6rpx; }
|
|
|
|
.disclaimer { text-align: center; font-size: 22rpx; color: #ccc; padding: 30rpx; }
|
|
|
|
.empty-page { display: flex; align-items: center; justify-content: center; }
|
|
.empty-msg { text-align: center; }
|
|
.empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
|
|
.empty-text { font-size: 30rpx; color: #999; }
|