245 lines
7.9 KiB
HTML
245 lines
7.9 KiB
HTML
<div id="popup-set-detail" class="page-layout carded fullwidth inner-scroll">
|
|
<!-- TOP BACKGROUND -->
|
|
<div class="top-bg accent"></div>
|
|
<!-- / TOP BACKGROUND -->
|
|
|
|
<!-- CENTER -->
|
|
<div class="center">
|
|
<!-- HEADER -->
|
|
<div
|
|
class="header accent"
|
|
fxLayout="row"
|
|
fxLayoutAlign="space-between center"
|
|
>
|
|
<!-- APP TITLE -->
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
<div
|
|
fxLayout="column"
|
|
fxLayoutAlign="start start"
|
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
|
>
|
|
<div class="h2">
|
|
팝업창 관리
|
|
</div>
|
|
<div class="subtitle secondary-text">
|
|
<span>팝업창 세팅</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / APP TITLE -->
|
|
</div>
|
|
<!-- / HEADER -->
|
|
|
|
<!-- CONTENT CARD -->
|
|
<div class="content-card">
|
|
<!-- CONTENT -->
|
|
<div class="content">
|
|
<mat-tab-group fxLayout="column" fxFlex>
|
|
<mat-tab label="Order Details">
|
|
<div class="order-details tab-content p-24" fusePerfectScrollbar>
|
|
<div class="section pb-48">
|
|
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon class="m-0 mr-16 secondary-text"
|
|
>account_circle</mat-icon
|
|
>
|
|
<div class="h2 secondary-text">Customer</div>
|
|
</div>
|
|
|
|
<div class="customer mb-32">
|
|
<table class="simple">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Phone</th>
|
|
<th>Company</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
<span class="name text-truncate"> </span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="email text-truncate">11</span>
|
|
</td>
|
|
<td>
|
|
<span class="phone text-truncate">22</span>
|
|
</td>
|
|
<td>
|
|
<span class="company text-truncate">33 </span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<mat-accordion class="addresses">
|
|
<mat-expansion-panel>
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>Shipping Address</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
|
|
<div fxFlex fxLayout="column">
|
|
<div class="address h4 py-24">44</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
|
|
<mat-expansion-panel>
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>Invoice Address</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
|
|
<div fxFlex fxLayout="column">
|
|
<div class="address h4 py-24">55</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</div>
|
|
|
|
<div class="section pb-48">
|
|
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon class="m-0 mr-16 secondary-text"
|
|
>access_time</mat-icon
|
|
>
|
|
<div class="h2 secondary-text">Order Status</div>
|
|
</div>
|
|
|
|
<table class="simple">
|
|
<thead>
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Updated On</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span class="status h6 p-4">
|
|
66
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span>
|
|
77
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<form
|
|
class="update-status p-24"
|
|
(ngSubmit)="updateStatus()"
|
|
[formGroup]="statusForm"
|
|
fxLayout="row"
|
|
fxLayoutAlign="start center"
|
|
>
|
|
<mat-form-field appearance="outline" class="mr-16" fxFlex>
|
|
<mat-label>Status</mat-label>
|
|
<mat-select formControlName="newStatus" required>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<button mat-raised-button class="mat-accent">
|
|
Update Status
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="section pb-48">
|
|
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon class="m-0 mr-16 secondary-text"
|
|
>attach_money</mat-icon
|
|
>
|
|
<div class="h2 secondary-text">Payment</div>
|
|
</div>
|
|
|
|
<table class="simple">
|
|
<thead>
|
|
<tr>
|
|
<th>TransactionID</th>
|
|
<th>Payment Method</th>
|
|
<th>Amount</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span class="text-truncate">
|
|
ddd
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-truncate">
|
|
ddd
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-truncate">
|
|
dd
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-truncate">
|
|
ddd
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="section pb-48">
|
|
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon class="m-0 mr-16 secondary-text"
|
|
>local_shipping</mat-icon
|
|
>
|
|
<div class="h2 secondary-text">Shipping</div>
|
|
</div>
|
|
|
|
<table class="simple">
|
|
<thead>
|
|
<tr>
|
|
<th>Tracking Code</th>
|
|
<th>Carrier</th>
|
|
<th>Weight</th>
|
|
<th>Fee</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="tracking-code">
|
|
ddd
|
|
</td>
|
|
<td>
|
|
ffff
|
|
</td>
|
|
<td>
|
|
fff
|
|
</td>
|
|
<td>
|
|
fff
|
|
</td>
|
|
<td>
|
|
ffff
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|
|
<!-- / CONTENT -->
|
|
</div>
|
|
<!-- / CONTENT CARD -->
|
|
</div>
|
|
<!-- / CENTER -->
|
|
</div>
|