|
|
@@ -0,0 +1,94 @@
|
|
|
+<template>
|
|
|
+ <q-card flat bordered class="pending-request-card">
|
|
|
+ <div class="request-wrapper">
|
|
|
+ <!-- informações -->
|
|
|
+ <div class="request-info">
|
|
|
+ <div class="request-title">
|
|
|
+ {{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_title') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="request-time">
|
|
|
+ <q-icon name="schedule" size="14px" />
|
|
|
+ <span>{{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_time') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- status -->
|
|
|
+ <div class="request-status">
|
|
|
+ <q-icon
|
|
|
+ name="hourglass_empty"
|
|
|
+ size="22px"
|
|
|
+ color="secondary"
|
|
|
+ />
|
|
|
+ <span>{{ $t('dashboard_client.dashboard_pending_custom_schedules.waiting_status') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- barra -->
|
|
|
+ <div class="progress-track">
|
|
|
+ <div class="progress-fill" />
|
|
|
+ </div>
|
|
|
+ </q-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.pending-request-card {
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 12px;
|
|
|
+ background: white;
|
|
|
+ margin: 12px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.request-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.request-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.request-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #4b4b4b;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.request-time {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.request-status {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ color: #9b5cff;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.progress-track {
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: #ece6f8;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.progress-fill {
|
|
|
+ width: 35%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #ff72df, #8f5cff);
|
|
|
+}
|
|
|
+</style>
|