<template>
  <div>
    <div id="share-modal" style="display: none">
      <div class="title">{[{ SOCIAL_SHARING }]}</div>
      <div id="share-outer">
        <div class="share-to">{[{ SHARE_TO }]}</div>
        <div class="share-images">
          <a id="facebook-share">
            <div class="share-button">
              <span class="faceBookLink">
                <i class="icon icon-facebook"></i>
              </span>
            </div>
          </a>
          <a id="twitter-share">
            <div class="share-button">
              <span class="twitterLink">
                <i class="icon icon-twitter"></i>
              </span>
            </div>
          </a>
          <a id="mail-share">
            <div class="share-button">
              <span class="mailLink">
                <i class="icon icon-email"></i>
              </span>
            </div>
          </a>
        </div>
        <div class="direct-link">{[{ SHARE_LINK }]}</div>
        <div id="share-url">
          <span id="share-url-text"></span>
        </div>
        <div id="copy-success" class="hidden">
          <span id="copy-success-text">{[{ SHARE_COPIED }]}</span>
        </div>
      </div>
      <div id="share-close" class="close">
        <i class="icon icon-close"></i>
      </div>
    </div>
    <div id="terms-modal" class="fadeOut" style="display: none">
      <div id="terms-text"></div>
      <div class="close">
        <a>
          <i class="icon icon-close"></i>
        </a>
      </div>
    </div>
    <div id="quick-blackout" class="quick" style="display: none"></div>
    <div id="quick-logo" class="quick-brand" style="display: none"></div>
    <div id="hover-top" class="hover-row" style="display: none"></div>
    <div id="hover-bottom" class="hover-row" style="display: none"></div>
    <div id="call-to-action">
      <div id="pause-overlay" style="display: none">
        <div id="pause-icon">
          <a>
            <i class="icon icon-pause"></i>
          </a>
        </div>
      </div>
      <div id="interaction-modal">
        <div id="interaction-modal-inner">
          <div class="nav-icon">
            <img
              :src="require('@/assets/images/pc_step1.png')"
              class="icon"
              title="使用指南"
              data-page="1"
            />
            <div class="nav-help-button">
              <div class="next-button nav-help-page" data-id="plus"></div>
              <div class="prev-button nav-help-page"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tag-billboards" style="display: none"></div>
  </div>
</template>