假数据造

tj

2025-03-17 0b058116985f0b3415f01c69c1735e1f6a7b51ea

 src/pages/Product.vue

@@ -5,42 +5,53 @@
          <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">
            <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>
            </template>
            </el-menu>
          </el-aside>
          <el-main>
        <el-main style="width: 80vh;overflow: hidden;">
            <div class="main-up">
              <img src="http://192.168.1.201:9000/portal/product_2.png" class="main-image" alt="">
            <!-- <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 3" :key="index" class="card">
                  <img src="http://192.168.1.201:9000/portal/bg.png" class="card-image" />
              <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">智慧校园门户网站</span>
                  <span class="card-title">{{ item.title }}</span>
                  </div>
                  <div class="card-content">
                    <span class="card-description">提供全流程、一体化的数据</span>
                  <span class="card-description">{{ item.desc }}</span>
                  </div>
                </el-card>
              </div>
@@ -52,7 +63,88 @@
  </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);
@@ -61,6 +153,14 @@
  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>
@@ -79,14 +179,16 @@
  
  .main-up {
    display: flex;
    justify-content: center;
    align-items: center;
  /* justify-content: center; */
  /* align-items: center; */
  height: 38vh;
  flex-direction: column;
    /* padding: 20px; */
  }
  
  .main-image {
    width: 800px;
    height: 250px;
  width: 90%;
  height: 100%;
  }
  
  .main-down {
@@ -105,13 +207,13 @@
  
  .card {
    width: 200px;
    height: 200px;
  min-height: 250px;
    margin: 10px;
  }
  
  .card-image {
    width: 100%;
    height: 80px;
  height: 120px;
    object-fit: cover;
  }