frames/pages/structures_adherentes/_id.vue

<template>
  <LayoutContainer>
    <header>
      <a class="go-back" href="#"><i class="fas fa-chevron-left" />{{ $t('go_back') }}</a>
    </header>
    <span class="please-wait">
      <nuxt-img
        src="/images/gear.gif"
        :alt="$t('please_wait')"
        style="margin-top:100px; width:70px"
      />
    </span>
    <div class="content" style="display: none">
      <div class="structure-header">
        <nuxt-img class="default-logo" src="/images/event-default.jpg" alt="logo" />
        <img class="logo" src="" alt="logo" style="display:none">

        <h3 class="structure-name" />

        <span class="social">
          <a href="" class="facebook" target="_blank" style="display: none" :title="$t('find_us_on') + ' Facebook'">
            <i class="fab fa-facebook" />
          </a>
          <a href="" class="instagram" target="_blank" style="display: none">
            <i class="fab fa-instagram-square" :title="$t('find_us_on') + ' Instagram'" />
          </a>
          <a href="" class="twitter" target="_blank" style="display: none">
            <i class="fab fa-twitter" title="$t('find_us_on') + ' Twitter'" />
          </a>
        </span>
      </div>
      <div class="illustration-container">
        <nuxt-img src="/images/event-default-modern.jpg" alt="" />
      </div>
      <div class="structure-practices">
        <span class="structure-practice-model" style="display: none" />
      </div>
      <div class="details">
        <div class="description">
          <h4>{{ $t('descriptive') }}</h4>

          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
          </p>
        </div>
        <div class="contact">
          <h4>{{ $t('contact') }}</h4>

          <table>
            <tr>
              <td><i class="fas fa-map-marker-alt" /></td>
              <td class="address" />
            </tr>
            <tr>
              <td><i class="fas fa-phone-alt" /></td>
              <td class="phone">
                <a href="" />
              </td>
            </tr>
            <tr>
              <td><i class="fas fa-envelope" /></td>
              <td class="mail">
                <a href="" />
              </td>
            </tr>
            <tr>
              <td><i class="fas fa-globe-europe" /></td>
              <td class="website">
                <a href="" />
              </td>
            </tr>
            <tr>
              <td><i class="fas fa-project-diagram" /></td>
              <td class="network" />
            </tr>
          </table>
        </div>
      </div>

      <div class="spot-on-bar">
        <button disabled>
          {{ $t('spot_on_from') }} 01/01/2021
        </button>
      </div>

      <div id="structure-details-map" style="display: none" />
    </div>
  </LayoutContainer>
</template>