|
|
@@ -1,60 +1,56 @@
|
|
|
<template>
|
|
|
<div class="q-mx-md q-mb-md">
|
|
|
<q-card
|
|
|
- class="price-suggest-card bg-surface shadow-card card-border"
|
|
|
+ class="price-suggest-card bg-surface shadow-card"
|
|
|
:flat="false"
|
|
|
>
|
|
|
- <q-card-section class="q-pa-md">
|
|
|
- <div class="row items-center justify-between q-mb-md">
|
|
|
- <div class="column">
|
|
|
- <span class="text-suggest-label font12">
|
|
|
- {{ $t('provider.dashboard.price_suggest.region_label_1') }}
|
|
|
- </span>
|
|
|
-
|
|
|
- <span class="text-suggest-label font12 fontbold">
|
|
|
+ <q-card-section class="price-suggest-section">
|
|
|
+ <div class="row items-center justify-between no-wrap q-mb-sm">
|
|
|
+ <span class="text-suggest-label text-no-wrap">
|
|
|
+ {{ $t('provider.dashboard.price_suggest.region_label_1') }}
|
|
|
+ <span class="fontbold">
|
|
|
{{ $t('provider.dashboard.price_suggest.region_label_2') }}
|
|
|
</span>
|
|
|
- </div>
|
|
|
+ </span>
|
|
|
|
|
|
<q-badge
|
|
|
- class="price-badge font12 fontbold q-px-md q-py-xs gradient-diarista-bg"
|
|
|
+ class="price-badge fontbold text-no-wrap gradient-diarista-bg"
|
|
|
rounded
|
|
|
>
|
|
|
{{ formatCurrency(data?.average_price ?? 0) }}
|
|
|
</q-badge>
|
|
|
</div>
|
|
|
|
|
|
- <div class="row items-center justify-between">
|
|
|
- <div class="column">
|
|
|
- <span class="text-suggest-label font12 fontbold">
|
|
|
- {{ $t('provider.dashboard.price_suggest.my_price_label') }}
|
|
|
+ <div class="row items-center justify-between no-wrap">
|
|
|
+ <span class="text-suggest-label text-no-wrap">
|
|
|
+ {{ $t('provider.dashboard.price_suggest.my_price_label_1') }}
|
|
|
+ <span class="fontbold">
|
|
|
+ {{ $t('provider.dashboard.price_suggest.my_price_label_2') }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div class="my-price-chip row items-center no-wrap q-ml-xs">
|
|
|
+ <span class="text-my-price fontmedium text-no-wrap">
|
|
|
+ {{
|
|
|
+ showMyPrice
|
|
|
+ ? formatCurrency(data?.your_price ?? 0)
|
|
|
+ : $t('common.price_masked')
|
|
|
+ }}
|
|
|
</span>
|
|
|
|
|
|
- <q-chip
|
|
|
- class="row items-center no-wrap bg-surface q-mt-xs"
|
|
|
- color="text"
|
|
|
- outline
|
|
|
- >
|
|
|
- <span class="text-my-price font10 fontsemibold q-mr-xs">
|
|
|
- {{
|
|
|
- showMyPrice
|
|
|
- ? formatCurrency(data?.your_price ?? 0)
|
|
|
- : $t('common.price_masked')
|
|
|
- }}
|
|
|
- </span>
|
|
|
-
|
|
|
- <q-btn
|
|
|
- class="q-pa-none q-pl-sm"
|
|
|
- color="grey-6"
|
|
|
- flat
|
|
|
- icon="mdi-eye-off-outline"
|
|
|
- size="xs"
|
|
|
- @click="showMyPrice = !showMyPrice"
|
|
|
- />
|
|
|
- </q-chip>
|
|
|
+ <q-btn
|
|
|
+ class="q-pa-none q-ml-xs"
|
|
|
+ color="grey-6"
|
|
|
+ dense
|
|
|
+ flat
|
|
|
+ :icon="showMyPrice ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
|
|
|
+ size="xs"
|
|
|
+ @click="showMyPrice = !showMyPrice"
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<q-btn
|
|
|
+ class="q-ml-xs"
|
|
|
color="primary"
|
|
|
flat
|
|
|
no-caps
|
|
|
@@ -62,14 +58,15 @@
|
|
|
size="xs"
|
|
|
@click="openServiceDataDialog"
|
|
|
>
|
|
|
- <div class="row items-center q-gutter-x-xs font10">
|
|
|
+ <div class="row items-center no-wrap alter-label">
|
|
|
<span class="fontbold">
|
|
|
{{ $t('common.alter') }}
|
|
|
</span>
|
|
|
|
|
|
<q-icon
|
|
|
+ class="q-ml-xs"
|
|
|
name="mdi-pencil-outline"
|
|
|
- size="xs"
|
|
|
+ size="14px"
|
|
|
/>
|
|
|
</div>
|
|
|
</q-btn>
|
|
|
@@ -107,32 +104,38 @@ const openServiceDataDialog = () => {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.price-suggest-card {
|
|
|
- border-radius: 12px;
|
|
|
-}
|
|
|
-.text-suggest-label {
|
|
|
- color: #3a3a4a;
|
|
|
-}
|
|
|
-.price-badge {
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
-.text-my-price {
|
|
|
- color: #3a3a4a;
|
|
|
-}
|
|
|
|
|
|
-.price-suggest-card {
|
|
|
- border-radius: 12px;
|
|
|
+.price-suggest-section {
|
|
|
+ padding: 14px 16px;
|
|
|
}
|
|
|
|
|
|
.text-suggest-label {
|
|
|
color: #3a3a4a;
|
|
|
+ font-size: clamp(10px, 3.2vw, 13px);
|
|
|
line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
.price-badge {
|
|
|
border-radius: 20px;
|
|
|
+ font-size: clamp(10px, 3.2vw, 13px);
|
|
|
+ padding: 4px 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.my-price-chip {
|
|
|
+ border: 1px solid #b9b9c3;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 2px 8px 2px 10px;
|
|
|
}
|
|
|
|
|
|
.text-my-price {
|
|
|
color: #3a3a4a;
|
|
|
+ font-size: clamp(9px, 2.9vw, 12px);
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.alter-label {
|
|
|
+ font-size: clamp(10px, 3.1vw, 13px);
|
|
|
}
|
|
|
</style>
|