-
+
-
-
-
-
-
-
-
视频预览
-
- {{ formatDuration(currentTime) }} / {{ formatDuration(duration) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -396,15 +90,6 @@ onUnmounted(() => {
}
}
-.preview-container {
- position: relative;
- max-width: 90vw;
- max-height: 90vh;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
.video-preview-container {
position: relative;
max-width: 90vw;
@@ -417,10 +102,6 @@ onUnmounted(() => {
overflow: hidden;
}
-.video-preview-container.portrait {
- max-width: 60vw;
-}
-
.preview-close-btn {
position: absolute;
top: -50px;
@@ -445,178 +126,17 @@ onUnmounted(() => {
transform: scale(1.1);
}
-.image-preview-content {
- position: relative;
-}
-
-.preview-image {
- max-width: 100%;
- max-height: 80vh;
- border-radius: 8px;
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-}
-
-.video-content {
- position: relative;
- width: 100%;
- height: 100%;
-}
-
.preview-video {
- width: 100%;
- height: 100%;
- max-height: 80vh;
- object-fit: contain;
+ width: 90vw;
+ max-height: 85vh;
}
-.video-controls {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
- color: white;
- padding: 20px;
- transition: all 0.3s ease;
-}
-
-.controls-top {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
-}
-
-.video-title {
- font-size: 16px;
- font-weight: 600;
-}
-
-.video-info {
- font-size: 14px;
- opacity: 0.8;
-}
-
-.controls-bottom {
- display: flex;
- align-items: center;
- gap: 16px;
-}
-
-.control-btn {
- width: 40px;
- height: 40px;
- background: rgba(255, 255, 255, 0.2);
- border: none;
- border-radius: 50%;
- color: white;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 16px;
- transition: all 0.3s ease;
-}
-
-.control-btn:hover {
- background: rgba(255, 255, 255, 0.3);
- transform: scale(1.1);
-}
-
-.progress-container {
- flex: 1;
- margin: 0 16px;
-}
-
-.progress-bar {
- position: relative;
- height: 6px;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 3px;
- cursor: pointer;
-}
-
-.progress-fill {
- height: 100%;
- background: #4361ee;
- border-radius: 3px;
- transition: width 0.1s ease;
-}
-
-.progress-thumb {
- position: absolute;
- top: -4px;
- width: 14px;
- height: 14px;
- background: #4361ee;
- border-radius: 50%;
- transform: translateX(-50%);
- transition: left 0.1s ease;
-}
-
-.volume-container {
- width: 80px;
-}
-
-.volume-slider {
- width: 100%;
- height: 4px;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 2px;
- outline: none;
- cursor: pointer;
-}
-
-.volume-slider::-webkit-slider-thumb {
- appearance: none;
- width: 12px;
- height: 12px;
- background: #4361ee;
- border-radius: 50%;
- cursor: pointer;
-}
-
-.preview-actions,
-.video-actions {
- position: absolute;
- top: 20px;
- right: 60px;
- display: flex;
- gap: 12px;
-}
-
-.action-btn {
- width: 40px;
- height: 40px;
- background: rgba(255, 255, 255, 0.2);
- border: none;
- border-radius: 50%;
- color: white;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 16px;
- transition: all 0.3s ease;
-}
-
-.action-btn:hover {
- background: rgba(255, 255, 255, 0.3);
- transform: scale(1.1);
-}
-
-/* 响应式设计 */
@media (max-width: 768px) {
- .preview-container,
.video-preview-container {
max-width: 95vw;
max-height: 95vh;
}
- .video-preview-container.portrait {
- max-width: 95vw;
- }
-
.preview-close-btn {
top: -40px;
width: 36px;
@@ -624,35 +144,9 @@ onUnmounted(() => {
font-size: 16px;
}
- .video-controls {
- padding: 16px;
- }
-
- .controls-bottom {
- gap: 12px;
- }
-
- .control-btn {
- width: 36px;
- height: 36px;
- font-size: 14px;
- }
-
- .volume-container {
- width: 60px;
- }
-
- .preview-actions,
- .video-actions {
- top: 16px;
- right: 50px;
- gap: 8px;
- }
-
- .action-btn {
- width: 36px;
- height: 36px;
- font-size: 14px;
+ .preview-video {
+ width: 95vw;
+ max-height: 90vh;
}
}
diff --git a/apps/web-antd/src/views/business/chat/components/MessageBubble.vue b/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
index 72dd967c..4b901929 100644
--- a/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
+++ b/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
@@ -54,6 +54,7 @@ import previewMedia from '../composables/useMediaPreview.ts';
import { useThemeStore } from '../stores/theme.ts';
import { useUserStore as chatUseUserStore } from '../stores/user';
import AudioMessage from './AudioMessage.vue';
+import { XgVideoPlayer } from '#/components/video-player';
import PatientExperienceCard from '#/views/doctor/online-consultation/components/PatientExperienceCard.vue';
import FollowUpDrugAssistantCard from './FollowUpDrugAssistantCard.vue';
import ProductCard from '#/views/doctor/online-consultation/components/ProductCard.vue';
@@ -472,12 +473,11 @@ const getSexText = (sex) => {
class="video-message relative cursor-pointer"
@click="handlePreviewMedia(parsedContent, 'video')"
>
-
+ thumbnail
+ />