This commit is contained in:
Park Byung Eun 2022-07-11 08:19:19 +00:00
parent 266e2e3593
commit 849d8bb8b9
4 changed files with 271 additions and 502 deletions

View File

@ -128,7 +128,7 @@
matSort matSort
matSortDisableClear matSortDisableClear
> >
<div></div> <div class="hidden sm:block">요율</div>
<div class="hidden sm:block" [mat-sort-header]="'management'"> <div class="hidden sm:block" [mat-sort-header]="'management'">
관리 관리
</div> </div>
@ -162,18 +162,6 @@
상태 상태
</div> </div>
<div class="hidden sm:block" [mat-sort-header]="'top'">상부</div> <div class="hidden sm:block" [mat-sort-header]="'top'">상부</div>
<!-- <div class="hidden md:block" [mat-sort-header]="'sku'">SKU</div>
<div [mat-sort-header]="'name'">Name</div>
<div class="hidden sm:block" [mat-sort-header]="'price'">
Price
</div>
<div class="hidden lg:block" [mat-sort-header]="'stock'">
Stock
</div>
<div class="hidden lg:block" [mat-sort-header]="'active'">
Active
</div>
<div class="hidden sm:block">Details</div> -->
</div> </div>
<!-- Rows --> <!-- Rows -->
<ng-container *ngIf="casinomoneys$ | async as casinomoneys"> <ng-container *ngIf="casinomoneys$ | async as casinomoneys">
@ -237,181 +225,88 @@
<div class="hidden sm:block truncate"> <div class="hidden sm:block truncate">
LV.{{ casinomoney.level }} LV.{{ casinomoney.level }}
</div> </div>
</div>
<!-- id --> <!-- id -->
<ng-container *ngIf="users$ | async as users"> <ng-container *ngIf="users$ | async as users">
<ng-container <ng-container
*ngFor="let user of users; trackBy: __trackByFn" *ngFor="let user of users; trackBy: __trackByFn"
>
<div
class="hidden sm:block truncate"
(click)="viewUserDetail(user.id!)"
> >
{{ casinomoney.id }}
</div>
</ng-container>
</ng-container>
<!-- nickname -->
<div class="hidden sm:block truncate">
{{ casinomoney.nickname }}
</div>
<!-- accountHolder -->
<div class="hidden sm:block truncate">
{{ casinomoney.accountHolder }}
</div>
<!-- contact -->
<div class="hidden sm:block truncate">
{{ casinomoney.contact }}
</div>
<!-- reserve -->
<div class="hidden sm:block truncate">
캐쉬{{ casinomoney.cash }} 콤프{{ casinomoney.comp }} 쿠폰{{
casinomoney.coupon
}}
</div>
<!-- gameMoney -->
<div class="hidden sm:block truncate">
{{ casinomoney.gameMoney }}
</div>
<!-- casinoCash -->
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">
게임머니확인
</button>
<button mat-flat-button [color]="'primary'">
게임머니회수
</button>
</div>
<!-- todayComp -->
<div class="hidden sm:block truncate">
{{ casinomoney.todayComp }}P
</div>
<!-- total -->
<div class="hidden sm:block truncate">
입금{{ casinomoney.deposit }} 출금{{
casinomoney.withdraw
}}
차익{{ casinomoney.margin }}
</div>
<!-- log -->
<div class="hidden sm:block truncate">
가입{{ casinomoney.accession }} 최종{{
casinomoney.final
}}
IP{{ casinomoney.ip }}
</div>
<!-- state -->
<div class="hidden sm:block truncate">
{{ casinomoney.state }}
</div>
<!-- top -->
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">상부</button>
</div>
<!-- Image -->
<!-- <div class="flex items-center">
<div
class="relative flex flex-0 items-center justify-center w-12 h-12 mr-6 rounded overflow-hidden border"
>
<img
class="w-8"
*ngIf="user.thumbnail"
[alt]="'Product thumbnail image'"
[src]="user.thumbnail"
/>
<div <div
class="flex items-center justify-center w-full h-full text-xs font-semibold leading-none text-center uppercase" class="hidden sm:block truncate"
*ngIf="!user.thumbnail" (click)="viewUserDetail(user.id!)"
> >
NO THUMB {{ casinomoney.id }}
</div> </div>
</div>
</div> -->
<!-- SKU -->
<!-- <div class="hidden md:block truncate">
{{ user.sku }}
</div> -->
<!-- Name -->
<!-- <div class="truncate">
{{ user.name }}
</div> -->
<!-- Price -->
<!-- <div class="hidden sm:block">
{{ user.price | currency: "USD":"symbol":"1.2-2" }}
</div> -->
<!-- Stock -->
<!-- <div class="hidden lg:flex items-center">
<div class="min-w-4">{{ user.stock }}</div> -->
<!-- Low stock -->
<!-- <div
class="flex items-end ml-2 w-1 h-4 bg-red-200 rounded overflow-hidden"
*ngIf="user.stock < 20"
>
<div class="flex w-full h-1/3 bg-red-600"></div>
</div> -->
<!-- Medium stock -->
<!-- <div
class="flex items-end ml-2 w-1 h-4 bg-orange-200 rounded overflow-hidden"
*ngIf="user.stock >= 20 && user.stock < 30"
>
<div class="flex w-full h-2/4 bg-orange-400"></div>
</div> -->
<!-- High stock -->
<!-- <div
class="flex items-end ml-2 w-1 h-4 bg-green-100 rounded overflow-hidden"
*ngIf="user.stock >= 30"
>
<div class="flex w-full h-full bg-green-400"></div>
</div>
</div> -->
<!-- Active -->
<!-- <div class="hidden lg:block">
<ng-container *ngIf="user.active">
<mat-icon
class="text-green-400 icon-size-5"
[svgIcon]="'heroicons_solid:check'"
></mat-icon>
</ng-container> </ng-container>
<ng-container *ngIf="!user.active"> </ng-container>
<mat-icon <!-- nickname -->
class="text-gray-400 icon-size-5" <div class="hidden sm:block truncate">
[svgIcon]="'heroicons_solid:x'" {{ casinomoney.nickname }}
></mat-icon> </div>
</ng-container>
</div> -->
<!-- Details button --> <!-- accountHolder -->
<!-- <div> <div class="hidden sm:block truncate">
<button {{ casinomoney.accountHolder }}
class="min-w-10 min-h-7 h-7 px-2 leading-6" </div>
mat-stroked-button
(click)="__toggleDetails(user.id)" <!-- contact -->
> <div class="hidden sm:block truncate">
<mat-icon {{ casinomoney.contact }}
class="icon-size-5" </div>
[svgIcon]="
selectedUser?.id === user.id <!-- reserve -->
? 'heroicons_solid:chevron-up' <div class="hidden sm:block truncate">
: 'heroicons_solid:chevron-down' 캐쉬{{ casinomoney.cash }} 콤프{{ casinomoney.comp }} 쿠폰{{
" casinomoney.coupon
></mat-icon> }}
</div>
<!-- gameMoney -->
<div class="hidden sm:block truncate">
{{ casinomoney.gameMoney }}
</div>
<!-- casinoCash -->
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">
게임머니확인
</button> </button>
</div> --> <button mat-flat-button [color]="'primary'">
게임머니회수
</button>
</div>
<!-- todayComp -->
<div class="hidden sm:block truncate">
{{ casinomoney.todayComp }}P
</div>
<!-- total -->
<div class="hidden sm:block truncate">
입금{{ casinomoney.deposit }} 출금{{
casinomoney.withdraw
}}
차익{{ casinomoney.margin }}
</div>
<!-- log -->
<div class="hidden sm:block truncate">
가입{{ casinomoney.accession }} 최종{{
casinomoney.final
}}
IP{{ casinomoney.ip }}
</div>
<!-- state -->
<div class="hidden sm:block truncate">
{{ casinomoney.state }}
</div>
<!-- top -->
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">상부</button>
</div>
</div>
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>

View File

@ -45,15 +45,15 @@ import { Router } from '@angular/router';
grid-template-columns: 60px auto 40px; grid-template-columns: 60px auto 40px;
@screen sm { @screen sm {
grid-template-columns: 60px auto 60px 72px; grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
} }
@screen md { @screen md {
grid-template-columns: 60px 60px auto 112px 72px; grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
} }
@screen lg { @screen lg {
grid-template-columns: 60px 60px auto 112px 96px 96px 72px; grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
} }
} }
`, `,

View File

@ -11,6 +11,7 @@
</div> </div>
<!-- Title --> <!-- Title -->
<div class="text-4xl font-extrabold tracking-tight">장기미접속회원</div> <div class="text-4xl font-extrabold tracking-tight">장기미접속회원</div>
<!-- Actions --> <!-- Actions -->
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<!-- button --> <!-- button -->
@ -20,326 +21,199 @@
<button mat-flat-button [color]="'primary'">90일</button> <button mat-flat-button [color]="'primary'">90일</button>
<button mat-flat-button [color]="'primary'">120일</button> <button mat-flat-button [color]="'primary'">120일</button>
<button mat-flat-button [color]="'primary'">가입후미접속</button> <button mat-flat-button [color]="'primary'">가입후미접속</button>
<!-- Main --> </div>
<div class="flex flex-auto overflow-hidden"> </div>
<!-- Products list -->
<div
class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
>
<ng-container *ngIf="unconnecteds$ | async as unconnecteds">
<ng-container *ngIf="unconnecteds.length > 0; else noUnconnected">
<div class="grid">
<!-- Header -->
<div
class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
matSort
matSortDisableClear
>
<div></div>
<div class="hidden sm:block" [mat-sort-header]="'rank'">
등급
</div>
<div class="hidden sm:block" [mat-sort-header]="'id'">
아이디
</div>
<div class="hidden sm:block" [mat-sort-header]="'nickname'">
닉네임
</div>
<div
class="hidden sm:block"
[mat-sort-header]="'accountHolder'"
>
예금주
</div>
<div class="hidden sm:block" [mat-sort-header]="'level'">
레벨
</div>
<div
class="hidden sm:block"
[mat-sort-header]="'calculateType'"
>
정산종류
</div>
<div class="hidden sm:block" [mat-sort-header]="'contact'">
연락처
</div>
<div class="hidden sm:block" [mat-sort-header]="'cash'">
캐쉬
</div>
<div class="hidden sm:block" [mat-sort-header]="'comp'">
콤프
</div>
<div class="hidden sm:block" [mat-sort-header]="'charge'">
충전금
</div>
<div class="hidden sm:block" [mat-sort-header]="'exchange'">
환전금
</div>
<div class="hidden sm:block" [mat-sort-header]="'revenue'">
수익금
</div>
<div class="hidden sm:block" [mat-sort-header]="'accession'">
가입날짜
</div>
<div class="hidden sm:block" [mat-sort-header]="'final'">
최근접속일
</div>
<div class="hidden sm:block" [mat-sort-header]="'state'">
상태
</div>
<div class="hidden sm:block" [mat-sort-header]="''">쪽지</div>
<div class="hidden sm:block" [mat-sort-header]="'highest'">
최상부
</div>
<div class="hidden sm:block" [mat-sort-header]="'highRank'">
직속
</div>
<div class="hidden sm:block" [mat-sort-header]="'members'">
회원수
</div>
<!-- <div class="hidden md:block" [mat-sort-header]="'sku'">SKU</div>
<div [mat-sort-header]="'name'">Name</div>
<div class="hidden sm:block" [mat-sort-header]="'price'">
Price
</div>
<div class="hidden lg:block" [mat-sort-header]="'stock'">
Stock
</div>
<div class="hidden lg:block" [mat-sort-header]="'active'">
Active
</div>
<div class="hidden sm:block">Details</div> -->
</div>
<!-- Rows -->
<ng-container *ngIf="unconnecteds$ | async as unconnecteds">
<ng-container
*ngFor="
let unconnected of unconnecteds;
trackBy: __trackByFn
"
>
<div
class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
>
<!-- rank -->
<div class="hidden sm:block truncate">
{{ unconnected.rank }}
</div>
<!-- id -->
<ng-container *ngIf="users$ | async as users">
<ng-container
*ngFor="let user of users; trackBy: __trackByFn"
>
<div
class="hidden sm:block truncate"
(click)="viewUserDetail(user.id!)"
>
{{ unconnected.id }}
</div>
</ng-container>
</ng-container>
<!-- nickname -->
<div class="hidden sm:block truncate">
{{ unconnected.nickname }}
</div>
<!-- accountHolder -->
<div class="hidden sm:block truncate">
{{ unconnected.accountHolder }}
</div>
<!-- level -->
<div class="hidden sm:block truncate">
LV.{{ unconnected.level }}
</div>
<!-- calculateType --> <!-- Main -->
<div class="hidden sm:block truncate"> <div class="flex flex-auto overflow-hidden">
{{ unconnected.calculateType }} <!-- Products list -->
</div> <div
<!-- contact --> class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
<div class="hidden sm:block truncate"> >
{{ unconnected.contact }} <ng-container *ngIf="unconnecteds$ | async as unconnecteds">
</div> <ng-container *ngIf="unconnecteds.length > 0; else noUnconnected">
<div class="grid">
<!-- cash --> <!-- Header -->
<div class="hidden sm:block truncate">
캐쉬{{ unconnected.cash }}
</div>
<!-- comp -->
<div class="hidden sm:block truncate">
comp{{ unconnected.comp }}
</div>
<!-- charge -->
<div class="hidden sm:block truncate">
{{ unconnected.charge }}
</div>
<!-- exchange -->
<div class="hidden sm:block truncate">
{{ unconnected.exchange }}
</div>
<!-- revenue -->
<div class="hidden sm:block truncate">
{{ unconnected.revenue }}
</div>
<!-- accession -->
<div class="hidden sm:block truncate">
{{ unconnected.accession }}
</div>
<!-- final -->
<div class="hidden sm:block truncate">
{{ unconnected.final }}
</div>
<!-- state -->
<div class="hidden sm:block truncate">
{{ unconnected.state }}
</div>
<!-- message -->
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">
<mat-icon svgIcon="heroicons_outline:mail"></mat-icon>
</button>
</div>
<!-- highest -->
<div class="hidden sm:block truncate">
{{ unconnected.highest }}
</div>
<!-- highRank -->
<div class="hidden sm:block truncate">
{{ unconnected.highRank }}
</div>
<!-- members -->
<div class="hidden sm:block truncate">
{{ unconnected.members }}
</div>
<!-- Image -->
<!-- <div class="flex items-center">
<div
class="relative flex flex-0 items-center justify-center w-12 h-12 mr-6 rounded overflow-hidden border"
>
<img
class="w-8"
*ngIf="user.thumbnail"
[alt]="'Product thumbnail image'"
[src]="user.thumbnail"
/>
<div
class="flex items-center justify-center w-full h-full text-xs font-semibold leading-none text-center uppercase"
*ngIf="!user.thumbnail"
>
NO THUMB
</div>
</div>
</div> -->
<!-- SKU -->
<!-- <div class="hidden md:block truncate">
{{ user.sku }}
</div> -->
<!-- Name -->
<!-- <div class="truncate">
{{ user.name }}
</div> -->
<!-- Price -->
<!-- <div class="hidden sm:block">
{{ user.price | currency: "USD":"symbol":"1.2-2" }}
</div> -->
<!-- Stock -->
<!-- <div class="hidden lg:flex items-center">
<div class="min-w-4">{{ user.stock }}</div> -->
<!-- Low stock -->
<!-- <div
class="flex items-end ml-2 w-1 h-4 bg-red-200 rounded overflow-hidden"
*ngIf="user.stock < 20"
>
<div class="flex w-full h-1/3 bg-red-600"></div>
</div> -->
<!-- Medium stock -->
<!-- <div
class="flex items-end ml-2 w-1 h-4 bg-orange-200 rounded overflow-hidden"
*ngIf="user.stock >= 20 && user.stock < 30"
>
<div class="flex w-full h-2/4 bg-orange-400"></div>
</div> -->
<!-- High stock -->
<!-- <div
class="flex items-end ml-2 w-1 h-4 bg-green-100 rounded overflow-hidden"
*ngIf="user.stock >= 30"
>
<div class="flex w-full h-full bg-green-400"></div>
</div>
</div> -->
<!-- Active -->
<!-- <div class="hidden lg:block">
<ng-container *ngIf="user.active">
<mat-icon
class="text-green-400 icon-size-5"
[svgIcon]="'heroicons_solid:check'"
></mat-icon>
</ng-container>
<ng-container *ngIf="!user.active">
<mat-icon
class="text-gray-400 icon-size-5"
[svgIcon]="'heroicons_solid:x'"
></mat-icon>
</ng-container>
</div> -->
<!-- Details button -->
<!-- <div>
<button
class="min-w-10 min-h-7 h-7 px-2 leading-6"
mat-stroked-button
(click)="__toggleDetails(user.id)"
>
<mat-icon
class="icon-size-5"
[svgIcon]="
selectedUser?.id === user.id
? 'heroicons_solid:chevron-up'
: 'heroicons_solid:chevron-down'
"
></mat-icon>
</button>
</div> -->
</div>
</ng-container>
</ng-container>
</div>
<mat-paginator
class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
[ngClass]="{ 'pointer-events-none': isLoading }"
[length]="pagination?.length"
[pageIndex]="pagination?.page"
[pageSize]="pagination?.size"
[pageSizeOptions]="[5, 10, 25, 100]"
[showFirstLastButtons]="true"
></mat-paginator>
</ng-container>
</ng-container>
<ng-template #noUnconnected>
<div <div
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center" class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
matSort
matSortDisableClear
> >
There are no unconnected! <div></div>
<div class="hidden sm:block" [mat-sort-header]="'rank'">등급</div>
<div class="hidden sm:block" [mat-sort-header]="'id'">아이디</div>
<div class="hidden sm:block" [mat-sort-header]="'nickname'">
닉네임
</div>
<div class="hidden sm:block" [mat-sort-header]="'accountHolder'">
예금주
</div>
<div class="hidden sm:block" [mat-sort-header]="'level'">
레벨
</div>
<div class="hidden sm:block" [mat-sort-header]="'calculateType'">
정산종류
</div>
<div class="hidden sm:block" [mat-sort-header]="'contact'">
연락처
</div>
<div class="hidden sm:block" [mat-sort-header]="'cash'">캐쉬</div>
<div class="hidden sm:block" [mat-sort-header]="'comp'">콤프</div>
<div class="hidden sm:block" [mat-sort-header]="'charge'">
충전금
</div>
<div class="hidden sm:block" [mat-sort-header]="'exchange'">
환전금
</div>
<div class="hidden sm:block" [mat-sort-header]="'revenue'">
수익금
</div>
<div class="hidden sm:block" [mat-sort-header]="'accession'">
가입날짜
</div>
<div class="hidden sm:block" [mat-sort-header]="'final'">
최근접속일
</div>
<div class="hidden sm:block" [mat-sort-header]="'state'">
상태
</div>
<div class="hidden sm:block" [mat-sort-header]="''">쪽지</div>
<div class="hidden sm:block" [mat-sort-header]="'highest'">
최상부
</div>
<div class="hidden sm:block" [mat-sort-header]="'highRank'">
직속
</div>
<div class="hidden sm:block" [mat-sort-header]="'members'">
회원수
</div>
</div> </div>
</ng-template> <!-- Rows -->
<ng-container *ngIf="unconnecteds$ | async as unconnecteds">
<ng-container
*ngFor="let unconnected of unconnecteds; trackBy: __trackByFn"
>
<div
class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
>
<!-- rank -->
<div class="hidden sm:block truncate">
{{ unconnected.rank }}
</div>
<!-- id -->
<div
class="hidden sm:block truncate"
(click)="viewUserDetail(unconnected.id!)"
>
{{ unconnected.id }}
</div>
<!-- nickname -->
<div class="hidden sm:block truncate">
{{ unconnected.nickname }}
</div>
<!-- accountHolder -->
<div class="hidden sm:block truncate">
{{ unconnected.accountHolder }}
</div>
<!-- level -->
<div class="hidden sm:block truncate">
LV.{{ unconnected.level }}
</div>
<!-- calculateType -->
<div class="hidden sm:block truncate">
{{ unconnected.calculateType }}
</div>
<!-- contact -->
<div class="hidden sm:block truncate">
{{ unconnected.contact }}
</div>
<!-- cash -->
<div class="hidden sm:block truncate">
캐쉬{{ unconnected.cash }}
</div>
<!-- comp -->
<div class="hidden sm:block truncate">
comp{{ unconnected.comp }}
</div>
<!-- charge -->
<div class="hidden sm:block truncate">
{{ unconnected.charge }}
</div>
<!-- exchange -->
<div class="hidden sm:block truncate">
{{ unconnected.exchange }}
</div>
<!-- revenue -->
<div class="hidden sm:block truncate">
{{ unconnected.revenue }}
</div>
<!-- accession -->
<div class="hidden sm:block truncate">
{{ unconnected.accession }}
</div>
<!-- final -->
<div class="hidden sm:block truncate">
{{ unconnected.final }}
</div>
<!-- state -->
<div class="hidden sm:block truncate">
{{ unconnected.state }}
</div>
<!-- message -->
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">
<mat-icon svgIcon="heroicons_outline:mail"></mat-icon>
</button>
</div>
<!-- highest -->
<div class="hidden sm:block truncate">
{{ unconnected.highest }}
</div>
<!-- highRank -->
<div class="hidden sm:block truncate">
{{ unconnected.highRank }}
</div>
<!-- members -->
<div class="hidden sm:block truncate">
{{ unconnected.members }}
</div>
</div>
</ng-container>
</ng-container>
</div>
<mat-paginator
class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
[ngClass]="{ 'pointer-events-none': isLoading }"
[length]="pagination?.length"
[pageIndex]="pagination?.page"
[pageSize]="pagination?.size"
[pageSizeOptions]="[5, 10, 25, 100]"
[showFirstLastButtons]="true"
></mat-paginator>
</ng-container>
</ng-container>
<ng-template #noUnconnected>
<div
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
>
There are no unconnected!
</div> </div>
</div> </ng-template>
</div> </div>
</div> </div>
</div> </div>

View File

@ -44,15 +44,15 @@ import { Router } from '@angular/router';
grid-template-columns: 60px auto 40px; grid-template-columns: 60px auto 40px;
@screen sm { @screen sm {
grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 72px; grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
} }
@screen md { @screen md {
grid-template-columns: 60px 60px 60px 60px 60px 60px auto 112px 72px; grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
} }
@screen lg { @screen lg {
grid-template-columns: 50px 50px 50px 50px 70px 40px 60px 60px auto 112px 96px 96px 72px; grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
} }
} }
`, `,