bao/portal-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update cart view

Browse Source
This commit is contained in:
pbao9
2025-07-29 08:53:41 +07:00
parent 5ea42105f9
commit 980c9468fc
18 changed files with 893 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/app.css
+9 -57
View File
@@ -81,7 +81,6 @@
--color-emerald-800: oklch(43.2% 0.095 166.913);
--color-emerald-900: oklch(37.8% 0.077 168.94);
--color-teal-50: oklch(98.4% 0.014 180.72);
--color-teal-100: oklch(95.3% 0.051 180.801);
--color-teal-200: oklch(91% 0.096 180.426);
--color-teal-300: oklch(85.5% 0.138 181.071);
--color-teal-400: oklch(77.7% 0.152 181.912);
@@ -165,7 +164,6 @@
--color-pink-800: oklch(45.9% 0.187 3.815);
--color-pink-900: oklch(40.8% 0.153 2.432);
--color-rose-50: oklch(96.9% 0.015 12.422);
--color-rose-100: oklch(94.1% 0.03 12.58);
--color-rose-200: oklch(89.2% 0.058 10.001);
--color-rose-300: oklch(81% 0.117 11.638);
--color-rose-400: oklch(71.2% 0.194 13.428);
@@ -1506,12 +1504,21 @@
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-3\/4 {
width: calc(3/4 * 100%);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-4\/6 {
width: calc(4/6 * 100%);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-5\/6 {
width: calc(5/6 * 100%);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
@@ -2553,9 +2560,6 @@
border-color: color-mix(in oklab, var(--color-gray-500) 40%, transparent);
}
}
.border-green-100 {
border-color: var(--color-green-100);
}
.border-green-200 {
border-color: var(--color-green-200);
}
@@ -2622,9 +2626,6 @@
border-color: color-mix(in oklab, var(--color-neutral-500) 40%, transparent);
}
}
.border-orange-100 {
border-color: var(--color-orange-100);
}
.border-orange-200 {
border-color: var(--color-orange-200);
}
@@ -2670,9 +2671,6 @@
border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
}
}
.border-purple-100 {
border-color: var(--color-purple-100);
}
.border-purple-200 {
border-color: var(--color-purple-200);
}
@@ -2703,9 +2701,6 @@
border-color: color-mix(in oklab, var(--color-red-500) 40%, transparent);
}
}
.border-rose-100 {
border-color: var(--color-rose-100);
}
.border-rose-200 {
border-color: var(--color-rose-200);
}
@@ -2766,9 +2761,6 @@
border-color: color-mix(in oklab, var(--color-stone-500) 40%, transparent);
}
}
.border-teal-100 {
border-color: var(--color-teal-100);
}
.border-teal-200 {
border-color: var(--color-teal-200);
}
@@ -3606,10 +3598,6 @@
--tw-gradient-from: var(--color-primary);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-50 {
--tw-gradient-from: var(--color-blue-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-600 {
--tw-gradient-from: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3618,50 +3606,18 @@
--tw-gradient-from: var(--color-gray-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-green-50 {
--tw-gradient-from: var(--color-green-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-orange-50 {
--tw-gradient-from: var(--color-orange-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-purple-50 {
--tw-gradient-from: var(--color-purple-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-rose-50 {
--tw-gradient-from: var(--color-rose-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-teal-50 {
--tw-gradient-from: var(--color-teal-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-\[var\(--color-secondary\)\] {
--tw-gradient-to: var(--color-secondary);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-amber-50 {
--tw-gradient-to: var(--color-amber-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-cyan-50 {
--tw-gradient-to: var(--color-cyan-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-emerald-50 {
--tw-gradient-to: var(--color-emerald-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-indigo-50 {
--tw-gradient-to: var(--color-indigo-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-pink-50 {
--tw-gradient-to: var(--color-pink-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-purple-600 {
--tw-gradient-to: var(--color-purple-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3670,10 +3626,6 @@
--tw-gradient-to: transparent;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-violet-50 {
--tw-gradient-to: var(--color-violet-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.bg-cover {
background-size: cover;
}
public/css/service/cart.css
+307
View File
@@ -0,0 +1,307 @@
/* Cart Page Styles */
.custom-dropdown {
position: relative;
width: 100%;
z-index: 1000;
}
.dropdown-selected {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: white;
cursor: pointer !important;
transition: all 0.2s ease;
font-weight: 500;
user-select: none;
position: relative;
z-index: 1001;
}
.dropdown-selected:hover,
.dropdown-selected.active {
border-color: #f66d2f;
box-shadow: 0 0 0 3px rgba(246, 109, 47, 0.1);
}
.dropdown-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 2px solid #f66d2f;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 1002;
max-height: 200px;
overflow-y: auto;
margin-top: 4px;
display: none;
}
.dropdown-options.show {
display: block !important;
}
.dropdown-option {
padding: 12px 16px;
cursor: pointer !important;
transition: all 0.2s ease;
border-bottom: 1px solid #f3f4f6;
user-select: none;
}
.dropdown-option:hover {
background: #fff5f0;
color: #f66d2f;
}
.dropdown-option.selected {
background: #f66d2f;
color: white;
}
.dropdown-option:last-child {
border-bottom: none;
}
.dropdown-arrow {
transition: transform 0.2s ease;
color: #6b7280;
font-size: 12px;
}
.dropdown-selected.active .dropdown-arrow,
.dropdown-arrow.rotate-180 {
transform: rotate(180deg);
color: #f66d2f;
}
/* Product Feature Icons */
.product-feature {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.product-feature-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.product-feature-content {
display: flex;
align-items: center;
gap: 8px;
}
.product-feature-label {
font-weight: 600;
color: #374151;
}
.product-feature-value {
font-weight: 600;
color: #1e40af;
}
.product-feature-unit {
font-size: 12px;
color: #2563eb;
}
/* OS Selection */
.os-group {
margin-bottom: 16px;
}
.os-group-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.os-group-thumbnail {
width: 24px;
height: 24px;
border-radius: 4px;
}
.os-group-name {
font-weight: 500;
color: #374151;
}
.os-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.os-option {
position: relative;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 12px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
text-align: left;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
background: white;
color: #374151;
}
.os-option:hover {
background: #f9fafb;
}
.os-option.selected {
border-color: #f66d2f;
background: #fff7ed;
color: #ea580c;
box-shadow: 0 0 0 3px rgba(246, 109, 47, 0.1);
}
.os-option-thumbnail {
width: 32px;
height: 32px;
border-radius: 4px;
object-fit: cover;
}
.os-option-content {
flex: 1;
}
.os-option-name {
font-weight: 600;
}
.os-option-version {
font-size: 12px;
color: #6b7280;
}
.os-option-check {
position: absolute;
top: 4px;
right: 4px;
background: #f66d2f;
color: white;
border-radius: 50%;
padding: 2px;
width: 16px;
height: 16px;
}
/* Empty Cart */
.empty-cart {
text-align: center;
padding: 64px 16px;
}
.empty-cart-icon {
width: 96px;
height: 96px;
background: #f3f4f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.empty-cart-icon svg {
width: 48px;
height: 48px;
color: #9ca3af;
}
.empty-cart-title {
font-size: 20px;
font-weight: 600;
color: #1f2937;
margin-bottom: 8px;
}
.empty-cart-description {
color: #6b7280;
margin-bottom: 24px;
}
.empty-cart-button {
display: inline-flex;
align-items: center;
padding: 12px 24px;
background: #2563eb;
color: white;
font-weight: 500;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.empty-cart-button:hover {
background: #1d4ed8;
}
.empty-cart-button svg {
width: 20px;
height: 20px;
margin-right: 8px;
}
/* Skeleton Loading Animation */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Responsive Design */
@media (max-width: 768px) {
.os-grid {
grid-template-columns: 1fr;
}
.dropdown-options {
max-height: 150px;
}
.product-feature {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* Hide content until Alpine.js is ready */
[x-cloak] {
display: none !important;
}
/* Skeleton loading states */
.skeleton-active {
pointer-events: none;
}
.skeleton-active * {
pointer-events: none;
}