diff --git a/pages/message/chat.scss b/pages/message/chat.scss index a5f27fb..11736c7 100644 --- a/pages/message/chat.scss +++ b/pages/message/chat.scss @@ -16,6 +16,76 @@ $primary-color: #0877F1; background-color: #f5f5f5; } +/* 患者信息栏样式 */ +.patient-info-bar { + position: relative; + background: #fff; + border-bottom: 1rpx solid #f0f0f0; + padding: 20rpx 32rpx; + z-index: 10; + flex-shrink: 0; /* 防止被压缩 */ +} + +.patient-info-content { + display: flex; + align-items: center; + justify-content: space-between; +} + +.patient-basic-info { + display: flex; + align-items: center; + gap: 16rpx; + flex: 1; + min-width: 0; /* 允许文字截断 */ +} + +.patient-name { + font-size: 32rpx; + color: #333; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200rpx; +} + +.patient-detail { + font-size: 28rpx; + color: #999; + white-space: nowrap; + flex-shrink: 0; +} + +.patient-detail-btn { + display: flex; + align-items: center; + gap: 4rpx; + padding: 12rpx 24rpx; + background: linear-gradient(270deg, #1b5cc8 2.26%, #0877f1 94.33%); + border-radius: 40rpx; + transition: all 0.2s; + flex-shrink: 0; /* 防止按钮被压缩 */ +} + +.patient-detail-btn:active { + opacity: 0.8; + transform: scale(0.98); +} + +.detail-btn-text { + font-size: 26rpx; + color: #fff; + font-weight: 500; +} + +.arrow-icon { + font-size: 32rpx; + color: #fff; + font-weight: 600; + line-height: 1; +} + .chat-content { flex: 1; box-sizing: border-box; diff --git a/pages/message/components/message-header.vue b/pages/message/components/message-header.vue new file mode 100644 index 0000000..1cf3a52 --- /dev/null +++ b/pages/message/components/message-header.vue @@ -0,0 +1,317 @@ + + + + + diff --git a/pages/message/index.vue b/pages/message/index.vue index 210933e..5357584 100644 --- a/pages/message/index.vue +++ b/pages/message/index.vue @@ -1,5 +1,18 @@