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
---
public/images/certificate-4.png | 0
src/pages/About.vue | 344 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
public/images/icon-2.png | 0
src/components/HeaderMenu.vue | 3
public/images/about-banner.png | 0
public/images/certificate-2.png | 0
public/images/about.png | 0
public/images/icon-1.png | 0
index.html | 2
public/images/certificate-1.png | 0
src/router/index.ts | 1
public/images/icon-3.png | 0
public/images/certificate-3.png | 0
public/images/timeline-background.png | 0
14 files changed, 347 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 144b454..99eed3b 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
- <title>云游四方官网</title>
+ <title>苏州云游四方信息科技有限公司</title>
</head>
<body>
<div id="app"></div>
diff --git a/public/images/about-banner.png b/public/images/about-banner.png
new file mode 100644
index 0000000..a78836b
--- /dev/null
+++ b/public/images/about-banner.png
Binary files differ
diff --git a/public/images/about.png b/public/images/about.png
new file mode 100644
index 0000000..dec3d9a
--- /dev/null
+++ b/public/images/about.png
Binary files differ
diff --git a/public/images/certificate-1.png b/public/images/certificate-1.png
new file mode 100644
index 0000000..4386eb4
--- /dev/null
+++ b/public/images/certificate-1.png
Binary files differ
diff --git a/public/images/certificate-2.png b/public/images/certificate-2.png
new file mode 100644
index 0000000..3b2ae1e
--- /dev/null
+++ b/public/images/certificate-2.png
Binary files differ
diff --git a/public/images/certificate-3.png b/public/images/certificate-3.png
new file mode 100644
index 0000000..3b8c967
--- /dev/null
+++ b/public/images/certificate-3.png
Binary files differ
diff --git a/public/images/certificate-4.png b/public/images/certificate-4.png
new file mode 100644
index 0000000..623850f
--- /dev/null
+++ b/public/images/certificate-4.png
Binary files differ
diff --git a/public/images/icon-1.png b/public/images/icon-1.png
new file mode 100644
index 0000000..80600e8
--- /dev/null
+++ b/public/images/icon-1.png
Binary files differ
diff --git a/public/images/icon-2.png b/public/images/icon-2.png
new file mode 100644
index 0000000..c4b901d
--- /dev/null
+++ b/public/images/icon-2.png
Binary files differ
diff --git a/public/images/icon-3.png b/public/images/icon-3.png
new file mode 100644
index 0000000..dafb517
--- /dev/null
+++ b/public/images/icon-3.png
Binary files differ
diff --git a/public/images/timeline-background.png b/public/images/timeline-background.png
new file mode 100644
index 0000000..c140020
--- /dev/null
+++ b/public/images/timeline-background.png
Binary files differ
diff --git a/src/components/HeaderMenu.vue b/src/components/HeaderMenu.vue
index 97eff93..6fb3e67 100644
--- a/src/components/HeaderMenu.vue
+++ b/src/components/HeaderMenu.vue
@@ -41,7 +41,8 @@
const navItems = [
{ label: '首页', path: '/' },
{ label: '产品中心', path: '/product' },
- { label: '关于我们', path: '/about#third-other' }
+ // { label: '关于我们', path: '/about#third-other' }
+ { label: '关于我们', path: '/about2' }
];
// Handle navigation for the menu items
diff --git a/src/pages/About.vue b/src/pages/About.vue
index 41a40c8..9f402d9 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1 +1,343 @@
-<template></template>
\ No newline at end of file
+<template>
+ <div class="w-100 about-container">
+
+ <div class="w-100 about-banner d-flex align-items-center text-center text-md-start">
+ <div class="top-wrap">
+ <div class="fs-1 fw-bold">了解我们</div>
+ <div class="fs-3">ABOUT US</div>
+ </div>
+ </div>
+
+ <div class="container py-5">
+ <div class="row align-items-center">
+ <!-- 左侧：图片 -->
+ <div class="col-md-6 mb-4 mb-md-0 text-center">
+ <img src="/images/about.png" alt="公司图片" class="img-fluid" style="max-height: 400px;" />
+ </div>
+
+ <!-- 右侧：卡片 -->
+ <div class="col-md-6 d-flex justify-content-center">
+ <div class="card border-0 shadow mt-3 mb-3" style="max-width: 500px; width: 100%;">
+ <div class="card-body px-4 py-3" style="border-top: 2px solid orange;">
+ <h4 class="card-title mb-3 text-start">关于云游四方</h4>
+ <p class="card-text text-muted custom-font"
+ style="text-align: justify; font-size: 14px !important;">
+ 苏州云游四方信息科技有限公司成立于2014年，坐落在美丽的苏州。公司拥有拥有三十余名专业技术同仁，20多家合作客户，涵盖汽车、医疗、电商、交通等多个领域，并且已经完成100多个项目，包括网站、APP、微信以及软硬件结合的智能硬件项目。我们主要从事软件开发工作，拥有强大的开发实力以及丰富的客户合作经验。公司现拥有成熟的MES、WMS、TMS、模具制造管理等系统。公司主营业务有：计算机信息科技领域内的技术开发、技术咨询、技术转让、技术服务；软件的设计、开发、销售；网络工程、自动化工程、通信工程；自动化控制系统集成等。
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="w-100 py-5" style="background-color: #f8f9fa;">
+ <div class="row text-center">
+
+ <div class="col-md-4 mb-4">
+ <img src="/images/icon-1.png" alt="愿景" class="mb-3" style="height: 80px;">
+ <h5 class="fw-bold">愿景</h5>
+ <p class="text-muted mb-0">助力于推动</p>
+ <p class="text-muted">中国工业制造智慧升级</p>
+ </div>
+
+
+ <div class="col-md-4 mb-4">
+ <img src="/images/icon-2.png" alt="价值观" class="mb-3" style="height: 80px;">
+ <h5 class="fw-bold">价值观</h5>
+ <p class="text-muted mb-0">正直人品 践行承诺</p>
+ <p class="text-muted">客户至上 质量第一</p>
+ </div>
+
+
+ <div class="col-md-4 mb-4">
+ <img src="/images/icon-3.png" alt="使命" class="mb-3" style="height: 80px;">
+ <h5 class="fw-bold">使命</h5>
+ <p class="text-muted mb-0">提供一流的产品为客户服务</p>
+ <p class="text-muted">创新卓越的技术引领行业</p>
+ </div>
+ </div>
+ </div>
+
+ <section class="text-center py-5">
+ <div class="container">
+ <h2 class="mb-5 fw-bold" style="color: #001441;">云游四方发展历程</h2>
+ <div class="background-container ">
+ <div class="row justify-content-center align-items-center">
+ <div v-for="(year, index) in years" :key="index" class="col year-item"
+ :class="{ 'selected': selectedYear === year }" @click="selectYear(year)"
+ @mouseenter="pauseRotation(year)" @mouseleave="resumeRotation">
+ {{ year }}
+ </div>
+ </div>
+
+ <div class="d-flex justify-content-left text-start" >
+ <el-timeline class="p-5">
+ <el-timeline-item
+ class="timeline-item"
+ v-for="(activity, index) in curYearActivities" :key="index"
+ type="primary" :timestamp="activity.timestamp"
+ placement="top">
+ {{ activity.content }}
+ </el-timeline-item>
+ </el-timeline>
+ </div>
+ </div>
+
+ </div>
+ </section>
+ <section class="cert-section text-center">
+ <div class="container">
+ <h2 class="mb-5 fw-bold" style="color: #001441;">企业资质及证书</h2>
+
+ <div class="cert-card">
+ <div class="row justify-content-center g-4">
+ <div class="col-6 col-md-3" v-for="(cert, index) in certificates" :key="index">
+ <img :src="cert.src" :alt="cert.alt" class="img-fluid cert-image" style="height: 160px;" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted,onBeforeUnmount } from 'vue';
+
+// 定义证书类型
+interface Certificate {
+ src: string;
+ alt: string;
+}
+
+const certificates: Certificate[] = [
+ { src: '/images/certificate-1.png', alt: '江苏省民营科技企业' },
+ { src: '/images/certificate-2.png', alt: '高新技术企业证书' },
+ { src: '/images/certificate-3.png', alt: '质量管理体系认证证书' },
+ { src: '/images/certificate-4.png', alt: '信息安全管理体系认证证书' }
+];
+
+// 定义年份和选中年份的类型
+// const years: number[] = [2021, 2022, 2023, 2024, 2025]; // 给定的年份列表
+const selectedYear = ref<number>(2023); // 默认选中的年份
+const currentYearIndex = ref<number>(0); // 当前展示的年份索引
+
+const curYearActivities = ref<ActivityType[]>();
+// 选择年份时更新选中的年份
+const selectYear = (year: number): void => {
+ selectedYear.value = year;
+ // 获取当前年份的activity
+ getCurYearActivities(year);
+};
+
+let rotationTimer: ReturnType<typeof setInterval> | null = null;
+// 启动年份轮播
+const startYearRotation = (): void => {
+ rotationTimer = setInterval(() => {
+ currentYearIndex.value = (currentYearIndex.value + 1) % years.length;
+ selectedYear.value = years[currentYearIndex.value];
+ getCurYearActivities(selectedYear.value)
+ }, 3000); // 每秒轮播一次年份
+};
+
+// 在组件挂载后启动年份轮播
+onMounted(() => {
+ startYearRotation();
+});
+
+// 在组件卸载时清除定时器
+onBeforeUnmount(() => {
+ if (rotationTimer) {
+ clearInterval(rotationTimer); // 清除定时器
+ rotationTimer = null;
+ }
+});
+
+
+import { MoreFilled } from '@element-plus/icons-vue'
+import type { TimelineItemProps } from 'element-plus'
+
+interface ActivityType extends Partial<TimelineItemProps> {
+ content: string,
+ date: string,
+}
+
+const activities: ActivityType[] = [
+ {
+ content: 'cloudroam云游四方完成ISO27001认证',
+ timestamp: '9 月',
+ size: 'large',
+ type: 'primary',
+ icon: MoreFilled,
+ date: '2022-09-01',
+ },
+ {
+ content: 'cloudroam云游四方完成ISO9001认证',
+ timestamp: '8 月',
+ color: '#0bbd87',
+ date: '2022-08-01',
+ },
+ {
+ content: 'cloudroam云游四方累计申报软件著作权40项。',
+ timestamp: '6 月',
+ size: 'large',
+ date: '2022-06-01',
+ },
+ {
+ content: '公司拓展数字孪生和数据中台方向新业务，为企业数字化转型提供服务',
+ timestamp: '11 月',
+ type: 'primary',
+ hollow: false,
+ date: '2021-11-01',
+ },
+ {
+ content: 'cloudroam云游四方成为省民营科技企业',
+ timestamp: '6 月',
+ date: '2021-06-01',
+ },
+
+ {
+ content: 'cloudroam云游四方成为高新技术企业',
+ timestamp: '12 月',
+ date: '2020-12-01',
+ },
+
+ {
+ content: 'cloudroam云游四方申报软件著作权21项',
+ timestamp: '6 月',
+ date: '2020-06-01',
+ },
+ {
+ content: '公司全面拓展企业信息化系统开发，为企业信息化升级提供方案。开发系统包括企业培训认证系统、员工绩效系统、物流管理系统、仓库管理系统、会议管理系统、报修系统、实验室管理系统、电子SOP等。',
+ timestamp: '8 月',
+ date: '2016-08-01',
+ },
+ {
+ content: 'cloudroam云游四方搬至苏州园区，更名苏州云游四方',
+ timestamp: '5 月',
+ date: '2016-05-01',
+ },
+ {
+ content: 'cloudroam云游四方在苏州昆山正式成立',
+ timestamp: '6 月',
+ date: '2014-06-01',
+ },
+]
+
+const years: number[] = Array.from(
+ new Set(activities.map(item => new Date(item.date).getFullYear()))
+).sort((a, b) => b - a);
+
+const getCurYearActivities = (year: number) => {
+ curYearActivities.value = activities
+ .filter(activity => activity.date.startsWith(`${year}-`))
+ .sort((a, b) => new Date(b.date).getMonth() - new Date(a.date).getMonth());
+}
+const pauseRotation = (year: number): void => {
+ if (rotationTimer) {
+ clearInterval(rotationTimer);
+ rotationTimer = null;
+ }
+ selectedYear.value = year;
+
+ currentYearIndex.value = years.indexOf(year);
+ getCurYearActivities(year);
+};
+
+const resumeRotation = (): void => {
+ startYearRotation();
+};
+</script>
+
+
+<style lang="css" scoped>
+body {
+ font-family: "PingFang SC", "Century Gothic", "Microsoft YaHei", Avenir, Helvetica, Arial, sans-serif;
+}
+
+.about-container {
+ overflow-x: hidden;
+}
+
+.top-wrap {
+ width: 80%;
+ max-width: 1440px;
+ margin: 0 auto;
+ color: white;
+}
+
+.custom-font {
+ line-height: 25px;
+}
+</style>
+<style scoped>
+.cert-section {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+ background-color: #f9f9f9;
+}
+
+.cert-card {
+ background-color: #fff;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+}
+
+.cert-image {
+ max-height: 220px;
+ object-fit: contain;
+ /* transition: transform 0.3s ease; */
+}
+
+.cert-image:hover {
+ transform: scale(1.05);
+}
+</style>
+
+<style scoped>
+/* 背景图片设置 */
+.background-container {
+ background-image: url('/public/images/timeline-background.png');
+ /* 这里替换为你的背景图片路径 */
+ background-size: cover;
+ background-position: center;
+ padding: 10px 0;
+ /* 调整背景区域的内边距 */
+ border-radius: 8px;
+ /* 可选，给背景容器添加圆角 */
+ min-height: 400px;
+}
+
+.year-item {
+ font-size: 20px;
+ transition: all 0.3s ease;
+ cursor: pointer;
+ padding: 10px 15px;
+ text-align: center;
+}
+
+.year-item.selected {
+ font-size: 30px;
+ transform: scale(1.5);
+ color: #007bff;
+}
+</style>
+<style scoped>
+.about-banner {
+ background-image: url('/public/images/about-banner.png');
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+ height: 450px;
+}
+
+@media (max-width: 768px) {
+ .about-banner {
+ height: auto;
+ /* 小屏时高度自适应内容 */
+ padding: 60px 0;
+ /* 添加垂直内边距使内容不过于贴边 */
+ }
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index bdf5a8b..88f9a97 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,6 +10,7 @@
{ path: '/product', component: Product },
{ path: '/contact', component: Contact },
{ path: '/about',component: Home},
+ { path: '/about2',component: About},
{
path: '/pdf-preview',
name: 'PdfPreview',
--
Gitblit v1.9.3