|
|
@@ -5,31 +5,38 @@
|
|
|
<div class="scroll-track q-pb-md q-px-md text-text">
|
|
|
|
|
|
<q-card v-for="item in data" :key="item.id" class="proposal-card shadow-card" :flat="false">
|
|
|
- <div class="row no-wrap items-center">
|
|
|
-
|
|
|
- <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="q-mx-auto">
|
|
|
- <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
|
|
|
- <span v-else>{{ item.provider_name?.slice(0, 1) ?? '—' }}</span>
|
|
|
- </q-avatar>
|
|
|
-
|
|
|
- <div class="type customColor font10 fontbold">
|
|
|
- {{ $t('dashboard_client.client_proposals.candidate') }} <span>{{
|
|
|
- $t('dashboard_client.client_proposals.custom') }}</span>
|
|
|
+ <div class="row no-wrap">
|
|
|
+ <div class="column">
|
|
|
+ <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="q-mx-auto">
|
|
|
+ <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
|
|
|
+ <span v-else>{{ item.provider_name?.slice(0, 1) ?? '—' }}</span>
|
|
|
+ </q-avatar>
|
|
|
+ <q-space/>
|
|
|
+ <div class="customColor font8 fontbold">
|
|
|
+ <div>
|
|
|
+ {{ $t('dashboard_client.client_proposals.candidate') }}
|
|
|
+ </div>
|
|
|
+ <div class="no-wrap">
|
|
|
+ {{ $t('dashboard_client.client_proposals.custom') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
- <div class="row justify-between items-center text-text ">
|
|
|
+ <div class="row justify-between items-center text-text">
|
|
|
<div>
|
|
|
- <div class="font12 fontbold">
|
|
|
+ <div class="font12 fontmedium">
|
|
|
{{ item.provider_name }}
|
|
|
- <span class="">{{ $t('dashboard_client.client_proposals.age', { idade: item.idade }) }}</span>
|
|
|
+ <span class="font9 fontregular">{{ $t('dashboard_client.client_proposals.age', { idade: item.idade }) }}</span>
|
|
|
</div>
|
|
|
-
|
|
|
- <span class="font9 fontbold">
|
|
|
+ <span class="font10 fontmedium">
|
|
|
<q-icon name="star" size="12px" color="warning" class="font9 fontregular"/>
|
|
|
- {{ item.average_rating }}
|
|
|
+ <span>
|
|
|
+ {{ item.average_rating }}
|
|
|
+ </span>
|
|
|
</span>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -57,22 +64,27 @@
|
|
|
|
|
|
<!-- PREÇO -->
|
|
|
<div class="price text-text">
|
|
|
- <span class="font16 fontbold">
|
|
|
+ <span class="font9 fontmedium distance">
|
|
|
+ <span class="fontbold font10">
|
|
|
+ {{ $t('dashboard_client.client_proposals.distance') }}
|
|
|
+ </span>
|
|
|
+ <span class="font10 fontregular q-ml-sm">
|
|
|
+ {{ (item.distance_km ?? '--') + ' km' }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span class="font14 fontbold">
|
|
|
{{ filterCurrency(chooseprice(item.period_type, item.daily_price_8h)) }}
|
|
|
</span>
|
|
|
|
|
|
- <span class="col-6 font12 fontmedium">
|
|
|
+ <span class="col-6 font10 fontmedium">
|
|
|
{{ formatLabelByPeriodType(item.period_type) }}
|
|
|
</span>
|
|
|
|
|
|
- <span class="font9 fontmedium distance">
|
|
|
- {{ $t('dashboard_client.client_proposals.distance') }} {{ (item.distance_km ?? '--') + ' km' }}
|
|
|
- </span>
|
|
|
</div>
|
|
|
|
|
|
<div class="actions">
|
|
|
- <q-btn label="recusar" size="sm" padding="1px 5px" flat class="btn-reject" @click="() => handleRefuseProposal(item.id)" />
|
|
|
- <q-btn label="aceitar" size="sm" padding="1px 5px" class="btn-accept" @click="() => handleAcceptProposal(item.id)" />
|
|
|
+ <q-btn label="recusar" size="sm" padding="4px 12px" flat class="btn-reject" @click="() => handleRefuseProposal(item.id)" />
|
|
|
+ <q-btn label="aceitar" size="sm" padding="4px 12px" class="btn-accept" @click="() => handleAcceptProposal(item.id)" />
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -192,7 +204,6 @@ const handleAcceptProposal = async (proposalId) => {
|
|
|
position: relative;
|
|
|
min-width: 330px;
|
|
|
max-width: 330px;
|
|
|
- min-height: 115px;
|
|
|
border-radius: 18px;
|
|
|
padding: 12px;
|
|
|
background: white;
|
|
|
@@ -200,14 +211,9 @@ const handleAcceptProposal = async (proposalId) => {
|
|
|
}
|
|
|
|
|
|
/* alinhar topo */
|
|
|
-.proposal-card .row:first-child {
|
|
|
- align-items: flex-start !important;
|
|
|
-}
|
|
|
-
|
|
|
-.row.justify-between {
|
|
|
- align-items: flex-start !important;
|
|
|
- padding-right: 70px; // espaço pro preço
|
|
|
-}
|
|
|
+// .proposal-card .row:first-child {
|
|
|
+// align-items: flex-start !important;
|
|
|
+// }
|
|
|
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
@@ -236,19 +242,6 @@ const handleAcceptProposal = async (proposalId) => {
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-.type {
|
|
|
- position: absolute;
|
|
|
- left: 12px;
|
|
|
- top: 72px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- line-height: 1.1;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
/* avatar alinhado */
|
|
|
.q-avatar {
|
|
|
margin-left: 0 !important;
|