<template>
|
<div class="container">
|
<el-container>
|
<el-container>
|
<el-aside class="aside">
|
<h5 class="aside-title">所有产品</h5>
|
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
<template v-for="item in menuItems" :key="item.index" @click="handleSelect(item)">
|
<el-sub-menu v-if="item.subMenu" :index="item.index">
|
<template #title>
|
<el-icon>
|
<component :is="item.icon" />
|
</el-icon>
|
<span>
|
<!-- {{ item.title }} -->
|
<el-link :underline="false" :href="item.pdfUrl" target="_blank"><span
|
class="f12">{{ item.title }}</span></el-link></span>
|
</template>
|
<el-menu-item v-for="subItem in item.subMenu" :key="subItem.index" :index="subItem.index"
|
@click="handleSelect(subItem)">
|
<!-- {{ subItem.title }} -->
|
<el-link :underline="false" :href="subItem.pdfUrl" target="_blank"><span
|
class="f12">{{ subItem.title }}</span></el-link>
|
</el-menu-item>
|
</el-sub-menu>
|
<el-menu-item v-else :index="item.index">
|
<el-icon>
|
<component :is="item.icon" />
|
</el-icon>
|
<span>{{ item.title }}</span>
|
</el-menu-item>
|
</template>
|
</el-menu>
|
</el-aside>
|
<el-main style="width: 80vh;overflow: hidden;">
|
<div class="main-up">
|
<!-- <img :src="curImg" class="main-image" alt=""> -->
|
<div style="width: 100%; text-align: center;"><h1 style="font-weight: 600;color: #15A2E9 ;font-size: 20px;">云游四方操作系统</h1></div>
|
<div style="width: 100%;height: 90%;">
|
<img src="http://192.168.1.201:9000/portal/product-center/产品背景.png" alt="" style="width: 15%; height: 90%;margin: 10px;">
|
<img src="http://192.168.1.201:9000/portal/product-center/产品背景2.png" alt="" style="width: 60%; height: 90%;margin: 10px;">
|
<img src="http://192.168.1.201:9000/portal/product-center/产品背景图3.jpg" alt="" style="width: 15%; height: 90%;margin: 10px;">
|
</div>
|
</div>
|
<div class="main-down">
|
<h5 class="section-title">推荐产品</h5>
|
<div class="card-container">
|
<el-card v-for="(item, index) in products" :key="index" class="card">
|
<img :src="item.imgUrl" class="card-image" />
|
<div class="card-content">
|
<span class="card-title">{{ item.title }}</span>
|
</div>
|
<div class="card-content">
|
<span class="card-description">{{ item.desc }}</span>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from 'vue'
|
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
|
import { MenuItem, Products } from '@/models/portalModels';
|
|
|
|
const menuItems: MenuItem[] = [
|
{
|
index: '1',
|
title: '工业信息化',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: Location,
|
subMenu: [
|
{
|
index: '1-1',
|
title: '实验室管理系统',
|
imgUrl: 'http://192.168.1.201:9000/portal/product-our/实验室管理系统.png',
|
pdfUrl: 'http://192.168.1.201:9000/portal/product-center/LIMS系统介绍方案.pdf',
|
},
|
{
|
index: '1-2',
|
title: 'TQS系统',
|
imgUrl: 'http://192.168.1.201:9000/portal/product-our/TQS系统.png',
|
pdfUrl: 'http://192.168.1.201:9000/portal/product-center/TQS系统介绍与解决方案.pdf',
|
},
|
{
|
index: '1-3',
|
title: 'CPTM系统',
|
imgUrl: 'http://192.168.1.201:9000/portal/product-our/CPTM.png',
|
pdfUrl: 'http://192.168.1.201:9000/portal/product-center/CPTM软件产品介绍.pdf',
|
},
|
{
|
index: '1-4',
|
title: 'JIT系统',
|
imgUrl: 'http://192.168.1.201:9000/portal/product-our/JIT.png',
|
pdfUrl: 'http://192.168.1.201:9000/portal/product-center/JIT系统介绍.pdf',
|
},
|
],
|
},
|
{
|
index: '2',
|
title: 'SaaS平台',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: IconMenu,
|
subMenu: [
|
{
|
index: '2-1',
|
title: '供应商管理系统',
|
imgUrl: 'http://192.168.1.201:9000/portal/product-our/外部供应商管理系统.png',
|
pdfUrl: 'http://192.168.1.201:9000/portal/product-center/外部供应商管理系统介绍.pdf',
|
},
|
{
|
index: '2-2',
|
title: 'S2B2B平台',
|
imgUrl: 'http://192.168.1.201:9000/portal/product-our/S2B2B.png',
|
pdfUrl: 'http://192.168.1.201:9000/portal/product-center/花满芫小程序产品介绍.pdf',
|
},
|
],
|
},
|
{
|
index: '3',
|
title: 'C端',
|
imgUrl: '',
|
pdfUrl: '',
|
icon: Setting,
|
subMenu: [
|
],
|
},
|
];
|
|
const products = ref<Products[]>([
|
{ imgUrl: 'http://192.168.1.201:9000/portal/product-our/外部供应商管理系统.png', title: '外部供应商管理系统', desc: '破信息壁垒，实现数据共享，自动化处理订单，增强沟通与生产跟踪。系统具备多模块功能，涵盖用户、订单、工单等管理，支持移动端扫码记录工时...' },
|
{ imgUrl: 'http://192.168.1.201:9000/portal/product-our/S2B2B.png', title: 'S2B2B', desc: '通过数字化整合上下游资源，重构传统供应链“多级分销、信息割裂”的痛点，实现供应商增收......' },
|
{ imgUrl: 'http://192.168.1.201:9000/portal/product-our/实验室管理系统.png', title: '实验室管理系统', desc: '主要应用于汽车零部件质检行业。它能解决委托单流转、设备管理、数据管理、权限管理等方面的痛点，具备委托单管理.....' },
|
// { imgUrl: 'http://192.168.1.201:9000/portal/product-our/TQS系统.png', title: 'TQS系统', desc: '解决制造业、汽车业培训痛点。它涵盖多个模块，具备人员信息管理、培训管理、岗位技能培训管理等功能，能实现培训数字...' },
|
// { imgUrl: 'http://192.168.1.201:9000/portal/product-our/外部供应商管理系统.png', title: '外部供应商管理系统', desc: '破信息壁垒，实现数据共享，自动化处理订单，增强沟通与生产跟踪。系统具备多模块功能，涵盖用户、订单、工单等管理，支持移动端扫码记录工时...' },
|
// { imgUrl: 'http://192.168.1.201:9000/portal/product-our/JIT.png', title: 'JIT', desc: '面向工业领域的生产管理系统，旨在减少库存和浪费、提升生产效率。它针对数据出错、库存积压等行业痛点，提供数字化管理、自动化检测等解决方案。系统具备物料管理、工艺路线管理等多种功能，实现生产全过程管控与高效运营' },
|
// { imgUrl: 'http://192.168.1.201:9000/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 handleSelect = (item: MenuItem) => {
|
console.log(item);
|
curImg.value = item.imgUrl
|
};
|
|
const curImg = ref('http://192.168.1.201:9000/portal/bg.png');
|
|
</script>
|
|
<style scoped>
|
.container {
|
margin: 70px;
|
height: 100%;
|
}
|
|
.aside {
|
width: 200px;
|
}
|
|
.aside-title {
|
margin-bottom: 10px;
|
}
|
|
.main-up {
|
display: flex;
|
/* justify-content: center; */
|
/* align-items: center; */
|
height: 38vh;
|
flex-direction: column;
|
/* padding: 20px; */
|
}
|
|
.main-image {
|
width: 90%;
|
height: 100%;
|
}
|
|
.main-down {
|
margin-top: 10px;
|
}
|
|
.section-title {
|
margin-bottom: 10px;
|
}
|
|
.card-container {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.card {
|
width: 200px;
|
min-height: 250px;
|
margin: 10px;
|
}
|
|
.card-image {
|
width: 100%;
|
height: 120px;
|
object-fit: cover;
|
}
|
|
.card-content {
|
text-align: center;
|
}
|
|
.card-title {
|
font-weight: bold;
|
}
|
|
.card-description {
|
color: gray;
|
}
|
</style>
|
