394 lines
8.2 KiB
Vue
394 lines
8.2 KiB
Vue
<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>
|