update
This commit is contained in:
aaron
parent
e4d9ce1f3b
commit
3396ece3ec
@ -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'
|
||||
|
||||
@ -16,29 +16,38 @@
|
||||
<div v-else class="waterfall-container">
|
||||
<div v-for="history in histories" :key="history.id" class="waterfall-item">
|
||||
<div class="history-card card">
|
||||
<div class="result-image">
|
||||
<div class="result-image" @click="openLightbox(history.completion_url)">
|
||||
<img :src="history.completion_url" alt="穿搭效果" />
|
||||
<div class="image-overlay">
|
||||
<span class="zoom-icon">🔍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="history-details">
|
||||
<div class="score">
|
||||
<div v-if="history.score" class="score">
|
||||
<span class="score-value" :class="getScoreClass(history.score)">{{ history.score }}分</span>
|
||||
</div>
|
||||
<div v-else class="no-score">
|
||||
<span>暂无评分</span>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<div v-if="history.comment" class="comment">
|
||||
<p>{{ history.comment }}</p>
|
||||
</div>
|
||||
<div v-else class="no-comment">
|
||||
<p>暂无评价</p>
|
||||
</div>
|
||||
|
||||
<div class="source-images">
|
||||
<h4>搭配来源</h4>
|
||||
<div class="image-row">
|
||||
<div class="person-image">
|
||||
<div class="person-image" @click="openLightbox(history.person_image_url)">
|
||||
<img :src="history.person_image_url" alt="用户照片" />
|
||||
</div>
|
||||
<div v-if="history.top_clothing_url" class="top-image">
|
||||
<div v-if="history.top_clothing_url" class="top-image" @click="openLightbox(history.top_clothing_url)">
|
||||
<img :src="history.top_clothing_url" alt="上衣" />
|
||||
</div>
|
||||
<div v-if="history.bottom_clothing_url" class="bottom-image">
|
||||
<div v-if="history.bottom_clothing_url" class="bottom-image" @click="openLightbox(history.bottom_clothing_url)">
|
||||
<img :src="history.bottom_clothing_url" alt="下装" />
|
||||
</div>
|
||||
</div>
|
||||
@ -51,6 +60,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片放大查看 -->
|
||||
<div v-if="lightbox.visible" class="lightbox" @click="closeLightbox">
|
||||
<div class="lightbox-content">
|
||||
<img :src="lightbox.imgSrc" alt="放大查看" />
|
||||
<button class="close-btn" @click.stop="closeLightbox">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user