|
|
@@ -1,154 +1,636 @@
|
|
|
<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
|
|
|
-
|
|
|
<template>
|
|
|
- <q-page class="bg-grey-2 q-pa-md">
|
|
|
+ <q-page class="sob-medida-page">
|
|
|
+ <div class="page-shell">
|
|
|
+ <span class="page-title gradient-diarista">Serviço Sob Medida</span>
|
|
|
|
|
|
- <!-- Título -->
|
|
|
- <div class="text-center text-primary text-subtitle1 text-weight-bold q-mb-md">
|
|
|
- Serviço Sob Medida
|
|
|
- </div>
|
|
|
+ <!-- Seu pedido -->
|
|
|
+ <q-card flat bordered class=" figma-card compact-card">
|
|
|
+ <div class="field-label text-center gradient-diarista">
|
|
|
+ Quantidade de serviço
|
|
|
+</div>
|
|
|
|
|
|
- <!-- Card Pedido -->
|
|
|
- <q-card flat bordered class="rounded-card q-pa-md q-mb-md">
|
|
|
-
|
|
|
- <div class="text-primary text-subtitle2 text-weight-bold q-mb-md">
|
|
|
- Seu pedido
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Tipo -->
|
|
|
- <div class="text-primary text-caption text-weight-bold q-mb-sm">
|
|
|
- Tipo de serviço
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="row q-col-gutter-sm q-mb-md">
|
|
|
- <div
|
|
|
- v-for="tipo in tiposServico"
|
|
|
- :key="tipo"
|
|
|
- class="col-6"
|
|
|
- >
|
|
|
- <q-radio
|
|
|
- v-model="tipoSelecionado"
|
|
|
- :val="tipo"
|
|
|
- :label="tipo"
|
|
|
- color="purple"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Especialidades -->
|
|
|
- <div class="text-primary text-caption text-weight-bold q-mb-sm">
|
|
|
- Especialidade preferencial?
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="row q-col-gutter-sm q-mb-md">
|
|
|
- <div
|
|
|
- v-for="item in especialidades"
|
|
|
- :key="item"
|
|
|
- class="col-6"
|
|
|
- >
|
|
|
- <q-checkbox
|
|
|
- v-model="especialidadesSelecionadas"
|
|
|
- :val="item"
|
|
|
- :label="item"
|
|
|
- color="purple"
|
|
|
- />
|
|
|
+<div class="quantity-stepper">
|
|
|
+ <q-btn
|
|
|
+ round
|
|
|
+ flat
|
|
|
+ icon="remove"
|
|
|
+ class="quantity-btn"
|
|
|
+ @click="decreaseQuantity"
|
|
|
+ />
|
|
|
+
|
|
|
+ <span class="quantity-value gradient-diarista">
|
|
|
+ {{ quantity }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <q-btn
|
|
|
+ round
|
|
|
+ flat
|
|
|
+ icon="add"
|
|
|
+ class="quantity-btn"
|
|
|
+ @click="increaseQuantity"
|
|
|
+ />
|
|
|
+</div>
|
|
|
+ <div class="card-title gradient-diarista">Seu pedido</div>
|
|
|
+
|
|
|
+ <div class="options-grid">
|
|
|
+ <div
|
|
|
+ v-for="tipo in option"
|
|
|
+ :key="tipo"
|
|
|
+ class="option-col"
|
|
|
+ >
|
|
|
+ <q-radio
|
|
|
+ v-model="selectedOption"
|
|
|
+ :val="tipo"
|
|
|
+ :label="tipo"
|
|
|
+ color="purple"
|
|
|
+ dense
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Descrição -->
|
|
|
- <div class="text-primary text-caption text-weight-bold q-mb-sm">
|
|
|
- Descreva detalhes do pedido
|
|
|
- </div>
|
|
|
-
|
|
|
- <q-input
|
|
|
- v-model="descricao"
|
|
|
- type="textarea"
|
|
|
- outlined
|
|
|
- autogrow
|
|
|
- placeholder="Olá, desejo profissional dedicado que irá fazer..."
|
|
|
- />
|
|
|
-
|
|
|
- </q-card>
|
|
|
-
|
|
|
- <!-- Faixa de preço -->
|
|
|
- <div class="text-primary text-subtitle2 text-weight-bold q-mb-sm">
|
|
|
- Faixa de preço
|
|
|
- </div>
|
|
|
|
|
|
- <q-card flat bordered class="rounded-card q-pa-md q-mb-md">
|
|
|
+ <div class="field-label text-center gradient-diarista">Tipo de serviço</div>
|
|
|
+<div class="options-grid">
|
|
|
+ <div
|
|
|
+ v-for="tipo in selectedServiceTypes"
|
|
|
+ :key="tipo"
|
|
|
+ class="option-col"
|
|
|
+ >
|
|
|
+ <q-radio
|
|
|
+ v-model="selectedServiceType"
|
|
|
+ :val="tipo"
|
|
|
+ :label="tipo"
|
|
|
+ color="purple"
|
|
|
+ dense
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <q-range
|
|
|
- v-model="faixaPreco"
|
|
|
- :min="80"
|
|
|
- :max="300"
|
|
|
- color="purple"
|
|
|
- label
|
|
|
- />
|
|
|
+<div class="field-label text-center gradient-diarista">Especialidade preferencial?</div>
|
|
|
+<div class="options-grid">
|
|
|
+ <div
|
|
|
+ v-for="item in specialties"
|
|
|
+ :key="item"
|
|
|
+ class="option-col"
|
|
|
+ >
|
|
|
+ <q-checkbox
|
|
|
+ v-model="selectedSpecialties"
|
|
|
+ :val="item"
|
|
|
+ :label="item"
|
|
|
+ color="purple"
|
|
|
+ dense
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
- <div class="text-caption text-grey-7 text-center q-mt-sm">
|
|
|
- Selecione a faixa de preço integral para receber propostas de diaristas.
|
|
|
- </div>
|
|
|
+ i<div class="field-label text-center gradient-diarista">
|
|
|
+ Descreva detalhes do pedido
|
|
|
+ <span class="optional">(opcional)</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-input
|
|
|
+ v-model="description"
|
|
|
+ type="textarea"
|
|
|
+ outlined
|
|
|
+ bg-color="white"
|
|
|
+ color="dark"
|
|
|
+ input-class="text-black"
|
|
|
+ class="description-box"
|
|
|
+ placeholder="Olá, desejo profissional dedicado que irá fazer..."
|
|
|
+ />
|
|
|
+ </q-card>
|
|
|
|
|
|
- </q-card>
|
|
|
+ <!-- Faixa -->
|
|
|
+ <div class="section-title gradient-diarista">Faixa de preço por 8 horas</div>
|
|
|
+<q-card flat bordered class="figma-card compact-card">
|
|
|
+ <div class="range-container">
|
|
|
+ <!-- bolha min -->
|
|
|
+ <div
|
|
|
+ class="price-pin"
|
|
|
+ :style="{ left: minPosition + '%' }"
|
|
|
+ >
|
|
|
+ <span>{{ priceRange.min }}</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- Data -->
|
|
|
- <div class="text-primary text-subtitle2 text-weight-bold q-mb-sm">
|
|
|
- Data e hora
|
|
|
+ <!-- bolha max -->
|
|
|
+ <div
|
|
|
+ class="price-pin"
|
|
|
+ :style="{ left: maxPosition + '%' }"
|
|
|
+ >
|
|
|
+ <span>{{ priceRange.max }}</span>
|
|
|
</div>
|
|
|
|
|
|
- <q-card flat bordered class="rounded-card q-pa-md q-mb-md">
|
|
|
- <q-date v-model="dataSelecionada" minimal color="purple" />
|
|
|
- </q-card>
|
|
|
-
|
|
|
- <!-- Botão -->
|
|
|
- <q-btn
|
|
|
- label="Continuar"
|
|
|
- color="primary"
|
|
|
- class="full-width q-mt-md"
|
|
|
- unelevated
|
|
|
- size="lg"
|
|
|
- @click="continuar"
|
|
|
+ <q-range
|
|
|
+ v-model="priceRange"
|
|
|
+ :min="PRICE_LIMITS.min"
|
|
|
+ :max="PRICE_LIMITS.max"
|
|
|
+ color="secondary"
|
|
|
+ class="price-range"
|
|
|
/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="range-helper gradient-diarista">
|
|
|
+ Selecione a faixa de preço integral para receber propostas de diaristas.
|
|
|
+ </div>
|
|
|
+</q-card>
|
|
|
|
|
|
+ <!-- Data -->
|
|
|
+ <div class="section-title gradient-diarista">Data e hora</div>
|
|
|
+ <q-card flat bordered class="figma-card date-card">
|
|
|
+ <q-date
|
|
|
+ v-model="selectedDate"
|
|
|
+ minimal
|
|
|
+ color="purple"
|
|
|
+ class="figma-date calendar-custom "
|
|
|
+/>
|
|
|
+ </q-card>
|
|
|
+
|
|
|
+ </div>
|
|
|
</q-page>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue'
|
|
|
+import { ref, computed, watch } from 'vue'
|
|
|
+import { useQuasar } from 'quasar'
|
|
|
+
|
|
|
+import ServiceSelectionSheet from 'src/pages/search/components/ServiceSelectionSheet.vue'
|
|
|
+import ServiceTimeSelectionDialog from 'src/pages/search/components/ServiceTimeSelectionDialog.vue'
|
|
|
+
|
|
|
+import { createCustomSchedule } from 'src/api/customSchedules'
|
|
|
+import { userStore } from 'src/stores/user'
|
|
|
+import { calculateDailyPrices } from 'src/helpers/utils'
|
|
|
|
|
|
-const tiposServico = [
|
|
|
+const $q = useQuasar()
|
|
|
+const user =userStore();
|
|
|
+
|
|
|
+const option = ['Residencial', 'Comercial']
|
|
|
+
|
|
|
+const selectedServiceTypes = [
|
|
|
'Limpeza',
|
|
|
'Pré-mudança',
|
|
|
'Evento',
|
|
|
'Pós-obra'
|
|
|
]
|
|
|
|
|
|
-const especialidades = [
|
|
|
+const specialties = [
|
|
|
'Passar roupa',
|
|
|
'Limpar vidros',
|
|
|
'Lavar roupa',
|
|
|
'Cozinhar'
|
|
|
]
|
|
|
|
|
|
-const tipoSelecionado = ref('Residencial')
|
|
|
-const especialidadesSelecionadas = ref([])
|
|
|
-const descricao = ref('')
|
|
|
-const faixaPreco = ref({ min: 120, max: 180 })
|
|
|
-const dataSelecionada = ref('2025/08/17')
|
|
|
-
|
|
|
-function continuar() {
|
|
|
- console.log({
|
|
|
- tipo: tipoSelecionado.value,
|
|
|
- especialidades: especialidadesSelecionadas.value,
|
|
|
- descricao: descricao.value,
|
|
|
- preco: faixaPreco.value,
|
|
|
- data: dataSelecionada.value
|
|
|
+const selectedOption = ref('Residencial')
|
|
|
+const selectedServiceType = ref('Limpeza')
|
|
|
+const selectedSpecialties = ref([])
|
|
|
+const description = ref('')
|
|
|
+const priceRange = ref({ min: 150, max: 300 })
|
|
|
+const selectedDate = ref(null)
|
|
|
+
|
|
|
+const PRICE_LIMITS = Object.freeze({
|
|
|
+ min: 100,
|
|
|
+ max: 500
|
|
|
+})
|
|
|
+
|
|
|
+const minPosition = computed(() =>
|
|
|
+ ((priceRange.value.min - PRICE_LIMITS.min) /
|
|
|
+ (PRICE_LIMITS.max - PRICE_LIMITS.min)) * 100
|
|
|
+)
|
|
|
+
|
|
|
+const maxPosition = computed(() =>
|
|
|
+ ((priceRange.value.max - PRICE_LIMITS.min) /
|
|
|
+ (PRICE_LIMITS.max - PRICE_LIMITS.min)) * 100
|
|
|
+)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function openServiceSelection () {
|
|
|
+ $q.dialog({
|
|
|
+ component: ServiceSelectionSheet,
|
|
|
+ componentProps: {
|
|
|
+ provider: providerMock.value,
|
|
|
+ selectedDate: selectedDate.value
|
|
|
+ }
|
|
|
+ }).onOk((payload) => {
|
|
|
+ if (payload?.serviceType) {
|
|
|
+ openServiceTimeSelection(payload.serviceType)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function openServiceTimeSelection (serviceType) {
|
|
|
+ $q.dialog({
|
|
|
+ component: ServiceTimeSelectionDialog,
|
|
|
+ componentProps: {
|
|
|
+ serviceType,
|
|
|
+ provider: calculateDailyPrices(priceRange.value.max * quantity.value),
|
|
|
+ selectedDate: selectedDate.value
|
|
|
+ }
|
|
|
+ }).onOk(async (payloadFinal) => {
|
|
|
+ await saveFinalOrder(payloadFinal)
|
|
|
+})
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * abre modal somente quando usuário escolher um dia
|
|
|
+ */
|
|
|
+watch(selectedDate, (newDate, previousDate) => {
|
|
|
+ if (!newDate) return
|
|
|
+ if (newDate === previousDate) return
|
|
|
+
|
|
|
+ openServiceSelection()
|
|
|
+})
|
|
|
+
|
|
|
+async function saveFinalOrder (payloadFinal) {
|
|
|
+ const [startHour, endHour] = payloadFinal.slot.split('-')
|
|
|
+
|
|
|
+ const payload = {
|
|
|
+ client_id: user.user.client.id,
|
|
|
+ // address_id: 1,endereço principal do cliente, por enquanto hardcoded
|
|
|
+ // quantity: 1,pegar do tipo de serviço escolhido, por enquanto hardcoded
|
|
|
+ date: payloadFinal.date,
|
|
|
+ period_type: String(payloadFinal.serviceType.hoursCount),
|
|
|
+ start_time: `${startHour}:00:00`,
|
|
|
+ end_time: `${endHour}:00:00`,
|
|
|
+ address_type: selectedOption.value.toLowerCase(),
|
|
|
+ // service_type_id: 1 pega do cadastro do tipo de serviço, por enquanto hardcoded
|
|
|
+ description: description.value,
|
|
|
+ min_price: priceRange.value.min,
|
|
|
+ max_price: priceRange.value.max,
|
|
|
+ offers_meal: payloadFinal.meal === 'offer',
|
|
|
+ speciality_ids: selectedSpecialties.value
|
|
|
+ }
|
|
|
+
|
|
|
+ await createCustomSchedule(payload)
|
|
|
+
|
|
|
+ $q.notify({
|
|
|
+ type: 'positive',
|
|
|
+ message: 'Pedido sob medida salvo com sucesso!'
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
+const quantity = ref(1)
|
|
|
+
|
|
|
+function increaseQuantity () {
|
|
|
+ quantity.value++
|
|
|
+}
|
|
|
+
|
|
|
+function decreaseQuantity () {
|
|
|
+ if (quantity.value > 1) {
|
|
|
+ quantity.value--
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.rounded-card {
|
|
|
+<style scoped lang="scss">
|
|
|
+.sob-medida-page {
|
|
|
+ background: #f6f5fb;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-shell {
|
|
|
+ max-width: 420px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.page-title {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 0 0 20px;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.figma-card {
|
|
|
+ border-radius: 24px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 18px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title,
|
|
|
+.section-title {
|
|
|
+ color: #7b61ff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ margin-left: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.field-label {
|
|
|
+ color: #7b61ff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 18px 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.optional {
|
|
|
+ color: #9e9e9e;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.options-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 12px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.option-col {
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.description-box {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.description-box :deep(textarea) {
|
|
|
+ min-height: 90px;
|
|
|
+}
|
|
|
+
|
|
|
+/* CARD */
|
|
|
+.compact-card {
|
|
|
+ border-radius: 32px;
|
|
|
+ padding: 28px 22px;
|
|
|
+ background: #fafafa;
|
|
|
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+.date-card {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: fit-content;
|
|
|
+ min-width: 320px;
|
|
|
+ max-width: 360px;
|
|
|
+ margin: 0 auto 20px;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 24px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* container */
|
|
|
+.range-container {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 58px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* bolha tipo pin */
|
|
|
+.price-pin {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ background: linear-gradient(180deg, #8b7cff, #6f57db);
|
|
|
+ border-radius: 50% 50% 50% 0;
|
|
|
+ transform: translateX(-50%) rotate(-45deg);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 6px 14px rgba(111, 87, 219, 0.28);
|
|
|
+ z-index: 5;
|
|
|
+}
|
|
|
+
|
|
|
+.price-pin span {
|
|
|
+ transform: rotate(45deg);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+/* RANGE */
|
|
|
+.price-range {
|
|
|
+ padding: 8px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* trilha */
|
|
|
+.price-range :deep(.q-slider__track-container) {
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 30px;
|
|
|
+ background: #ddd7ea;
|
|
|
+}
|
|
|
+
|
|
|
+/* preenchimento */
|
|
|
+.price-range :deep(.q-slider__track) {
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 30px;
|
|
|
+ background: linear-gradient(90deg, #d95cff, #7a5cff);
|
|
|
+}
|
|
|
+
|
|
|
+/* THUMB REAL FIGMA */
|
|
|
+.price-range :deep(.q-slider__thumb) {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ min-width: 24px;
|
|
|
+ min-height: 24px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #7a5cff !important;
|
|
|
+ border: 4px solid #ffffff;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* remove quadrado interno do quasar */
|
|
|
+.price-range :deep(.q-slider__thumb-shape) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.price-range :deep(.q-slider__focus-ring) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* texto helper */
|
|
|
+.range-helper {
|
|
|
+ margin-top: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.45;
|
|
|
+ text-align: center;
|
|
|
+ color: #6b6b6b;
|
|
|
+}
|
|
|
+
|
|
|
+/* transição suave */
|
|
|
+
|
|
|
+.price-pin,
|
|
|
+.price-range :deep(.q-slider__thumb) {
|
|
|
+ transition:
|
|
|
+ background 0.25s ease,
|
|
|
+ box-shadow 0.25s ease,
|
|
|
+ filter 0.25s ease;
|
|
|
+}
|
|
|
+
|
|
|
+// quantidade
|
|
|
+.quantity-stepper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 18px;
|
|
|
+ margin: 12px 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.quantity-btn {
|
|
|
+ background: #f5f0ff;
|
|
|
+ color: #7b61ff;
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+}
|
|
|
+
|
|
|
+.quantity-value {
|
|
|
+ min-width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+/* hover individual do balão */
|
|
|
+.price-pin:hover {
|
|
|
+ background: linear-gradient(180deg, #7b68ff, #5f46d8);
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* clique individual do balão */
|
|
|
+.price-pin:active {
|
|
|
+ background: linear-gradient(180deg, #6d52ff, #5438d6);
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* thumb hover individual */
|
|
|
+.price-range :deep(.q-slider__thumb:hover) {
|
|
|
+ background: #6d52ff !important;
|
|
|
+ box-shadow: 0 0 0 18px rgba(109, 82, 255, 0.22);
|
|
|
+}
|
|
|
+
|
|
|
+/* thumb selecionado */
|
|
|
+.price-range :deep(.q-slider__thumb:active) {
|
|
|
+ background: #5e3fff !important;
|
|
|
+ box-shadow: 0 0 0 22px rgba(94, 63, 255, 0.28);
|
|
|
+}
|
|
|
+
|
|
|
+/* trilha mais viva só quando mouse estiver no slider */
|
|
|
+.price-range:hover :deep(.q-slider__track) {
|
|
|
+ filter: brightness(0.95);
|
|
|
+}
|
|
|
+
|
|
|
+.calendar-custom {
|
|
|
border-radius: 20px;
|
|
|
+ background-color: white !important;
|
|
|
+
|
|
|
+ :deep(.q-date__main) {
|
|
|
+ background-color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__content) {
|
|
|
+ background-color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__calendar) {
|
|
|
+ background-color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__calendar-item--out) {
|
|
|
+ .q-btn__content {
|
|
|
+ color: #CBD5E1 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__calendar-days .q-btn__content) {
|
|
|
+ font-family: 'Inter', sans-serif;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1E293B;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__calendar-weekdays > div) {
|
|
|
+ color: #6366F1;
|
|
|
+ font-weight: 700;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__navigation) {
|
|
|
+ .q-btn {
|
|
|
+ color: #1E293B !important;
|
|
|
+ }
|
|
|
+ .q-btn__content {
|
|
|
+ color: #1E293B !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__nav-btn-month),
|
|
|
+ :deep(.q-date__nav-btn-year) {
|
|
|
+ color: #6366F1 !important;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__event) {
|
|
|
+ bottom: 4px;
|
|
|
+ height: 6px;
|
|
|
+ width: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__today) {
|
|
|
+ .q-btn__content {
|
|
|
+ color: #7c4dff !important;
|
|
|
+ background: #7c4dff15;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__selected) {
|
|
|
+ .q-btn__content {
|
|
|
+ background: #6366F1 !important;
|
|
|
+ color: white !important;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.q-date__view--months),
|
|
|
+ :deep(.q-date__view--years) {
|
|
|
+ .q-btn {
|
|
|
+ color: #1E293B !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 🔥 labels pretas */
|
|
|
+:deep(.q-radio__label),
|
|
|
+:deep(.q-checkbox__label) {
|
|
|
+ color: #000 !important;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.q-checkbox__inner),
|
|
|
+:deep(.q-radio__inner) {
|
|
|
+ color: #a78bfa !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 📱 celular */
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .page-shell {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .figma-card {
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .figma-date {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 📲 tablet */
|
|
|
+@media (min-width: 768px) {
|
|
|
+ .page-shell {
|
|
|
+ max-width: 460px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
