信达小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1270 lines
32 KiB

1 month ago
$page-margin: 40rpx;
page {
background-color: #fafafa;
}
.page {
position: relative;
min-height: 100vh;
.bg {
margin-top: 96rpx;
width: 100%;
}
.drug-bg {
width: 100%;
}
.page-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
box-sizing: border-box;
padding-bottom: 180rpx;
.user {
margin: 53rpx $page-margin 0;
display: flex;
align-items: center;
.avatar {
width: 87rpx;
height: 87rpx;
border-radius: 50%;
}
.content {
margin-left: 33rpx;
.name {
font-size: 32rpx;
color: #333333;
font-weight: bold;
line-height: 48rpx;
}
.info {
font-size: 24rpx;
color: #999999;
line-height: 48rpx;
.num {
font-size: 32rpx;
color: #333333;
font-weight: bold;
}
}
}
}
.referral {
margin: $page-margin $page-margin 0;
.referral-img {
margin-left: -20rpx;
width: calc(100% + 20rpx);
height: 234rpx;
}
}
.doctor {
margin: $page-margin $page-margin 0;
padding: 70rpx 10rpx 10rpx;
border-radius: 24rpx;
.container {
padding: 27rpx 0 27rpx 27rpx;
display: flex;
justify-content: space-between;
background: rgba(255, 255, 255, 0.95);
border-radius: 21rpx;
.avatar {
width: 104rpx;
height: 104rpx;
.a-img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 3rpx solid #fff;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(52, 44, 46, 0.17);
}
}
.wrap {
padding: 6rpx 16rpx 0;
flex: 1;
.name-wrap {
display: flex;
.name {
position: relative;
font-size: 36rpx;
color: rgba(51, 51, 51, 1);
font-weight: bold;
display: flex;
align-items: center;
line-height: 40rpx;
.n-content {
max-width: 8em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bubble {
margin-left: 8rpx;
padding: 0 14rpx;
height: 30rpx;
line-height: 30rpx;
box-sizing: border-box;
text-align: center;
font-size: 22rpx;
color: rgba(255, 255, 255, 1);
background: #ee951b;
border-radius: 32rpx;
position: relative;
&::after {
position: absolute;
left: 14rpx;
bottom: -8rpx;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 13rpx 13rpx 0 0;
border-color: #ee951b transparent transparent transparent;
}
}
}
.icon {
margin-left: 4rpx;
margin-top: -20rpx;
display: inline-block;
width: 36rpx;
height: 24rpx;
}
}
.content {
margin-top: 16rpx;
font-size: 26rpx;
line-height: 38rpx;
color: rgba(51, 51, 51, 1);
}
.hostipal {
margin-top: 16rpx;
font-size: 28rpx;
color: #999999;
line-height: 36rpx;
overflow: hidden;
.h-content {
margin-right: 16rpx;
display: inline;
}
.tag {
display: inline-block;
padding: 4rpx 12rpx;
font-size: 22rpx;
line-height: 1;
color: #ffffff;
background: #ee951b;
line-height: 24rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
}
.btn {
align-self: center;
width: 151rpx;
height: 44rpx;
font-size: 28rpx;
color: #cf5375;
background: linear-gradient(136deg, #ebeffe 0%, #fce3ec 100%), #ffffff;
border-radius: 420rpx 0 0 420rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
&.doctor-drugs {
.container {
.btn {
color: #ffffff;
background: rgba(37, 217, 200, 1);
}
}
}
}
.banner {
margin: $page-margin;
.swiper {
width: 100%;
height: 280rpx;
.swiper-item {
display: block;
width: 100%;
height: 240rpx;
box-sizing: border-box;
border-radius: 20rpx;
.swiper-item-img {
width: 100%;
height: 100%;
}
}
.wx-swiper-dot-active {
width: 30rpx !important;
}
.wx-swiper-dot {
width: 9rpx;
height: 6rpx;
border-radius: 2rpx;
}
}
}
.adl {
position: relative;
margin: $page-margin;
.adl-bg {
width: 100%;
height: 240rpx;
}
.adl-container {
padding: 63rpx 40rpx 24rpx;
width: 100%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
.other {
.new {
position: absolute;
left: -22rpx;
top: 9rpx;
.icon {
width: 123rpx;
height: 59rpx;
}
.new-text {
position: absolute;
width: 68rpx;
height: 26rpx;
top: 13rpx;
left: 18rpx;
}
}
.adl-title {
width: 334rpx;
height: 86rpx;
}
.title {
font-size: 44rpx;
font-weight: bold;
color: #fff;
line-height: 48rpx;
.blod {
// font-size: 50rpx;
}
}
.num {
font-size: 25rpx;
line-height: 36rpx;
color: #fff;
}
.status {
margin-top: 18rpx;
padding: 0 25rpx;
display: inline-block;
font-size: 22rpx;
color: #e04775;
background-color: #fff;
border-radius: 17rpx;
}
.btn {
margin-top: 10rpx;
width: 206rpx;
height: 54rpx;
border-radius: 30rpx;
text-align: center;
line-height: 54rpx;
background: #ffffff linear-gradient(136deg, #e6edfe 0%, #fee0ea 100%);
opacity: 1;
margin-right: 20rpx;
font-size: 28rpx;
color: #cf5375;
font-weight: bold;
.icon {
width: 21rpx;
height: 21rpx;
margin-left: 9rpx;
}
}
.o-aside {
position: absolute;
top: 7rpx;
right: 0;
.badge {
width: 302rpx;
height: 233rpx;
}
}
}
}
&.adl-drugs {
.adl-container {
.other {
.title {
color: #fff;
}
.num {
color: #fff;
}
.status {
color: #24d8c8;
}
.btn {
width: 206rpx;
height: 54rpx;
background: #ffffff;
font-size: 28rpx;
color: #25d9c8;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 32rpx 32rpx 32rpx 32rpx;
.icon {
width: 21rpx;
height: 21rpx;
}
}
.o-aside {
.box {
.change {
color: #ffffff;
}
.center {
background: linear-gradient(163deg, #fcfcfc 70%, #2fdbca 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.b-line {
background: linear-gradient(61deg, #ffffff 30%, #f08f35 49%, #e55273 100%);
&::after {
border-color: transparent transparent #fff transparent;
}
}
}
}
}
}
}
}
.drug-record {
position: relative;
margin: $page-margin $page-margin 64rpx;
padding: 24rpx 40rpx;
border-radius: 24rpx;
background: linear-gradient(to bottom, #25d9c8 0%, #a8ede6 100%);
.d-header {
display: flex;
justify-content: space-between;
align-items: center;
.status {
display: flex;
align-items: center;
.name {
margin-right: 10rpx;
font-size: 28rpx;
color: #fff;
font-weight: bold;
}
.icons {
display: flex;
align-items: center;
.icon {
margin-right: 14rpx;
width: 32rpx;
height: 32rpx;
}
}
}
.more {
font-size: 24rpx;
color: #ffffff;
}
}
.d-line {
margin: 31rpx 0 25rpx;
width: 26rpx;
height: 4rpx;
background: #ffffff;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.date {
.d-name {
font-size: 24rpx;
color: #ffffff;
}
.d-str {
display: flex;
align-items: center;
font-size: 28rpx;
color: #ffffff;
font-weight: bold;
.week {
font-weight: bold;
margin-left: 10rpx;
font-size: 20rpx;
color: #26dac9;
width: 55rpx;
height: 24rpx;
line-height: 24rpx;
text-align: center;
border-radius: 6rpx 6rpx 6rpx 6rpx;
background: #ffffff;
}
}
}
.d-card {
min-width: 300rpx;
padding: 15rpx 24rpx 23rpx;
position: absolute;
top: 95rpx;
right: 32rpx;
box-shadow: 8rpx 16rpx 24rpx 0 #dfdfdf;
background-color: #fff;
border-radius: 24rpx;
.dc-header {
display: flex;
align-items: center;
font-size: 24rpx;
color: #12245c;
font-weight: bold;
.over-date {
margin-left: 17rpx;
font-size: 20rpx;
color: #bec3d1;
}
}
.dc-content {
margin-top: 13rpx;
display: flex;
align-items: flex-end;
justify-content: space-between;
.c-l {
display: flex;
align-items: flex-end;
.box {
padding: 0 20rpx;
height: 59rpx;
font-size: 48rpx;
color: #ffffff;
text-align: center;
line-height: 59rpx;
background-color: #12245c;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
font-weight: bold;
}
.sub {
margin-left: 10rpx;
font-size: 24rpx;
color: #12245c;
}
&.today {
.box {
padding: 5rpx 8rpx;
font-size: 32rpx;
background: linear-gradient(91deg, #12245c 0%, rgba(18, 36, 92, 0.52) 100%);
}
}
}
.more {
font-size: 24rpx;
color: #25d9c8;
}
}
}
.d-noraml {
display: flex;
justify-content: space-between;
align-items: center;
.n-left {
// padding: 40rpx 0;
flex-shrink: 0;
margin-right: 40rpx;
.title {
font-size: 28rpx;
color: #ffffff;
line-height: 48rpx;
font-weight: bold;
}
.btn {
margin-top: 46rpx;
width: 206rpx;
height: 54rpx;
background: #ffffff;
font-size: 28rpx;
color: #25d9c8;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 32rpx 32rpx 32rpx 32rpx;
.icon {
width: 21rpx;
height: 21rpx;
}
}
}
.n-right {
flex: 1;
display: flex;
justify-content: space-between;
.item {
.icon {
margin: 0 auto;
width: 64rpx;
height: 64rpx;
background: linear-gradient(120deg, #a7ede6 0%, #3cd9ca 100%);
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: flex;
align-items: center;
justify-content: center;
image {
width: 48rpx;
height: 48rpx;
}
}
.name {
margin: 4rpx;
font-size: 20rpx;
color: #ffffff;
}
}
}
}
}
.live {
margin: $page-margin 0;
.header {
margin: 0 $page-margin;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
color: #474747;
font-weight: bold;
}
.more {
font-size: 24rpx;
color: #cccccc;
}
}
.live-container {
margin-top: 24rpx;
margin-left: $page-margin;
overflow-x: auto;
overflow-y: hidden;
&::-webkit-scrollbar {
display: none;
}
.scroll {
display: flex;
flex-wrap: nowrap;
.live-item {
flex-shrink: 0;
width: 670rpx;
height: 331rpx;
margin-right: 30rpx;
.live-img {
width: 100%;
height: 100%;
border-radius: 24rpx;
}
}
}
}
}
.live-up {
margin: $page-margin 0;
.header {
margin: 0 $page-margin;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
color: #474747;
font-weight: bold;
}
.more {
font-size: 24rpx;
color: #cccccc;
}
}
.live-container {
margin-top: 24rpx;
margin-left: $page-margin;
overflow-x: auto;
overflow-y: hidden;
&::-webkit-scrollbar {
display: none;
}
.scroll {
display: flex;
flex-wrap: nowrap;
.live-item {
flex-shrink: 0;
width: 670rpx;
height: 331rpx;
margin-right: 30rpx;
.live-img {
width: 100%;
height: 100%;
border-radius: 24rpx;
}
}
.item {
margin-right: 30rpx;
flex-shrink: 0;
width: 418rpx;
border-radius: 24rpx;
border: 1px solid #d6d9e1;
.photo-wrap {
position: relative;
width: 100%;
height: 235rpx;
border-radius: 24rpx 24rpx 0 0;
.photo {
width: 100%;
height: 100%;
border-radius: 24rpx 24rpx 0 0;
}
.status {
position: absolute;
left: 0;
top: 0;
padding: 5rpx 18rpx;
background: #ffffff linear-gradient(136deg, #e7eeff 0%, #fde0ea 100%);
border-radius: 24rpx 0 24rpx 0;
display: flex;
align-items: center;
font-size: 24rpx;
color: #cf5375;
.dot {
margin-right: 10rpx;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background: #cf5375;
}
&.bad {
color: #484848;
background: #e6e6e6;
.dot {
display: none;
}
}
}
.date {
padding: 18rpx 18rpx 8rpx;
position: absolute;
left: 40rpx;
bottom: 0;
background: #e04775;
border-radius: 11rpx 11rpx 0rpx 0rpx;
text-align: center;
.d-title {
font-size: 22rpx;
color: #ffffff;
font-weight: bold;
.icon {
margin-right: -10rpx;
}
}
.ymd {
font-size: 18rpx;
color: #fff;
line-height: 28rpx;
border-bottom: 2rpx solid rgba(255, 255, 255, 0.34);
}
.hm {
font-size: 18rpx;
color: #fff;
line-height: 28rpx;
}
}
}
.content {
padding: 24rpx 28rpx;
display: flex;
align-items: center;
border-radius: 0 0 24rpx 24rpx;
background-color: #fff;
.name {
max-width: 4em;
font-size: 28rpx;
color: #666666;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.labels {
margin-left: 10rpx;
flex: 1;
.label {
display: block;
font-size: 24rpx;
color: #cccccc;
max-width: 4em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.label:not(:first-of-type) {
display: none;
}
}
.btn {
flex-shrink: 0;
padding: 0 13rpx;
height: 48rpx;
line-height: 48rpx;
font-size: 28rpx;
font-weight: bold;
color: #cf5375;
border-radius: 24rpx;
background: #ffffff linear-gradient(136deg, #e7eefe 0%, #fee0ea 100%);
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40rpx;
height: 40rpx;
}
}
}
}
}
&.live-container-drugs {
.scroll {
.item {
.content {
.btn {
.icon {
margin-right: 10rpx;
width: 24rpx;
height: 24rpx;
}
background: #25d9c8;
color: #fff;
}
}
}
}
}
}
}
.live-up-new {
margin: 0 40rpx;
.l-banner {
width: 100%;
height: 834rpx;
border-radius: 24rpx;
.live-img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.item {
margin-top: 24rpx;
padding: 24rpx;
background: #ffffff;
border-radius: 24rpx;
display: flex;
.photo-wrap {
flex-shrink: 0;
width: 182rpx;
height: 182rpx;
position: relative;
.photo {
width: 100%;
height: 100%;
border-radius: 24rpx;
}
.status {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40rpx;
font-size: 24rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
background-color: rgba(0, 0, 0, 0.46);
border-radius: 0 0 24rpx 24rpx;
.icon {
width: 20rpx;
height: 20rpx;
}
&.active {
background-color: rgba(207, 83, 117, 1);
}
}
}
.content {
flex: 1;
padding-left: 24rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 32rpx;
color: rgba(72, 72, 72, 1);
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.labels {
margin-top: 16rpx;
max-width: 56vw;
font-size: 28rpx;
color: rgba(173, 173, 173, 1);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.c-footer {
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
padding: 0 0 0 16rpx;
background-color: rgba(250, 250, 250, 1);
border-radius: 48rpx;
.date {
font-size: 24rpx;
color: rgba(72, 72, 72, 1);
}
.btn {
width: 128rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
background-color: rgba(207, 83, 117, 1);
border-radius: 24rpx;
font-size: 24rpx;
color: rgba(255, 255, 255, 1);
.icon {
width: 24rpx;
height: 24rpx;
}
}
}
}
}
}
.story {
margin: $page-margin 0;
.header {
margin: 0 $page-margin;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
color: #474747;
font-weight: bold;
}
.more {
font-size: 24rpx;
color: #cccccc;
}
}
.story-container {
position: relative;
margin-top: 24rpx;
overflow-x: auto;
overflow-y: hidden;
&::-webkit-scrollbar {
display: none;
}
&::after {
position: sticky;
left: 0;
bottom: 0;
margin-top: -253rpx;
display: block;
content: '';
width: 100vw;
height: 253rpx;
background: #cf5375;
}
&.story-container-drugs {
&::after {
display: none;
}
}
.scroll {
position: relative;
display: flex;
flex-wrap: nowrap;
padding-left: $page-margin;
padding-bottom: 55rpx;
.story-item {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 281rpx;
height: 375rpx;
margin-right: 40rpx;
.story-img {
width: 100%;
height: 100%;
border-radius: 24rpx;
}
.story-content {
position: absolute;
left: 0;
bottom: 0;
padding: 40rpx 29rpx 26rpx;
box-sizing: border-box;
width: 100%;
font-size: 24rpx;
line-height: 32rpx;
color: #273a65;
font-weight: bold;
background: linear-gradient(180deg, rgba(236, 236, 236, 0) 0%, rgba(236, 236, 236, 1) 100%);
border-radius: 0 0 24rpx 24rpx;
}
}
}
}
}
.server {
margin: $page-margin;
.header {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
color: #474747;
font-weight: bold;
}
.more {
font-size: 24rpx;
color: #cccccc;
}
}
.server-container {
margin-top: 24rpx;
.two {
display: flex;
justify-content: space-between;
.item {
position: relative;
flex: 1;
height: 163rpx;
display: flex;
justify-content: flex-end;
.item-bg {
width: 100%;
height: 100%;
border-radius: 24rpx;
border: 1px solid #d7dae1;
}
.item-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #d7dae1;
padding: 28rpx 31rpx;
box-sizing: border-box;
border-radius: 24rpx;
.title {
font-size: 28rpx;
font-weight: bold;
color: #666666;
}
.line {
margin-top: 20rpx;
width: 25rpx;
height: 4rpx;
background-color: #666666;
}
.en {
margin-top: 20rpx;
font-size: 20rpx;
color: #666666;
}
.icon {
position: absolute;
bottom: 0;
right: 0;
border-radius: 0 0 24rpx 0;
width: 106rpx;
height: 107rpx;
}
}
}
.item:not(:first-of-type) {
margin-left: 30rpx;
}
}
.four {
margin-top: 24rpx;
padding: 22rpx 30rpx;
border-radius: 24rpx;
background-color: #fff;
display: flex;
align-items: center;
border: 1px solid #d5d8e0;
.item {
flex: 1;
text-align: center;
.icon {
width: 95rpx;
height: 95rpx;
}
.name {
font-size: 24rpx;
color: #666666;
}
}
}
}
}
.book {
margin: $page-margin;
.header {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
color: #474747;
font-weight: bold;
}
.more {
font-size: 24rpx;
color: #cccccc;
}
}
.swiper {
margin: 0 -40rpx;
height: 700rpx;
.swiper-item {
padding: 32rpx 40rpx;
box-sizing: border-box;
.book-list {
padding: 0 32rpx;
border-radius: 32rpx;
box-shadow: 0 0 32rpx 1rpx rgba(0, 0, 0, 0.08);
.card {
padding: 32rpx 0;
display: flex;
> view:not(:last-of-type),
> image {
margin-right: 24rpx;
}
.cover {
flex-shrink: 0;
width: 210rpx;
height: 140rpx;
position: relative;
.photo {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.label {
position: absolute;
top: 12rpx;
left: 0;
font-size: 16rpx;
color: #fff;
padding: 4rpx 10rpx;
background-color: #293b61;
}
}
.content {
font-size: 28rpx;
color: #666666;
font-weight: bold;
.title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
}
.card:not(:last-of-type) {
border-bottom: 1rpx solid rgba(152, 175, 225, 0.5);
}
}
}
.wx-swiper-dot-active {
width: 30rpx !important;
}
.wx-swiper-dot {
width: 9rpx;
height: 6rpx;
border-radius: 2rpx;
}
}
}
}
.reg {
position: fixed;
left: 64rpx;
bottom: calc(env(safe-area-inset-bottom) + 120rpx);
width: 622rpx;
background-color: rgba(39, 58, 101, 0.8);
box-shadow: 0 8rpx 24rpx rgba(92, 144, 220, 0.25);
height: 84rpx;
line-height: 84rpx;
border-radius: 24rpx;
font-size: 30rpx;
color: #ffffff;
text-align: center;
.blod {
font-weight: bold;
}
.reg-close {
position: absolute;
right: -10rpx;
top: -10rpx;
width: 40rpx;
height: 40rpx;
}
}
.reg-audit {
position: fixed;
left: 34rpx;
bottom: calc(env(safe-area-inset-bottom) + 120rpx);
width: 682rpx;
background-color: rgba(39, 58, 101, 0.8);
box-shadow: 0 8rpx 24rpx rgba(92, 144, 220, 0.25);
height: 84rpx;
line-height: 84rpx;
border-radius: 24rpx;
font-size: 30rpx;
color: #ffffff;
text-align: center;
.blod {
font-weight: bold;
}
}
.public {
position: fixed;
left: 30rpx;
bottom: calc(env(safe-area-inset-bottom) + 120rpx);
width: 690rpx;
height: 152rpx;
box-shadow: 0rpx 2rpx 16rpx 0rpx #390f1b2d;
border-radius: 24rpx;
background: linear-gradient(346deg, #ffffff 0%, #ffe2eb 100%);
border: 2rpx solid #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 48rpx 0 32rpx;
.logo {
flex-shrink: 0;
width: 88rpx;
height: 88rpx;
}
.wrap {
padding: 0 24rpx;
flex: 1;
.title {
font-size: 32rpx;
color: rgba(40, 48, 49, 1);
font-weight: bold;
}
.content {
margin-top: 4rpx;
font-size: 28rpx;
color: rgba(154, 161, 162, 1);
}
}
.btn {
width: 158rpx;
height: 64rpx;
font-size: 32rpx;
color: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: center;
background: #cf5375;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.close {
position: absolute;
top: 0;
right: 0;
width: 48rpx;
height: 48rpx;
}
}
}
.slidearea {
width: 30rpx;
position: fixed;
right: 0;
top: 0;
height: calc(100vh - env(safe-area-inset-bottom) - 120rpx);
// background-color: #000;
z-index: 10;
.mview {
position: relative;
width: 30rpx;
height: 30rpx;
.slidebar {
position: absolute;
top: 15rpx;
left: 40rpx;
transform: translate(-100%, -50%);
padding: 20rpx;
width: 346rpx;
height: 234rpx;
white-space: nowrap;
}
}
}
.question {
position: fixed;
z-index: 10;
width: 154rpx;
height: 136rpx;
right: 28rpx;
bottom: 242rpx;
&-img {
width: 100%;
height: 100%;
}
}
.official-account {
position: fixed;
bottom: 180rpx;
left: 20rpx;
width: calc(100% - 40rpx);
}