Componente utilizado para exibir as informações de do imóvel e acessar funcionalidades para agendamento de visita , 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} |
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 .subtitulo | 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 |
Exemplo de implementação CSS
/Simulador mobile/
:root .exibir-imovel-site .modal-agendar-simular input {
border: none !important;
}
.exibir-imovel-site .modal-agendar-simular {
background: #007ad2 !important;
color: white;
}
:root .exibir-imovel-site .modal-agendar-simular .titulo {
font-size: x-large !important;
color: white !important;
}
:root .exibir-imovel-site .modal-agendar-simular .resposta {
font-size: large !important;
}
/Frente/
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito{
background: inherit;
}
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .titulo, .exibir-imovel-site .modal-simulador-credpago .form-simular-credito .subtitulo {color: white !important;}
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .subtitulo{
font-size: medium !important;
}
/* 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 - Flipcard do imóvel (desktop)
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 |
Exemplo de implementação CSS
/Card de ações pagina de detalhes/
:root .flip-card-acoes-imovel .verso .slds-has-error .slds-form-element__help{/Cor mensagem de erro input/
color: white;
}
.flip-card-acoes-imovel .frente, .card__side.card__face--front {
background: #ff5d7c !important;
color: white;
}
.flip-card-acoes-imovel button[data-id="botaoFavoritar"]>svg>path{ /Coração de favoritar/
fill: #ff5d7c;
}
.flip-card-acoes-imovel button[data-id="botaoFavoritar"]:hover>svg>path{
fill: #0d006c;
}
.flip-card-acoes-imovel button[data-id="botaoDesfavoritar"]:hover>svg>path { /Coração de desfavoritar/
fill: #ff5d7c;
}
.flip-card-acoes-imovel .p-button-card-action {
background: #0d006c;
border-color: #0d006c !important;
text-transform: uppercase;
}
.flip-card-acoes-imovel .frente .agendar-simular .p-button-card-action {
padding: 5px;
}
.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel {
color: darkgray;
}
.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel .valor-total-formatado {
color: #0d006c !important;
}
.flip-card-acoes-imovel .frente .favoritar-compartilhar{
color:#0d006c;
background: inherit;
border-color: #0d006c;
}
.flip-card-acoes-imovel .card__side.card__face--back.verso, .flip-card-acoes-imovel .card__side.card__face--back.verso .form-visita{
background: #007ad2 !important;
}
:root .flip-card-acoes-imovel .verso .slds-button_icon{color: white;} /Botao de voltar no card de ações/
:root .flip-card-acoes-imovel .verso, .flip-card-acoes-imovel .verso .form-visita .slds-input.slds-combobox__input, input[name="datepicker"]{ /Input do datepicker/
background: #06ddf9 !important;
border-color:#06ddf9 !important;
}
Configuração de CSS - Simulador de crédito (desktop)
Classes | Descrição |
|---|---|
.flip-card-credpago-imovel | flipcard simulador credpago pagina de imovel |
.flip-card-credpago-imovel .frente | parte da frente do card onde estao os inputs e onde é mostrado o resultado da simulação |
.flip-card-credpago-imovel .frente .formCredito | formulario |
.flip-card-credpago-imovel .frente .resultadoAprovado | verso resultado aprovado |
.flip-card-credpago-imovel .frente .resultadoReprovado | verso resultado reprovado |
.flip-card-credpago-imovel .frente .titulo | titulo sobre formulario e resultado |
.flip-card-credpago-imovel .frente .resposta | resposta da simulação |
Exemplo de implementação CSS
/Simulador reprovado/
.flip-card-credpago-imovel .frente .resultadoReprovado {
background-color: #0d006c;
color: white;
text-align: center;
}
.flip-card-credpago-imovel .frente .resultadoReprovado .p-button-card-action{
background: #ff5d7c !important;
}
.flip-card-credpago-imovel .frente .resultadoReprovado .titulo{
color: #ff5d7c;
}
.flip-card-credpago-imovel .frente .resultadoAprovado .titulo span, .flip-card-credpago-pesquisa .frente .resultadoAprovado .resposta span {
text-transform: uppercase;
font-weight: bold;
}
/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;
}