ntcri/src/components/Footer.vue

<template>
  <footer>
    <!-- <h1>
      臺灣工藝學校全球學習共享平台 International Craft Learning Platform co-ops.
    </h1> -->

    <router-link to="/">
      <img src="@/assets/img/logo.png" alt="" class="logo mt-3" />
    </router-link>

    <ul class="ms-sm-13">
      <li>
        <a href="tel:(049)233-4141#275">Tel&ensp;(049)233-4141#275</a>
      </li>
      <li>
        <a href="fax:(049)235-6593">Fax&ensp;(049)235-6593</a>
      </li>
      <li>
        <a href="mailto:craftology@ntcri.gov.tw"
          >Email&ensp;craftology@ntcri.gov.tw</a
        >
      </li>
      <li>
        <a href="https://goo.gl/maps/Wg6gwmYpVgUPQHJh9" target="_blank">
          542021 南投縣草屯鎮中正路573號</a
        >
      </li>
      <li>
        <small
          >© 2023 International Craft Learning Platform co-ops. All rights
          reserved.</small
        >
      </li>
    </ul>
  </footer>
</template>

<style lang="scss" scoped>
footer {
  padding: 20px 40px;
  background-color: #fff;
  border-top: 25px solid var(--purple);
  h1 {
    margin: 20px 0;
    font-size: 18px;
    font-weight: 500;
  }
  ul {
    li {
      margin: 15px 0;
      letter-spacing: 1px;
      a {
        transition: all 0.3s;
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
  .logo {
    width: 350px;
  }
}
</style>