hhh_index_dev/hhh_index/template/footer.html

<footer class="footer">
  <div class="container" style="margin:0 auto;">
    <div class="row">
      <div class="col-12 col-lg-4 about-list">
        <section>
          <h4>相關連結</h4>
          <div class="d-flex justify-content-lg-center">
            <ul>
              <li>
                <a href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">
                  <img src="hhh_index/images/menu/freelecture.svg" alt="免費報名幸福講堂">
                  免費報名幸福講堂
                </a>
              </li>
              <li>
                <a href="https://event.hhh.com.tw/agent/" target="_blank">
                  <img src="hhh_index/images/menu/agent.svg" alt="幸福經紀人">
                  幸福經紀人 <span>0800-366-086</span>
                </a>
              </li>
              <!-- <li>
                <a href="">
                  <img src="hhh_index/images/menu/lecture.svg" alt="">
                  講堂活動
                </a>
              </li> -->
              <li>
                <a href="http://gstv.com.tw/" target="_blank">
                  <img src="hhh_index/images/menu/tv.svg" alt="幸福空間居家台">
                  幸福空間居家台
                </a>
              </li>
              <li>
                <a href="https://event.hhh.com.tw/contest/2018/" target="_blank">
                  <img src="hhh_index/images/menu/prize.svg" alt="ADA 亞洲設計獎">
                  ADA 亞洲設計獎
                </a>
              </li>
              <!-- <li>
                <a href="">
                  <img src="hhh_index/images/menu/champion.svg" alt="">
                  國際設計大獎代辦
                </a>
              </li> -->
              <li>
                <a href="https://www.leju.com.tw/" target="_blank">
                  <img src="hhh_index/images/menu/Image-1@2x.png" alt="樂居網">
                  樂居網
                </a>
              </li>
            </ul>
          </div>
        </section>
      </div>
      <div class="col-12 col-lg-4 follow-list">
        <section>
          <h4>追蹤我們</h4>
          <div class="d-flex flex-column align-items-center">
            <section class="media">
              <a href="https://www.facebook.com/hhhfb" target="_blank">
                <img src="hhh_index/images/media/fb.svg" alt="Facebook" class="media-item before">
                <img src="hhh_index/images/media/fb_h.svg" alt="Facebook" class="media-item after">
              </a>
              <a href="https://page.line.me/ovs4341s?openQrModal=true" target="_blank">
                <img src="hhh_index/images/media/ln.svg" alt="Line" class="media-item before">
                <img src="hhh_index/images/media/ln_h.svg" alt="Line" class="media-item after">
              </a>
              <a href="https://www.youtube.com/user/gorgeousspace" target="_blank">
                <img src="hhh_index/images/media/yt.svg" alt="YouTube" class="media-item before">
                <img src="hhh_index/images/media/yt_h.svg" alt="YouTube" class="media-item after">
              </a>
              <a href="https://www.instagram.com/gorgeous_space/" target="_blank">
                <img src="hhh_index/images/media/ig.svg" alt="Instagram" class="media-item before">
                <img src="hhh_index/images/media/ig_h.svg" alt="Instagram" class="media-item after">
              </a>
              <!-- <a href="" target="_blank">
                <img src="hhh_index/images/media/rb.svg" alt="" class="media-item before">
                <img src="hhh_index/images/media/rb_h.svg" alt="" class="media-item after rounded-circle">
              </a> -->
              <a href="https://www.tiktok.com/@gorgeousspace" target="_blank">
                <img src="hhh_index/images/media/tt.svg" alt="Tiktok" class="media-item before">
                <img src="hhh_index/images/media/tt_h.svg" alt="Tiktok" class="media-item after rounded-circle">
              </a>
            </section>
            <section class="fb-list">
              <a href="https://www.facebook.com/agent.hhh.com.tw" target="_blank">
                <img src="hhh_index/images/media/fb_h.svg" alt="agent">
                幸福經紀人粉絲專頁
              </a>
              <a href="https://www.facebook.com/retire.tw/" target="_blank">
                <img src="hhh_index/images/media/fb_h.svg" alt="retire">
                退休好幸福粉絲專頁
              </a>
            </section>
          </div>
        </section>
      </div>
      <div class="col-12 col-lg-4 more-list">
        <section>
          <h4 class="d-none d-lg-block">了解更多</h4>
          <div class="d-flex flex-column mt-2 mt-lg-0">
            <section class="subscriber-item">
              <input type="email" placeholder="訂閱電子報，請輸入您的 Email">
              <button class="d-flex justify-content-center align-items-center">
                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                <p>訂閱</p>
              </button>
            </section>
            <div class="d-lg-flex justify-content-center">
              <section class="mt-4 link">
                <a href="https://hhh.com.tw/about/contact/" target="_blank">
                  聯絡我們
                </a>
                <a href="https://hhh.com.tw/about/privacy_policy" target="_blank">
                  隱私保護
                </a>
                <a href="https://hhh.com.tw/about/" target="_blank">
                  關於我們
                </a>
                <a href="https://hhh.com.tw/about/timeline/" target="_blank">
                  公司歷程
                </a>
                <a href="https://www.104.com.tw/company/d6hr8sg" target="_blank">
                  企業徵才
                </a>
                <a href="https://hhh.com.tw/about/sitemap/" target="_blank">
                  網站地圖
                </a>
              </section>
            </div>
          </div>
        </section>
      </div>
      <h2 class="d-none d-md-block">
        幸福空間 版權所有 © Gorgeous Space Co.Ltd. All Rights Reserved
      </h2>
      <h2 class="d-block d-md-none">
        幸福空間 版權所有 <br> © Gorgeous Space Co.Ltd. All Rights Reserved
      </h2>
    </div>
  </div>
</footer>

<script>
  $(".follow-list a").on({
    mouseenter: function () {
      // $(this).find(".media-item.before").hide();
      // $(this).find(".media-item.after").show();
      $(this).find(".media-item.before").css("opacity", "0");
      $(this).find(".media-item.after").css("opacity", "1");
    },
    mouseleave: function () {
      // $(this).find(".media-item.before").show();
      // $(this).find(".media-item.after").hide();
      $(this).find(".media-item.before").css("opacity", "1");
      $(this).find(".media-item.after").css("opacity", "0");
    }
  });

  let formData = {
    email: ""
  };

  $('.subscriber-item button').on('click', function () {
    $('.subscriber-item .spinner-border').addClass('show');
    let mail = $('.subscriber-item input').val();
    let regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
    let validate = regex.test(mail); // 判斷 mail 格式
    if (!validate) {
      $('.subscriber-item').addClass('input-error');
      $('.subscriber-item .spinner-border').removeClass('show');
      $('.subscriber-item button p').text('email 格式錯誤');
    } else {
      $('.subscriber-item').removeClass('input-error');
      formData.email = mail;
      let email = JSON.stringify(formData);
      $.ajax({
        method: "post",
        url: "https://hhh.com.tw/adapter/index?http_method=POST&api_url=/third/v1/edm/subscriber",
        type: "json",
        data: {
          data: email
        }
      }).done((data) => {
        $('.subscriber-item .spinner-border').removeClass('show');
        $('.subscriber-item button p').text('已完成訂閱！');
      }).fail((error) => {
        $('.subscriber-item .spinner-border').removeClass('show');
      });
    }
  })

  $('.subscriber-item input').focusin(
    function () {
      console.log('focusin');
      $('.subscriber-item').addClass('input-focus');
      let buttonText = $('.subscriber-item button p').text();
      if (buttonText !== "訂閱") {
        $('.subscriber-item button p').text('訂閱');
        $('.subscriber-item').removeClass('input-error');
      }
    }).focusout(
      function () {
        $('.subscriber-item').removeClass('input-focus');
      });
</script>