feat: 电子药箱小程序 - 4Tab药品管理
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
This commit is contained in:
陈誉午
@@ -0,0 +1,288 @@
|
||||
@import "../../variables";
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
padding: 0 60rpx;
|
||||
|
||||
.login-header {
|
||||
align-self: flex-start;
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 30rpx;
|
||||
|
||||
.login-back {
|
||||
font-size: 38rpx;
|
||||
color: #333;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 80rpx;
|
||||
|
||||
.login-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.login-desc {
|
||||
font-size: $defualt-font-size;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background: linear-gradient(90deg, #005bea 0%, #00c6fb 99%);
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
border-radius: 48rpx;
|
||||
border: none;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
已登录页 — 用户信息展示
|
||||
============================================ */
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
background: linear-gradient(180deg, #f8f9fe 0%, #eef0f7 100%);
|
||||
|
||||
.body-header {
|
||||
align-self: flex-start;
|
||||
z-index: 10;
|
||||
padding: 30rpx;
|
||||
background: linear-gradient(180deg, #f8f9fe 0%, rgba(248, 249, 254, 0) 100%);
|
||||
|
||||
.body-back {
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
padding: 16rpx 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.body-content{
|
||||
width: 100%;
|
||||
margin-top: 15vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 30rpx;
|
||||
padding: 40rpx 50rpx;
|
||||
border: none;
|
||||
border-radius: 32rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.06);
|
||||
width: calc(100% - 80rpx);
|
||||
max-width: 600rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.choose-avatar {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid $primary-color;
|
||||
box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
max-width: 280rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
flex-shrink: 0;
|
||||
padding: 12rpx 32rpx;
|
||||
font-size: $small-font-size;
|
||||
color: $primary-color;
|
||||
background: rgba($primary-color, 0.06);
|
||||
border: 1.5rpx solid $primary-color;
|
||||
border-radius: 28rpx;
|
||||
line-height: 1.5;
|
||||
transition: all 0.2s ease;
|
||||
&:active {
|
||||
background: rgba($primary-color, 0.12);
|
||||
transform: scale(0.96);
|
||||
}
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.msg {
|
||||
font-size: $defualt-font-size;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
padding: 24rpx 60rpx;
|
||||
margin: 0 60rpx 40rpx;
|
||||
white-space: pre-wrap;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 20rpx;
|
||||
line-height: 1.6;
|
||||
width: calc(100% - 120rpx);
|
||||
max-width: 600rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
弹窗 — 设置头像和昵称
|
||||
============================================ */
|
||||
.login-container {
|
||||
.popup-title {
|
||||
display: block;
|
||||
font-size: 35rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40rpx;
|
||||
|
||||
// 左右布局：左头像 + 右按钮组
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 36rpx;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
// 左侧：头像选择器
|
||||
.avatar-picker {
|
||||
flex-shrink: 0;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.popup-avatar {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧：按钮组（上下排列）
|
||||
.btn-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
|
||||
.form-btn {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #005bea 0%, #00c6fb 99%);
|
||||
border-radius: 36rpx;
|
||||
border: none;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 昵称输入：外观伪装成按钮，click 唤起微信昵称弹层
|
||||
.form-input--nickname {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 26rpx;
|
||||
color: $primary-color;
|
||||
background: transparent;
|
||||
border: 2rpx solid $primary-color;
|
||||
border-radius: 36rpx;
|
||||
text-align: center;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交按钮
|
||||
.form-submit {
|
||||
width: 100%;
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background: linear-gradient(90deg, #005bea 0%, #00c6fb 99%);
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
border-radius: 48rpx;
|
||||
border: none;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user