陈誉午
994b267f5c
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
116 lines
3.0 KiB
SCSS
116 lines
3.0 KiB
SCSS
/* components/static/product-popup/product-popup.wxss */
|
|
@import "variables";
|
|
|
|
.product-popup-wrapper {
|
|
position: fixed;
|
|
right: -100%;
|
|
bottom: $primary-gap * 10;
|
|
transition: right .3s linear;
|
|
|
|
.count {
|
|
position: absolute;
|
|
background: linear-gradient(100deg, #FEB133 60%, #ffffff00 100%);
|
|
border-top-left-radius: $primary-border-radius;
|
|
border-bottom-left-radius: $primary-border-radius;
|
|
top: -20%;
|
|
width: 200rpx;
|
|
color: white;
|
|
font-weight: 800;
|
|
line-height: 50rpx;
|
|
height: 50rpx;
|
|
.count-icon{
|
|
position: absolute;
|
|
top: -20%;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
z-index: 111;
|
|
}
|
|
.count-content{
|
|
margin-left: $primary-gap*2.2;
|
|
}
|
|
.count-content-x{
|
|
font-size: small;
|
|
}
|
|
|
|
}
|
|
|
|
.product-popup {
|
|
width: 200rpx;
|
|
border-radius: $primary-border-radius;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
|
|
.close {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
line-height: 30rpx;
|
|
font-size: 30rpx;
|
|
color: rgba(255, 255, 255, 0.78);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
right: $primary-gap/2;
|
|
top: $primary-gap/2;
|
|
}
|
|
|
|
.top {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
border-top-left-radius: $primary-border-radius;
|
|
border-top-right-radius: $primary-border-radius;
|
|
width: 96%;
|
|
height: 98%;
|
|
// border: 1px soild #fff;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
display: -webkit-box;
|
|
line-clamp: 2;
|
|
box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
justify-content: center;
|
|
background: white;
|
|
color: #000;
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
height: 60rpx;
|
|
padding: 0 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.button {
|
|
display: flex;
|
|
background: #FF0E4C;
|
|
color: white;
|
|
height: 50rpx;
|
|
font-weight: 800;
|
|
align-items: center;
|
|
|
|
.price {
|
|
margin-left: 8rpx;
|
|
flex: 3;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.button-right {
|
|
height: 100%;
|
|
border-top-left-radius: $primary-border-radius;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
flex: 1;
|
|
background: linear-gradient(100deg, #ff7a3c 60%, #ff004d 100%);
|
|
}
|
|
}
|
|
}
|
|
} |