Simplify order and cart cards
This commit is contained in:
@@ -25,11 +25,7 @@ const DATE_FORMATTER = new Intl.DateTimeFormat('ru-RU', {
|
||||
minute: '2-digit',
|
||||
});
|
||||
|
||||
const coverPresets = [
|
||||
['#d9f5e6', '#9ce8c1', '#6fd09d'],
|
||||
['#eaf9ef', '#b3e8cb', '#76c89f'],
|
||||
['#e8f5ec', '#b2e0c6', '#7dd0a9'],
|
||||
];
|
||||
const coverPresets = ['#edf3ef', '#f1f4ee', '#edf2f4'];
|
||||
|
||||
function formatCreatedAt(value: string | Date) {
|
||||
return DATE_FORMATTER.format(new Date(value));
|
||||
@@ -37,23 +33,12 @@ function formatCreatedAt(value: string | Date) {
|
||||
|
||||
function createProductCover(name: string, seedKey: string) {
|
||||
const seed = `${name}${seedKey}`.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
||||
const [start, middle, finish] = coverPresets[seed % coverPresets.length];
|
||||
const background = coverPresets[seed % coverPresets.length];
|
||||
const firstLetter = name.trim().charAt(0).toUpperCase() || 'P';
|
||||
|
||||
const svg = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="${start}" />
|
||||
<stop offset="55%" stop-color="${middle}" />
|
||||
<stop offset="100%" stop-color="${finish}" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="88" height="88" fill="url(#g)" rx="24" />
|
||||
<g opacity="0.16">
|
||||
<circle cx="72" cy="18" r="20" fill="#0f7a49" />
|
||||
<circle cx="14" cy="80" r="22" fill="#0f7a49" />
|
||||
</g>
|
||||
<rect width="88" height="88" fill="${background}" rx="24" />
|
||||
<text x="50%" y="56%" text-anchor="middle" fill="#11412c" font-family="Manrope, sans-serif" font-size="34" font-weight="700">${firstLetter}</text>
|
||||
</svg>
|
||||
`.trim();
|
||||
@@ -84,7 +69,7 @@ const codeLabel = computed(() => formatOrderCode(props.code));
|
||||
<div
|
||||
v-for="item in visibleItems"
|
||||
:key="item.id"
|
||||
class="h-11 w-11 overflow-hidden rounded-[16px] border-2 border-white bg-[#edf8f1] shadow-[0_6px_16px_rgba(18,56,36,0.08)]"
|
||||
class="h-11 w-11 overflow-hidden rounded-[16px] bg-[#edf3ef]"
|
||||
:title="`${item.productName} × ${item.quantity}`"
|
||||
>
|
||||
<img
|
||||
@@ -96,7 +81,7 @@ const codeLabel = computed(() => formatOrderCode(props.code));
|
||||
</div>
|
||||
<div
|
||||
v-if="hiddenCount > 0"
|
||||
class="flex h-11 w-11 items-center justify-center rounded-[16px] bg-[#123824] text-xs font-bold text-white shadow-[0_6px_16px_rgba(18,56,36,0.14)]"
|
||||
class="flex h-11 w-11 items-center justify-center rounded-[16px] bg-[#edf3ef] text-xs font-bold text-[#123824]"
|
||||
>
|
||||
+{{ hiddenCount }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user