page { background-color: #f6f6f6; } .page { padding: 24rpx 24rpx 340rpx; .detail-card { padding-bottom: 16rpx; position: relative; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #ffffff; background-color: #fffdfd; .li-options { display: flex; justify-content: space-between; .quality { width: 136rpx; height: 50rpx; } .gather { padding: 12rpx 32rpx; width: 48rpx; height: 48rpx; } } .li-header { padding: 32rpx 32rpx 0 0; display: flex; justify-content: space-between; &::before { flex-shrink: 0; content: ""; width: 10rpx; height: 40rpx; background: #00b4c5; border-radius: 0rpx 0rpx 0rpx 0rpx; } .wrap { flex: 1; padding-left: 22rpx; display: flex; flex-wrap: wrap; gap: 24rpx; .id { font-size: 28rpx; color: rgba(20, 21, 21, 1); } .status { font-size: 28rpx; &.status1 { color: rgba(0, 180, 197, 1); } &.status2 { color: rgba(247, 121, 0, 1); } &.status3 { color: rgba(153, 153, 153, 1); } } } .fold { flex-shrink: 0; display: flex; align-items: center; font-size: 28rpx; color: rgba(153, 153, 153, 1); .icon { margin-left: 14rpx; width: 32rpx; height: 32rpx; } } } .li-row { padding: 16rpx 32rpx; display: flex; line-height: 32rpx; .label { flex-shrink: 0; font-size: 28rpx; color: rgba(153, 153, 153, 1); width: 5em; } .content { font-size: 28rpx; color: rgba(20, 21, 21, 1); .line { color: rgba(205, 205, 205, 1); } .new { margin-right: 12rpx; display: inline-block; padding: 0 8rpx; font-size: 24rpx; color: #fff; background: linear-gradient(177deg, #f77900 0%, #ed4f39 88%); border-radius: 0rpx 8rpx 0rpx 8rpx; } .reject { padding: 0 8rpx; display: inline-block; font-size: 24rpx; color: rgba(153, 153, 153, 1); line-height: 32rpx; border: 1px solid rgba(224, 224, 224, 1); border-radius: 4rpx; } } .tags { display: flex; gap: 12rpx; .tag { padding: 2rpx 8rpx; font-size: 22rpx; color: rgba(0, 180, 197, 1); line-height: 32rpx; border: 1rpx solid #bfeff4; border-radius: 4rpx; } } } .user { padding: 16rpx 32rpx; display: flex; gap: 24rpx; align-items: center; .avatar { width: 112rpx; height: 112rpx; } .wrap { .w-header { display: flex; align-items: baseline; gap: 16rpx; .name { font-size: 36rpx; color: #141515; } .desc { font-size: 28rpx; color: rgba(20, 21, 21, 1); } } .w-footer { margin-top: 12rpx; .hostipal { margin-right: 12rpx; display: inline; font-size: 28rpx; color: rgba(20, 21, 21, 1); } .tag { margin-right: 12rpx; display: inline-block; padding: 0 8rpx; border-radius: 4rpx; background-color: rgba(0, 180, 197, 1); font-size: 24rpx; color: #fff; } .site { display: inline-block; padding: 0 8rpx; font-size: 28rpx; line-height: 32rpx; color: rgba(148, 87, 30, 1); border-radius: 4rpx; background-color: rgba(250, 229, 206, 1); } } } } .cases { margin: 16rpx 32rpx 0; padding: 32rpx; background-color: rgba(246, 246, 246, 1); border-radius: 16rpx; overflow: hidden; max-height: 1000px; transition: all 0.5s; &.fold { padding: 0; max-height: 0; } > view:not(:last-of-type) { margin-bottom: 32rpx; } .tags { display: flex; margin-bottom: 32rpx; .t-label { width: 3em; font-size: 28rpx; color: rgba(153, 153, 153, 1); } .wrap { display: flex; flex-wrap: wrap; gap: 12rpx; .tag { padding: 0 8rpx; font-size: 22rpx; color: rgba(0, 180, 197, 1); line-height: 32rpx; background: #ffffff; border-radius: 4rpx 4rpx 4rpx 4rpx; border: 1rpx solid #bfeff4; } } .edit-tag { margin-left: 20rpx; font-size: 22rpx; color: rgba(0, 180, 197, 1); display: flex; align-items: center; gap: 5rpx; .icon { width: 32rpx; height: 32rpx; } } } .photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12rpx; .photo { width: 100%; height: 128rpx; border-radius: 8rpx; } } .remark { .r-title { font-size: 32rpx; color: rgba(20, 21, 21, 1); font-weight: bold; line-height: 1; } .r-content { margin-top: 24rpx; padding: 32rpx; font-size: 28rpx; color: rgba(133, 133, 133, 1); line-height: 50rpx; border-radius: 16rpx; background-color: #fff; } } .audio-list { .audio-row { display: flex; gap: 28rpx; align-items: center; .audio-bar { flex: 1; border-radius: 104rpx; background-color: #fff; } .options { flex-shrink: 0; gap: 20rpx; display: flex; align-items: center; .del { width: 36rpx; height: 36rpx; } .trans { font-size: 28rpx; color: rgba(128, 128, 128, 1); } } } } .files { .f-title { font-size: 32rpx; color: #000; font-weight: bold; line-height: 1; } .file-list { margin-top: 24rpx; .fl-row { margin-top: 24rpx; display: flex; align-content: inherit; justify-content: space-between; .wrap { flex: 1; padding: 20rpx 24rpx; border-radius: 16rpx; background: #ffffff; display: flex; align-items: center; .icon { width: 56rpx; height: 56rpx; } .name { margin-left: 30rpx; font-size: 32rpx; color: rgba(128, 128, 128, 1); } } .option { display: flex; align-items: center; .icon { margin-left: 16rpx; width: 36rpx; height: 36rpx; } } } } } } } .feedback-card { margin-top: 24rpx; padding-bottom: 16rpx; position: relative; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #ffffff; background-color: #fffdfd; .li-options { margin-bottom: -32rpx; display: flex; justify-content: space-between; .quality { width: 136rpx; height: 50rpx; } .gather { padding: 12rpx 32rpx; width: 48rpx; height: 48rpx; } } .li-row { padding: 32rpx 32rpx 16rpx; display: flex; justify-content: space-between; line-height: 32rpx; .label { flex-shrink: 0; font-size: 28rpx; color: rgba(153, 153, 153, 1); width: 5em; } .content { flex: 1; font-size: 28rpx; color: rgba(20, 21, 21, 1); .line { color: rgba(205, 205, 205, 1); } .new { margin-right: 12rpx; display: inline-block; padding: 0 8rpx; font-size: 24rpx; color: #fff; background: linear-gradient(177deg, #f77900 0%, #ed4f39 88%); border-radius: 0rpx 8rpx 0rpx 8rpx; } .reject { padding: 0 8rpx; display: inline-block; font-size: 24rpx; color: rgba(153, 153, 153, 1); line-height: 32rpx; border: 1px solid rgba(224, 224, 224, 1); border-radius: 4rpx; } } .fold { flex-shrink: 0; display: flex; align-items: center; font-size: 28rpx; color: rgba(153, 153, 153, 1); .icon { margin-left: 14rpx; width: 32rpx; height: 32rpx; } } .tags { display: flex; gap: 12rpx; .tag { padding: 2rpx 8rpx; font-size: 22rpx; color: rgba(0, 180, 197, 1); line-height: 32rpx; border: 1rpx solid #bfeff4; border-radius: 4rpx; } } } .user { padding: 16rpx 32rpx; display: flex; gap: 24rpx; align-items: center; .avatar { width: 112rpx; height: 112rpx; } .wrap { .w-header { display: flex; align-items: baseline; gap: 16rpx; .name { font-size: 36rpx; color: #141515; } .desc { font-size: 28rpx; color: rgba(20, 21, 21, 1); } } .w-footer { margin-top: 12rpx; .hostipal { margin-right: 12rpx; display: inline; font-size: 28rpx; color: rgba(20, 21, 21, 1); } .tag { margin-right: 12rpx; display: inline-block; padding: 0 8rpx; border-radius: 4rpx; background-color: rgba(0, 180, 197, 1); font-size: 24rpx; color: #fff; } .site { display: inline-block; padding: 0 8rpx; font-size: 28rpx; line-height: 32rpx; color: rgba(148, 87, 30, 1); border-radius: 4rpx; background-color: rgba(250, 229, 206, 1); } } } } .cases { margin: 16rpx 32rpx 0; padding: 32rpx; background-color: rgba(246, 246, 246, 1); border-radius: 16rpx; overflow: hidden; max-height: 1000px; transition: all 0.5s; &.fold { padding: 0; max-height: 0; } > view:not(:last-of-type) { margin-bottom: 32rpx; } .photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12rpx; .photo { width: 100%; height: 128rpx; border-radius: 8rpx; } } .remark { .r-title { font-size: 32rpx; color: rgba(20, 21, 21, 1); font-weight: bold; line-height: 1; } .r-content { margin-top: 24rpx; padding: 32rpx; font-size: 28rpx; color: rgba(133, 133, 133, 1); line-height: 50rpx; border-radius: 16rpx; background-color: #fff; } } .audio-list { .audio-row { display: flex; gap: 28rpx; align-items: center; .audio-bar { flex: 1; border-radius: 104rpx; background-color: #fff; } .options { flex-shrink: 0; gap: 20rpx; display: flex; align-items: center; .del { width: 36rpx; height: 36rpx; } .trans { font-size: 28rpx; color: rgba(128, 128, 128, 1); } } } } .files { .f-title { font-size: 32rpx; color: #000; font-weight: bold; line-height: 1; } .file-list { margin-top: 24rpx; .fl-row { margin-top: 24rpx; display: flex; align-content: inherit; justify-content: space-between; .wrap { flex: 1; padding: 20rpx 24rpx; border-radius: 16rpx; background: #ffffff; display: flex; align-items: center; .icon { width: 56rpx; height: 56rpx; } .name { margin-left: 30rpx; font-size: 32rpx; color: rgba(128, 128, 128, 1); } } .option { display: flex; align-items: center; .icon { margin-left: 16rpx; width: 36rpx; height: 36rpx; } } } } } } } .doctor-card { margin-top: 24rpx; margin-bottom: 20rpx; background: linear-gradient(180deg, #e5f5f7 0%, #ffffff 50%); box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1); border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #ffffff; .dc-header { padding: 34rpx 32rpx 0 0; display: flex; justify-content: space-between; align-items: center; .status { padding: 4rpx 28rpx; font-size: 24rpx; color: rgba(0, 180, 197, 1); border-radius: 0 32rpx 32rpx 0; background-color: rgba(215, 237, 238, 1); } .date { font-size: 28rpx; color: rgba(20, 21, 21, 1); } } .doctor { padding: 32rpx; display: flex; gap: 24rpx; &:last-of-type { margin-bottom: 0; } .avatar { flex-shrink: 0; position: relative; width: 112rpx; height: 112rpx; } .wrap { padding-top: 8rpx; flex: 1; .w-header { display: flex; align-items: baseline; gap: 16rpx; line-height: 1; .name { font-size: 36rpx; color: rgba(20, 21, 21, 1); font-weight: bold; } .label { font-size: 28rpx; color: rgba(20, 21, 21, 1); } .line { width: 1px; height: 24rpx; background-color: rgba(205, 205, 205, 1); } } .w-container { margin-top: 24rpx; .hostipal { margin-right: 12rpx; font-size: 28rpx; color: rgba(20, 21, 21, 1); } .tag { margin-right: 12rpx; display: inline-block; padding: 0 8rpx; border-radius: 4rpx; font-size: 24rpx; color: rgba(255, 255, 255, 1); line-height: 32rpx; background-color: rgba(0, 180, 197, 1); } .site { display: inline-block; padding: 0 8rpx; font-size: 24rpx; color: rgba(148, 87, 30, 1); line-height: 32rpx; border-radius: 4rpx; background-color: rgba(250, 229, 206, 1); } } .w-footer { margin-top: 16rpx; display: flex; gap: 12rpx; flex-wrap: wrap; .wf-label { flex-shrink: 0; width: 48rpx; height: 32rpx; } .wf-tag { flex-shrink: 0; padding: 0 8rpx; font-size: 22rpx; color: rgba(0, 180, 197, 1); line-height: 32rpx; border: 1rpx solid rgba(191, 239, 244, 1); } } } } } .footer { position: fixed; bottom: 0; left: 0; width: 100%; padding: 32rpx 32rpx calc(env(safe-area-inset-bottom) + 32rpx); box-sizing: border-box; background-color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 60rpx; .wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 30rpx; &.all-wrap { flex: 1; .w-item { flex: 1; } } .w-item { position: relative; text-align: center; .icon { width: 48rpx; height: 48rpx; } .name { font-size: 24rpx; color: rgba(153, 153, 153, 1); } .tip { position: absolute; top: -25rpx; transform: translateY(-100%); left: 0; border-radius: 12rpx; width: 686rpx; box-sizing: border-box; padding: 18rpx 24rpx; background-color: rgba(255, 247, 232, 1); .t-header { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; font-size: 28rpx; color: rgba(255, 125, 0, 1); .date { flex-shrink: 0; } } .content { margin-top: 12rpx; font-size: 28rpx; color: rgba(255, 125, 0, 1); text-align: left; } &::after { position: absolute; bottom: -12rpx; left: 20rpx; content: ""; width: 0; height: 0; border-style: solid; border-width: 27rpx 27rpx 0 27rpx; border-color: rgba(255, 247, 232, 1) transparent transparent transparent; } } .more { position: absolute; top: -20rpx; transform: translateY(-100%); background-color: #fff; box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1); border-radius: 8rpx; .m-item { padding: 0 24rpx; display: flex; align-items: center; gap: 20rpx; .icon { flex-shrink: 0; width: 36rpx; height: 36rpx; } .name { padding: 24rpx 0; white-space: nowrap; font-size: 28rpx; color: rgba(20, 21, 21, 1); } } .m-item:not(:first-of-type) { .name { border-top: 1px solid #f3f3f3; } } &::after { position: absolute; bottom: -12rpx; left: 20rpx; content: ""; width: 0; height: 0; border-style: solid; border-width: 27rpx 27rpx 0 27rpx; border-color: #fff transparent transparent transparent; } } } } .btn-wrap { flex: 1; .btn1 { height: 88rpx; font-size: 32rpx; text-align: center; line-height: 88rpx; color: rgba(255, 255, 255, 1); background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%); border-radius: 68rpx 68rpx 68rpx 68rpx; } .btn2 { display: flex; align-items: center; border-radius: 82rpx; .l-btn, .r-btn { flex: 1; padding: 24rpx 14rpx; font-size: 32rpx; text-align: center; line-height: 40rpx; } .l-btn { border-radius: 82rpx 0 0 82rpx; color: rgba(0, 180, 197, 1); border: 1px solid #00b4c5; border-right: none; line-height: 36rpx; } .r-btn { border-radius: 0 82rpx 82rpx 0; color: rgba(255, 255, 255, 1); background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%); } } } .one-wrap { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24rpx; .cancel { width: 332rpx; height: 84rpx; font-size: 32rpx; color: rgba(1, 180, 197, 1); text-align: center; line-height: 84rpx; border-radius: 96rpx 96rpx 96rpx 96rpx; border: 1px solid #01b4c5; } .sure { width: 330rpx; height: 88rpx; font-size: 32rpx; color: rgba(255, 255, 255, 1); text-align: center; line-height: 88rpx; background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%); border-radius: 84rpx 84rpx 84rpx 84rpx; } } } } .dialog1 { padding: 48rpx 32rpx 32rpx; .title { font-size: 36rpx; color: rgba(20, 21, 21, 1); font-weight: bold; } .select-wrap { margin-top: 32rpx; display: flex; gap: 16rpx; .select { padding: 4rpx 24rpx; font-size: 28rpx; color: rgba(133, 133, 133, 1); line-height: 44rpx; background-color: rgba(246, 246, 246, 1); border-radius: 84rpx; } } .remark { margin-top: 24rpx; padding: 32rpx; width: 100%; box-sizing: border-box; border-radius: 16rpx; min-height: 200rpx; background-color: rgba(246, 246, 246, 1); } } .dialog2 { .badge { position: relative; z-index: 1; margin: 0 auto; display: block; width: 192rpx; height: 204rpx; } .container { padding: 160rpx 48rpx 48rpx; background-color: #fff; border-radius: 36rpx 36rpx 0 0; margin-top: -126rpx; background: linear-gradient(180deg, #e5f5f7 0%, #ffffff 39%, #ffffff 100%); .title { font-size: 32rpx; text-align: center; color: rgba(20, 21, 21, 1); font-weight: bold; } .content { margin-top: 24rpx; font-size: 28rpx; line-height: 40rpx; color: rgba(153, 153, 153, 1); } } } .dialog3 { .badge { position: relative; z-index: 1; margin: 0 auto; display: block; width: 192rpx; height: 204rpx; } .container { padding: 160rpx 48rpx 48rpx; background-color: #fff; border-radius: 36rpx 36rpx 0 0; margin-top: -126rpx; background: linear-gradient(180deg, #e5f5f7 0%, #ffffff 39%, #ffffff 100%); .title { font-size: 32rpx; text-align: center; color: rgba(20, 21, 21, 1); font-weight: bold; } .content { margin-top: 24rpx; font-size: 28rpx; line-height: 40rpx; color: rgba(153, 153, 153, 1); } } } .dialog4 { .badge { position: relative; z-index: 1; margin: 0 auto; display: block; width: 192rpx; height: 204rpx; } .container { padding: 160rpx 48rpx 48rpx; background-color: #fff; border-radius: 36rpx 36rpx 0 0; margin-top: -126rpx; background: linear-gradient(180deg, #fff0ee 0%, #ffffff 39%, #ffffff 100%); .title { font-size: 32rpx; text-align: center; color: rgba(20, 21, 21, 1); font-weight: bold; } .content { margin-top: 24rpx; font-size: 28rpx; line-height: 40rpx; color: rgba(153, 153, 153, 1); } } } .dialog5 { .badge { position: relative; z-index: 1; margin: 0 auto; display: block; width: 192rpx; height: 204rpx; } .container { padding: 160rpx 48rpx 48rpx; background-color: #fff; border-radius: 36rpx 36rpx 0 0; margin-top: -126rpx; background: linear-gradient(180deg, #fff0ee 0%, #ffffff 39%, #ffffff 100%); .title { font-size: 32rpx; text-align: center; color: rgba(20, 21, 21, 1); font-weight: bold; } .content { margin-top: 24rpx; font-size: 28rpx; line-height: 40rpx; color: rgba(153, 153, 153, 1); } } } .dialog6 { position: relative; padding: 48rpx 32rpx 32rpx; .close { position: absolute; top: 32rpx; right: 32rpx; font-size: 40rpx; color: #000; } .title { font-size: 36rpx; color: rgba(20, 21, 21, 1); font-weight: bold; text-align: center; } .btn1 { margin-top: 32rpx; padding: 12rpx; text-align: center; font-size: 32rpx; color: rgba(255, 255, 255, 1); line-height: 44rpx; background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%); border-radius: 60rpx 60rpx 60rpx 60rpx; font-weight: bold; .content { font-size: 22rpx; color: rgba(255, 255, 255, 1); line-height: 28rpx; font-weight: normal; } } .btn2 { margin-top: 24rpx; text-align: center; padding: 24rpx; font-size: 32rpx; color: rgba(1, 180, 197, 1); font-weight: bold; line-height: 44rpx; border-radius: 60rpx 60rpx 60rpx 60rpx; border: 1px solid #01b4c5; } .btn3 { margin-top: 22rpx; text-align: center; padding: 22rpx; font-size: 32rpx; color: rgba(0, 180, 197, 1); } } .dialog7 { position: relative; padding: 32rpx 32rpx; .close { position: absolute; top: 32rpx; right: 32rpx; font-size: 40rpx; color: #000; } .title { font-size: 36rpx; color: rgba(20, 21, 21, 1); font-weight: bold; text-align: center; } .sub-title { padding: 32rpx 0 16rpx; font-size: 32rpx; color: #141515; } .tags { display: flex; flex-wrap: wrap; gap: 20rpx; .tag { padding: 6rpx 44rpx; font-size: 32rpx; color: rgba(133, 133, 133, 1); line-height: 44rpx; background-color: #fff; border: 1px solid #f6f6f6; border-radius: 8rpx; background: #f6f6f6; &.active { background-color: #fff; border-color: rgba(1, 180, 197, 1); color: rgba(1, 180, 197, 1); } } &.tags1 { .tag { border-radius: 90rpx; } } } .submit { margin-top: 32rpx; padding: 22rpx; text-align: center; font-size: 32rpx; color: rgba(255, 255, 255, 1); line-height: 44rpx; background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%); border-radius: 84rpx; font-weight: bold; } }