<template>
|
<div class="main-layout">
|
<div class="row">
|
<!-- Left Sidebar, visible on medium and larger screens -->
|
<div class="col-md-3 d-none d-md-block p-3">
|
<h5 class="aside-title">所有产品</h5>
|
<el-menu :default-active="activeIndex" class="border-0 " @select="handleSelect" @open="handleOpen"
|
@close="handleClose">
|
<template v-for="item in menuItems" :key="item.index">
|
<el-sub-menu v-if="item.subMenu" :index="item.index">
|
<template #title>
|
<img v-if="item.icon && isUrl(item.icon)" :src="item.icon" class="img-round" />
|
<el-icon v-else class="mr-2">
|
<component :is="item.icon" />
|
</el-icon>
|
<span>{{ item.title }}</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item v-for="subItem in item.subMenu" :key="subItem.index"
|
:index="subItem.index" @click="handleSelectSubmenu(subItem)">
|
{{ subItem.title }}
|
</el-menu-item>
|
</el-menu-item-group>
|
</el-sub-menu>
|
|
<el-menu-item v-else :index="item.index">
|
<el-icon class="mr-2">
|
<component :is="item.icon" />
|
</el-icon>
|
<span>{{ item.title }}</span>
|
</el-menu-item>
|
</template>
|
</el-menu>
|
|
</div>
|
|
<div class="col-md-3 d-block d-md-none p-3" >
|
<el-drawer v-model="drawerVisible" title="所有产品" direction="ltr" size="250px">
|
<el-menu :default-active="activeIndex" class="border-0" @select="handleSelect" @open="handleOpen"
|
@close="handleClose">
|
<template v-for="item in menuItems" :key="item.index">
|
<el-sub-menu v-if="item.subMenu" :index="item.index">
|
<template #title>
|
<img v-if="item.icon && isUrl(item.icon)" :src="item.icon" class="img-round" />
|
<el-icon v-else class="mr-2">
|
<component :is="item.icon" />
|
</el-icon>
|
<span>{{ item.title }}</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item v-for="subItem in item.subMenu" :key="subItem.index"
|
:index="subItem.index" @click="handleSelectSubmenu(subItem)">
|
{{ subItem.title }}
|
</el-menu-item>
|
</el-menu-item-group>
|
</el-sub-menu>
|
|
<el-menu-item v-else :index="item.index">
|
<el-icon class="mr-2">
|
<component :is="item.icon" />
|
</el-icon>
|
<span>{{ item.title }}</span>
|
</el-menu-item>
|
</template>
|
</el-menu>
|
</el-drawer>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
<div class="col-12 col-md-9 p-3" style="overflow-y: auto; max-height: 100vh;" >
|
<!-- Upper Layer -->
|
<div class="mb-3">
|
<div class="border-b border-gray-200 p-1 text-center ">
|
<template v-if="pdfUrl">
|
<h1 class="text-3xl font-bold mb-2 cursor-pointer hover:text-blue-600 hover:underline text-black"
|
@click="openPdf">
|
{{ title }}
|
</h1>
|
<div class="flex justify-center items-center">
|
<PdfViewer :src="pdfUrl" :scale="1.0" :key="pdfUrl" class="w-full" />
|
</div>
|
</template>
|
|
<template v-else>
|
<h1 class="text-3xl font-bold mb-6 text-black">云游四方操作系统</h1>
|
<div class="row justify-content-center d-flex align-items-stretch p-1 ">
|
<!-- Left Image (1 column) -->
|
<div class="col-12 col-md-2 mb-4">
|
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景.png"
|
alt="图1" class="w-100 h-100 object-cover rounded-lg" />
|
</div>
|
|
<!-- Middle Image (3 columns) -->
|
<div class="col-12 col-md-8 mb-4">
|
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景2.png"
|
alt="图2" class="w-100 h-100 object-cover rounded-lg" />
|
</div>
|
|
<!-- Right Image (1 column) -->
|
<div class="col-12 col-md-2 mb-4">
|
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景图3.jpg"
|
alt="图3" class="w-100 h-100 object-cover rounded-lg" />
|
</div>
|
</div>
|
|
|
</template>
|
</div>
|
</div>
|
|
<!-- Lower Layer -->
|
<div class="mb-5">
|
<div class="text-start">
|
<h5>推荐产品</h5>
|
</div>
|
|
<div class="row d-none d-md-flex">
|
<div class="col-12 col-sm-6 col-md-4 mb-4" style="max-width: 280px"
|
v-for="(product, index) in products" :key="index">
|
<div class="card">
|
<!-- 图片部分 -->
|
<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; object-fit: cover;">
|
</div>
|
<div class="card-body d-flex flex-column">
|
<!-- 标题部分 -->
|
<h5 class="card-title mb-3" style="height: 50px;">{{ product.title }}</h5>
|
<!-- 内容部分 -->
|
<p class="card-text mb-3" v-html="product.desc" style="height: 80px;"></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="row d-block d-md-none">
|
<div class="justify-content-center" >
|
<div class="col-12 col-sm-6 col-md-4 mb-4 justify-content-center"
|
v-for="(product, index) in products" :key="index">
|
<div class="card ">
|
<!-- 图片部分 -->
|
<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; object-fit: cover;">
|
</div>
|
<div class="card-body d-flex flex-column">
|
<!-- 标题部分 -->
|
<h5 class="card-title mb-3" style="height: 50px;">{{ product.title }}</h5>
|
<!-- 内容部分 -->
|
<p class="card-text mb-3" v-html="product.desc" style="height: 80px;"></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
|
<!-- <button class="btn btn-primary rounded-circle floating-btn" @click="handleClick">
|
<i class="bi bi-list fs-3 floating-btn"></i>
|
</button> -->
|
<img :src="menuIcon" alt="icon"
|
style="width: 30px; height: 30px;" class="floating-btn d-block d-md-none" @click="handleClick" />
|
|
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref } from 'vue'
|
import { MenuItem, Products, ProductCenter } from '@/models/portalModels';
|
import PdfViewer from '@/components/pdf/PdfViewer.vue'
|
|
import menuIcon from '@/assets/product/menu3.png'
|
|
const drawerVisible = ref(true)
|
|
const handleClick = () => {
|
drawerVisible.value = !drawerVisible.value
|
}
|
|
const title = ref('')
|
const pdfUrl = ref('')
|
const curSubItem = ref<MenuItem>({} as MenuItem)
|
|
const activeIndex = ref('')
|
|
const menuItems: MenuItem[] = [
|
{
|
index: '1',
|
title: '工业信息化',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: "https://portal2.tos-cn-beijing.volces.com/portal/product-center/menu-icon/bi.svg",
|
subMenu: [
|
{
|
index: '1-1',
|
title: 'LIMS实验室管理系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/实验室管理系统.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/实验室管理系统.pdf',
|
},
|
{
|
index: '1-2',
|
title: 'TQS企业培训系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/TQS系统.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/企业培训系统.pdf',
|
},
|
{
|
index: '1-3',
|
title: 'CPTM企业能力管理系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/CPTM.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/企业人员技能培训系统.pdf',
|
},
|
{
|
index: '1-4',
|
title: 'JIT生产管理系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/JIT.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/生产管理系统.pdf',
|
},
|
],
|
},
|
{
|
index: '2',
|
title: 'SaaS平台',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: "https://portal2.tos-cn-beijing.volces.com/portal/product-center/menu-icon/SAAS.svg",
|
subMenu: [
|
{
|
index: '2-1',
|
title: 'ESMMS外部供应商管理系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/外部供应商管理系统.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/外部供应商管理系统.pdf',
|
},
|
{
|
index: '2-2',
|
title: 'S2B2B商城系统',
|
imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/S2B2B.png',
|
pdfUrl: '/pdf-proxy/portal/product-center/S2B2B商城系统.pdf',
|
},
|
],
|
},
|
{
|
index: '3',
|
title: 'C端',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: "https://portal2.tos-cn-beijing.volces.com/portal/product-center/menu-icon/C.svg",
|
subMenu: [
|
],
|
},
|
];
|
|
const products = ref<Products[]>([
|
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/外部供应商管理系统.png', title: '外部供应商管理系统', desc: '通过数字化整合上下游资源<br/>打通多级分销信息壁垒，助力供应商增效增收。' },
|
{ 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: '解决制造业、汽车业培训痛点。它涵盖多个模块，具备人员信息管理、培训管理、岗位技能培训管理等功能，能实现培训数字...' },
|
// { imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/外部供应商管理系统.png', title: '外部供应商管理系统', desc: '破信息壁垒，实现数据共享，自动化处理订单，增强沟通与生产跟踪。系统具备多模块功能，涵盖用户、订单、工单等管理，支持移动端扫码记录工时...' },
|
// { imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/JIT.png', title: 'JIT', desc: '面向工业领域的生产管理系统，旨在减少库存和浪费、提升生产效率。它针对数据出错、库存积压等行业痛点，提供数字化管理、自动化检测等解决方案。系统具备物料管理、工艺路线管理等多种功能，实现生产全过程管控与高效运营' },
|
// { imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/CPTM.png', title: 'CPTM', desc: '优化人力开发流程，助力企业发展。它解决了企业培训管理缺乏系统化、报考流程效率低等问题，具备集成平台管理、自动化流程、技能评估等功能，涵盖培训管理、人员信息管理等模块，推动员工和团队能力提升。' },
|
|
])
|
|
const handleOpen = (key: string, keyPath: string[]) => {
|
console.log(key, keyPath);
|
};
|
|
const handleClose = (key: string, keyPath: string[]) => {
|
console.log(key, keyPath);
|
};
|
|
const handleSelectSubmenu = (item: MenuItem) => {
|
curImg.value = item.imgUrl
|
curSubItem.value = item
|
activeIndex.value = item.index
|
console.log(item)
|
showPdf(item)
|
};
|
|
const handleSelect = (index: String) => {
|
// curImg.value = item.imgUrl
|
// curSubItem.value = item
|
// activeIndex.value = item.index
|
// console.log(item)
|
// showPdf(item.pdfUrl)
|
};
|
|
const curImg = ref('https://portal2.tos-cn-beijing.volces.com/portal/bg.png');
|
|
|
const showPdf = (item: MenuItem) => {
|
console.log("MenuItem", item)
|
// 转换 MenuItem -> ProductCenter
|
const product: ProductCenter = {
|
url: item.pdfUrl,
|
name: item.title,
|
desc: item.index
|
}
|
pdfUrl.value = item.pdfUrl
|
title.value = item.title
|
// sessionStorage.setItem('pdfItem', JSON.stringify(product))
|
// window.open('/pdf-preview', '_blank')
|
}
|
|
const openPdf = () => {
|
// 转换 MenuItem -> ProductCenter
|
const product: ProductCenter = {
|
url: curSubItem.value.pdfUrl,
|
name: curSubItem.value.title,
|
desc: curSubItem.value.index
|
}
|
|
sessionStorage.setItem('pdfItem', JSON.stringify(product))
|
window.open('/pdf-preview', '_blank')
|
}
|
const isUrl = (url: string): boolean => {
|
return /^https?:\/\//.test(url)
|
}
|
|
</script>
|
|
<style>
|
/* .el-menu .el-menu-item.is-active {
|
font-weight: bold;
|
color: #ffd04b;
|
} */
|
.el-main {
|
--el-main-padding: 0px;
|
box-sizing: border-box;
|
display: block;
|
flex: 1;
|
flex-basis: auto;
|
overflow: auto;
|
padding: var(--el-main-padding);
|
}
|
|
.img-round {
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
padding: 5px;
|
object-fit: contain;
|
}
|
</style>
|
|
<style scoped>
|
.floating-btn {
|
position: fixed;
|
top: 50%;
|
left: 0;
|
/* transform: translate(-50%, -50%); */
|
z-index: 9999;
|
/* padding: 15px; */
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
background-color: #F8F9FA;
|
border-radius: 10px;
|
}
|
</style>
|
