Init commit.
This commit is contained in:
sleepwithoutbz
393
src/components/ProductDetail.vue
Normal file
393
src/components/ProductDetail.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<section class="two-column-section">
|
||||
<!-- 左侧产品名称与产品图片 -->
|
||||
<div v-if="imageUrl" class="image-container">
|
||||
<h3 class="image-title">{{ imagetitle }}</h3>
|
||||
<img :src="imageUrl" :alt="imageAlt" class="section-image" />
|
||||
</div>
|
||||
|
||||
<!-- 右侧产品参数 -->
|
||||
<div class="product_details">
|
||||
<RowContent
|
||||
v-for="(item, index) in detailList"
|
||||
:key="index"
|
||||
:first-part="item.key"
|
||||
:second-part="item.value"
|
||||
/>
|
||||
<!-- 右侧视频播放与手册下载 -->
|
||||
<p v-if="ad" class="text1">{{ ad }}</p>
|
||||
<p class="text2">
|
||||
<a class="text2-intro"> {{ info }} </a>
|
||||
<br />
|
||||
<button
|
||||
v-for="videoUrl in videoUrls"
|
||||
:key="videoUrl"
|
||||
class="video-btn"
|
||||
@click="
|
||||
showVideo = true,
|
||||
curVideoUrl = videoUrl
|
||||
"
|
||||
>
|
||||
{{ $t(`operation.watch_video_learn_more`) }}
|
||||
<img src="/images/camera.png" alt="Video" class="video_icon" />
|
||||
</button>
|
||||
<button class="manual-btn" @click="downloadManual">
|
||||
{{ $t(`operation.download_manual`) }}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<teleport to="body">
|
||||
<div v-if="showVideo" class="video-modal-overlay" @click.self="showVideo = false">
|
||||
<div class="video-modal-content">
|
||||
<button class="close-btn" @click="showVideo = false">×</button>
|
||||
|
||||
<video controls autoplay webkit-playsinline>
|
||||
<source :src="curVideoUrl" type="video/mp4" />
|
||||
您的浏览器不支持视频播放。
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, ref } from 'vue'
|
||||
import RowContent from './RowContent.vue'
|
||||
import type { PropType } from 'vue'
|
||||
import type { DetailItem } from '@/types/product'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const curVideoUrl = ref('')
|
||||
|
||||
const props = defineProps({
|
||||
videoUrls: {
|
||||
type: Array as PropType<string[]>,
|
||||
required: true,
|
||||
},
|
||||
detailList: {
|
||||
type: Array as PropType<DetailItem[]>,
|
||||
required: false,
|
||||
default: () => [],
|
||||
},
|
||||
imagetitle: { type: String, required: false },
|
||||
ad: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
info: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
imageUrl: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
imageAlt: {
|
||||
type: String,
|
||||
default: 'Section image',
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const showVideo = ref(false)
|
||||
|
||||
// 下载中英文手册
|
||||
const { locale } = useI18n()
|
||||
const downloadManual = () => {
|
||||
const link = document.createElement('a')
|
||||
link.href = '/manuals/' + props.imagetitle + '.pdf'
|
||||
link.download = (locale.value === 'zh' ? '手册' : 'Manual') + '.pdf'
|
||||
link.click()
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 观看视频按钮样式 */
|
||||
.video-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 24px;
|
||||
/* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
|
||||
background: rgba(255, 255, 255, 0);
|
||||
color: rgb(0, 0, 0);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 15px;
|
||||
box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
|
||||
.video-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(106, 17, 203, 0.3);
|
||||
}
|
||||
.video-modal-overlay {
|
||||
display: none; /* 默认隐藏 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 视频按钮图标 */
|
||||
.video_icon {
|
||||
padding-left: 5px;
|
||||
width: 20px;
|
||||
/* height: 20px; */
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* 下载手册按钮样式 */
|
||||
.manual-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 24px;
|
||||
/* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
|
||||
background: rgba(255, 255, 255, 0);
|
||||
color: rgb(0, 0, 0);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
.manual-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(106, 17, 203, 0.3);
|
||||
}
|
||||
.manual-modal-overlay {
|
||||
display: none; /* 默认隐藏 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.video-modal-content {
|
||||
height: 80%; /* 屏幕一半高度 */
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 视频全屏充满弹窗 */
|
||||
.video-modal-content video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 关闭按钮 */
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
color: #2c3e50;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
h1:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 双栏布局组件样式 */
|
||||
.two-column-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 3rem;
|
||||
padding: 30px;
|
||||
/* background: white; */
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||||
margin: 20px 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.two-column-section:hover {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.product_details {
|
||||
flex: 0.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
flex: 0.35;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
font-style: italic;
|
||||
font-size: 1.5em;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
padding: 10px 20px;
|
||||
/* background: linear-gradient(135deg, rgba(4, 134, 204, 0.1) 0%, rgba(3, 15, 110, 0.1) 100%); */
|
||||
background: linear-gradient(90deg, rgb(224, 242, 254, 0.5) 0%, rgba(167, 212, 255, 0.5) 100%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.section-image {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.section-image:hover {
|
||||
transform: scale(1.03);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.two-column-section.reverse-layout {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.text1 {
|
||||
font-size: 1.1em;
|
||||
color: #4a5568;
|
||||
line-height: 1.7;
|
||||
padding: 15px;
|
||||
background: #f8f9ff;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #6a11cb;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
font-size: 1.4em;
|
||||
/* color: #2c3e50; */
|
||||
/* font-weight: 600; */
|
||||
padding: 15px;
|
||||
max-width: 1000px;
|
||||
/* background: linear-gradient(135deg, rgb(242, 242, 242) 0%, rgb(108, 185, 254) 100%); */
|
||||
/* background: rgba(108, 186, 254, 0.5); */
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.text2-intro {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.4em;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
padding: 15px;
|
||||
max-width: 1000px;
|
||||
/* background: linear-gradient(135deg, rgb(242, 242, 242) 0%, rgb(108, 185, 254) 100%); */
|
||||
background: rgba(108, 186, 254, 0.5);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 968px) {
|
||||
.two-column-section {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.two-column-section.reverse-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product_details,
|
||||
.image-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
order: -1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.two-column-section {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user