contact.vue

<template>
  <article class="container">
    <section class="card">
      <h2>社辦位置</h2>
      <p>宏裕科技研究大樓 B4</p>
      <p>可搭乘六教或科研電梯，往美食街告示牌方向走到底，右轉第二間即為社辦</p>
      <p>
        <a href="https://maps.app.goo.gl/9dicboZNUdjL5qjL7">https://maps.app.goo.gl/9dicboZNUdjL5qjL7</a>
      </p>
      <p>地址：</p>
      <input
        class="address"
        value="106 臺北市大安區新生南路一段 3 號（國立臺北科技大學-宏裕科技研究大樓）B4 程式設計研究社"
      >
    </section>
    <section class="card">
      <h2>聯絡方式</h2>
      <p>Email: <a href="mailto:contact@ntut.club">contact@ntut.club</a></p>
      <p>
        Instagram: <a
          href="https://www.instagram.com/npc.designer"
          target="_blank"
        >@npc.designer</a>
      </p>
      <p>
        Discord: <a
          href="https://to.ntut.club/discord"
          target="_blank"
        >https://to.ntut.club/discord</a>
      </p>
    </section>
  </article>
</template>

<style scoped>
.address {
  width: 100%;
  margin: 0;
  color: var(--text-color);
  border-style: solid;
  background-color: var(--background-color);
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.gmap {
  width: 100%;
}
</style>