mingnan-website/src/pages/about-company.vue

<template>
  <!-- 关于页 -->
  <div class="about main-background main-background-type0">
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
      <Slide class="main-header-box small">
        <img src="@/assets/images/about/Banner.jpg" />
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 关于我们 -->
    <section class="main-section ">
      <div class="content">
        <div class="title">
          <h2>关于我们</h2>
        </div>

        <div class="row">
          <div class="col-sm-12 col-md-6 col-lg-8">
            <h3 class="font-SourceHanSerifCNBold">厦门博合文化科技有限公司</h3>
            <p class="mt-4">文化遗产不仅属于我们，也属于后代子孙，宣传和传承文化遗产乃吾辈之责，五缘记忆旨在宣传和保护湖里区文化遗产功在当代利在干秋。 </p>
            <p class="mt-4">厦门博合文化科技有限公司是一家专注于数字创意、文化科技与新媒体内容的创新型企业。我们致力于通过前沿技术（如AI、VR/AR、数字孪生等）与创意结合，为客户提供数字营销、互动体验、虚拟制作、IP孵化及文化科技解决方案，助力品牌与文化的数字化升级。</p>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 d-flex flex-row justify-content-center">
            <img src="@/assets/images/about/Logo.png" alt="公司Logo" />
          </div>
        </div>
      </div>
    </section>


    <!-- 公司地址 -->
    <section class="main-section ">
      <div class="content">
        <div class="title">
          <h2>公司地址</h2>
        </div>

        <div class="row align-items-center">
          <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="d-flex flex-column">
              <div class="d-flex flex-row align-items-center p-2">
                <img class="me-3" src="@/assets/images/about/IconMobile.png" />
                <span>电话：1388888888</span>
              </div>
              <div class="d-flex flex-row align-items-center p-2">
                <img class="me-3" src="@/assets/images/about/IconMail.png" />
                <span>邮箱：1388888888&#64;163.com</span>
              </div>
              <div class="d-flex flex-row align-items-center p-2">
                <img class="me-3" src="@/assets/images/about/IconLocation.png" />
                <span>地址：厦门火炬高新区信息光电园林后西路1号金丰大厦703F室</span>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-6" style="height: 200px">
            <el-amap
              :center="center"
              :zoom="zoom"
              @init="handleInit"
            />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { ref } from 'vue';

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}
const zoom = ref(13);
const center = ref([118.161288, 24.528889]);
let map: any = null;

function handleInit(mapRef: any) {
  map = mapRef;
  map?.add(new AMap.Marker({
    position: center.value as [number, number]
  }));
}

</script>

<style lang="scss">


@media (max-width: 425px) {
  
}
</style>