From fe1c5cff00014a46dec56705de3426037839c261 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期三, 07 五月 2025 16:09:54 +0800
Subject: [PATCH] home css update
---
src/pages/Home.vue | 171 ++++++++++++++++++++++++++++++++----------
src/pages/Product.vue | 62 +++++++++++++-
2 files changed, 186 insertions(+), 47 deletions(-)
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index cc6a1a5..1d085b1 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -18,7 +18,7 @@
:style="{ backgroundColor: index === currentIndex ? 'yellow' : 'transparent' }"> -->
<div :class="[
'other-div',
-
+
'd-flex',
'flex-column',
'justify-content-between',
@@ -40,9 +40,12 @@
<div class="our-products-title mt-1 mt-md-3 w-100 p-2">
<h1 class="fs-3 fs-md-2 fs-lg-1">我们的产品</h1>
</div>
- <div style="width: 70%; margin: 0 auto;" class="d-none d-md-flex">
- <div id="carouselExample" class="carousel slide w-100 " data-bs-ride="carousel"
- data-bs-interval="3000">
+ <!-- <div style="width: 70%; margin: 0 auto;" class="d-none d-md-flex">
+ <div id="carouselExample" class="carousel slide w-100 "
+ data-bs-ride="carousel"
+ data-bs-interval="5000"
+ data-bs-pause="hover"
+ >
<div class="carousel-inner">
<div :class="['carousel-item', { active: groupIndex === productGroupsIndex }]"
v-for="(group, groupIndex) in productGroups" :key="groupIndex">
@@ -50,15 +53,13 @@
<div class="col" v-for="(product, productIndex) in group.products" :key="productIndex">
<div class="card">
<div class="card-body d-flex flex-column">
- <!-- 标题部分 -->
+
<h5 class="card-title mb-3" style="width: 100%; height: 50px;">{{
product.title
}}</h5>
- <!-- 内容部分 -->
<p class="card-text mb-3" v-html="product.desc"
style="width: 100%; height: 80px;"></p>
</div>
- <!-- 图片部分 -->
<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;">
@@ -79,23 +80,57 @@
<span class="visually-hidden">Next</span>
</button>
</div>
+ </div> -->
+ <div class="d-none d-md-flex" style="width: 70%; margin: 0 auto;">
+ <div id="carouselExample" class="carousel slide w-100" data-bs-ride="carousel" data-bs-interval="5000"
+ data-bs-pause="hover">
+ <div class="carousel-inner">
+ <div class="carousel-item" v-for="(group, groupIndex) in productGroups"
+ :class="{ active: groupIndex === 0 }" :key="groupIndex">
+ <div class="row">
+ <div class="col" v-for="(product, productIndex) in group.products" :key="productIndex">
+ <div class="card" @click="handleCardClick(product)">
+ <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 class="d-flex justify-content-center p-2">
+ <img :src="product.imgUrl" class="card-img-top" :alt="product.title"
+ style="height: 150px;">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
+ data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
+ data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ </button>
+ </div>
</div>
- <div style="width: 60%; margin: 0 auto; height: 300px;" class="d-block d-md-none ">
+
+ <!-- <div style="width: 60%; margin: 0 auto; height: 300px;" class="d-block d-md-none ">
<div id="carouselExampleMin" class="carousel slide " data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-inner">
<div :class="['carousel-item', { active: index === productIndex }]"
v-for="(product, index) in allProducts" :key="index">
<div class="card">
<div class="card-body d-flex flex-column">
- <!-- 标题部分 -->
<h5 class="card-title mb-3" style="width: 100%;">{{ product.title }}
</h5>
- <!-- 内容部分 -->
+
<p class="card-text mb-3" v-html="product.desc" style="width: 100%;">
</p>
</div>
- <!-- 图片部分 -->
+
<div class="d-flex justify-content-center p-2">
<img :src="product.imgUrl" class="card-img-top" :alt="product.title"
style="width: 100%; height: 100px;">
@@ -115,19 +150,50 @@
<span class="visually-hidden">Next</span>
</button>
</div>
+ </div> -->
+ <div style="width: 60%; margin: 0 auto; height: 300px;" class="d-block d-md-none">
+ <div id="carouselExampleMin" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000"
+ data-bs-pause="hover">
+ <div class="carousel-inner">
+ <div class="carousel-item" v-for="(product, index) in allProducts"
+ :class="{ active: index === 0 }" :key="index">
+ <div class="card" @click="handleCardClick(product)">
+ <div class="card-body d-flex flex-column">
+ <h5 class="card-title mb-3" style="width: 100%;">{{ product.title }}</h5>
+ <p class="card-text mb-3" v-html="product.desc" style="width: 100%;"></p>
+ </div>
+ <div class="d-flex justify-content-center p-2">
+ <img :src="product.imgUrl" class="card-img-top" :alt="product.title"
+ style="width: 100%; height: 100px;">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleMin"
+ data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleMin"
+ data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </button>
+ </div>
</div>
+
</div>
<!-- 公司相关信息 -->
- <div class="w-100" >
+ <div class="w-100">
<div class="row flex-md-nowrap">
<!-- 第一列：占1份 -->
- <div class="col-12 col-md-3 text-center text-md-left">
+ <div class="col-12 col-md-3 text-center text-md-start ps-md-5">
<!-- 产品中心 -->
- <div class="text-center my-5 text-dark fs-4">产品中心</div>
- <!-- <ul class="list-unstyled m-1 text-start"></ul> -->
- <ul class="list-unstyled m-1">
+ <div class="my-5 text-dark fs-4">产品中心</div>
+ <ul class="list-unstyled">
<li v-for="(item, index) in ProductCenters" :key="index" class="mb-2">
<a href="javascript:void(0);" class="text-dark text-decoration-none fs-5"
@click.prevent="openPdf(item)">
@@ -148,36 +214,47 @@
</div>
<!-- 第三列：占1份 -->
- <div id="third-other" class="col-12 col-md-3 text-center text-md-left">
+ <!-- <div id="third-other" class="col-12 col-md-3 text-center text-md-start "> -->
+ <div id="third-other" class="col-12 col-md-3 mx-auto text-center text-md-start">
<!-- 公司信息 -->
- <div class="text-center my-5 text-dark fs-4">公司信息</div>
- <div class="container text-center">
+ <div class="my-5 text-dark fs-4">公司信息</div>
+ <div>
<!-- 第一行：Logo + 名称 + 简介 -->
- <div class="d-flex flex-column align-items-center mb-4">
- <div class="d-flex align-items-center gap-2">
+ <div class="d-flex flex-column mb-4">
+ <div class="align-items-center ">
<img :src="companyInfo.logo" alt="云游四方" class="img-fluid"
style="width: 48px; height: 48px; object-fit: contain;" />
- <span class="fs-4 fw-semibold">{{ companyInfo.name }}</span>
- </div>
- <div class="fs-5 text-secondary mt-2" style="max-width: 600px;">
- {{ companyInfo.desc }}
+ <span class="fs-5 fw-semibold">{{ companyInfo.name }}</span>
+ <span class="">| {{ companyInfo.desc }}</span>
</div>
</div>
<!-- 第二行：地址 -->
- <div class="d-flex justify-content-center mb-4">
- <span class="fs-5 text-dark">地址：{{ companyInfo.address }}</span>
+ <div class="text-center text-md-start mb-4">
+ <span class="fs-6 text-dark">地址：{{ companyInfo.address }}</span>
</div>
+
<!-- 第三行：二维码 -->
- <div class="row justify-content-center g-4">
+ <!-- <div class="row g-2">
<div class="col-auto d-flex flex-column align-items-center"
v-for="(item, index) in companyInfo.qrCodeList" :key="index">
<img :src="item.url" alt="云游四方" class="img-fluid mb-2"
style="width: 80px; height: 80px; object-fit: cover;" />
<span class="text-muted small">{{ item.name }}</span>
</div>
+ </div> -->
+ <!-- 外层容器设置为居中（小屏居中，大屏默认） -->
+ <div class="d-flex flex-wrap justify-content-center justify-content-md-start gap-3">
+ <div class="d-flex flex-column align-items-center"
+ v-for="(item, index) in companyInfo.qrCodeList" :key="index">
+ <img :src="item.url" alt="云游四方" class="img-fluid mb-2"
+ style="width: 80px; height: 80px; object-fit: cover;" />
+ <span class="text-muted small text-center">{{ item.name }}</span>
+ </div>
</div>
+
+
</div>
</div>
@@ -214,7 +291,7 @@
</div>
</template>
<script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount ,nextTick} from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { CarouselItem, CooperativeClient, ProductCenter, CompanyInfo, Products, ProductGroup } from '@/models/portalModels';
import { useRoute, useRouter } from 'vue-router';
@@ -286,30 +363,43 @@
const isMobile = ref<boolean>(false) //
+// 点击卡片
+const handleCardClick = (item: Products) => {
+ // 跳转到 /product 页面，并将item传递过去
+ router.push({
+ path: '/product',
+ query: {
+ title: item.title,
+ desc: item.desc,
+ imgUrl: item.imgUrl
+ }
+ });
+
+}
+
+
// 初始化时设置高度
onMounted(() => {
updateCarouselHeight();
window.addEventListener('resize', updateCarouselHeight);
- intervalId = window.setInterval(updateIndex, 2000); // 每 1 秒执行一次
+ intervalId = window.setInterval(updateIndex, 5000); // 每 1 秒执行一次
- productIntervalId = window.setInterval(updateProductIndex, 2000); // 每 1 秒执行一次
-
- productGroupsIntervalId = window.setInterval(updateProductGroupsIndex, 2000); // 每 1 秒执行一次
-
+ // productGroupsIntervalId = window.setInterval(updateProductGroupsIndex, 2000); // 每 1 秒执行一次
+ // productIntervalId = window.setInterval(updateProductIndex, 2000); // 每 1 秒执行一次
isMobile.value =
- 'ontouchstart' in window ||
- navigator.userAgent.toLowerCase().includes('mobi')
+ 'ontouchstart' in window ||
+ navigator.userAgent.toLowerCase().includes('mobi')
});
// 清理事件监听
onBeforeUnmount(() => {
window.removeEventListener('resize', updateCarouselHeight);
- // 清理定时任务
- if (intervalId) {
+ // 清理定时任务
+ if (intervalId) {
window.clearInterval(intervalId);
}
if (productIntervalId) {
@@ -523,8 +613,9 @@
flex-direction: column;
gap: 10px;
}
+
.xuanfu {
- width: 30px;
- height: 30px;
+ width: 30px;
+ height: 30px;
}
</style>
\ No newline at end of file
diff --git a/src/pages/Product.vue b/src/pages/Product.vue
index 19157c6..3252604 100644
--- a/src/pages/Product.vue
+++ b/src/pages/Product.vue
@@ -34,7 +34,7 @@
</div>
- <div class="col-md-3 d-block d-md-none p-3" >
+ <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">
@@ -70,7 +70,7 @@
<!-- Main Content Area -->
- <div class="col-12 col-md-9 p-3" style="overflow-y: auto; max-height: 100vh;" >
+ <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 ">
@@ -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,14 +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'
@@ -187,6 +188,8 @@
const title = ref('')
const pdfUrl = ref('')
const curSubItem = ref<MenuItem>({} as MenuItem)
+
+
const activeIndex = ref('')
@@ -255,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/>打通多级分销信息壁垒，助力供应商增效增收。' },
@@ -326,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