From 0b058116985f0b3415f01c69c1735e1f6a7b51ea Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期一, 17 三月 2025 16:23:26 +0800
Subject: [PATCH] 假数据造
---
src/pages/Product.vue | 336 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 219 insertions(+), 117 deletions(-)
diff --git a/src/pages/Product.vue b/src/pages/Product.vue
index c8ee493..a60af67 100644
--- a/src/pages/Product.vue
+++ b/src/pages/Product.vue
@@ -1,129 +1,231 @@
<template>
- <div class="container">
+ <div class="container">
+ <el-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">
- <el-sub-menu index="1">
+ <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>
- <location />
+ <component :is="item.icon" />
</el-icon>
- <span>工业信息化</span>
+ <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 index="1-1">lims系统</el-menu-item>
- <el-menu-item index="1-2">JIT系统</el-menu-item>
+ <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 index="2">
- <el-icon><icon-menu /></el-icon>
- <span>SaaS</span>
- </el-menu-item>
- <el-menu-item index="3">
+ <el-menu-item v-else :index="item.index">
<el-icon>
- <setting />
+ <component :is="item.icon" />
</el-icon>
- <span>C端</span>
+ <span>{{ item.title }}</span>
</el-menu-item>
- </el-menu>
- </el-aside>
- <el-main>
- <div class="main-up">
- <img src="http://192.168.1.201:9000/portal/product_2.png" class="main-image" alt="">
+ </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 class="main-down">
- <h5 class="section-title">推荐产品</h5>
- <div class="card-container">
- <el-card v-for="(item, index) in 3" :key="index" class="card">
- <img src="http://192.168.1.201:9000/portal/bg.png" class="card-image" />
- <div class="card-content">
- <span class="card-title">智慧校园门户网站</span>
- </div>
- <div class="card-content">
- <span class="card-description">提供全流程、一体化的数据</span>
- </div>
- </el-card>
- </div>
- </div>
- </el-main>
- </el-container>
+ </div>
+ </el-main>
</el-container>
- </div>
- </template>
-
- <script lang="ts" setup>
- import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
-
- const handleOpen = (key: string, keyPath: string[]) => {
- console.log(key, keyPath);
- };
-
- const handleClose = (key: string, keyPath: string[]) => {
- console.log(key, keyPath);
- };
- </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;
- /* padding: 20px; */
- }
-
- .main-image {
- width: 800px;
- height: 250px;
- }
-
- .main-down {
- margin-top: 10px;
- }
-
- .section-title {
- margin-bottom: 10px;
- }
-
- .card-container {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- }
-
- .card {
- width: 200px;
- height: 200px;
- margin: 10px;
- }
-
- .card-image {
- width: 100%;
- height: 80px;
- object-fit: cover;
- }
-
- .card-content {
- text-align: center;
- }
-
- .card-title {
- font-weight: bold;
- }
-
- .card-description {
- color: gray;
- }
- </style>
\ No newline at end of file
+ </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>
--
Gitblit v1.9.3