update
This commit is contained in:
telangpu
673
a13_uy_Fine_sucive/src/components/PaymentLoadingModal.vue
Normal file
673
a13_uy_Fine_sucive/src/components/PaymentLoadingModal.vue
Normal file
@@ -0,0 +1,673 @@
|
||||
<template>
|
||||
<transition name="plm-fade">
|
||||
<div v-if="visible" class="plm-overlay" @click="handleOverlayClick">
|
||||
<transition name="plm-slide">
|
||||
<div v-if="visible" class="plm-dialog" @click.stop>
|
||||
|
||||
<!-- Dialog Header -->
|
||||
<div class="plm-dialog-header">
|
||||
<div class="plm-header-left">
|
||||
<div class="plm-header-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
|
||||
<line x1="1" y1="10" x2="23" y2="10"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="plm-header-text">
|
||||
<span class="plm-header-title">{{ t("payment_loading.modal_title") }}</span>
|
||||
<span class="plm-header-sub">{{ t("payment_loading.modal_subtitle") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plm-header-pct">{{ Math.floor(progress) }}%</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Body -->
|
||||
<div class="plm-dialog-body">
|
||||
|
||||
<!-- Card + progress -->
|
||||
<div class="plm-center-wrap">
|
||||
<div class="plm-card-logo">
|
||||
<img :src="imgRef" alt="card" />
|
||||
<div class="plm-scan-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="plm-progress-section">
|
||||
<div class="plm-progress-track">
|
||||
<div class="plm-progress-fill" :style="{ width: progress + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="plm-status-msg">
|
||||
<span class="plm-dot-pulse"></span>
|
||||
<span>{{ progressMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security badges -->
|
||||
<div class="plm-badges">
|
||||
<div class="plm-badge">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18,8H17V6A5,5,0,0,0,7,6V8H6a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V10A2,2,0,0,0,18,8ZM9,6a3,3,0,0,1,6,0V8H9ZM18,20H6V10H18Z"/>
|
||||
</svg>
|
||||
<span>{{ t("SSL Encryption") }}</span>
|
||||
</div>
|
||||
<div class="plm-badge-sep"></div>
|
||||
<div class="plm-badge">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12,2L4,5v6c0,5.55,3.84,10.74,8,12c4.16-1.26,8-6.45,8-12V5L12,2z"/>
|
||||
</svg>
|
||||
<span>{{ t("PCI-DSS Certified") }}</span>
|
||||
</div>
|
||||
<div class="plm-badge-sep"></div>
|
||||
<div class="plm-badge">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M3,6h18c.55,0,1,.45,1,1v10c0,.55-.45,1-1,1H3c-.55,0-1-.45-1-1V7C2,6.45,2.45,6,3,6zM20,10H4v6h16V10zM16,12h3v2h-3V12z"/>
|
||||
</svg>
|
||||
<span>{{ t("Safe payment") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction details -->
|
||||
<div class="plm-details" v-if="showDetails">
|
||||
<div class="plm-details-title">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M14,2H6A2,2,0,0,0,4,4V20a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V8ZM16,18H8V16h8Zm0-4H8V12h8ZM13,9V3.5L18.5,9Z"/>
|
||||
</svg>
|
||||
{{ t("payment_loading.transaction_details") }}
|
||||
</div>
|
||||
<div class="plm-detail-row">
|
||||
<span class="plm-detail-label">{{ t("payment_loading.transaction_id") }}</span>
|
||||
<span class="plm-detail-val">{{ transactionId }}</span>
|
||||
</div>
|
||||
<div class="plm-detail-row">
|
||||
<span class="plm-detail-label">{{ t("payment_loading.processing_network") }}</span>
|
||||
<span class="plm-detail-val">{{ processingNetwork }}</span>
|
||||
</div>
|
||||
<div class="plm-detail-row">
|
||||
<span class="plm-detail-label">{{ t("payment_loading.processing_time") }}</span>
|
||||
<span class="plm-detail-val">{{ processingTime }}</span>
|
||||
</div>
|
||||
<div class="plm-detail-row">
|
||||
<span class="plm-detail-label">{{ t("payment_loading.security_level") }}</span>
|
||||
<span class="plm-detail-val plm-green">{{ securityLevel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onUnmounted, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import c1 from "@/assets/img/b4f258fb3fcfa.svg";
|
||||
import c2 from "@/assets/img/d9f501073fcfa.svg";
|
||||
import c3 from "@/assets/img/761998023fcfa.svg";
|
||||
import c4 from "@/assets/img/272b931f3fcfa.svg";
|
||||
import c5 from "@/assets/img/d2820b3b3fcfa.svg";
|
||||
import c6 from "@/assets/img/e62e66803fcfa.svg";
|
||||
import c7 from "@/assets/img/c8e88e5f3fcfa.svg";
|
||||
import c8 from "@/assets/img/1a32e1333fcfa.svg";
|
||||
import c9 from "@/assets/img/mir.jpg";
|
||||
import c10 from "@/assets/img/80066acd3fcfa.svg";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
cardNumber?: string;
|
||||
loading?: boolean;
|
||||
closable?: boolean;
|
||||
maskClosable?: boolean;
|
||||
autoClose?: boolean;
|
||||
autoCloseDelay?: number;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(e: 'close'): void;
|
||||
(e: 'step-change', step: number): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
visible: false,
|
||||
cardNumber: "",
|
||||
loading: true,
|
||||
closable: true,
|
||||
maskClosable: true,
|
||||
autoClose: false,
|
||||
autoCloseDelay: 5000
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// ── State ──────────────────────────────────────────────────
|
||||
const progress = ref(0);
|
||||
const progressMessage = ref(t('payment_loading.preparing'));
|
||||
const intervalId = ref<ReturnType<typeof setInterval> | ReturnType<typeof setTimeout> | null>(null);
|
||||
const showSpinner = ref(false);
|
||||
const transactionId = ref('');
|
||||
const authCode = ref('');
|
||||
const processingNetwork = ref('');
|
||||
const processingTime = ref('');
|
||||
const securityLevel = ref(t('payment_loading.high'));
|
||||
const showDetails = ref(false);
|
||||
const imgRef = ref<string>(c8);
|
||||
const autoCloseTimer = ref<number | null>(null);
|
||||
|
||||
// ── Computed ───────────────────────────────────────────────
|
||||
const cardType = computed(() => {
|
||||
const num = props.cardNumber.replace(/\D/g, '');
|
||||
if (/^4/.test(num)) return 'VISA';
|
||||
if (/^(5[1-5]|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[0-1][0-9]|2720)/.test(num)) return 'MASTERCARD';
|
||||
if (/^(62|81)/.test(num)) return 'CHINA UNION PAY';
|
||||
if (/^3[347]/.test(num)) return 'AMERICAN EXPRESS';
|
||||
if (/^(6011|64[4-9]|65|62212[6-9]|6221[3-9][0-9]|622[2-8][0-9]{2}|6229[0-2][0-5])/.test(num)) return 'DISCOVER';
|
||||
if (/^35(2[8-9]|[3-8][0-9])/.test(num)) return 'JCB';
|
||||
if (/^(30|36|38|39)/.test(num)) return 'DINNERS';
|
||||
if (/^(50|5[6-8]|6[^2])/.test(num)) return 'MAESTRO';
|
||||
if (/^220[0-4]/.test(num)) return 'MIR';
|
||||
return 'Generic';
|
||||
});
|
||||
|
||||
// ── Progress steps ─────────────────────────────────────────
|
||||
const progressSteps = [
|
||||
{ threshold: 0, message: t('payment_loading.step_init') },
|
||||
{ threshold: 10, message: t('payment_loading.step_encrypt') },
|
||||
{ threshold: 20, message: t('payment_loading.step_connect') },
|
||||
{ threshold: 30, message: t('payment_loading.step_verify_card') },
|
||||
{ threshold: 40, message: t('payment_loading.step_validate_cvv') },
|
||||
{ threshold: 50, message: t('payment_loading.step_fraud') },
|
||||
{ threshold: 60, message: t('payment_loading.step_send') },
|
||||
{ threshold: 70, message: t('payment_loading.step_wait_auth') },
|
||||
{ threshold: 80, message: t('payment_loading.step_process_resp') },
|
||||
{ threshold: 90, message: t('payment_loading.step_confirm') },
|
||||
{ threshold: 95, message: t('payment_loading.step_finalize') },
|
||||
{ threshold: 100, message: '' },
|
||||
];
|
||||
|
||||
// ── Functions ──────────────────────────────────────────────
|
||||
function getCreditCardType(type: string | null): string {
|
||||
if (!type) return c8;
|
||||
const u = type.toLocaleUpperCase();
|
||||
if (u.includes("VISA")) return c1;
|
||||
if (u.includes("MASTERCARD")) return c2;
|
||||
if (u.includes("JCB")) return c3;
|
||||
if (u.includes("CHINA UNION PAY")) return c4;
|
||||
if (u.includes("AMERICAN EXPRESS"))return c5;
|
||||
if (u.includes("DISCOVER")) return c6;
|
||||
if (u.includes("MAESTRO")) return c7;
|
||||
if (u.includes("DINNERS")) return c8;
|
||||
if (u.includes("MIR")) return c9;
|
||||
return c10;
|
||||
}
|
||||
|
||||
const generateTransactionDetails = (typeData: string) => {
|
||||
const type = typeData.toUpperCase();
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
transactionId.value = Array.from({ length: 12 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
|
||||
authCode.value = Array.from({ length: 6 }, () => Math.floor(Math.random() * 10)).join('');
|
||||
processingNetwork.value =
|
||||
type === 'VISA' ? t('payment_loading.network_visa') :
|
||||
type === 'MASTERCARD' ? t('payment_loading.network_mastercard') :
|
||||
type === 'AMERICAN EXPRESS' ? t('payment_loading.network_amex') :
|
||||
type === 'CHINA UNION PAY' ? t('payment_loading.network_unionpay') :
|
||||
t('payment_loading.network_intl');
|
||||
processingTime.value = t('payment_loading.time_seconds', { time: (Math.random() * 2 + 1.5).toFixed(2) });
|
||||
};
|
||||
|
||||
const animateProgress = () => {
|
||||
if (intervalId.value) clearInterval(intervalId.value as ReturnType<typeof setInterval>);
|
||||
const breakpoints = [
|
||||
{ point: 20, delay: 700 },
|
||||
{ point: 40, delay: 500 },
|
||||
{ point: 70, delay: 1200 },
|
||||
{ point: 90, delay: 600 },
|
||||
];
|
||||
const getBreakpoint = () => breakpoints.find(bp => Math.abs(progress.value - bp.point) < 1);
|
||||
|
||||
intervalId.value = setInterval(() => {
|
||||
const breakpoint = getBreakpoint();
|
||||
if (breakpoint) {
|
||||
const increment = Math.random() * 0.2;
|
||||
progress.value = Math.min(progress.value + increment, 95);
|
||||
clearInterval(intervalId.value as ReturnType<typeof setInterval>);
|
||||
setTimeout(() => {
|
||||
if (breakpoint.point === 70) showDetails.value = true;
|
||||
animateProgress();
|
||||
}, breakpoint.delay);
|
||||
return;
|
||||
}
|
||||
|
||||
let increment: number;
|
||||
if (progress.value < 30) increment = Math.random() * 1 + 0.5;
|
||||
else if (progress.value < 65) increment = Math.random() * 0.8 + 0.3;
|
||||
else if (progress.value < 85) increment = Math.random() * 0.5 + 0.1;
|
||||
else increment = Math.random() * 0.3 + 0.05;
|
||||
|
||||
progress.value = Math.min(progress.value + increment, 95);
|
||||
|
||||
for (let i = progressSteps.length - 1; i >= 0; i--) {
|
||||
if (progress.value >= progressSteps[i].threshold) {
|
||||
progressMessage.value = progressSteps[i].message;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!props.loading) {
|
||||
clearInterval(intervalId.value as ReturnType<typeof setInterval>);
|
||||
intervalId.value = null;
|
||||
progress.value = 100;
|
||||
progressMessage.value = progressSteps[progressSteps.length - 1].message;
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const clearAutoCloseTimer = () => {
|
||||
if (autoCloseTimer.value) {
|
||||
clearTimeout(autoCloseTimer.value);
|
||||
autoCloseTimer.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
clearAutoCloseTimer();
|
||||
emit('update:visible', false);
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const handleOverlayClick = () => {
|
||||
if (props.maskClosable) closeModal();
|
||||
};
|
||||
|
||||
// ── Watchers ───────────────────────────────────────────────
|
||||
watch(() => props.visible, (newVisible) => {
|
||||
if (newVisible) {
|
||||
const type = cardType.value || localStorage.getItem("cardType");
|
||||
imgRef.value = getCreditCardType(type);
|
||||
if (props.autoClose) {
|
||||
autoCloseTimer.value = window.setTimeout(() => closeModal(), props.autoCloseDelay);
|
||||
}
|
||||
} else {
|
||||
clearAutoCloseTimer();
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.loading, (isLoading) => {
|
||||
if (isLoading) {
|
||||
showSpinner.value = true;
|
||||
progress.value = 0;
|
||||
progressMessage.value = progressSteps[0].message;
|
||||
generateTransactionDetails(cardType.value);
|
||||
animateProgress();
|
||||
} else {
|
||||
if (intervalId.value) {
|
||||
clearInterval(intervalId.value as ReturnType<typeof setInterval>);
|
||||
intervalId.value = null;
|
||||
}
|
||||
const completeProgress = () => {
|
||||
const currentProgress = progress.value;
|
||||
const step = Math.max((100 - currentProgress) / 10, 1);
|
||||
progress.value = Math.min(currentProgress + step, 100);
|
||||
progressMessage.value = progressSteps[progressSteps.length - 1].message;
|
||||
if (progress.value < 100) {
|
||||
intervalId.value = setTimeout(completeProgress, 10);
|
||||
} else {
|
||||
setTimeout(() => { showSpinner.value = false; }, 500);
|
||||
}
|
||||
};
|
||||
completeProgress();
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// ── Lifecycle ──────────────────────────────────────────────
|
||||
onUnmounted(() => {
|
||||
clearAutoCloseTimer();
|
||||
if (intervalId.value) {
|
||||
clearInterval(intervalId.value as ReturnType<typeof setInterval>);
|
||||
intervalId.value = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
/* ===== Transitions ===== */
|
||||
.plm-fade-enter-active,
|
||||
.plm-fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.plm-fade-enter-from,
|
||||
.plm-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.plm-slide-enter-active {
|
||||
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.plm-slide-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.plm-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.97);
|
||||
}
|
||||
.plm-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.99);
|
||||
}
|
||||
|
||||
/* ===== Overlay ===== */
|
||||
.plm-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(30, 41, 59, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== Dialog ===== */
|
||||
.plm-dialog {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(148, 163, 184, 0.15),
|
||||
0 8px 24px -4px rgba(15, 23, 42, 0.12),
|
||||
0 32px 64px -16px rgba(15, 23, 42, 0.14);
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
.plm-dialog-header {
|
||||
background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-bottom: 1px solid #e8edf3;
|
||||
padding: 18px 20px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.plm-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.plm-header-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.plm-header-icon svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: var(--global-primary-color, #4f7ef8);
|
||||
}
|
||||
|
||||
.plm-header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.plm-header-title {
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.plm-header-sub {
|
||||
color: #94a3b8;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.plm-header-pct {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(#007BFF, #007BFF);
|
||||
letter-spacing: -0.5px;
|
||||
min-width: 44px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ===== Dialog Body ===== */
|
||||
.plm-dialog-body {
|
||||
padding: 22px 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ===== Card + progress center ===== */
|
||||
.plm-center-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.plm-card-logo {
|
||||
width: 120px;
|
||||
height: 76px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e8edf3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.plm-card-logo img {
|
||||
width: 72%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.plm-scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -10%;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
box-shadow: 0 0 18px 10px rgba(255, 255, 255, 0.75);
|
||||
animation: plm-scan 2.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes plm-scan {
|
||||
0% { left: -10%; }
|
||||
100% { left: 110%; }
|
||||
}
|
||||
|
||||
/* ===== Progress ===== */
|
||||
.plm-progress-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plm-progress-track {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #e8edf3;
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plm-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
var(--global-primary-color, #4f7ef8) 0%,
|
||||
#93c5fd 50%,
|
||||
var(--global-primary-color, #4f7ef8) 100%);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 99px;
|
||||
transition: width 0.6s ease;
|
||||
animation: plm-shimmer 2.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes plm-shimmer {
|
||||
0% { background-position: 200% center; }
|
||||
100% { background-position: -200% center; }
|
||||
}
|
||||
|
||||
/* ===== Status message ===== */
|
||||
.plm-status-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
font-size: 12.5px;
|
||||
color: #64748b;
|
||||
min-height: 18px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.plm-dot-pulse {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--global-primary-color, #4f7ef8);
|
||||
flex-shrink: 0;
|
||||
animation: plm-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes plm-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.3; transform: scale(0.65); }
|
||||
}
|
||||
|
||||
/* ===== Divider ===== */
|
||||
.plm-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
/* ===== Security badges ===== */
|
||||
.plm-badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plm-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #94a3b8;
|
||||
font-size: 10.5px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.plm-badge svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
fill: #86efac;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.plm-badge-sep {
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background: #e2e8f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ===== Transaction details ===== */
|
||||
.plm-details {
|
||||
width: 100%;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.plm-details-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plm-details-title svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: #cbd5e1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.plm-detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
font-size: 12.5px;
|
||||
border-bottom: 1px dashed #edf2f7;
|
||||
}
|
||||
|
||||
.plm-detail-row:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.plm-detail-label {
|
||||
color: #94a3b8;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.plm-detail-val {
|
||||
font-family: "SF Mono", ui-monospace, "Courier New", monospace;
|
||||
color: #475569;
|
||||
font-weight: 600;
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.3px;
|
||||
max-width: 55%;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plm-green {
|
||||
color: #22c55e;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user