<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>
|
