Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Componente utilizado para definir a ULR da política de privacidade utilizado nos formulários de exibir as informações de do imóvel e acessar funcionalidades para agendamento de visita e simulação de crédito (desktop e mobile), contato, compartilhamento e favoritar.

...

Parametrização

Nome

Descrição

Observação

URL dos termos de uso do serviço

Possibilita definir a URL da política de privacidade do site, ao clicar, será aberta uma nova guia para exibição da página. A URL definida neste parâmetro será utilizada nos formulários de simulação de crédito e agendamento de visita para as versões desktop e mobile.

Record Id

Parâmetro é preenchido automaticamente.

Default {!recordId}

Image Added

Info

Está área não possuí nenhuma parametrização possível. As cores dos botões de Fotos e Mapa é baseada nas cores primárias configurada da comunidade.

Configuração de CSS - Detalhe do imóvel (mobile)

Classes

Descrição

.exibir-imovel-site

container do componente

.exibir-imovel-site .modal-agendar-simular

modal com simulador ou agendar visita

.exibir-imovel-site .modal-simulador-credpago

modal mobile com formulario credpago

.exibir-imovel-site .modal-simulador-credpago .form-simular-credito

lado formulario

.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .titulo.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .subtitulosubtitulo

subtitulo simulador

.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .form-simular-credito-inputs

inputs

.exibir-imovel-site .modal-simulador-credpago .p-button-card-action

CTA simulador

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado

lado resposta aprovado

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta

div com imagem e titulo

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta .titulo

titulo resposta simulação aprovado

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta img

imagem resposta simulação aprovado

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .resposta

texto aprovado resposta simulação

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado

lado resposta reprovado

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .imagem-resposta img

imagem resposta simulação reprovado

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .imagem-resposta .titulo

titulo resposta simulação reprovado

.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .resposta

texto reprovado resposta simulação

.exibir-imovel-site .modal-agendar-visita

modal mobile com formulario agendar visita

.box-valores-mobile

caixa de custos referentes ao imóvel no mobile

.box-valores-mobile lightning-formatted-number

valores

.box-valores-mobile span

descrição do valor

...

/* Aprovado */
:root .exibir-imovel-site .modal-agendar-simular.aprovado{
background: #ff5d7c !important;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado{
background: #ff5d7c !important;
text-align: center;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .p-button-card-action {
padding: 4px 20px;
font-size: medium;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .titulo, .exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .resposta { color: #0d006c !important; }
/Reprovado/
:root .exibir-imovel-site .modal-agendar-simular.reprovado{
background: #0d006c !important;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado{
background: #0d006c !important;
text-align: center;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .p-button-card-action {
font-size: medium;
background: #ff5d7c !important;
border-color: #ff5d7c !important;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .titulo, .exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .resposta {

color: #ff5d7c !important;

}

/*Exibir imovel site (mobile) */
:root .box-valores-mobile{
background: #ff5d7c !important;
}
:root .box-valores-mobile span {color: white !important}
:root .box-valores-mobile lightning-formatted-number { /Custos do imóvel/
color: #0d006c;
}
:root .box-valores-mobile .valor-total span{

color:darkgray

}

Configuração de CSS - Vitrine Imóveis semelhantes (desktop)

  • Cor do botão de rolagem

  • Cor do título

  • Tamanho da fonte do título

Configuração de CSS - Flipcard do imóvel (desktop)

  • Cor do fundo

  • Cor da fonte (Aluguel, Condomínio, IPTU)

  • Botão principal [Agendar Visita e Simular Crédito]

    • Cor do fundo

    • Cor do texto

  • Botões secundários [Perguntar, Compartilhar e Favoritar ]

    • Cor de fundo

    • Cor da fonte

    • Cor de destaque do ícone favoritar

  • Agendar visita

    • Cor de fundo

    • Cor de fundo do formulário

    • Cor do texto do formulário

    • Cor de fundo do dia e horário

    • Cor do texto do dia e horário

    • Cor de fundo do botão Agendar visita

    • Cor do texto do botão Agendar visita

    • Cor do texto do termo de serviço

  • Simular Crédito

    • Cor de fundo

    • Cor de fundo do formulário

    • Cor do texto do formulário

    • Cor de fundo do botão Simular crédito

    • Cor do texto do botão Simular crédito

    • Cor do texto do termo de serviço

  • Perguntar

    • Cor de fundo

    • Cor de fundo do formulário

    • Cor do texto do formulário

    • Cor de fundo do botão Perguntar

    • Cor do texto do botão Perguntar

    • Cor do texto do termo de serviço

  • Compartilhar

    • Cor do fundo

    • Cor do texto título

    • Cor do texto link

Classes

Descrição

.flip-card-acoes-imovel

flipcard de simulação e agendamento de visita

.flip-card-acoes-imovel .frente

representa parte da frente do card onde é apresentado os valores e acoes de compartilhamento, favoritar etc

.flip-card-acoes-imovel .frente .custos-imovel

representa a parte dos custos do imovel

.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel

texto preço total da locação

.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel .valor-total-formatado

valor formatado

.flip-card-acoes-imovel .frente .botoes-acao

representa tanto botao de visita quanto simular credito caso haja

.flip-card-acoes-imovel .frente .favoritar-compartilhar

representa os botões de compartilhar e favoritar

.flip-card-acoes-imovel .verso

representa parte de trás do card tanto formulario de visita quanto simulacao de credito

.flip-card-acoes-imovel .titulo

titulo dos dois formularios

...

/Cenário aprovado/
.flip-card-credpago-imovel .frente .resultadoAprovado .p-button-card-action{
background: #0d006c !important;
}
.flip-card-credpago-imovel .frente .resultadoAprovado .titulo{
color: #0d006c !important;
}

Configuração de CSS - Exibir imóveis site

Classes

Descrição

.exibir-imovel-site .slds-listbox

Limitar dropdrown incluindo de horário e visita

...

Exemplo de implementação CSS

/* Exibir imóveis site */
:root .exibir-imovel-site .slds-listbox {
max-height: 120px;
border: none;
border-radius: 10px;
}/*Exibir imovel site (mobile) */
:root .box-valores-mobile{
background: #ff5d7c !important;
}
:root .box-valores-mobile span {color: white !important}
:root .box-valores-mobile lightning-formatted-number { /Custos do imóvel/
color: #0d006c;
}
:root .box-valores-mobile .valor-total span{color:darkgray}