From 88315e144ab2076ee1a75b24f80b165844fb3ff6 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期四, 08 五月 2025 10:39:25 +0800
Subject: [PATCH] About Us update
---
src/pages/Product.vue | 70 +++++++++++++++++++++++++++++------
1 files changed, 58 insertions(+), 12 deletions(-)
diff --git a/src/pages/Product.vue b/src/pages/Product.vue
index cbfe2ad..3252604 100644
--- a/src/pages/Product.vue
+++ b/src/pages/Product.vue
@@ -1,5 +1,5 @@
<template>
- <div class="container-fluid">
+ <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">
@@ -70,7 +70,7 @@
<!-- Main Content Area -->
- <div class="col-12 col-md-9 p-3">
+ <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 ">
@@ -88,19 +88,19 @@
<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">
+ <div class="col-2 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">
+ <div class="col-8 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">
+ <div class="col-2 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>
@@ -112,7 +112,7 @@
</div>
<!-- Lower Layer -->
- <div>
+ <div class="mb-5">
<div class="text-start">
<h5>推荐产品</h5>
</div>
@@ -137,7 +137,7 @@
</div>
<div class="row d-block d-md-none">
- <div class="justify-content-center" >
+ <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 ">
@@ -165,16 +165,15 @@
<!-- <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" />
- <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 { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router';
import { MenuItem, Products, ProductCenter } from '@/models/portalModels';
import PdfViewer from '@/components/pdf/PdfViewer.vue'
@@ -189,6 +188,8 @@
const title = ref('')
const pdfUrl = ref('')
const curSubItem = ref<MenuItem>({} as MenuItem)
+
+
const activeIndex = ref('')
@@ -257,6 +258,48 @@
],
},
];
+
+
+onMounted(() => {
+ const route = useRoute();
+ const title = route.query.title;
+
+ if (!title) return;
+
+ let foundIndex = '';
+ let foundItem = null;
+
+ for (const item of menuItems) {
+ if (item.title === title) {
+ foundIndex = item.index;
+ foundItem = item;
+ break;
+ }
+
+ if (item.subMenu) {
+ const sub = item.subMenu.find(subItem => subItem.title === title);
+ if (sub) {
+ foundIndex = sub.index;
+ foundItem = sub;
+ break;
+ }
+ }
+ }
+
+ if (foundIndex && foundItem) {
+ activeIndex.value = foundIndex;
+
+ // 调用菜单选中逻辑（注意：这里你可能要加上菜单展开逻辑）
+ if (foundIndex.includes('-')) {
+ handleSelectSubmenu(foundItem); // 子菜单点击
+ } else {
+ handleSelect(foundIndex); // 顶层菜单点击（如果你需要）
+ }
+ }
+});
+
+
+
const products = ref<Products[]>([
{ imgUrl: 'https://portal2.tos-cn-beijing.volces.com/portal/product-our/外部供应商管理系统.png', title: '外部供应商管理系统', desc: '通过数字化整合上下游资源<br/>打通多级分销信息壁垒，助力供应商增效增收。' },
@@ -328,6 +371,9 @@
</script>
<style>
+body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
/* .el-menu .el-menu-item.is-active {
font-weight: bold;
color: #ffd04b;
--
Gitblit v1.9.3