yk-web/src/components/ContactSection.vue

<script setup>
import IconMark from './IconMark.vue'
import QrPlaceholder from './QrPlaceholder.vue'
import SectionTitle from './SectionTitle.vue'
</script>

<template>
  <section id="contact" class="contact-section page-section page-section--compact">
    <div class="container">
      <SectionTitle title="联系我们" />
      <div class="contact-card">
        <a
          class="address-row"
          href="https://uri.amap.com/search?keyword=%E6%9D%AD%E5%B7%9E%E5%B8%82%E8%A5%BF%E6%B9%96%E5%8C%BA%E7%BF%A0%E8%8B%91%E8%A1%97%E9%81%93%E5%A1%98%E8%8B%97%E8%B7%AF1%E5%8F%B74%E5%8F%B7%E6%A5%BC2%E6%A5%BC"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="在地图中打开办公地址"
        >
          <span class="address-icon">
            <IconMark name="map-pin" :size="22" />
          </span>
          <strong>办公地址：</strong>
          <span>杭州市西湖区翠苑街道塘苗路1号4号楼2楼</span>
        </a>
        <div class="contact-manager-grid">
          <article class="manager-card">
            <div class="manager-copy">
              <span class="manager-icon">
                <IconMark name="user" :size="22" />
              </span>
              <p><strong>客户成功经理：王经理</strong><br /></p>
            </div>
            <QrPlaceholder label="王经理个人码" small />
          </article>
          <article class="manager-card">
            <div class="manager-copy">
              <span class="manager-icon">
                <IconMark name="user" :size="22" />
              </span>
              <p><strong>客户成功经理：罗经理</strong><br /></p>
            </div>
            <QrPlaceholder label="罗经理个人码" small />
          </article>
        </div>
      </div>
    </div>
  </section>
</template>