diff --git a/src/api/index.js b/src/api/index.js index 7c1bdf0..6327f95 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -2,7 +2,7 @@ import axios from 'axios' // 创建axios实例 const api = axios.create({ - baseURL: import.meta.env.PROD ? 'https://meida-api.beefast.co/' : 'http://127.0.0.1:8000/', + baseURL: import.meta.env.PROD ? 'https://meida-api.beefast.co/' : 'https://meida-api.beefast.co/', timeout: 10000, headers: { 'Content-Type': 'application/json' diff --git a/src/views/TryonHistory.vue b/src/views/TryonHistory.vue index b6af9a9..2ee7851 100644 --- a/src/views/TryonHistory.vue +++ b/src/views/TryonHistory.vue @@ -16,29 +16,38 @@
-
+
穿搭效果 +
+ 🔍 +
-
+
{{ history.score }}分
+
+ 暂无评分 +
-
+

{{ history.comment }}

+
+

暂无评价

+

搭配来源

-
+
用户照片
-
+
上衣
-
+
下装
@@ -51,6 +60,14 @@
+ + +
@@ -61,6 +78,27 @@ import api from '../api' const histories = ref([]) const loading = ref(false) const error = ref(null) +const lightbox = ref({ + visible: false, + imgSrc: '' +}) + +// 打开大图查看 +const openLightbox = (imgSrc) => { + lightbox.value = { + visible: true, + imgSrc + } + // 阻止背景滚动 + document.body.style.overflow = 'hidden' +} + +// 关闭大图 +const closeLightbox = () => { + lightbox.value.visible = false + // 恢复背景滚动 + document.body.style.overflow = 'auto' +} // 获取试穿历史记录 const fetchHistories = async () => { @@ -104,6 +142,13 @@ const getScoreClass = (score) => { onMounted(() => { fetchHistories() + + // 添加ESC键关闭大图功能 + window.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && lightbox.value.visible) { + closeLightbox() + } + }) }) @@ -139,6 +184,11 @@ onMounted(() => { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } +.result-image { + position: relative; + cursor: pointer; +} + .result-image img { width: 100%; display: block; @@ -146,11 +196,34 @@ onMounted(() => { border-radius: 8px 8px 0 0; } +.image-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + transition: opacity 0.3s; +} + +.result-image:hover .image-overlay { + opacity: 1; +} + +.zoom-icon { + font-size: 24px; + color: white; +} + .history-details { padding: 15px; } -.score { +.score, .no-score { margin-bottom: 12px; } @@ -162,6 +235,16 @@ onMounted(() => { border-radius: 4px; } +.no-score span { + display: inline-block; + font-size: 16px; + font-weight: bold; + padding: 2px 8px; + border-radius: 4px; + color: #fff; + background-color: #555; +} + .score-excellent { color: #fff; background-color: #fe2c55; @@ -182,13 +265,21 @@ onMounted(() => { background-color: #b91c1c; } -.comment { +.comment, .no-comment { margin-bottom: 15px; line-height: 1.5; - color: #f0f0f0; font-size: 14px; } +.comment { + color: #f0f0f0; +} + +.no-comment { + color: #888; + font-style: italic; +} + .source-images h4 { margin-bottom: 10px; font-size: 14px; @@ -201,12 +292,34 @@ onMounted(() => { margin-bottom: 15px; } +.person-image, .top-image, .bottom-image { + cursor: pointer; + position: relative; + overflow: hidden; + border-radius: 4px; + border: 1px solid #333; +} + +.person-image:hover::after, .top-image:hover::after, .bottom-image:hover::after { + content: '🔍'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-size: 16px; + background-color: rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + .person-image img, .top-image img, .bottom-image img { width: 60px; height: 60px; object-fit: cover; - border-radius: 4px; - border: 1px solid #333; } .date { @@ -215,6 +328,43 @@ onMounted(() => { text-align: right; } +/* 图片放大查看 */ +.lightbox { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.lightbox-content { + position: relative; + max-width: 90%; + max-height: 90%; +} + +.lightbox-content img { + max-width: 100%; + max-height: 90vh; + object-fit: contain; +} + +.close-btn { + position: absolute; + top: -30px; + right: -30px; + background: none; + border: none; + color: white; + font-size: 36px; + cursor: pointer; +} + /* 响应式布局 */ @media (min-width: 576px) { .waterfall-container {