Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
23 kB
1
Indexable
Never
Preciso de ajuda. Preciso fazer os componentes que tenham a classe "reveal" aparecerem se tornarem visíveis dentro dos limites da página durante o scroll. então quando um objeto entrar na tela, ele deve receber a classe "active" para ativar a transição. Pode me ajudar? 

<template>
  <!-- <div class="MarcaAgua">
    <v-img :width="200" aspect-ratio="1/1" src="../assets/Logo.png"/>
  </div> -->
  <div class="NavBar">
    <v-layout>
      <div class="verticalCenter logo">
        <v-img :width="70" aspect-ratio="1/1" src="../assets/Logo.png"/>
      </div>
      <div class="verticalCenter logoNames">
        <v-img :width="250" aspect-ratio="1/1" src="../assets/LogoName.png"/>
      </div>
      <v-flex class="verticalCenter Buttons" v-if="extended">
        <v-btn class="NavBarItems" @click="scrollToElement('AreasAtuacao')">
          <span class="NavBarItems">Áreas de Atuação</span>
        </v-btn>
        <v-btn class="NavBarItems" @click="scrollToElement('SobreNos')">
          <span class="NavBarItems">Sobre Nós</span>
        </v-btn>
        <!-- <v-btn class="NavBarItems" @click="scrollToElement('Avaliacoes')">
          <span class="NavBarItems">Avaliações</span>
        </v-btn> -->
        <v-btn class="NavBarItems" @click="scrollToElement('contact')">
          <span class="NavBarItems">Contato</span>
        </v-btn>
        <v-btn class="NavBarItems" @click="scrollToElement('Localizacao')">
          <span class="NavBarItems">Localização</span>
        </v-btn>
      </v-flex>
      <v-flex v-else class="verticalCenterGrid">
        <v-btn class="collapsedButton verticalCenter" @click="OpnClsSidebar()">
          <i class="fa-solid fa-bars collapsedButtonIcon"></i>
        </v-btn>
      </v-flex>
    </v-layout>
  </div>
  <div class="sidebar" v-if="extendedSide">
    <v-btn class="collapsedButton verticalCenter" @click="OpnClsSidebar()">
      <i class="fa-solid fa-bars collapsedButtonIcon"></i>
    </v-btn>
    <v-layout>
      <v-btn class="SidebarItems" @click="scrollToElement('AreasAtuacao')">
        <span class="SidebarItems">Áreas de Atuação</span>
      </v-btn>
    </v-layout>
    <v-layout>
      <v-btn class="SidebarItems" @click="scrollToElement('SobreNos')">
        <span class="SidebarItems">Sobre Nós</span>
      </v-btn>
    </v-layout>
    <!-- <v-layout>
      <v-btn class="SidebarItems" @click="scrollToElement('Avaliacoes')">
        <span class="SidebarItems">Avaliações</span>
      </v-btn>
    </v-layout> -->
    <v-layout>
      <v-btn class="SidebarItems" @click="scrollToElement('contact')">
        <span class="SidebarItems">Contato</span>
      </v-btn>
    </v-layout>
    <v-layout>
      <v-btn class="SidebarItems" @click="scrollToElement('Localizacao')">
        <span class="SidebarItems">Localização</span>
      </v-btn>
    </v-layout>
  </div>

  <!-- início do conteúdo da página -->
  <!-- slideshow component -->
  <div v-if="contactExtended" class="slideshow">
    <div class="image-container center">
      <v-img :width="1100" aspect-ratio="1/1" id="ImageSlide" :src="require(`../assets/banners/${currentImageShown.name}`)" :class="{ 'fade-in': fadeIn, 'fade-out': fadeOut }"/>
      <div class="overlay" ref="overlay">
        <p class="FadeFromLeftTopText">{{ currentImageShown.text }}</p>
        <div class="controls">
          <!-- <button class="prev" @click="prevImage">&lt;</button> -->
          <i class="fa-solid fa-backward prev" @click="prevImage"></i>
          <i class="fa-solid fa-forward next" @click="nextImage"></i>
          <!-- <button class="next" @click="nextImage">&gt;</button> -->
        </div>
      </div>
    </div>
  </div>
  <div v-else class="slideshow">
    <div class="image-container center">
      <v-img :width="1100" aspect-ratio="1/1" id="ImageSlide" :src="require(`../assets/banners/${currentImageShown.name}`)" :class="{ 'fade-in': fadeIn, 'fade-out': fadeOut }"/>
      <div class="overlay" ref="overlay">
        <p class="FadeFromLeftTopText">{{ currentImageShown.text }}</p>
        <div class="controls">
          <!-- <button class="prev" @click="prevImage">&lt;</button> -->
          <i class="fa-solid fa-backward prev" @click="prevImage"></i>
          <i class="fa-solid fa-forward next" @click="nextImage"></i>
          <!-- <button class="next" @click="nextImage">&gt;</button> -->
        </div>
      </div>
    </div>
  </div>

  <!-- Areas de Atuação -->
  <div class="BackgroundGradientBP">
    <!-- Cards das Atuações -->
    <h1 id="AreasAtuacao" class="Titulo">Áreas de Atuação</h1>
    <div class="cardsflex center">
      <v-card class="cardAtuacoes reveal">
        <v-img id="cardImage" src="../assets/trabalhista.png"/>
        <h3 class="TituloCards">Direito Trabalhista</h3>
        <p class="textCards">Trabalho sem carteira assinada, Verbas Rescisórias, Férias Vencidas, Horas Extras, Adicional de Insalubridade e Periculosidade, Acúmulo de Função, Assédio Moral ou Sexual, Justa Causa Indevida e Rescisão Indireta.</p>
      </v-card>
      <v-card class="cardAtuacoes reveal">
        <v-img id="cardImage" src="../assets/criminal.png"/>
        <h3 class="TituloCards">Direito Criminal</h3>
        <p class="textCards">Representação Criminal, Diligência em Sede Policial, Defesa em Processos Criminais e Recursos em Geral.</p>
      </v-card>
      <v-card class="cardAtuacoes reveal">
        <v-img id="cardImage" src="../assets/previdenciario.png"/>
        <h3 class="TituloCards">Previdenciário</h3>
        <p class="textCards">Saiba qual a melhor aposentadoria para o seu caso!<br>Aposentadoria por Idade; Tempo de Contribuição; Aposentadoria Especial; Pensão por Morte; Auxílio Acidente; Auxílio Doença; Revisão da Vida Toda; entre outros. <br>Fale agora com um especialista no assunto.</p>
      </v-card>
      <v-card class="cardAtuacoes">
        <v-img id="cardImage" src="../assets/familia.png"/>
        <h3 class="TituloCards">Direito de Família</h3>
        <p class="textCards">Fixação de Alimentos, Guarda e Regulamentação de Visitas. Revisão ou Exoneração de Alimentos, Alienação Parental.</p>
      </v-card>
      <v-card class="cardAtuacoes FadeFromLeft">
        <v-img id="cardImage" src="../assets/inventario.png"/>
        <h3 class="TituloCards">Inventário e Partilha</h3>
        <p class="textCards">Elaboração de Inventário Extrajudicial em Cartório ou Judicialmente.</p>
      </v-card>
      <v-card class="cardAtuacoes FadeFromLeft">
        <v-img id="cardImage" src="../assets/imobiliario.png"/>
        <h3 class="TituloCards">Direito Imobiliário</h3>
        <p class="textCards">Regularize seu imóvel extrajudicialmente em cartório ou através de ação de usucapião e tenha em mãos a escritura pública do seu bem, venha fazer uma consultoria.</p>
      </v-card>
      <v-card class="cardAtuacoes FadeFromLeft">
        <v-img id="cardImage" src="../assets/contratos.png"/>
        <h3 class="TituloCards">Contratos e Certidões Imobiliárias</h3>
        <p class="textCards">Elaboramos seu Contrato de Venda e Compra, Locação, Direitos Possessórios e Cessão de Direitos Imobiliários, fale com um especialista.</p>
      </v-card>
      <v-card class="cardAtuacoes FadeFromLeft">
        <v-img id="cardImage" src="../assets/consumidor.png"/>
        <h3 class="TituloCards">Direito do Consumidor</h3>
        <p class="textCards">Notificação Extrajudicial, Fraude contra Consumidores, Dano material e Dano Moral.</p>
      </v-card>
      <v-card class="cardAtuacoes FadeFromLeft">
        <v-img id="cardImage" src="../assets/acessoria.png"/>
        <h3 class="TituloCards">Assessoria Jurídica para Empresas</h3>
        <p class="textCards">Elaboração de Contratos com colaboradores, consumidores, fornecedores, Notificações e Emissão de Termos e Certidões.</p>
      </v-card>
      <v-card class="AtuacoesButtonCard FadeFromLeft">
        <p class="textoCardAtuacoes">Atuamos em diversas áreas e resolvemos todo tipo de problemas. Profissionais de qualidade consolidados no mercado!</p>
        <v-btn class="buttonAtuacoes">Clique aqui para entrar em contato!</v-btn>
      </v-card>
    </div>
  </div>

  <!-- Sobre nós Extended-->
  <div v-if="contactExtended" class="BackgroundPessoal">
    <v-layout class="SobreNosItem" id="SobreNos">
      <v-img :width="300" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
      <div class="SobreNosTextDiv">
        <h1 class="SobreNosTitulo">Sobre Nós</h1>
        <p class="SobreNosText verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </v-layout>
    <v-layout class="SobreNosItem">
      <v-img :width="300" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
      <div class="SobreNosTextDiv">
        <h1 class="SobreNosTitulo">Sobre Nós</h1>
        <p class="SobreNosText verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </v-layout>
    <v-layout class="SobreNosItem">
      <v-img :width="300" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
      <div class="SobreNosTextDiv">
        <h1 class="SobreNosTitulo">Sobre Nós</h1>
        <p class="SobreNosText verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </v-layout>
  </div>


  <!-- Sobre nós Collapsed -->
  <div v-else class="BackgroundPessoal">
    <v-layout class="SobreNosItemColl" id="SobreNos">
      <v-img :width="200" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
      <div class="SobreNosTextDivColl">
        <h1 class="SobreNosTituloColl">Sobre Nós</h1>
        <p class="SobreNosTextColl verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </v-layout>
    <v-layout class="SobreNosItemColl">
      <v-img :width="200" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
      <div class="SobreNosTextDivColl">
        <h1 class="SobreNosTituloColl">Sobre Nós</h1>
        <p class="SobreNosTextColl verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </v-layout>
    <v-layout class="SobreNosItemColl">
      <v-img :width="200" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
      <div class="SobreNosTextDivColl">
        <h1 class="SobreNosTituloColl">Sobre Nós</h1>
        <p class="SobreNosTextColl verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </v-layout>
  </div>

  <!-- Contato extended -->
  <div class="orangeDivider"></div>
    <div v-if="contactExtended" id="contact" class="contactsDiv">
      <v-layout>
        <div class="situacoesDiv">
          <p class="TituloContact">ESTAMOS PREPARADOS PARA TE ATENDER NOS MAIS DIVERSOS CENÁRIOS!</p>
          <div class="cenarioBundle">
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Trabalhista</p>
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Criminal</p>
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Previdenciário</p>
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito de Família</p>
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Inventário e Partilha</p>
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Imobiliário</p>
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Contratos e Certidões Imobiliárias</p>
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito do Consumidor</p>
            <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Assessoria Jurídica para Empresas</p>
          </div>
        </div>
        <!-- <div class="midDivider"></div> -->
        <div class="formsDiv">
          <p class="TituloContact">ENTRE EM CONTATO!</p>

          <v-layout class="fullwidth">
            <input class="formInputs" v-model="infoEmail.name" type="text" name="nameInput" placeholder="Nome" id="nameInput">
          </v-layout>
          <v-layout class="fullwidth">
            <input class="formInputs" v-model="infoEmail.mail" type="text" name="mailInput" placeholder="E-mail" id="mailInput">
          </v-layout>
          <v-layout class="fullwidth">
            <input class="formInputs" v-model="infoEmail.phone" type="text" name="phoneInput" placeholder="Telefone / Celular" id="phoneInput">
          </v-layout>
          <v-layout class="fullwidth">
            <input class="formInputs" v-model="infoEmail.subject" type="text" name="subjectInput" placeholder="Assunto" id="subjectInput">
          </v-layout>
          <v-layout class="fullwidth">
            <textarea class="duvidaInput" v-model="infoEmail.body" name="bodyInput" placeholder="Descreva sua Dúvida" id="bodyInput"></textarea>
          </v-layout>
          <v-layout class="fullwidth">
            <v-btn class="buttonContact" @click="enviarEmail(infoEmail)">SOLICITAR CONTATO</v-btn>
          </v-layout>
        </div>
      </v-layout>
    </div>

    <!-- contato collapsed -->
    <div v-else id="contact" class="contactsDivColl">
      <div class="situacoesDivColl">
        <p class="TituloContact">Estamos preparados para te atender em qualquer cenário!</p>
        <div class="cenarioBundle">
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Trabalhista</p>
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Criminal</p>
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Previdenciário</p>
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito de Família</p>
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Inventário e Partilha</p>
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Imobiliário</p>
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Contratos e Certidões Imobiliárias</p>
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito do Consumidor</p>
          <p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Assessoria Jurídica para Empresas</p>
        </div>
      </div>
      <!-- <div class="midDivider"></div> -->
      <div class="formsDivColl">
        <p class="TituloContact">Entre em contato!</p>

        <v-layout class="fullwidth">
          <input class="formInputs" v-model="infoEmail.name" type="text" name="nameInput" placeholder="Nome" id="nameInput">
        </v-layout>
        <v-layout class="fullwidth">
          <input class="formInputs" v-model="infoEmail.mail" type="text" name="mailInput" placeholder="E-mail" id="mailInput">
        </v-layout>
        <v-layout class="fullwidth">
          <input class="formInputs" v-model="infoEmail.phone" type="text" name="phoneInput" placeholder="Telefone / Celular" id="phoneInput">
        </v-layout>
        <v-layout class="fullwidth">
          <input class="formInputs" v-model="infoEmail.subject" type="text" name="subjectInput" placeholder="Assunto" id="subjectInput">
        </v-layout>
        <v-layout class="fullwidth">
          <textarea class="duvidaInput" v-model="infoEmail.body" name="bodyInput" placeholder="Descreva sua Dúvida" id="bodyInput"></textarea>
        </v-layout>
        <v-layout class="fullwidth">
          <v-btn class="buttonAtuacoes" @click="enviarEmail(infoEmail)">Clique aqui para enviar</v-btn>
        </v-layout>
      </div>
    </div>
    <div class="orangeDivider"></div>

    <!-- Mapa -->
    <div class="BackgroundMap">
      <div class="MapEnderecoDiv" id="Localizacao">
        <h1 class="SobreNosTituloColl">Nossa Localização</h1>
        <p class="EnderecoText verticalCenter">Av. Maria José de Siqueira Melo, 810C, Jd. Pamela, Biritiba-Mirim 08940-000</p>
        <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3029.1210242820457!2d-46.04246548459155!3d-23.581274645862663!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cdc2c3bea9efa3%3A0x49e1e2c423b5bc3!2sAv.%20Maria%20Jos%C3%A9%20de%20Siqueira%20Melo%2C%20810%2C%20Biritiba%20Mirim%20-%20SP%2C%2008940-000!5e0!3m2!1spt-PT!2sbr!4v1680641291686!5m2!1spt-PT!2sbr"
          class="MapObject"
          width="600"
          height="450"
          style="border:0;"
          allowfullscreen="false"
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade">
        </iframe>
      </div>
    </div>
</template>

<script>
export default {
  name: 'HomePage',

  data(){
    return{
      extended: true,
      extendedSide: false,
      contactExtended: true,
      fadeIn: true,
      fadeOut: false,

      linkMailTo: '',
      mailTo: 'asmugho@gmail.com',

      infoEmail: {
        name: '',
        mail: '',
        phone: '',
        subject: '',
        body: '',
      },

      currentImageShown: {
        name: 'banner1.png',
        text: 'Acessoria Jurídica para Empresas',
      },

      images: [
        {name: 'banner1.png', text: 'Acessoria Jurídica para Empresas'},
        {name: 'banner2.png', text: 'Direito Trabalhista'},
        // {url: '../assets/banners/banner1.png', description: 'Acessoria Jurídica para Empresas'},
        // {url: '../assets/banners/banner1.png', description: 'Acessoria Jurídica para Empresas'},
      ],

      currentIndex: 0,
      intervalId: null,
      delay: 10000,
    }
  },
  // computed: {
  //   currentImage(){
  //     return {
  //       name: this.images[this.currentIndex].url,
  //       text: this.images[this.currentIndex].description
  //     }
  //   }
  // },
  mounted() {
    this.currentImageShown = this.images[0]
    this.intervalId = setInterval(this.nextImage, this.delay)
    setTimeout(()=>{
      document.querySelector('.FadeFromLeftTopText').classList.add('active')
    }, 1000)
    // window.addEventListener('scroll', this.checkFadeFromLeftElements())
  },
  beforeUnmount() {
    clearInterval(this.intervalId)
  },

  created(){
    // this.currentImageShown.path = this.images[this.currentIndex].url
    // this.currentImageShown.text = this.images[this.currentIndex].description
    
    this.logHeight()
    this.collapseMenu()
    this.collapseContact()
  },
  methods: {
    // currentImage(){
    //   this.currentImageShown = this.images[this.currentIndex]
    // },

    collapseMenu() {
      if (window.innerWidth <= 1200){
        this.extended = false
      }
      else{
        this.extended = true
        this.extendedSide = false
      }
    },

    collapseContact() {
      if (window.innerWidth <= 900){
        this.contactExtended = false
      }
      else{
        this.contactExtended = true
      }
    },

    logHeight(){
      window.onresize = () => {
        this.collapseMenu()
        this.collapseContact()
      }
    },

    OpnClsSidebar(){
      this.extendedSide = !this.extendedSide
    },

    scrollToElement(elementId){
      let elem = document.getElementById(elementId)
      let y = elem.getBoundingClientRect().top + window.pageYOffset + -30
      window.scrollTo({top: y, behavior: 'smooth'});

      // document.getElementById(elementId).scrollIntoView({ behavior: 'auto', block: 'end' })
    },

    enviarEmail(info) {
      const destinatario = "asmugho@gmail.com";
      const assunto = info.subject
      const corpo = `Olá, sou ${info.name}!\nMeu telefone para contato: ${info.phone}\n\n${info.body}`;
      const linkEmail = "mailto:" + destinatario + "?subject=" + encodeURI(assunto) + "&body=" + encodeURI(corpo);
      const link = document.createElement("a");
      link.setAttribute("href", linkEmail);
      link.click();
    },

    changeImage(){
      this.currentImageShown = {
        name: this.images[this.currentIndex].name,
        text: this.images[this.currentIndex].text
      }
    },
    nextImage() {
      document.querySelector('.FadeFromLeftTopText').classList.remove('active')
      this.fadeIn = false;
      this.fadeOut = true;
      
      setTimeout(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
        this.fadeIn = true;
        this.fadeOut = false;
        this.changeImage()
        document.querySelector('.FadeFromLeftTopText').classList.add('active')
      }, 500);
    },
    prevImage() {
      this.fadeIn = false;
      this.fadeOut = true;
      document.querySelector('.FadeFromLeftTopText').classList.remove('active')
      
      setTimeout(() => {
        this.currentIndex =
        this.currentIndex === 0 ? this.images.length - 1 : this.currentIndex - 1;
        this.fadeIn = true;
        this.fadeOut = false;
        this.changeImage()
        document.querySelector('.FadeFromLeftTopText').classList.add('active')
      }, 500);
    },

    reveal() {
      const elements = document.querySelectorAll('.reveal')

      console.log('olá')

      elements.forEach((element) => {
        // if element.getBoundingClientRect().top
        element.checkVisibility()
        console.log(element.getBoundingClientRect().top)
        console.log(element.getBoundingClientRect().left)
      })
    },
  }
}
</script>
<style scoped>

</style>