<template>
|
<div class="home-container">
|
<!-- 轮播图 -->
|
<div id="carouselExampleCaptions" class="carousel slide">
|
<div class="carousel-inner" :style="{ height: carouselHeight }">
|
<div v-for="(item, index) in items" :key="index"
|
:class="['carousel-item', { active: index === currentIndex }]">
|
<img :src="item.url" class="img-fluid" :style="{ height: carouselHeight }" :alt="item.title">
|
<div
|
class="carousel-caption d-block d-md-none other-div-sm d-flex align-items-center justify-content-center">
|
{{ item.title }} >
|
</div>
|
</div>
|
<div class="other-divs d-none d-md-flex justify-content-center align-items-center w-100">
|
<div class="row d-flex flex-wrap" style="width: 80%;">
|
<div v-for="(item, index) in items" :key="index" class="col">
|
<!-- <div :class="['other-div', { 'active-div': index === currentIndex }]"
|
:style="{ backgroundColor: index === currentIndex ? 'yellow' : 'transparent' }"> -->
|
<div :class="[
|
'other-div',
|
|
'd-flex',
|
'flex-column',
|
'justify-content-between',
|
index === currentIndex ? 'active-div' : ''
|
]">
|
<p class="m-2">{{ item.title }} > </p>
|
<div style="display: flex; flex-direction: column;">
|
<p> {{ item.content }}</p>
|
<p> <button class="btn btn-primary btn-sm">查看详情</button></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="mx-auto w-100 d-flex flex-column align-items-center p-3">
|
<div class="our-products-title mt-1 mt-md-3 w-100 p-2">
|
<h1 class="fs-3 fs-md-2 fs-lg-1">我们的产品</h1>
|
</div>
|
<div style="width: 70%; margin: 0 auto;" class="d-none d-md-flex">
|
<div id="carouselExample" class="carousel slide w-100 " data-bs-ride="carousel"
|
data-bs-interval="3000">
|
<div class="carousel-inner">
|
<div :class="['carousel-item', { active: groupIndex === productGroupsIndex }]"
|
v-for="(group, groupIndex) in productGroups" :key="groupIndex">
|
<div class="row">
|
<div class="col" v-for="(product, productIndex) in group.products" :key="productIndex">
|
<div class="card">
|
<div class="card-body d-flex flex-column">
|
<!-- 标题部分 -->
|
<h5 class="card-title mb-3" style="width: 100%; height: 50px;">{{
|
product.title
|
}}</h5>
|
<!-- 内容部分 -->
|
<p class="card-text mb-3" v-html="product.desc"
|
style="width: 100%; height: 80px;"></p>
|
</div>
|
<!-- 图片部分 -->
|
<div class="d-flex justify-content-center p-2">
|
<img :src="product.imgUrl" class="card-img-top" :alt="product.title"
|
style="width: 100%; height: 150px;">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
|
data-bs-slide="prev">
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
<span class="visually-hidden">Previous</span>
|
</button>
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
|
data-bs-slide="next">
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
<span class="visually-hidden">Next</span>
|
</button>
|
</div>
|
</div>
|
|
<div style="width: 60%; margin: 0 auto; height: 300px;" class="d-block d-md-none ">
|
<div id="carouselExampleMin" class="carousel slide " data-bs-ride="carousel" data-bs-interval="3000">
|
<div class="carousel-inner">
|
<div :class="['carousel-item', { active: index === productIndex }]"
|
v-for="(product, index) in allProducts" :key="index">
|
<div class="card">
|
<div class="card-body d-flex flex-column">
|
<!-- 标题部分 -->
|
<h5 class="card-title mb-3" style="width: 100%;">{{ product.title }}
|
</h5>
|
<!-- 内容部分 -->
|
<p class="card-text mb-3" v-html="product.desc" style="width: 100%;">
|
</p>
|
</div>
|
<!-- 图片部分 -->
|
<div class="d-flex justify-content-center p-2">
|
<img :src="product.imgUrl" class="card-img-top" :alt="product.title"
|
style="width: 100%; height: 100px;">
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleMin"
|
data-bs-slide="prev">
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
<span class="visually-hidden">Previous</span>
|
</button>
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleMin"
|
data-bs-slide="next">
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
<span class="visually-hidden">Next</span>
|
</button>
|
</div>
|
</div>
|
|
</div>
|
|
<!-- 公司相关信息 -->
|
<div class="w-100" >
|
<div class="row flex-md-nowrap">
|
<!-- 第一列：占1份 -->
|
<div class="col-12 col-md-3 text-center text-md-left">
|
<!-- 产品中心 -->
|
<div class="text-center my-5 text-dark fs-4">产品中心</div>
|
<!-- <ul class="list-unstyled m-1 text-start"></ul> -->
|
<ul class="list-unstyled m-1">
|
<li v-for="(item, index) in ProductCenters" :key="index" class="mb-2">
|
<a href="javascript:void(0);" class="text-dark text-decoration-none fs-5"
|
@click.prevent="openPdf(item)">
|
{{ item.name }}
|
</a>
|
</li>
|
</ul>
|
</div>
|
|
<!-- 第二列：占3份 -->
|
<div class="col-12 col-md-6 text-center text-md-left">
|
<!-- 合作公司图片 -->
|
<div class="text-center my-5 text-dark fs-4">合作过的客户</div>
|
<div class="d-flex flex-wrap justify-content-center gap-4">
|
<img v-for="(item, index) in cooperativeClients" :src="item.url" :key="index" class="img-fluid"
|
style="width: 80px; height: 80px; object-fit: contain;" />
|
</div>
|
</div>
|
|
<!-- 第三列：占1份 -->
|
<div id="third-other" class="col-12 col-md-3 text-center text-md-left">
|
<!-- 公司信息 -->
|
<div class="text-center my-5 text-dark fs-4">公司信息</div>
|
<div class="container text-center">
|
<!-- 第一行：Logo + 名称 + 简介 -->
|
<div class="d-flex flex-column align-items-center mb-4">
|
<div class="d-flex align-items-center gap-2">
|
<img :src="companyInfo.logo" alt="云游四方" class="img-fluid"
|
style="width: 48px; height: 48px; object-fit: contain;" />
|
<span class="fs-4 fw-semibold">{{ companyInfo.name }}</span>
|
</div>
|
<div class="fs-5 text-secondary mt-2" style="max-width: 600px;">
|
{{ companyInfo.desc }}
|
</div>
|
</div>
|
|
<!-- 第二行：地址 -->
|
<div class="d-flex justify-content-center mb-4">
|
<span class="fs-5 text-dark">地址：{{ companyInfo.address }}</span>
|
</div>
|
|
<!-- 第三行：二维码 -->
|
<div class="row justify-content-center g-4">
|
<div class="col-auto d-flex flex-column align-items-center"
|
v-for="(item, index) in companyInfo.qrCodeList" :key="index">
|
<img :src="item.url" alt="云游四方" class="img-fluid mb-2"
|
style="width: 80px; height: 80px; object-fit: cover;" />
|
<span class="text-muted small">{{ item.name }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
<el-backtop :right="20" :bottom="50" style="width: 30px; height: 30px;" />
|
|
<!-- 悬浮按钮 -->
|
<div class="float-buttons">
|
<el-popover :trigger="isMobile ? 'click' : 'hover'" placement="left">
|
|
<div class="j-a-c">
|
<img :src="companyInfo.wechat" alt="微信二维码" class="popover-img"
|
style="width: 100px; height: 100px;" />
|
</div>
|
<template #reference>
|
<div class="j-a-c">
|
<img src="https://portal2.tos-cn-beijing.volces.com/portal/wechat.png" alt="微信"
|
class="xuanfu" />
|
</div>
|
|
</template>
|
</el-popover>
|
|
<el-popover :trigger="isMobile ? 'click' : 'hover'" placement="left">
|
<p>13862676702</p>
|
<template #reference>
|
<img src="https://portal2.tos-cn-beijing.volces.com/portal/phone.png" alt="电话" class="xuanfu" />
|
</template>
|
</el-popover>
|
</div>
|
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref, onMounted, onBeforeUnmount ,nextTick} from 'vue'
|
import { CarouselItem, CooperativeClient, ProductCenter, CompanyInfo, Products, ProductGroup } from '@/models/portalModels';
|
import { useRoute, useRouter } from 'vue-router';
|
|
const route = useRoute()
|
const router = useRouter();
|
|
// 创建数据列表
|
const items = ref<CarouselItem[]>([
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/bg/bg2.png', title: '专注数字化定制服务', content: '为企业提供一站式解决方案，赋能行业', link: '', fontColor: '#000000' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/bg/bg3.png', title: '深入研发软件产品', content: '定制创新型的软件产品', link: '', fontColor: '#000000' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/bg/bg4.png', title: '智能化解决方案', content: '为企业提供数字化和智能化转型及全球化服务', link: '', fontColor: '#FFFFFF' },
|
|
|
// {url:'https://portal2.tos-cn-beijing.volces.com/portal/bg.png', title:'统一认证', content:'统一身份认证平台'},
|
// {url:'https://portal2.tos-cn-beijing.volces.com/portal/bg.png', title:'数据管理', content:'数据管理中心平台'}
|
]);
|
|
const currentIndex = ref(0);
|
|
// 定时任务的引用
|
let intervalId: number | undefined;
|
const updateIndex = () => {
|
if (currentIndex.value + 1 >= items.value.length) {
|
currentIndex.value = 0
|
} else {
|
currentIndex.value = currentIndex.value + 1
|
}
|
|
};
|
|
const productIndex = ref(0);
|
|
// 定时任务的引用
|
let productIntervalId: number | undefined;
|
const updateProductIndex = () => {
|
if (productIndex.value + 1 >= allProducts.length) {
|
productIndex.value = 0
|
} else {
|
productIndex.value = productIndex.value + 1
|
}
|
|
};
|
|
const productGroupsIndex = ref(0);
|
let productGroupsIntervalId: number | undefined;
|
const updateProductGroupsIndex = () => {
|
if (productGroupsIndex.value + 1 >= productGroups.value.length) {
|
productGroupsIndex.value = 0
|
} else {
|
productGroupsIndex.value = productGroupsIndex.value + 1
|
}
|
|
};
|
|
|
|
let carouselHeight = ref('');
|
// 监听窗口大小变化
|
const updateCarouselHeight = () => {
|
const isMobile = window.innerWidth < 768;
|
if (!isMobile) {
|
// 非手机屏幕：设置高度为视口高度减去 62px
|
carouselHeight.value = `${window.innerHeight - 62}px`;
|
} else {
|
// 手机屏幕：保持默认自适应行为
|
carouselHeight.value = '';
|
}
|
};
|
|
const isMobile = ref<boolean>(false) //
|
|
// 初始化时设置高度
|
onMounted(() => {
|
|
updateCarouselHeight();
|
window.addEventListener('resize', updateCarouselHeight);
|
|
intervalId = window.setInterval(updateIndex, 2000); // 每 1 秒执行一次
|
|
productIntervalId = window.setInterval(updateProductIndex, 2000); // 每 1 秒执行一次
|
|
productGroupsIntervalId = window.setInterval(updateProductGroupsIndex, 2000); // 每 1 秒执行一次
|
|
|
isMobile.value =
|
'ontouchstart' in window ||
|
navigator.userAgent.toLowerCase().includes('mobi')
|
|
});
|
|
// 清理事件监听
|
onBeforeUnmount(() => {
|
window.removeEventListener('resize', updateCarouselHeight);
|
// 清理定时任务
|
if (intervalId) {
|
window.clearInterval(intervalId);
|
}
|
if (productIntervalId) {
|
window.clearInterval(productIntervalId);
|
}
|
|
if (productGroupsIntervalId) {
|
window.clearInterval(productGroupsIntervalId);
|
}
|
});
|
|
var carouselFontColor = ref<string>('#FFFFFF');
|
|
const cooperativeClients = ref<CooperativeClient[]>([
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/c29.png', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/c34.png', name: '图片2', desc: '图片2' },
|
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/FLOWSERVE.jpg', name: '图片1', desc: '图片1' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/GF.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/JIT.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/MODULA.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/Novelis.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/orbotech.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/PHILIPS.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/Tool Supplier.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/博世.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/福瑞泰克.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/华域视觉.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/昆山百创.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/昆山交运.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/立荣电子.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/联电.jpg', name: '图片2', desc: '图片2' },
|
{ url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/亚恒科技.jpg', name: '图片2', desc: '图片2' },
|
// { url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/长安民生物流.jpg', name: '图片2', desc: '图片2' },
|
// { url: 'https://portal2.tos-cn-beijing.volces.com/portal/customers/中国赛宝.jpg', name: '图片2', desc: '图片2' },
|
// {url:'https://portal2.tos-cn-beijing.volces.com/portal/customers/c39.png', name:'图片2', desc:'图片2'},
|
// {url:'https://portal2.tos-cn-beijing.volces.com/portal/customers/c40.png', name:'图片2', desc:'图片2'},
|
])
|
|
// 新增产品组数据
|
const productGroups = ref<ProductGroup[]>([
|
{
|
products: [
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/S2B2B.png', title: 'S2B2B商城系统', desc: '通过数字化整合上下游资源<br/>打通多级分销信息壁垒，助力供应商增效增收。' },
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/实验室管理系统.png', title: 'LIMS实验室管理系统', desc: '聚焦汽车零部件质检行业<br/>实现委托单全流程数字化、设备智能管控、质检数据一体化管理，提质增效' },
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/TQS系统.png', title: 'TQS企业培训系统', desc: '集成人员信息、培训与岗位<br/>构建制造业/汽车业数字化培训闭环，降本增效' },
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/外部供应商管理系统.png', title: '外部供应商管理系统', desc: '实现数据共享与订单自动化<br/>集成用户/工单管理模块，支持移动扫码追踪生产' }
|
]
|
},
|
{
|
products: [
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/JIT.png', title: 'JIT生产管理系统', desc: '以数字化精准管控<br/>动态优化工艺路线，实现全流程自动化' },
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/CPTM.png', title: '企业能力管理系统', desc: '解决企业培训碎片化<br/>驱动团队能力跃升' },
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/SZLS.png', title: '数字孪生', desc: '3D可视化建模<br/>实时监控生产现场' },
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/OTA.png', title: '远程固件升级OTA系统', desc: '与MES数据实时同步<br/>自动执行升级计划' },
|
]
|
}
|
]);
|
|
|
// 遍历出所有产品列表
|
const getAllProducts = () => {
|
return productGroups.value.flatMap(group => group.products);
|
}
|
const allProducts = getAllProducts();
|
|
|
const ProductCenters = ref<ProductCenter[]>([
|
{ url: '/pdf-proxy/portal/product-center/实验室管理系统.pdf', name: 'LIMS实验室管理系统', desc: 'LIMS实验室管理系统' },
|
{ url: '/pdf-proxy/portal/product-center/外部供应商管理系统.pdf', name: 'ESMMS外部供应商管理系统', desc: 'ESMMS外部供应商管理系统' },
|
{ url: '/pdf-proxy/portal/product-center/企业培训系统.pdf', name: 'TQS企业培训系统', desc: 'TQS企业培训系统' },
|
{ url: '/pdf-proxy/portal/product-center/S2B2B商城系统.pdf', name: 'S2B2B商城系统', desc: 'S2B2B商城系统' },
|
{ url: '/pdf-proxy/portal/product-center/生产管理系统.pdf', name: 'JIT生产管理系统', desc: 'JIT生产管理系统' },
|
{ url: '/pdf-proxy/portal/product-center/企业人员技能培训系统.pdf', name: 'CPTM企业能力管理系统', desc: 'CPTM企业能力管理系统' },
|
])
|
|
|
const companyInfo = ref<CompanyInfo>({
|
logo: "https://portal2.tos-cn-beijing.volces.com/portal/logo.png",
|
name: "云游四方",
|
desc: "专注于智能化解决方案",
|
address: "江苏省苏州市虎丘区华云路1号桑田岛科创园",
|
wechat: "https://portal2.tos-cn-beijing.volces.com/portal/company-info/联系微信.png",
|
phoneHotList: ["400-123-4567", "010-88889999"],
|
phoneSaleAfterList: ["400-987-6543", "010-66667777"],
|
qrCodeList: [
|
{ url: "https://portal2.tos-cn-beijing.volces.com/portal/company-info/服务号.jpg", name: "服务号" },
|
{ url: "https://portal2.tos-cn-beijing.volces.com/portal/company-info/联系微信.png", name: "联系微信" },
|
]
|
});
|
|
|
// const openPdf = (item:ProductCenter) => {
|
// const encoded = encodeURIComponent(item.url)
|
// window.open(`/pdf-preview?url=${encoded}`, '_blank')
|
// }
|
|
const openPdf = (item: ProductCenter) => {
|
sessionStorage.setItem('pdfItem', JSON.stringify(item))
|
window.open('/pdf-preview', '_blank')
|
}
|
|
const handleProductButtonClick = (url: String) => {
|
console.log(url)
|
}
|
|
const showWeChat = ref(false)
|
const showPhone = ref(false)
|
|
</script>
|
|
<style scoped>
|
.carousel-container {
|
height: calc(100vh - 62px);
|
/* 视口高度减去62px */
|
}
|
</style>
|
|
<style scoped>
|
.carousel-inner {
|
position: relative;
|
}
|
|
.carousel-item {
|
height: auto;
|
}
|
|
img {
|
width: 100%;
|
height: auto;
|
object-fit: cover;
|
}
|
|
.other-divs {
|
position: absolute;
|
width: 100%;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
border-radius: 20px;
|
|
/* Optional: semi-transparent background */
|
}
|
|
.other-div {
|
text-align: center;
|
color: white;
|
padding: 5px;
|
/* background-color: transparent; */
|
background-color: rgba(128, 128, 128, 0.5);
|
/* 灰色透明背景 */
|
border-radius: 20px;
|
}
|
|
.other-div-sm {
|
text-align: center;
|
color: white;
|
padding: 5px;
|
background-color: rgba(2, 125, 180, 0.5);
|
border-radius: 20px;
|
}
|
|
.active-div {
|
background-color: rgba(2, 125, 180, 0.5);
|
/* #027DB4 + 50% 透明度 */
|
/* transform: scale(1.05); */
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
transition: all 0.3s ease;
|
border-radius: 20px;
|
}
|
|
.cooperation-img {
|
width: 100px;
|
height: 100px;
|
object-fit: contain;
|
/* object-fit: cover; */
|
margin: 5px;
|
}
|
|
/* Adjusting for small screen sizes */
|
@media (max-width: 576px) {
|
.other-divs .col-4 {
|
flex: 1;
|
/* Each item takes up equal space */
|
}
|
}
|
</style>
|
|
<style scoped>
|
.home-container {
|
overflow-x: hidden;
|
}
|
</style>
|
|
<style scoped>
|
.popover {
|
max-width: none;
|
background-color: white;
|
border: 1px solid #ccc;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
}
|
</style>
|
<style scoped>
|
.float-buttons {
|
position: fixed;
|
right: 20px;
|
bottom: 100px;
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
.xuanfu {
|
width: 30px;
|
height: 30px;
|
}
|
</style>
|
