About Us update

tj

2025-05-08 88315e144ab2076ee1a75b24f80b165844fb3ff6

 src/pages/About.vue

@@ -1 +1,343 @@
<template></template>
<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>