<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Refund Request</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-red: #d32f2f;
--primary-red-light: #f44336;
--primary-red-dark: #b71c1c;
--primary-red-transparent: rgba(211, 47, 47, 0.08);
--secondary-gold: #ffd700;
--text-dark: #222222;
--text-light: #666666;
--text-lightest: #999999;
--border-color: #eaeaea;
--background-light: #fafafa;
--background-white: #ffffff;
--success-color: #2e7d32;
--warning-color: #ff9800;
--warning-bg: #fff3e0;
--info-bg: #e3f2fd;
--shadow-light: 0 2px 12px rgba(0, 0, 0, 0.04);
--shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.12);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
background-color: #f8f9fa;
color: var(--text-dark);
line-height: 1.6;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
box-sizing: border-box;
}
.refund-container {
background-color: var(--background-white);
border-radius: 20px;
box-shadow: var(--shadow-heavy);
max-width: 900px;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid #f0f0f0;
box-sizing: border-box;
}
.refund-header {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
color: white;
padding: 20px 24px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden;
}
.top-toggle {
padding: 16px 32px 0 32px;
}
.segmented {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
background: var(--primary-red-transparent);
border: 1px solid rgba(183, 28, 28, 0.35);
border-radius: 999px;
padding: 6px;
box-shadow: 0 6px 18px rgba(183, 28, 28, 0.08);
}
.toggle-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
border: none;
color: var(--primary-red);
padding: 12px 18px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.2px;
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
box-shadow: inset 0 0 0 1px rgba(183, 28, 28, 0);
}
.toggle-btn i { font-size: 16px; }
.toggle-btn:hover { filter: brightness(1.05); }
.toggle-btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(183, 28, 28, 0.25); }
.toggle-btn.active {
color: #fff;
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
box-shadow: 0 6px 16px rgba(183, 28, 28, 0.28);
}
.refund-header::before {
content: '';
position: absolute;
top: -60%;
right: -60%;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.refund-header::after {
content: '';
position: absolute;
top: -40%;
right: 15%;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.03);
border-radius: 50%;
}
.header-title {
display: flex;
align-items: center;
gap: 18px;
}
.header-icon {
background-color: rgba(255, 255, 255, 0.15);
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
backdrop-filter: blur(10px);
}
.header-text h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
letter-spacing: -0.2px;
}
.header-text p {
font-size: 14px;
opacity: 0.9;
font-weight: 400;
line-height: 1.4;
}
.close-btn {
background: rgba(255, 255, 255, 0.15);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
position: relative;
backdrop-filter: blur(10px);
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: rotate(90deg);
}
.warning-section {
padding: 0;
}
.warning-card {
background: linear-gradient(135deg, #fff9f9 0%, #fff5f5 100%);
border: 1px solid rgba(255, 182, 182, 0.3);
border-radius: 16px;
padding: 28px 32px;
margin: 24px 32px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 16px rgba(211, 47, 47, 0.05);
}
.warning-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(to bottom, var(--primary-red), var(--primary-red-dark));
}
.warning-header {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.warning-icon {
background-color: var(--primary-red);
color: white;
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-right: 16px;
flex-shrink: 0;
box-shadow: 0 4px 8px rgba(211, 47, 47, 0.2);
}
.warning-title {
font-size: 18px;
font-weight: 700;
color: var(--primary-red);
margin-bottom: 4px;
}
.warning-subtitle {
font-size: 14px;
color: var(--text-light);
font-weight: 500;
}
.warning-content {
font-size: 15px;
line-height: 1.7;
color: var(--text-dark);
padding-left: 60px;
}
.warning-content p {
margin-bottom: 12px;
}
.warning-content p:last-child {
margin-bottom: 0;
}
.main-content {
display: flex;
flex-direction: column;
padding: 0 32px;
}
.refund-form-section {
margin-bottom: 40px;
}
.section-title {
font-size: 20px;
font-weight: 700;
/* margin-bottom: 24px; */
color: var(--text-dark);
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 12px;
border-bottom: 2px solid var(--primary-red-transparent);
}
.section-title i {
font-size: 22px;
color: var(--primary-red);
}
.form-card {
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
border-radius: 20px;
padding: 32px;
border: 1px solid rgba(183, 28, 28, 0.12);
box-shadow: 0 8px 32px rgba(183, 28, 28, 0.08);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.form-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 20px 20px 0 0;
}
.product-actions {
display: flex;
justify-content: flex-end;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #f1f3f4;
}
.delete-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%);
color: white;
border: 2px solid #d32f2f;
border-radius: 999px;
padding: 12px 22px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba(211,47,47,0.35);
letter-spacing: 0.3px;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.delete-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.delete-btn:hover::before {
left: 100%;
}
.delete-btn:hover {
background: linear-gradient(135deg, #ff6b6b 0%, #ef5350 100%);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(211,47,47,0.45);
border-color: #b71c1c;
}
.delete-btn:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 15px rgba(211,47,47,0.25);
}
.item-delete-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 16px;
}
.item-delete-modal.active { display: flex; }
.item-delete-modal-content {
background: var(--background-white);
border-radius: 16px;
width: 100%;
max-width: 640px;
box-shadow: var(--shadow-heavy);
border: 1px solid var(--border-color);
overflow: hidden;
}
.item-delete-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
color: #fff;
}
.item-delete-modal-title { font-size: 18px; font-weight: 700; }
.item-delete-close { background: rgba(255,255,255,0.15); border: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; cursor: pointer; }
.item-delete-modal-body { padding: 22px; }
.delete-upload-area {
border: 2px dashed rgba(183,28,28,0.35);
background: #fff9f9;
border-radius: 12px;
padding: 18px;
text-align: center;
color: var(--text-light);
cursor: pointer;
}
.delete-upload-preview {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 12px;
}
.delete-preview-item { position: relative; width: 100%; padding-top: 75%; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: #f7f7f7; }
.delete-preview-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.delete-remove { position: absolute; top: 6px; right: 6px; background: rgba(183,28,28,0.85); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.item-delete-modal-footer { padding: 16px 22px; display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--border-color); }
.modal-btn { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-color); background: #f5f5f5; cursor: pointer; }
.modal-btn-confirm { background: var(--primary-red); color: #fff; border-color: var(--primary-red-dark); }
.form-group {
margin-bottom: 24px;
position: relative;
}
.form-group:last-child {
margin-bottom: 0;
}
.form-label {
display: block;
font-size: 15px;
font-weight: 600;
margin-bottom: 10px;
color: #374151;
display: flex;
align-items: center;
letter-spacing: -0.2px;
}
.form-label i {
margin-right: 8px;
color: var(--primary-red);
font-size: 14px;
width: 16px;
text-align: center;
}
.select-wrapper {
position: relative;
}
.custom-select {
width: 100%;
padding: 14px 16px;
border: 1.5px solid #d1d5db;
border-radius: 10px;
font-size: 15px;
background-color: #ffffff;
cursor: pointer;
appearance: none;
transition: all 0.2s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 14px;
font-weight: 500;
color: #1f2937;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.custom-select:focus {
border-color: #b91c1c;
outline: none;
box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}
.custom-select:hover {
border-color: #9ca3af;
}
/* 动态显示的区域 */
.dynamic-content {
margin-top: 24px;
padding: 24px;
background-color: var(--background-light);
border-radius: 12px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.fee-options {
display: flex;
flex-direction: column;
gap: 16px;
}
.fee-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
background-color: white;
border-radius: 10px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
cursor: pointer;
}
.fee-option:hover {
border-color: var(--primary-red);
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.1);
}
.fee-option.selected {
border-color: var(--primary-red);
background-color: var(--primary-red-transparent);
}
.fee-checkbox {
width: 24px;
height: 24px;
border-radius: 6px;
border: 2px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.fee-option.selected .fee-checkbox {
background-color: var(--primary-red);
border-color: var(--primary-red);
}
.fee-checkbox i {
color: white;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
.fee-option.selected .fee-checkbox i {
opacity: 1;
}
.fee-details {
flex: 1;
margin-left: 16px;
}
.fee-name {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 4px;
}
.fee-description {
font-size: 14px;
color: var(--text-light);
}
.fee-amount {
font-size: 18px;
font-weight: 700;
color: var(--primary-red);
margin-left: 16px;
}
/* 退款金额汇总 */
.refund-summary {
margin-top: 24px;
padding: 24px;
background-color: white;
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-light);
}
.summary-title {
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.summary-title i {
color: var(--primary-red);
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
}
.summary-item:last-child {
border-bottom: none;
}
.summary-label {
font-size: 15px;
color: var(--text-dark);
font-weight: 500;
}
.summary-value {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
}
.summary-total {
font-size: 20px;
font-weight: 800;
color: var(--primary-red);
}
.price-reduction-info {
display: flex;
flex-direction: column;
gap: 16px;
}
.price-info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background-color: white;
border-radius: 10px;
border: 1px solid var(--border-color);
}
.price-info-label {
font-size: 15px;
color: var(--text-dark);
font-weight: 500;
}
.price-info-value {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
}
.price-info-total {
font-size: 18px;
font-weight: 800;
color: var(--primary-red);
}
/* 备注区域 - 包含上传按钮 */
.textarea-wrapper {
border: 1.5px solid #d1d5db;
border-radius: 10px;
overflow: hidden;
transition: all 0.2s ease;
position: relative;
background: #ffffff;
}
.textarea-wrapper:focus-within {
border-color: #b91c1c;
box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}
.textarea-wrapper:hover {
border-color: #9ca3af;
}
.custom-textarea {
width: 100%;
padding: 16px;
border: none;
font-size: 15px;
font-family: inherit;
resize: vertical;
min-height: 120px;
line-height: 1.6;
background-color: transparent;
color: #1f2937;
}
.custom-textarea:focus {
outline: none;
}
.custom-textarea::placeholder {
color: #9ca3af;
font-size: 14px;
}
.textarea-footer {
padding: 12px 16px;
background-color: #f9fafb;
font-size: 13px;
color: #6b7280;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.textarea-note {
display: flex;
align-items: flex-start;
}
.textarea-note i {
color: #b91c1c;
margin-right: 8px;
font-size: 14px;
margin-top: 1px;
}
/* 上传按钮区域 */
.upload-attachments {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 12px;
border-radius: 8px;
transition: all 0.2s ease;
}
.upload-attachments:hover {
background-color: var(--primary-red-transparent);
color: var(--primary-red);
}
.upload-attachments i {
font-size: 16px;
}
.upload-attachments span {
font-size: 14px;
font-weight: 600;
}
/* 上传模态框 */
.upload-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.upload-modal.active {
opacity: 1;
visibility: visible;
}
.upload-modal-content {
background-color: white;
border-radius: 20px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--shadow-heavy);
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
transform: translateY(-30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.upload-modal-header {
padding: 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.upload-modal-title {
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 10px;
}
.upload-modal-title i {
color: var(--primary-red);
}
.close-upload-modal {
background: none;
border: none;
font-size: 24px;
color: var(--text-light);
cursor: pointer;
transition: color 0.2s ease;
}
.close-upload-modal:hover {
color: var(--primary-red);
}
.upload-modal-body {
padding: 24px;
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 16px;
padding: 40px 24px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background-color: var(--background-light);
margin-bottom: 24px;
}
.upload-area:hover {
border-color: var(--primary-red);
background-color: var(--primary-red-transparent);
}
.upload-area.dragging {
border-color: var(--primary-red);
background-color: var(--primary-red-transparent);
transform: scale(1.02);
}
.upload-area i {
font-size: 48px;
color: var(--primary-red);
margin-bottom: 16px;
opacity: 0.8;
}
.upload-text {
font-size: 18px;
color: var(--text-dark);
margin-bottom: 10px;
font-weight: 600;
}
.upload-hint {
font-size: 14px;
color: var(--text-light);
}
.upload-preview {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
}
.upload-preview-item {
width: 120px;
height: 120px;
border-radius: 12px;
overflow: hidden;
position: relative;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-light);
}
.upload-preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.remove-upload {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.remove-upload:hover {
background-color: var(--primary-red);
transform: scale(1.1);
}
.upload-modal-footer {
padding: 20px 24px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
gap: 12px;
}
.modal-btn {
padding: 12px 24px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}
.modal-btn-cancel {
background-color: transparent;
color: var(--text-dark);
border: 2px solid var(--border-color);
}
.modal-btn-cancel:hover {
background-color: #f5f5f5;
}
.modal-btn-confirm {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-light) 100%);
color: white;
}
.modal-btn-confirm:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(211, 47, 47, 0.25);
}
/* 已上传图片预览缩略图 */
.attachments-preview {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.attachment-thumbnail {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
position: relative;
border: 1px solid var(--border-color);
cursor: pointer;
transition: transform 0.2s ease;
}
.attachment-thumbnail:hover {
transform: scale(1.05);
}
.attachment-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.attachment-thumbnail.pdf {
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.attachment-thumbnail.pdf i {
font-size: 24px;
color: var(--primary-red);
}
.attachment-count {
position: absolute;
bottom: 2px;
right: 2px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
}
/* 联系邮箱区域 */
.contact-email-group {
margin-top: 28px;
}
.email-input-wrapper {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background-color: var(--background-light);
border-radius: 12px;
border: 2px solid var(--border-color);
transition: all 0.3s ease;
}
.email-input-wrapper:focus-within {
border-color: var(--primary-red);
box-shadow: 0 0 0 4px var(--primary-red-transparent);
}
.email-icon {
color: var(--primary-red);
font-size: 20px;
flex-shrink: 0;
}
.email-input {
flex: 1;
border: none;
background-color: transparent;
font-size: 16px;
color: var(--text-dark);
font-weight: 500;
}
.email-input:focus {
outline: none;
}
.email-edit-btn {
background-color: var(--primary-red-transparent);
color: var(--primary-red);
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.email-edit-btn:hover {
background-color: var(--primary-red);
color: white;
}
.form-actions {
display: flex;
gap: 18px;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--border-color);
}
.btn {
padding: 16px 36px;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 160px;
}
.btn-cancel {
background-color: transparent;
color: #64748b;
border: 2px solid #e2e8f0;
font-weight: 600;
letter-spacing: 0.2px;
}
.btn-cancel:hover {
background-color: #f8fafc;
border-color: #94a3b8;
color: #475569;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.1);
}
.btn-confirm {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.btn-confirm::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.btn-confirm:hover::before {
left: 100%;
}
.btn-confirm:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
border-color: #b91c1c;
}
.btn-confirm:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
}
/* 产品操作按钮区域 */
.products-actions {
display: flex;
gap: 18px;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--border-color);
}
/* 固定布局样式 */
.sticky-header {
position: sticky;
top: 0;
z-index: 100;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 20px 0;
margin-bottom: 20px;
}
.scrollable-products-container {
height: calc(100vh - 500px);
overflow-y: auto;
margin-bottom: 20px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.scrollable-products-container::-webkit-scrollbar {
width: 6px;
}
.scrollable-products-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.scrollable-products-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.scrollable-products-container::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.sticky-footer {
position: sticky;
bottom: 0;
z-index: 100;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 16px 0;
margin-top: 16px;
}
/* 确保产品容器有足够底部间距，避免被sticky-footer遮挡 */
.scrollable-products-container {
margin-bottom: 120px; /* 为sticky-footer预留空间 */
}
@media (max-width: 768px) {
.sticky-footer {
padding: 12px 16px;
margin-top: 12px;
}
.scrollable-products-container {
margin-bottom: 100px; /* 移动端减少预留空间 */
}
}
/* 简洁版退款汇总样式 */
.refund-summary-simple {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-bottom: 16px;
padding: 0;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.refund-summary-simple {
flex-direction: column;
align-items: stretch;
gap: 16px;
justify-content: flex-start;
}
.summary-header {
justify-content: space-between;
width: 100%;
}
.summary-details {
justify-content: space-between;
width: 100%;
gap: 12px;
}
.detail-row {
flex: 1;
min-width: 0;
justify-content: space-between;
}
}
.summary-header {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.summary-title {
font-size: 16px;
font-weight: 600;
color: #1a202c;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.summary-title i {
color: var(--primary-red);
font-size: 14px;
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
.summary-count {
font-size: 13px;
color: #64748b;
font-weight: 500;
background: #f8fafc;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid #e2e8f0;
}
.summary-details {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.detail-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
}
.detail-row.total {
font-weight: 600;
}
.detail-label {
color: #64748b;
font-weight: 500;
}
.detail-value {
color: #1a202c;
font-weight: 600;
min-width: 60px;
text-align: right;
}
.detail-row.total .detail-value {
color: var(--primary-red);
font-size: 15px;
}
/* 合并按钮布局 */
.action-buttons {
display: flex;
gap: 12px;
align-items: center;
justify-content: flex-end;
}
.action-buttons .btn {
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
min-width: 120px;
}
.products-actions .btn {
padding: 16px 36px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 160px;
}
/* 产品信息部分 - 优化版 */
.products-section {
margin-top: 20px;
margin-bottom: 40px;
}
.section-title {
display: flex;
justify-content: space-between;
align-items: center;
/* margin-bottom: 24px; */
}
.section-title-left {
display: flex;
align-items: center;
gap: 12px;
}
.section-title-actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
/* 移动端按钮容器 */
.mobile-buttons-container {
display: none;
}
@media (max-width: 768px) {
.mobile-buttons-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 16px 0 24px 0;
padding: 0;
}
/* 移动端隐藏桌面端按钮 */
.section-title-actions {
display: none;
}
}
/* 桌面端显示按钮 */
@media (min-width: 769px) {
.section-title-actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.mobile-buttons-container {
display: none;
}
}
.select-all-container {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 12px;
border-radius: 8px;
transition: all 0.2s ease;
flex-shrink: 0;
}
@media (max-width: 768px) {
.select-all-container {
justify-content: center;
padding: 16px 20px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 2px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.select-all-container:active {
transform: scale(0.98);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
}
.select-all-container:hover {
background-color: #f8fafc;
}
.select-all-checkbox {
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
background: white;
transition: all 0.2s ease;
}
.select-all-checkbox.checked {
background-color: var(--primary-red);
border-color: var(--primary-red);
}
.select-all-checkbox .fas {
color: white;
font-size: 12px;
opacity: 0;
transition: opacity 0.2s ease;
}
.select-all-checkbox.checked .fas {
opacity: 1;
}
.select-all-text {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.batch-delete-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background-color: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
min-width: 120px;
justify-content: center;
}
@media (max-width: 768px) {
.batch-delete-btn {
width: 100%;
padding: 18px 24px;
font-size: 16px;
font-weight: 600;
justify-content: center;
border-radius: 12px;
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
border: 2px solid #fca5a5;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.batch-delete-btn:not(:disabled):active {
transform: scale(0.98);
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}
.batch-delete-btn:disabled {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-color: #d1d5db;
color: #6b7280;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
}
.batch-delete-btn:hover:not(:disabled) {
background-color: #fee2e2;
border-color: #fca5a5;
transform: translateY(-1px);
}
.batch-delete-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.batch-delete-btn:not(:disabled):active {
transform: translateY(0);
}
/* 新产品卡片样式 - C端大厂风格（紧凑版） */
.product-card-optimized {
background-color: var(--background-white);
border-radius: 14px;
padding: 12px;
border: 1.5px solid #f0f0f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
margin-bottom: 10px;
overflow: hidden;
}
.product-card-optimized:hover {
border-color: var(--primary-red);
box-shadow: 0 5px 20px rgba(183, 28, 28, 0.1);
transform: translateY(-1px);
}
.product-card-optimized.selected {
border-color: var(--primary-red);
box-shadow: 0 5px 20px rgba(183, 28, 28, 0.12);
}
.product-content {
display: flex;
align-items: center;
gap: 12px;
}
.product-select-checkbox {
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.3s ease;
background: white;
}
.product-card-optimized.selected .product-select-checkbox {
background-color: var(--primary-red);
border-color: var(--primary-red);
box-shadow: 0 3px 8px rgba(183, 28, 28, 0.25);
}
.product-select-checkbox i {
color: white;
font-size: 14px;
opacity: 0;
transition: all 0.3s ease;
transform: scale(0.8);
}
.product-card-optimized.selected .product-select-checkbox i {
opacity: 1;
transform: scale(1);
}
.product-image-container {
width: 80px;
height: 80px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid #f5f5f5;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.product-card-optimized:hover .product-image-container {
transform: scale(1.02);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-card-optimized:hover .product-image {
transform: scale(1.05);
}
/* 删除状态样式 - 大厂设计规范 */
.product-card-optimized.deleted {
opacity: 0.92;
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
border: 1.5px solid #e0e0e0;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
position: relative;
overflow: hidden;
}
.product-card-optimized.deleted::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #bdbdbd 0%, #9e9e9e 100%);
}
.product-card-optimized.deleted .product-status-badge {
background: #757575;
color: #ffffff;
border-color: #616161;
}
.product-card-optimized.deleted .product-select-checkbox {
background: #f5f5f5;
border-color: #e0e0e0;
}
.product-card-optimized.deleted .product-select-checkbox i {
color: #bdbdbd;
opacity: 0.8;
}
.product-card-optimized.deleted .product-image-container {
filter: grayscale(100%) brightness(92%);
opacity: 0.7;
}
.product-card-optimized.deleted .product-info h3 {
color: #9e9e9e;
text-decoration: line-through;
}
.product-card-optimized.deleted .product-info p {
color: #bdbdbd;
}
.product-card-optimized.deleted .product-price {
color: #9e9e9e;
}
.product-card-optimized.deleted .delete-btn {
background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
border-color: #e0e0e0;
color: #9e9e9e;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.product-card-optimized.deleted .delete-btn:hover {
background: linear-gradient(135deg, #eeeeee 0%, #e0e0e0 100%);
}
/* 撤销删除按钮 */
.undo-delete-btn {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
transition: all 0.2s ease;
z-index: 10;
display: flex;
align-items: center;
gap: 4px;
}
.undo-delete-btn:hover {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.undo-delete-btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}
/* 删除状态动画 */
.product-card-optimized.deleted {
animation: deletedStateFade 0.4s ease-out;
}
@keyframes deletedStateFade {
0% {
background: #ffffff;
border-color: #f0f0f0;
}
100% {
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
border-color: #e0e0e0;
}
}
.product-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.product-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 10px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
border-radius: 8px;
border: 1px solid #edf2f7;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
transition: all 0.2s ease;
}
.info-item:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
border-color: #e2e8f0;
}
.info-label {
font-size: 12px;
color: #718096;
font-weight: 500;
letter-spacing: 0.1px;
line-height: 1.2;
}
.info-value {
font-size: 14px;
font-weight: 600;
color: #2d3748;
line-height: 1.3;
letter-spacing: -0.1px;
}
.info-value.product-price {
color: var(--primary-red);
font-weight: 700;
font-size: 15px;
}
.product-name {
font-size: 16px;
font-weight: 700;
color: #1a202c;
margin-bottom: 10px;
line-height: 1.3;
letter-spacing: -0.1px;
padding-bottom: 8px;
border-bottom: 1px solid #f7fafc;
}
.product-price {
font-size: 16px;
font-weight: 800;
color: var(--primary-red);
letter-spacing: -0.1px;
}
.product-status-badge {
position: absolute;
top: 8px;
right: 8px;
background-color: var(--primary-red);
color: white;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.refund-total-section {
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
border-radius: 20px;
padding: 28px;
border: 1px solid rgba(183, 28, 28, 0.15);
margin-top: 24px;
box-shadow: 0 8px 32px rgba(183, 28, 28, 0.08);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.refund-total-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
border-radius: 20px 20px 0 0;
}
.refund-total-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
position: relative;
z-index: 2;
}
.refund-total-title {
font-size: 22px;
font-weight: 800;
color: #1a202c;
display: flex;
align-items: center;
gap: 14px;
letter-spacing: -0.3px;
margin: 0;
}
.refund-total-title i {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
color: white;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 4px 12px rgba(183, 28, 28, 0.25);
}
.refund-total-title i {
color: var(--primary-red);
}
.selected-products-count {
font-size: 15px;
color: #64748b;
font-weight: 600;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
padding: 8px 16px;
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.selected-products-count span {
color: var(--primary-red);
font-weight: 700;
}
.refund-total-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
position: relative;
z-index: 2;
}
.total-item {
display: flex;
flex-direction: column;
padding: 20px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 16px;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.total-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 100%);
}
.total-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
border-color: rgba(183, 28, 28, 0.2);
}
.total-label {
font-size: 15px;
color: #64748b;
margin-bottom: 12px;
font-weight: 600;
letter-spacing: -0.2px;
display: flex;
align-items: center;
gap: 8px;
}
.total-label::before {
content: '';
width: 6px;
height: 6px;
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
border-radius: 50%;
display: inline-block;
}
.total-value {
font-size: 24px;
font-weight: 800;
color: #1a202c;
letter-spacing: -0.3px;
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.total-item.main-total {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
border: none;
grid-column: span 2;
box-shadow: 0 8px 32px rgba(183, 28, 28, 0.25);
position: relative;
overflow: hidden;
}
.total-item.main-total::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
}
.total-item.main-total:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(183, 28, 28, 0.35);
}
.total-item.main-total .total-label {
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.total-item.main-total .total-label::before {
background: rgba(255, 255, 255, 0.8);
}
.total-item.main-total .total-value {
color: white;
font-size: 28px;
font-weight: 800;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
background: none;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
position: relative;
}
.total-item.main-total .total-value::after {
content: '💰';
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
opacity: 0.8;
}
/* 处理时间样式优化 */
.total-item:last-child {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
}
.total-item:last-child .total-label {
color: #475569;
}
.total-item:last-child .total-value {
font-size: 16px;
font-weight: 600;
color: #475569;
background: none;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
}
/* 动画效果 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
.refund-total-section.updated {
animation: pulse 0.6s ease-in-out;
}
/* 隐藏表单字段 */
.hidden-fields {
display: none;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.product-details {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.product-name {
grid-column: span 2;
}
}
@media (max-width: 768px) {
body {
padding: 10px;
}
.refund-container {
margin: 0;
border-radius: 16px;
}
.refund-header {
padding: 18px 16px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.header-text h1 {
font-size: 20px;
}
.close-btn {
position: absolute;
top: 18px;
right: 16px;
width: 36px;
height: 36px;
font-size: 16px;
}
.warning-card {
margin: 16px 20px;
padding: 24px;
}
.warning-content {
padding-left: 0;
}
.main-content {
padding: 0 20px;
}
.product-content {
flex-direction: column;
align-items: flex-start;
}
.product-image-container {
width: 100%;
height: 160px;
}
.product-details {
grid-template-columns: 1fr;
width: 100%;
}
.product-name {
grid-column: span 1;
}
.refund-total-details {
grid-template-columns: 1fr;
gap: 12px;
}
.total-item {
padding: 16px;
border-radius: 14px;
}
.total-item.main-total {
grid-column: span 1;
padding: 20px;
}
.refund-total-title {
font-size: 20px;
}
.refund-total-title i {
width: 36px;
height: 36px;
font-size: 16px;
}
.selected-products-count {
font-size: 14px;
padding: 6px 12px;
}
.total-value {
font-size: 22px;
}
.total-item.main-total .total-value {
font-size: 24px;
}
.form-actions {
flex-direction: column;
}
.btn {
width: 100%;
}
.email-input-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.email-edit-btn {
width: 100%;
padding: 12px;
}
.upload-modal-content {
width: 95%;
}
.upload-preview-item {
width: 100px;
height: 100px;
}
}
/* 动画效果 */
.fade-in {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
.pulse-animation {
animation: pulse 0.5s ease-in-out;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="refund-container">
<div class="refund-header">
<div class="header-title">
<div class="header-icon">
<i class="fas fa-exchange-alt"></i>
</div>
<div class="header-text">
<h1>Refund Request</h1>
<p>Select products and quantities for refund</p>
</div>
</div>
<button class="close-btn" id="closeRefundPopup">
<i class="fas fa-times"></i>
</button>
</div>
<div class="top-toggle">
<div class="segmented" role="tablist" aria-label="Refund Toggle">
<button class="toggle-btn active" id="btnItems" role="tab" aria-selected="true" tabindex="0">
<i class="fas fa-box-open"></i><span>Refund for Item(s)</span>
</button>
<button class="toggle-btn" id="btnFees" role="tab" aria-selected="false" tabindex="0">
<i class="fas fa-receipt"></i><span>Refund Fees & Shipping</span>
</button>
</div>
</div>
<div class="main-content">
<!-- 固定顶部标题和按钮 -->
<div class="sticky-header">
<div class="section-title">
<div class="section-title-left">
<i class="fas fa-box-open"></i>
<span>Select Products for Refund</span>
</div>
<!-- 桌面端按钮容器 -->
<div class="section-title-actions">
<div class="select-all-container">
<div class="select-all-checkbox" id="selectAllCheckbox">
<i class="fas fa-check"></i>
</div>
<span class="select-all-text">Select All</span>
</div>
<button class="batch-delete-btn" id="batchDeleteBtn" disabled>
<i class="fas fa-trash"></i>
<span>Delete Selected</span>
</button>
</div>
</div>
<!-- 移动端按钮容器 -->
<div class="mobile-buttons-container">
<div class="select-all-container">
<div class="select-all-checkbox" id="selectAllCheckbox">
<i class="fas fa-check"></i>
</div>
<span class="select-all-text">Select All</span>
</div>
<button class="batch-delete-btn" id="batchDeleteBtn" disabled>
<i class="fas fa-trash"></i>
<span>Delete Selected</span>
</button>
</div>
</div>
<!-- 可滚动产品列表 -->
<div class="scrollable-products-container">
<div class="products-section">
<!-- 产品1 -->
<div class="product-card-optimized fade-in" data-product-id="1" data-price="42.08" data-customization-fee="8.42">
<div class="product-status-badge">In Production</div>
<div class="product-content">
<div class="product-select-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="product-image-container">
<img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="Customized Product" class="product-image">
</div>
<div class="product-details">
<div class="product-name">Custom Engraved Crystal Heart with LED Base</div>
<div class="product-info-grid">
<div class="info-item">
<span class="info-label">Product Code</span>
<span class="info-value">PROD-902601061</span>
</div>
<div class="info-item">
<span class="info-label">Unique Code</span>
<span class="info-value">X251226113310144</span>
</div>
<div class="info-item">
<span class="info-label">Unit Price</span>
<span class="info-value product-price">$42.08</span>
</div>
<div class="info-item">
<span class="info-label">Customization Fee</span>
<span class="info-value">$8.42</span>
</div>
</div>
<div class="product-actions">
<button class="delete-btn"><i class="fas fa-trash"></i><span>Delete</span></button>
</div>
</div>
</div>
</div>
<!-- 产品2 -->
<div class="product-card-optimized fade-in" data-product-id="2" data-price="28.50" data-customization-fee="5.70">
<div class="product-status-badge">Preparing</div>
<div class="product-content">
<div class="product-select-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="product-image-container">
<img src="https://images.unsplash.com/photo-1535585209827-a15fcdbc4c2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="Personalized Jewelry" class="product-image">
</div>
<div class="product-details">
<div class="product-name">Personalized Silver Necklace with Name Engraving</div>
<div class="product-info-grid">
<div class="info-item">
<span class="info-label">Product Code</span>
<span class="info-value">PROD-902601062</span>
</div>
<div class="info-item">
<span class="info-label">Unique Code</span>
<span class="info-value">X251226113310145</span>
</div>
<div class="info-item">
<span class="info-label">Unit Price</span>
<span class="info-value product-price">$28.50</span>
</div>
<div class="info-item">
<span class="info-label">Customization Fee</span>
<span class="info-value">$5.70</span>
</div>
</div>
<div class="product-actions">
<button class="delete-btn"><i class="fas fa-trash"></i><span>Delete</span></button>
</div>
</div>
</div>
</div>
<!-- 产品3 -->
<div class="product-card-optimized fade-in" data-product-id="3" data-price="35.99" data-customization-fee="7.20">
<div class="product-status-badge">Design Stage</div>
<div class="product-content">
<div class="product-select-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="product-image-container">
<img src="https://images.unsplash.com/photo-1545235617-9465d2a55698?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="Custom Photo Frame" class="product-image">
</div>
<div class="product-details">
<div class="product-name">Custom Wooden Photo Frame with Laser Engraving</div>
<div class="product-info-grid">
<div class="info-item">
<span class="info-label">Product Code</span>
<span class="info-value">PROD-902601063</span>
</div>
<div class="info-item">
<span class="info-label">Unique Code</span>
<span class="info-value">X251226113310146</span>
</div>
<div class="info-item">
<span class="info-label">Unit Price</span>
<span class="info-value product-price">$35.99</span>
</div>
<div class="info-item">
<span class="info-label">Customization Fee</span>
<span class="info-value">$7.20</span>
</div>
</div>
<div class="product-actions">
<button class="delete-btn"><i class="fas fa-trash"></i><span>Delete</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 退款表单部分 -->
<div class="refund-form-section">
<div class="sticky-header">
<div class="section-title">
<div class="section-title-left">
<i class="fas fa-clipboard-list"></i>
<span>Refund Details</span>
</div>
</div>
</div>
<!-- 可滚动表单内容 -->
<div class="scrollable-products-container">
<div class="form-card fade-in">
<form id="refundForm">
<!-- 退款原因选择 -->
<div class="form-group">
<label class="form-label" for="refundReason">
<i class="fas fa-question-circle"></i> Refund Reason
</label>
<div class="select-wrapper">
<select class="custom-select" id="refundReason" name="refundReason" required>
<option value="">Please choose a reason</option>
<option value="No longer wanted">No longer wanted</option>
<option value="Incorrect product selection/over-ordered">Incorrect product selection/over-ordered</option>
<option value="Address/phone information error">Address/phone information error</option>
<option value="Delivery exceeded deadline">Delivery exceeded deadline</option>
<option value="Out of stock/cannot be produced">Out of stock/cannot be produced</option>
<option value="Engraving/image design does not match">Engraving/image design does not match</option>
<option value="Price reduction after purchase">Price reduction after purchase</option>
<option value="Not shipped on scheduled time">Not shipped on scheduled time</option>
<option value="Better price available elsewhere">Better price available elsewhere</option>
<option value="Discount not applied">Discount not applied</option>
<option value="Cancel VIP/Shipping insurance">Cancel VIP/Shipping insurance</option>
<option value="Refund shipping fee">Refund shipping fee</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<!-- 动态内容区域 -->
<div id="dynamicContent" class="dynamic-content" style="display: none;">
<!-- 这里会根据选择的退款原因动态显示内容 -->
</div>
<!-- 取消说明 - 包含上传按钮 -->
<div class="form-group">
<label class="form-label" for="cancelInstructions">
<i class="fas fa-edit"></i> Cancel Instructions
</label>
<div class="textarea-wrapper">
<textarea class="custom-textarea" id="cancelInstructions" name="cancelInstructions"
placeholder="Please provide detailed instructions for your cancellation request..."></textarea>
<div class="textarea-footer">
<div class="textarea-note">
<i class="fas fa-info-circle"></i> Please provide as much detail as possible to help us process your request faster.
</div>
<div class="upload-attachments" id="openUploadModal">
<i class="fas fa-paperclip"></i>
<span>Attach files</span>
</div>
</div>
</div>
<!-- 已上传文件预览缩略图 -->
<div class="attachments-preview" id="attachmentsPreview">
<!-- 已上传文件缩略图会显示在这里 -->
</div>
</div>
<!-- 联系邮箱 -->
<div class="form-group contact-email-group">
<label class="form-label">
<i class="fas fa-envelope"></i> Contact Email
</label>
<div class="email-input-wrapper">
<i class="fas fa-at email-icon"></i>
<input type="email" class="email-input" id="contactEmail" value="[email protected]" readonly>
<button type="button" class="email-edit-btn" id="editEmailBtn">
<i class="fas fa-edit"></i> Edit
</button>
</div>
</div>
<!-- 隐藏表单字段 -->
<div class="hidden-fields">
<input type="hidden" name="delivery_bn" value="902601061004318">
<input type="hidden" name="order_bn" value="577252405279429269">
<input type="hidden" name="original_order_amount" value="42.08">
<input type="hidden" name="the_restocking_fee" value="0">
<input type="hidden" name="amount_total" value="42.08">
<input type="hidden" name="delivery_status" value="LA去信">
<input type="hidden" name="is_vip_fee" value="false">
<input type="hidden" name="order_refund_type" value="发起【暂缓发货-取消协商】">
<input type="hidden" name="is_produce_complete" value="0">
<input type="hidden" name="attachments_data" id="attachmentsData">
</div>
</form>
</div>
</div>
</div>
<!-- 固定底部区域 -->
<div class="sticky-footer">
<!-- 简洁版退款汇总 -->
<div class="refund-summary-simple">
<div class="summary-header">
<h3 class="summary-title">
<i class="fas fa-calculator"></i> Refund Summary
</h3>
<div class="summary-count">
<span id="selectedCount">0</span>/<span id="totalCount">3</span> selected
</div>
</div>
<div class="summary-details">
<div class="detail-row">
<span class="detail-label">Products</span>
<span class="detail-value" id="totalProductsAmount">$0.00</span>
</div>
<div class="detail-row">
<span class="detail-label">Fees</span>
<span class="detail-value" id="totalCustomizationFees">$0.00</span>
</div>
<div class="detail-row total">
<span class="detail-label">Total</span>
<span class="detail-value" id="totalRefundAmount">$0.00</span>
</div>
</div>
</div>
<!-- 合并按钮布局 -->
<div class="action-buttons">
<button type="button" class="btn btn-cancel" id="productsCancelBtn">
<i class="fas fa-times"></i> Cancel
</button>
<button type="button" class="btn btn-confirm" id="productsSubmitBtn">
<i class="fas fa-check"></i> Submit Request
</button>
</div>
</div>
</div>
</div>
<!-- 上传文件模态框 -->
<div class="upload-modal" id="uploadModal">
<div class="upload-modal-content">
<div class="upload-modal-header">
<h3 class="upload-modal-title">
<i class="fas fa-paperclip"></i> Attach Supporting Documents
</h3>
<button class="close-upload-modal" id="closeUploadModal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="upload-modal-body">
<div class="upload-area" id="fileUploadArea">
<i class="fas fa-cloud-upload-alt"></i>
<div class="upload-text">Click to upload or drag and drop</div>
<div class="upload-hint">PNG, JPG, PDF up to 10MB each. Max 5 files.</div>
<input type="file" id="fileUpload" name="fileUpload" style="display: none;" multiple accept="image/*,.pdf">
</div>
<div class="upload-preview" id="uploadPreview">
<!-- 上传的图片预览会显示在这里 -->
</div>
</div>
<div class="upload-modal-footer">
<button type="button" class="modal-btn modal-btn-cancel" id="cancelUploadBtn">
Cancel
</button>
<button type="button" class="modal-btn modal-btn-confirm" id="confirmUploadBtn">
Add Files
</button>
</div>
</div>
</div>
<div class="item-delete-modal" id="itemDeleteModal">
<div class="item-delete-modal-content">
<div class="item-delete-modal-header">
<div class="item-delete-modal-title"><i class="fas fa-trash"></i> Delete Product</div>
<button class="item-delete-close" id="closeItemDeleteModal"><i class="fas fa-times"></i></button>
</div>
<div class="item-delete-modal-body">
<div class="form-group">
<label class="form-label" for="deleteReason"><i class="fas fa-question-circle"></i> Change Reason</label>
<div class="select-wrapper">
<select class="custom-select" id="deleteReason" required>
<option value="">Please choose a reason</option>
<option value="No longer wanted">No longer wanted</option>
<option value="Incorrect selection">Incorrect product selection</option>
<option value="Address error">Address/phone information error</option>
<option value="Delivery delay">Delivery exceeded deadline</option>
<option value="Out of stock">Out of stock/cannot be produced</option>
<option value="Design mismatch">Engraving/image design does not match</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="deleteInstructions"><i class="fas fa-edit"></i> Change Instructions</label>
<div class="textarea-wrapper">
<textarea class="custom-textarea" id="deleteInstructions" placeholder="Please provide details for deleting this product..."></textarea>
</div>
</div>
<div class="form-group">
<label class="form-label"><i class="fas fa-image"></i> Upload Images</label>
<div class="delete-upload-area" id="deleteUploadArea">
<i class="fas fa-cloud-upload-alt" style="font-size:22px;color:var(--primary-red);"></i>
<div style="margin-top:6px;">Click to upload images</div>
<input type="file" id="deleteUploadInput" accept="image/*" multiple style="display:none;" />
</div>
<div class="delete-upload-preview" id="deleteUploadPreview"></div>
</div>
</div>
<div class="item-delete-modal-footer">
<button type="button" class="modal-btn" id="cancelDeleteItemBtn">Cancel</button>
<button type="button" class="modal-btn modal-btn-confirm" id="confirmDeleteItemBtn">Confirm Delete</button>
</div>
</div>
</div>
<!-- 批量删除弹窗 -->
<div class="item-delete-modal" id="batchDeleteModal">
<div class="item-delete-modal-content">
<div class="item-delete-modal-header">
<div class="item-delete-modal-title"><i class="fas fa-trash"></i> Delete Selected Products</div>
<button class="item-delete-close" id="closeBatchDeleteModal"><i class="fas fa-times"></i></button>
</div>
<div class="item-delete-modal-body">
<div class="batch-delete-info">
<i class="fas fa-exclamation-triangle" style="color: var(--warning-color); font-size: 24px;"></i>
<p>You are about to delete <span id="batchDeleteCount" style="font-weight: 600; color: var(--primary-red);">0</span> selected products.</p>
</div>
<div class="form-group">
<label class="form-label" for="batchDeleteReason"><i class="fas fa-question-circle"></i> Change Reason</label>
<div class="select-wrapper">
<select class="custom-select" id="batchDeleteReason" required>
<option value="">Please choose a reason</option>
<option value="No longer wanted">No longer wanted</option>
<option value="Incorrect selection">Incorrect product selection</option>
<option value="Address error">Address/phone information error</option>
<option value="Delivery delay">Delivery exceeded deadline</option>
<option value="Out of stock">Out of stock/cannot be produced</option>
<option value="Design mismatch">Engraving/image design does not match</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="batchDeleteInstructions"><i class="fas fa-edit"></i> Change Instructions</label>
<div class="textarea-wrapper">
<textarea class="custom-textarea" id="batchDeleteInstructions" placeholder="Please provide details for deleting these products..."></textarea>
</div>
</div>
<div class="form-group">
<label class="form-label"><i class="fas fa-image"></i> Upload Images</label>
<div class="delete-upload-area" id="batchDeleteUploadArea">
<i class="fas fa-cloud-upload-alt" style="font-size:22px;color:var(--primary-red);"></i>
<div style="margin-top:6px;">Click to upload images</div>
<input type="file" id="batchDeleteUploadInput" accept="image/*" multiple style="display:none;" />
</div>
<div class="delete-upload-preview" id="batchDeleteUploadPreview"></div>
</div>
</div>
<div class="item-delete-modal-footer">
<button type="button" class="modal-btn" id="cancelBatchDeleteBtn">Cancel</button>
<button type="button" class="modal-btn modal-btn-confirm" id="confirmBatchDeleteBtn">Confirm Delete</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 页面元素
const closeBtn = document.getElementById('closeRefundPopup');
const cancelBtn = document.getElementById('productsCancelBtn');
const submitBtn = document.getElementById('submitBtn');
const refundForm = document.getElementById('refundForm');
const refundReason = document.getElementById('refundReason');
const dynamicContent = document.getElementById('dynamicContent');
const openUploadModalBtn = document.getElementById('openUploadModal');
const uploadModal = document.getElementById('uploadModal');
const closeUploadModalBtn = document.getElementById('closeUploadModal');
const cancelUploadBtn = document.getElementById('cancelUploadBtn');
const confirmUploadBtn = document.getElementById('confirmUploadBtn');
const fileUploadArea = document.getElementById('fileUploadArea');
const fileUploadInput = document.getElementById('fileUpload');
const uploadPreview = document.getElementById('uploadPreview');
const attachmentsPreview = document.getElementById('attachmentsPreview');
const attachmentsDataInput = document.getElementById('attachmentsData');
const editEmailBtn = document.getElementById('editEmailBtn');
const contactEmail = document.getElementById('contactEmail');
// 产品金额汇总显示元素
const totalProductsAmountEl = document.getElementById('totalProductsAmount');
const totalCustomizationFeesEl = document.getElementById('totalCustomizationFees');
const totalRefundAmountEl = document.getElementById('totalRefundAmount');
const selectedCountEl = document.getElementById('selectedCount');
const totalCountEl = document.getElementById('totalCount');
// 产品卡片
const productCards = document.querySelectorAll('.product-card-optimized');
totalCountEl.textContent = productCards.length;
const btnItems = document.getElementById('btnItems');
const btnFees = document.getElementById('btnFees');
const segmented = document.querySelector('.segmented');
const productsSection = document.querySelector('.products-section');
const refundFormSection = document.querySelector('.refund-form-section');
// 新增功能元素
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
const batchDeleteBtn = document.getElementById('batchDeleteBtn');
function showItems() {
productsSection.style.display = '';
refundFormSection.style.display = 'none';
document.querySelector('.sticky-header').style.display = '';
document.querySelector('.scrollable-products-container').style.display = '';
document.querySelector('.sticky-footer').style.display = '';
btnItems.classList.add('active');
btnFees.classList.remove('active');
btnItems.setAttribute('aria-selected', 'true');
btnFees.setAttribute('aria-selected', 'false');
// 恢复选择计数显示
document.querySelector('.summary-count').style.display = '';
// 恢复标签文本
const detailLabels = document.querySelectorAll('.detail-label');
detailLabels[0].textContent = 'Products';
detailLabels[1].textContent = 'Fees';
detailLabels[2].textContent = 'Total';
// 重新计算退款总额
calculateRefundTotal();
// 重新初始化产品卡片事件监听器
initProductCardEvents();
}
function showFees() {
productsSection.style.display = 'none';
refundFormSection.style.display = '';
document.querySelector('.sticky-header').style.display = 'none';
document.querySelector('.scrollable-products-container').style.display = 'none';
document.querySelector('.sticky-footer').style.display = '';
btnItems.classList.remove('active');
btnFees.classList.add('active');
btnItems.setAttribute('aria-selected', 'false');
btnFees.setAttribute('aria-selected', 'true');
// 更新Refund Fees & Shipping页面的退款汇总
updateFeesRefundSummary();
}
btnItems.addEventListener('click', showItems);
btnFees.addEventListener('click', showFees);
segmented.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight') { showFees(); }
if (e.key === 'ArrowLeft') { showItems(); }
});
showItems();
// 全选功能
selectAllCheckbox.addEventListener('click', function() {
const isChecked = this.classList.toggle('checked');
productCards.forEach(card => {
const checkbox = card.querySelector('.product-select-checkbox');
if (isChecked) {
card.classList.add('selected');
checkbox.classList.add('checked');
} else {
card.classList.remove('selected');
checkbox.classList.remove('checked');
}
});
calculateRefundTotal();
updateBatchDeleteButton();
});
// 批量删除功能
batchDeleteBtn.addEventListener('click', function() {
const selectedCards = document.querySelectorAll('.product-card-optimized.selected');
if (selectedCards.length === 0) {
alert('Please select at least one product to delete.');
return;
}
// 批量删除时，记录所有选中的产品ID
const selectedProductIds = Array.from(selectedCards).map(card => card.dataset.productId);
// 打开删除弹窗，显示批量删除信息
openBatchDeleteModal(selectedProductIds);
});
// 更新批量删除按钮状态
function updateBatchDeleteButton() {
const selectedCount = document.querySelectorAll('.product-card-optimized.selected').length;
batchDeleteBtn.disabled = selectedCount === 0;
if (selectedCount > 0) {
batchDeleteBtn.querySelector('span').textContent = `Delete Selected (${selectedCount})`;
} else {
batchDeleteBtn.querySelector('span').textContent = 'Delete Selected';
}
}
// 更新全选状态
function updateSelectAllState() {
const selectedCount = document.querySelectorAll('.product-card-optimized.selected').length;
const totalCount = document.querySelectorAll('.product-card-optimized').length;
if (selectedCount === totalCount && totalCount > 0) {
selectAllCheckbox.classList.add('checked');
} else {
selectAllCheckbox.classList.remove('checked');
}
}
// 更新产品数量显示
function updateProductCount() {
const remainingCount = document.querySelectorAll('.product-card-optimized').length;
document.querySelector('.products-count').textContent = `${remainingCount} Items`;
totalCountEl.textContent = remainingCount;
}
// 数据存储
let uploadedFiles = []; // 存储上传的文件信息
let selectedProductsCount = 0;
let isEmailEditable = false;
// 产品数据（用于动态内容）
const additionalFeesData = {
'vip': { amount: 9.99, name: 'VIP Membership Fee', description: 'Annual VIP membership fee' },
'shippingInsurance': { amount: 4.99, name: 'Shipping Insurance', description: 'Insurance for shipping protection' },
'warranty': { amount: 12.99, name: 'Extended Warranty', description: 'Extended warranty for 2 years' },
'serviceFee': { amount: 2.99, name: 'Service Fee', description: 'Processing and handling fee' }
};
// 价格降价信息
const priceReductionData = {
originalAmount: 42.91,
customizationFee: 8.99,
refundAmount: 33.92
};
// 选中的附加费用
let selectedAdditionalFees = [];
// 关闭页面
function closePage() {
document.querySelector('.refund-container').style.transform = 'translateY(20px)';
document.querySelector('.refund-container').style.opacity = '0';
document.querySelector('.refund-container').style.transition = 'all 0.3s ease';
setTimeout(() => {
alert('Refund request cancelled.');
document.querySelector('.refund-container').style.display = 'none';
}, 300);
}
// 关闭按钮事件
closeBtn.addEventListener('click', closePage);
cancelBtn.addEventListener('click', closePage);
// 计算退款总金额
function calculateRefundTotal() {
let totalProductsAmount = 0;
let totalCustomizationFees = 0;
let selectedProductsCount = 0;
const cards = document.querySelectorAll('.product-card-optimized');
cards.forEach(card => {
if (card.classList.contains('selected')) {
const price = parseFloat(card.dataset.price);
const customizationFee = parseFloat(card.dataset.customizationFee);
totalProductsAmount += price;
totalCustomizationFees += customizationFee;
selectedProductsCount++;
}
});
const totalRefundAmount = totalProductsAmount + totalCustomizationFees;
totalProductsAmountEl.textContent = `$${totalProductsAmount.toFixed(2)}`;
totalCustomizationFeesEl.textContent = `$${totalCustomizationFees.toFixed(2)}`;
totalRefundAmountEl.textContent = `$${totalRefundAmount.toFixed(2)}`;
selectedCountEl.textContent = selectedProductsCount;
totalRefundAmountEl.parentElement.classList.add('pulse-animation');
setTimeout(() => {
totalRefundAmountEl.parentElement.classList.remove('pulse-animation');
}, 500);
}
// 更新Refund Fees & Shipping页面的退款汇总
function updateFeesRefundSummary() {
const originalOrderAmount = 55.32;
const restockingFee = 0.00;
const totalRefundAmount = originalOrderAmount - restockingFee;
// 隐藏选择计数
document.querySelector('.summary-count').style.display = 'none';
// 更新金额显示
totalProductsAmountEl.textContent = `$${originalOrderAmount.toFixed(2)}`;
totalCustomizationFeesEl.textContent = `$${restockingFee.toFixed(2)}`;
totalRefundAmountEl.textContent = `$${totalRefundAmount.toFixed(2)}`;
// 更新标签文本
const detailLabels = document.querySelectorAll('.detail-label');
detailLabels[0].textContent = 'Original Order Amount:';
detailLabels[1].textContent = 'The Restocking Fee:';
detailLabels[2].textContent = 'Total Refund Amount:';
}
// 更新VIP/保险取消页面的退款汇总
function updateVIPInsuranceRefundSummary() {
let totalSelectedFees = 0;
let feeNames = [];
// 计算选中的费用总额
selectedAdditionalFees.forEach(feeId => {
totalSelectedFees += additionalFeesData[feeId].amount;
feeNames.push(additionalFeesData[feeId].name);
});
// 隐藏选择计数
document.querySelector('.summary-count').style.display = 'none';
// 更新金额显示
totalProductsAmountEl.textContent = `$${totalSelectedFees.toFixed(2)}`;
totalCustomizationFeesEl.textContent = ``;
totalRefundAmountEl.textContent = `$${totalSelectedFees.toFixed(2)}`;
// 更新标签文本
const detailLabels = document.querySelectorAll('.detail-label');
detailLabels[0].textContent = feeNames.length > 0 ? feeNames.join(' + ') : 'Selected Fees:';
detailLabels[1].textContent = '';
detailLabels[2].textContent = 'Total Refund Amount:';
}
// 初始化产品卡片事件监听器
function initProductCardEvents() {
const productCards = document.querySelectorAll('.product-card-optimized');
productCards.forEach(card => {
// 移除旧的监听器（如果存在）
const newCard = card.cloneNode(true);
card.parentNode.replaceChild(newCard, card);
const checkbox = newCard.querySelector('.product-select-checkbox');
newCard.addEventListener('click', function(e) {
if (newCard.classList.contains('deleted')) return;
newCard.classList.toggle('selected');
calculateRefundTotal();
updateBatchDeleteButton();
updateSelectAllState();
});
if (checkbox) {
checkbox.addEventListener('click', function(e) {
e.stopPropagation();
if (newCard.classList.contains('deleted')) return;
newCard.classList.toggle('selected');
calculateRefundTotal();
updateBatchDeleteButton();
updateSelectAllState();
});
}
// 重新绑定DELETE按钮事件
const deleteBtn = newCard.querySelector('.delete-btn');
if (deleteBtn) {
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation();
const card = this.closest('.product-card-optimized');
const pid = card ? card.dataset.productId : null;
openItemDeleteModal(pid);
});
}
});
}
// 初始产品卡片事件监听
initProductCardEvents();
// 初始计算
calculateRefundTotal();
const itemDeleteModal = document.getElementById('itemDeleteModal');
const closeItemDeleteModalBtn = document.getElementById('closeItemDeleteModal');
const deleteReasonSelect = document.getElementById('deleteReason');
const deleteInstructionsInput = document.getElementById('deleteInstructions');
const deleteUploadArea = document.getElementById('deleteUploadArea');
const deleteUploadInput = document.getElementById('deleteUploadInput');
const deleteUploadPreview = document.getElementById('deleteUploadPreview');
const cancelDeleteItemBtn = document.getElementById('cancelDeleteItemBtn');
const confirmDeleteItemBtn = document.getElementById('confirmDeleteItemBtn');
let deleteAttachments = [];
let currentDeleteProductId = null;
function openItemDeleteModal(pid) {
currentDeleteProductId = pid;
deleteReasonSelect.value = '';
deleteInstructionsInput.value = '';
deleteAttachments = [];
deleteUploadPreview.innerHTML = '';
itemDeleteModal.classList.add('active');
}
function closeItemDeleteModal() {
itemDeleteModal.classList.remove('active');
}
document.querySelectorAll('.product-card-optimized .delete-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const card = this.closest('.product-card-optimized');
const pid = card ? card.dataset.productId : null;
openItemDeleteModal(pid);
});
});
closeItemDeleteModalBtn.addEventListener('click', closeItemDeleteModal);
cancelDeleteItemBtn.addEventListener('click', closeItemDeleteModal);
deleteUploadArea.addEventListener('click', function() { deleteUploadInput.click(); });
deleteUploadInput.addEventListener('change', function() {
const files = Array.from(this.files);
files.forEach(file => {
if (!file.type.match('image.*')) return;
if (file.size > 10 * 1024 * 1024) return;
const id = Date.now() + '_' + Math.random().toString(36).slice(2,9);
deleteAttachments.push({ id, file });
const reader = new FileReader();
reader.onload = function(e) {
const item = document.createElement('div');
item.className = 'delete-preview-item';
item.dataset.fileId = id;
item.innerHTML = `<img src="${e.target.result}" alt="image"><button class="delete-remove" data-file-id="${id}"><i class="fas fa-times"></i></button>`;
deleteUploadPreview.appendChild(item);
item.querySelector('.delete-remove').addEventListener('click', function(ev) {
ev.stopPropagation();
const toId = this.dataset.fileId;
deleteAttachments = deleteAttachments.filter(x => x.id !== toId);
item.remove();
});
};
reader.readAsDataURL(file);
});
});
confirmDeleteItemBtn.addEventListener('click', function() {
if (!deleteReasonSelect.value) {
alert('Please choose a reason.');
return;
}
const card = document.querySelector(`.product-card-optimized[data-product-id="${currentDeleteProductId}"]`);
if (card) {
// 添加删除状态样式而不是立即删除
card.classList.add('deleted');
// 禁用选择和删除按钮
const checkbox = card.querySelector('.product-select-checkbox');
const deleteBtn = card.querySelector('.delete-btn');
if (checkbox) checkbox.style.pointerEvents = 'none';
if (deleteBtn) deleteBtn.style.pointerEvents = 'none';
// 添加撤销删除按钮
const undoBtn = document.createElement('button');
undoBtn.className = 'undo-delete-btn';
undoBtn.innerHTML = '<i class="fas fa-undo"></i> Undo';
undoBtn.onclick = function(e) {
e.stopPropagation();
// 移除删除状态
card.classList.remove('deleted');
// 恢复交互
if (checkbox) checkbox.style.pointerEvents = 'auto';
if (deleteBtn) deleteBtn.style.pointerEvents = 'auto';
// 移除撤销按钮
undoBtn.remove();
// 更新选中状态
updateSelectAllState();
updateBatchDeleteButton();
};
card.appendChild(undoBtn);
// 存储删除原因信息
card.dataset.deleteReason = deleteReasonSelect.value;
card.dataset.deleteInstructions = deleteInstructionsInput.value;
// 更新选中状态
updateSelectAllState();
updateBatchDeleteButton();
}
itemDeleteModal.classList.remove('active');
});
// 批量删除弹窗功能
const batchDeleteModal = document.getElementById('batchDeleteModal');
const closeBatchDeleteModalBtn = document.getElementById('closeBatchDeleteModal');
const batchDeleteReasonSelect = document.getElementById('batchDeleteReason');
const batchDeleteInstructionsInput = document.getElementById('batchDeleteInstructions');
const batchDeleteUploadArea = document.getElementById('batchDeleteUploadArea');
const batchDeleteUploadInput = document.getElementById('batchDeleteUploadInput');
const batchDeleteUploadPreview = document.getElementById('batchDeleteUploadPreview');
const batchDeleteCountEl = document.getElementById('batchDeleteCount');
const cancelBatchDeleteBtn = document.getElementById('cancelBatchDeleteBtn');
const confirmBatchDeleteBtn = document.getElementById('confirmBatchDeleteBtn');
let batchDeleteAttachments = [];
let currentBatchDeleteProductIds = [];
function openBatchDeleteModal(productIds) {
currentBatchDeleteProductIds = productIds;
batchDeleteReasonSelect.value = '';
batchDeleteInstructionsInput.value = '';
batchDeleteUploadPreview.innerHTML = '';
batchDeleteAttachments = [];
// 更新删除数量显示
batchDeleteCountEl.textContent = productIds.length;
batchDeleteModal.classList.add('active');
}
function closeBatchDeleteModal() {
batchDeleteModal.classList.remove('active');
}
closeBatchDeleteModalBtn.addEventListener('click', closeBatchDeleteModal);
cancelBatchDeleteBtn.addEventListener('click', closeBatchDeleteModal);
batchDeleteUploadArea.addEventListener('click', function() { batchDeleteUploadInput.click(); });
batchDeleteUploadInput.addEventListener('change', function() {
const files = Array.from(this.files);
files.forEach(file => {
if (!file.type.match('image.*')) return;
if (file.size > 10 * 1024 * 1024) return;
const id = Date.now() + '_' + Math.random().toString(36).slice(2,9);
batchDeleteAttachments.push({ id, file });
const reader = new FileReader();
reader.onload = function(e) {
const item = document.createElement('div');
item.className = 'delete-preview-item';
item.dataset.fileId = id;
item.innerHTML = `<img src="${e.target.result}" alt="image"><button class="delete-remove" data-file-id="${id}"><i class="fas fa-times"></i></button>`;
batchDeleteUploadPreview.appendChild(item);
item.querySelector('.delete-remove').addEventListener('click', function(ev) {
ev.stopPropagation();
const toId = this.dataset.fileId;
batchDeleteAttachments = batchDeleteAttachments.filter(x => x.id !== toId);
item.remove();
});
};
reader.readAsDataURL(file);
});
});
confirmBatchDeleteBtn.addEventListener('click', function() {
if (!batchDeleteReasonSelect.value) {
alert('Please choose a reason.');
return;
}
// 为所有选中的产品添加删除状态而不是立即删除
currentBatchDeleteProductIds.forEach(productId => {
const card = document.querySelector(`.product-card-optimized[data-product-id="${productId}"]`);
if (card) {
// 添加删除状态样式
card.classList.add('deleted');
// 禁用选择和删除按钮
const checkbox = card.querySelector('.product-select-checkbox');
const deleteBtn = card.querySelector('.delete-btn');
if (checkbox) checkbox.style.pointerEvents = 'none';
if (deleteBtn) deleteBtn.style.pointerEvents = 'none';
// 添加撤销删除按钮
const undoBtn = document.createElement('button');
undoBtn.className = 'undo-delete-btn';
undoBtn.innerHTML = '<i class="fas fa-undo"></i> Undo';
undoBtn.onclick = function(e) {
e.stopPropagation();
// 移除删除状态
card.classList.remove('deleted');
// 恢复交互
if (checkbox) checkbox.style.pointerEvents = 'auto';
if (deleteBtn) deleteBtn.style.pointerEvents = 'auto';
// 移除撤销按钮
undoBtn.remove();
// 更新选中状态
updateSelectAllState();
updateBatchDeleteButton();
};
card.appendChild(undoBtn);
// 存储删除原因信息
card.dataset.deleteReason = batchDeleteReasonSelect.value;
card.dataset.deleteInstructions = batchDeleteInstructionsInput.value;
}
});
// 更新选中状态
updateSelectAllState();
updateBatchDeleteButton();
closeBatchDeleteModal();
});
// 退款原因变化处理
refundReason.addEventListener('change', function() {
const selectedReason = this.value;
dynamicContent.style.display = 'block';
// 清空动态内容
dynamicContent.innerHTML = '';
// 根据选择的原因显示不同的内容
if (selectedReason === 'Cancel VIP/Shipping insurance') {
showVIPInsuranceOptions();
} else if (selectedReason === 'Price reduction after purchase') {
showPriceReductionInfo();
} else {
showDefaultRefundInfo();
}
// 添加动画
dynamicContent.classList.add('slide-in');
setTimeout(() => {
dynamicContent.classList.remove('slide-in');
}, 300);
});
// 显示VIP/保险取消选项
function showVIPInsuranceOptions() {
const content = `
<div class="fee-options">
<div class="fee-option" data-fee-id="vip">
<div class="fee-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="fee-details">
<div class="fee-name">VIP Membership Fee</div>
<div class="fee-description">Annual VIP membership fee</div>
</div>
<div class="fee-amount">$${additionalFeesData.vip.amount.toFixed(2)}</div>
</div>
<div class="fee-option" data-fee-id="shippingInsurance">
<div class="fee-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="fee-details">
<div class="fee-name">Shipping Insurance</div>
<div class="fee-description">Insurance for shipping protection</div>
</div>
<div class="fee-amount">$${additionalFeesData.shippingInsurance.amount.toFixed(2)}</div>
</div>
<div class="fee-option" data-fee-id="warranty">
<div class="fee-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="fee-details">
<div class="fee-name">Extended Warranty</div>
<div class="fee-description">Extended warranty for 2 years</div>
</div>
<div class="fee-amount">$${additionalFeesData.warranty.amount.toFixed(2)}</div>
</div>
<div class="fee-option" data-fee-id="serviceFee">
<div class="fee-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="fee-details">
<div class="fee-name">Service Fee</div>
<div class="fee-description">Processing and handling fee</div>
</div>
<div class="fee-amount">$${additionalFeesData.serviceFee.amount.toFixed(2)}</div>
</div>
</div>
`;
dynamicContent.innerHTML = content;
// 添加费用选项点击事件
const feeOptions = dynamicContent.querySelectorAll('.fee-option');
feeOptions.forEach(option => {
option.addEventListener('click', function() {
const feeId = this.dataset.feeId;
// 切换选中状态
this.classList.toggle('selected');
// 更新选中费用列表
if (this.classList.contains('selected')) {
if (!selectedAdditionalFees.includes(feeId)) {
selectedAdditionalFees.push(feeId);
}
} else {
const index = selectedAdditionalFees.indexOf(feeId);
if (index > -1) {
selectedAdditionalFees.splice(index, 1);
}
}
// 更新退款汇总显示
updateVIPInsuranceRefundSummary();
});
});
}
// 显示价格降价信息
function showPriceReductionInfo() {
const content = `
<div class="price-reduction-info">
<div class="price-info-item">
<span class="price-info-label">Original Order Amount</span>
<span class="price-info-value">$${priceReductionData.originalAmount.toFixed(2)}</span>
</div>
<div class="price-info-item">
<span class="price-info-label">Customization Fee</span>
<span class="price-info-value">$${priceReductionData.customizationFee.toFixed(2)}</span>
</div>
<div class="price-info-item" style="background-color: rgba(211, 47, 47, 0.05); border-color: var(--primary-red);">
<span class="price-info-label" style="font-weight: 700;">Refund Amount</span>
<span class="price-info-value price-info-total">$${priceReductionData.refundAmount.toFixed(2)}</span>
</div>
</div>
`;
dynamicContent.innerHTML = content;
}
// 显示默认退款信息
function showDefaultRefundInfo() {
const content = `
<div class="default-refund-info">
<p style="font-size: 15px; color: var(--text-dark); line-height: 1.6; margin-bottom: 16px;">
Please note that refunds may take 5-10 business days to process after approval. Customization fees may apply for personalized products.
</p>
<div style="display: flex; align-items: center; gap: 10px; padding: 12px; background-color: rgba(0, 0, 0, 0.03); border-radius: 8px;">
<i class="fas fa-info-circle" style="color: var(--primary-red);"></i>
<span style="font-size: 14px; color: var(--text-light);">You can select specific products for refund above.</span>
</div>
</div>
`;
dynamicContent.innerHTML = content;
}
// 上传模态框功能
function openUploadModal() {
uploadModal.classList.add('active');
}
function closeUploadModal() {
uploadModal.classList.remove('active');
}
openUploadModalBtn.addEventListener('click', openUploadModal);
closeUploadModalBtn.addEventListener('click', closeUploadModal);
cancelUploadBtn.addEventListener('click', closeUploadModal);
// 确认上传按钮
confirmUploadBtn.addEventListener('click', function() {
closeUploadModal();
updateAttachmentsPreview();
});
// 文件上传功能
fileUploadArea.addEventListener('click', function() {
fileUploadInput.click();
});
fileUploadArea.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('dragging');
});
fileUploadArea.addEventListener('dragleave', function(e) {
e.preventDefault();
this.classList.remove('dragging');
});
fileUploadArea.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('dragging');
const files = e.dataTransfer.files;
if (files.length > 0) {
handleFileUpload(files);
}
});
fileUploadInput.addEventListener('change', function(e) {
if (this.files.length > 0) {
handleFileUpload(this.files);
}
});
function handleFileUpload(files) {
// 检查总文件数
if (uploadedFiles.length + files.length > 5) {
alert('Maximum 5 files allowed. You already have ' + uploadedFiles.length + ' files.');
return;
}
Array.from(files).forEach((file, index) => {
// 检查文件类型
if (!file.type.match('image.*') && file.type !== 'application/pdf') {
alert(`File ${file.name} is not an image or PDF. Please upload only images or PDF files.`);
return;
}
// 检查文件大小 (最大10MB)
if (file.size > 10 * 1024 * 1024) {
alert(`File ${file.name} is too large. Maximum file size is 10MB.`);
return;
}
// 添加文件到已上传列表
const fileId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
uploadedFiles.push({
id: fileId,
file: file,
name: file.name,
type: file.type,
size: file.size
});
// 创建预览
createFilePreview(file, fileId);
});
// 更新上传区域显示
fileUploadArea.innerHTML = `
<i class="fas fa-check-circle" style="color: var(--success-color); font-size: 42px;"></i>
<div class="upload-text">${uploadedFiles.length} file${uploadedFiles.length > 1 ? 's' : ''} selected</div>
<div class="upload-hint">Click to add more files or drag and drop</div>
`;
// 更新确认按钮文本
confirmUploadBtn.textContent = `Add ${uploadedFiles.length} File${uploadedFiles.length > 1 ? 's' : ''}`;
}
function createFilePreview(file, fileId) {
const reader = new FileReader();
reader.onload = function(e) {
const previewItem = document.createElement('div');
previewItem.className = 'upload-preview-item fade-in';
previewItem.dataset.fileId = fileId;
if (file.type.match('image.*')) {
previewItem.innerHTML = `
<img src="${e.target.result}" alt="Uploaded image">
<div class="remove-upload" data-file-id="${fileId}">
<i class="fas fa-times"></i>
</div>
`;
} else {
previewItem.innerHTML = `
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f0f0f0;">
<i class="fas fa-file-pdf" style="font-size: 36px; color: var(--primary-red);"></i>
<div style="font-size: 12px; margin-top: 8px; padding: 0 4px; text-align: center; word-break: break-all;">${file.name.length > 15 ? file.name.substring(0, 12) + '...' : file.name}</div>
</div>
<div class="remove-upload" data-file-id="${fileId}">
<i class="fas fa-times"></i>
</div>
`;
}
uploadPreview.appendChild(previewItem);
// 添加删除按钮事件
const removeBtn = previewItem.querySelector('.remove-upload');
removeBtn.addEventListener('click', function(e) {
e.stopPropagation();
const idToRemove = this.dataset.fileId;
removeFile(idToRemove);
});
};
reader.readAsDataURL(file);
}
function removeFile(fileId) {
// 从数组中移除
uploadedFiles = uploadedFiles.filter(file => file.id !== fileId);
// 从预览中移除
const previewItem = document.querySelector(`.upload-preview-item[data-file-id="${fileId}"]`);
if (previewItem) {
previewItem.remove();
}
// 更新上传区域显示
if (uploadedFiles.length === 0) {
fileUploadArea.innerHTML = `
<i class="fas fa-cloud-upload-alt"></i>
<div class="upload-text">Click to upload or drag and drop</div>
<div class="upload-hint">PNG, JPG, PDF up to 10MB each. Max 5 files.</div>
`;
confirmUploadBtn.textContent = 'Add Files';
} else {
fileUploadArea.innerHTML = `
<i class="fas fa-check-circle" style="color: var(--success-color); font-size: 42px;"></i>
<div class="upload-text">${uploadedFiles.length} file${uploadedFiles.length > 1 ? 's' : ''} selected</div>
<div class="upload-hint">Click to add more files or drag and drop</div>
`;
confirmUploadBtn.textContent = `Add ${uploadedFiles.length} File${uploadedFiles.length > 1 ? 's' : ''}`;
}
// 更新附件预览
updateAttachmentsPreview();
}
function updateAttachmentsPreview() {
attachmentsPreview.innerHTML = '';
if (uploadedFiles.length === 0) {
return;
}
// 显示最多4个缩略图，第5个显示数量
const maxThumbnails = 4;
const filesToShow = uploadedFiles.slice(0, maxThumbnails);
filesToShow.forEach((file, index) => {
const thumbnail = document.createElement('div');
thumbnail.className = file.type === 'application/pdf' ? 'attachment-thumbnail pdf' : 'attachment-thumbnail';
thumbnail.dataset.fileId = file.id;
if (file.type === 'application/pdf') {
thumbnail.innerHTML = `
<i class="fas fa-file-pdf"></i>
`;
} else {
// 为图片创建缩略图
const reader = new FileReader();
reader.onload = function(e) {
thumbnail.innerHTML = `<img src="${e.target.result}" alt="Attachment">`;
};
reader.readAsDataURL(file.file);
}
// 点击缩略图打开模态框查看
thumbnail.addEventListener('click', function() {
openUploadModal();
});
attachmentsPreview.appendChild(thumbnail);
});
// 如果文件超过4个，显示剩余数量
if (uploadedFiles.length > maxThumbnails) {
const moreCount = uploadedFiles.length - maxThumbnails;
const moreThumbnail = document.createElement('div');
moreThumbnail.className = 'attachment-thumbnail';
moreThumbnail.style.backgroundColor = 'var(--primary-red)';
moreThumbnail.style.display = 'flex';
moreThumbnail.style.alignItems = 'center';
moreThumbnail.style.justifyContent = 'center';
moreThumbnail.style.color = 'white';
moreThumbnail.style.fontWeight = 'bold';
moreThumbnail.textContent = `+${moreCount}`;
moreThumbnail.addEventListener('click', openUploadModal);
attachmentsPreview.appendChild(moreThumbnail);
}
// 更新附件数量显示
openUploadModalBtn.innerHTML = `<i class="fas fa-paperclip"></i><span>Attachments (${uploadedFiles.length})</span>`;
}
// 邮箱编辑功能
editEmailBtn.addEventListener('click', function() {
if (!isEmailEditable) {
contactEmail.removeAttribute('readonly');
contactEmail.focus();
contactEmail.select();
editEmailBtn.innerHTML = '<i class="fas fa-save"></i> Save';
isEmailEditable = true;
} else {
// 验证邮箱格式
const email = contactEmail.value;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert('Please enter a valid email address.');
return;
}
contactEmail.setAttribute('readonly', true);
editEmailBtn.innerHTML = '<i class="fas fa-edit"></i> Edit';
isEmailEditable = false;
// 显示保存成功提示
editEmailBtn.innerHTML = '<i class="fas fa-check"></i> Saved';
editEmailBtn.style.backgroundColor = 'var(--success-color)';
editEmailBtn.style.color = 'white';
setTimeout(() => {
editEmailBtn.innerHTML = '<i class="fas fa-edit"></i> Edit';
editEmailBtn.style.backgroundColor = '';
editEmailBtn.style.color = '';
}, 2000);
}
});
// 表单提交
refundForm.addEventListener('submit', function(e) {
e.preventDefault();
// 验证必填字段
const refundReasonValue = refundReason.value;
if (!refundReasonValue) {
alert('Please select a refund reason.');
refundReason.focus();
return;
}
// 验证是否选择了产品
if (selectedProductsCount === 0) {
alert('Please select at least one product for refund.');
return;
}
// 显示加载状态
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
submitBtn.disabled = true;
submitBtn.style.opacity = '0.8';
// 模拟表单提交
setTimeout(() => {
// 显示成功消息
alert(`Your refund request for ${selectedProductsCount} product(s) has been submitted successfully! Total refund amount: ${totalRefundAmountEl.textContent}. We will contact you within 24-48 hours.`);
// 重置按钮
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
submitBtn.style.opacity = '1';
// 重置表单
refundForm.reset();
dynamicContent.style.display = 'none';
uploadedFiles = [];
uploadPreview.innerHTML = '';
attachmentsPreview.innerHTML = '';
selectedAdditionalFees = [];
// 重置产品选择
productCards.forEach(card => {
card.classList.remove('selected');
});
// 重置上传区域
fileUploadArea.innerHTML = `
<i class="fas fa-cloud-upload-alt"></i>
<div class="upload-text">Click to upload or drag and drop</div>
<div class="upload-hint">PNG, JPG, PDF up to 10MB each. Max 5 files.</div>
`;
confirmUploadBtn.textContent = 'Add Files';
openUploadModalBtn.innerHTML = `<i class="fas fa-paperclip"></i><span>Attach files</span>`;
// 重新计算总金额
calculateRefundTotal();
}, 2000);
});
// 添加悬停效果到产品卡片
productCards.forEach(card => {
card.addEventListener('mouseenter', function() {
if (!this.classList.contains('selected')) {
this.style.transform = 'translateY(-4px)';
}
});
card.addEventListener('mouseleave', function() {
if (!this.classList.contains('selected')) {
this.style.transform = 'translateY(0)';
}
});
});
});
</script>
</body>
</html>
index.html
style.css
index.js
md
README.md
index.html