Initial commit: fabric-trade-admin panel with responsive layouts and UI refinements.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,159 @@
|
||||
<script setup lang="ts">
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import StatusBadge from '@/components/ui/StatusBadge.vue'
|
||||
import OrderDetailContent from '@/views/orders/components/OrderDetailContent.vue'
|
||||
import OrderAddModal from '@/views/orders/components/OrderAddModal.vue'
|
||||
import { useOrdersPageContext } from '@/composables/useOrdersPage'
|
||||
import { ORDER_TABS } from '@/utils/orderStatus'
|
||||
import { formatCurrency, formatDateTime, formatMeterage } from '@/utils/format'
|
||||
|
||||
const {
|
||||
activeTab,
|
||||
selectedOrderId,
|
||||
searchQuery,
|
||||
filteredOrders,
|
||||
selectedOrder,
|
||||
showDetailPanel,
|
||||
selectOrder,
|
||||
closeDetailPanel,
|
||||
settlementLabel,
|
||||
goPricing,
|
||||
goChecks,
|
||||
openAddModal,
|
||||
} = useOrdersPageContext()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="compact-orders">
|
||||
<div class="compact-page-header">
|
||||
<div class="compact-page-header__row">
|
||||
<div>
|
||||
<h2 class="compact-page-header__title">سفارشها</h2>
|
||||
<p class="compact-page-header__breadcrumb">داشبورد / سفارشها</p>
|
||||
</div>
|
||||
<div class="compact-page-header__actions">
|
||||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
|
||||
<AdminIcon name="filter" :size="16" />
|
||||
فیلتر
|
||||
</button>
|
||||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="openAddModal">
|
||||
سفارش جدید
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="orders-page__search admin-card">
|
||||
<AdminIcon name="search" :size="18" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
placeholder="جستجو در شماره سفارش، مشتری..."
|
||||
class="orders-page__search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-tabs compact-orders__tabs">
|
||||
<button
|
||||
v-for="tab in ORDER_TABS"
|
||||
:key="tab.key"
|
||||
type="button"
|
||||
class="admin-tab"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<template v-if="'count' in tab && tab.count"> ({{ tab.count }})</template>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-card-list">
|
||||
<button
|
||||
v-for="order in filteredOrders"
|
||||
:key="order.id"
|
||||
type="button"
|
||||
class="admin-card-item"
|
||||
:class="{ selected: selectedOrderId === order.id }"
|
||||
@click="selectOrder(order, true)"
|
||||
>
|
||||
<div class="admin-card-item__header">
|
||||
<p class="admin-card-item__title">{{ order.orderNumber }}</p>
|
||||
<StatusBadge :status="order.status" />
|
||||
</div>
|
||||
<div class="admin-card-item__meta">
|
||||
<span><strong>مشتری:</strong> {{ order.customerName }}</span>
|
||||
<span><strong>متراژ:</strong> {{ formatMeterage(order.meterage) }}</span>
|
||||
<span><strong>مبلغ:</strong> {{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}</span>
|
||||
<span>{{ formatDateTime(order.createdAt) }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-detail-panel" :class="{ open: showDetailPanel && selectedOrder }">
|
||||
<div v-if="selectedOrder" class="admin-detail-panel__inner">
|
||||
<div class="admin-detail-panel__header">
|
||||
<button
|
||||
type="button"
|
||||
class="admin-detail-panel__back"
|
||||
aria-label="بازگشت به لیست"
|
||||
@click="closeDetailPanel"
|
||||
>
|
||||
<AdminIcon name="chevron-left" :size="20" />
|
||||
</button>
|
||||
<h2 class="admin-detail-panel__title">جزئیات سفارش</h2>
|
||||
</div>
|
||||
<div class="admin-detail-panel__body">
|
||||
<OrderDetailContent
|
||||
:order="selectedOrder"
|
||||
:settlement-label="settlementLabel"
|
||||
@pricing="goPricing(selectedOrder)"
|
||||
@checks="goChecks(selectedOrder)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OrderAddModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.compact-orders__tabs {
|
||||
margin-bottom: 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 4px 8px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.orders-page__search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.orders-page__search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.admin-card-item {
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-detail-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<script setup lang="ts">
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import StatusBadge from '@/components/ui/StatusBadge.vue'
|
||||
import BaseModal from '@/components/ui/BaseModal.vue'
|
||||
import OrderDetailContent from '@/views/orders/components/OrderDetailContent.vue'
|
||||
import OrderAddModal from '@/views/orders/components/OrderAddModal.vue'
|
||||
import { useOrdersPageContext } from '@/composables/useOrdersPage'
|
||||
import { ORDER_TABS } from '@/utils/orderStatus'
|
||||
import { formatCurrency, formatDateTime, formatMeterage } from '@/utils/format'
|
||||
|
||||
const {
|
||||
activeTab,
|
||||
selectedOrderId,
|
||||
searchQuery,
|
||||
filteredOrders,
|
||||
selectedOrder,
|
||||
showDetailModal,
|
||||
openOrderDetail,
|
||||
closeDetailModal,
|
||||
settlementLabel,
|
||||
goPricing,
|
||||
goChecks,
|
||||
openAddModal,
|
||||
} = useOrdersPageContext()
|
||||
|
||||
function handlePricing() {
|
||||
if (!selectedOrder.value) return
|
||||
closeDetailModal()
|
||||
goPricing(selectedOrder.value)
|
||||
}
|
||||
|
||||
function handleChecks() {
|
||||
if (!selectedOrder.value) return
|
||||
closeDetailModal()
|
||||
goChecks(selectedOrder.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="orders-page">
|
||||
<div class="orders-page__list-panel admin-card">
|
||||
<div class="orders-page__list-header">
|
||||
<div>
|
||||
<h2 class="orders-page__list-title">سفارشها</h2>
|
||||
<p class="orders-page__breadcrumb">داشبورد / سفارشها</p>
|
||||
</div>
|
||||
<div class="orders-page__list-actions">
|
||||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
|
||||
<AdminIcon name="filter" :size="16" />
|
||||
فیلتر
|
||||
</button>
|
||||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="openAddModal">
|
||||
سفارش جدید
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="orders-page__search">
|
||||
<AdminIcon name="search" :size="18" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
placeholder="جستجو در شماره سفارش، مشتری..."
|
||||
class="orders-page__search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-tabs">
|
||||
<button
|
||||
v-for="tab in ORDER_TABS"
|
||||
:key="tab.key"
|
||||
type="button"
|
||||
class="admin-tab"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<template v-if="'count' in tab && tab.count"> ({{ tab.count }})</template>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table admin-table--compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>شماره سفارش</th>
|
||||
<th>مشتری</th>
|
||||
<th>روش تسویه</th>
|
||||
<th>مبلغ کل</th>
|
||||
<th>متراژ</th>
|
||||
<th>وضعیت</th>
|
||||
<th>تاریخ ثبت</th>
|
||||
<th>عملیات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="order in filteredOrders"
|
||||
:key="order.id"
|
||||
:class="{ 'is-selected': selectedOrderId === order.id }"
|
||||
@click="openOrderDetail(order)"
|
||||
>
|
||||
<td>{{ order.orderNumber }}</td>
|
||||
<td>{{ order.customerName }}</td>
|
||||
<td>{{ settlementLabel(order.settlementMethod) }}</td>
|
||||
<td>{{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}</td>
|
||||
<td>{{ formatMeterage(order.meterage) }}</td>
|
||||
<td><StatusBadge :status="order.status" /></td>
|
||||
<td>{{ formatDateTime(order.createdAt) }}</td>
|
||||
<td>
|
||||
<button type="button" class="orders-page__more-btn" @click.stop>
|
||||
<AdminIcon name="more" :size="18" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="admin-pagination">
|
||||
<span>نمایش ۱ تا ۷ از ۱۰۳ سفارش</span>
|
||||
<div class="admin-pagination__pages">
|
||||
<button type="button" class="admin-pagination__page active">۱</button>
|
||||
<button type="button" class="admin-pagination__page">۲</button>
|
||||
<button type="button" class="admin-pagination__page">۳</button>
|
||||
<span>...</span>
|
||||
<button type="button" class="admin-pagination__page">۱۲</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BaseModal
|
||||
:open="showDetailModal && !!selectedOrder"
|
||||
title="جزئیات سفارش"
|
||||
size="xl"
|
||||
@close="closeDetailModal"
|
||||
>
|
||||
<template v-if="selectedOrder">
|
||||
<p class="orders-page__breadcrumb orders-page__modal-breadcrumb">
|
||||
سفارشها / جزئیات سفارش
|
||||
</p>
|
||||
<OrderDetailContent
|
||||
:order="selectedOrder"
|
||||
layout="desktop"
|
||||
:settlement-label="settlementLabel"
|
||||
@pricing="handlePricing"
|
||||
@checks="handleChecks"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
|
||||
<AdminIcon name="sms" :size="16" />
|
||||
ارسال پیامک
|
||||
</button>
|
||||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
|
||||
<AdminIcon name="print" :size="16" />
|
||||
چاپ
|
||||
</button>
|
||||
</template>
|
||||
</BaseModal>
|
||||
|
||||
<OrderAddModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.orders-page {
|
||||
min-height: calc(100dvh - var(--header-height) - 48px);
|
||||
}
|
||||
|
||||
.orders-page__list-panel {
|
||||
padding: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.orders-page__list-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.orders-page__list-title {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.orders-page__breadcrumb {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.orders-page__list-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.orders-page__search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-border-light);
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.orders-page__search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.orders-page__more-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.admin-table tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-table tbody tr.is-selected {
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.orders-page__modal-breadcrumb {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import BaseModal from '@/components/ui/BaseModal.vue'
|
||||
import { useOrdersPageContext } from '@/composables/useOrdersPage'
|
||||
|
||||
const {
|
||||
showAddModal,
|
||||
formError,
|
||||
form,
|
||||
isFormValid,
|
||||
companies,
|
||||
closeAddModal,
|
||||
submitAddOrder,
|
||||
} = useOrdersPageContext()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseModal :open="showAddModal" title="سفارش جدید" size="lg" @close="closeAddModal">
|
||||
<form class="admin-form" @submit.prevent="submitAddOrder">
|
||||
<p v-if="formError" class="admin-form__error" role="alert">{{ formError }}</p>
|
||||
|
||||
<div class="admin-form__field">
|
||||
<label for="order-customer">نام مشتری <span class="admin-form__required">*</span></label>
|
||||
<input
|
||||
id="order-customer"
|
||||
v-model="form.customerName"
|
||||
type="text"
|
||||
class="admin-input"
|
||||
placeholder="مثال: پارچهسرای نیکو"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-form__row">
|
||||
<div class="admin-form__field">
|
||||
<label for="order-company">شرکت <span class="admin-form__required">*</span></label>
|
||||
<select id="order-company" v-model="form.companyId" class="admin-input">
|
||||
<option v-for="company in companies" :key="company.id" :value="company.id">
|
||||
{{ company.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="admin-form__field">
|
||||
<label for="order-settlement">روش تسویه</label>
|
||||
<select id="order-settlement" v-model="form.settlementMethod" class="admin-input">
|
||||
<option value="check">چکی</option>
|
||||
<option value="cash">نقدی</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-form__row">
|
||||
<div class="admin-form__field">
|
||||
<label for="order-meterage">متراژ (متر)</label>
|
||||
<input
|
||||
id="order-meterage"
|
||||
v-model.number="form.meterage"
|
||||
type="number"
|
||||
min="1"
|
||||
class="admin-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin-form__field">
|
||||
<label for="order-phone">تلفن مشتری</label>
|
||||
<input
|
||||
id="order-phone"
|
||||
v-model="form.customerPhone"
|
||||
type="tel"
|
||||
class="admin-input"
|
||||
placeholder="۰۹۱۲۱۲۳۴۵۶۷"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<template #footer>
|
||||
<button type="button" class="admin-btn admin-btn--outline" @click="closeAddModal">
|
||||
انصراف
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="admin-btn admin-btn--primary"
|
||||
:disabled="!isFormValid"
|
||||
@click="submitAddOrder"
|
||||
>
|
||||
ثبت سفارش
|
||||
</button>
|
||||
</template>
|
||||
</BaseModal>
|
||||
</template>
|
||||
@@ -0,0 +1,183 @@
|
||||
<script setup lang="ts">
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import StatusBadge from '@/components/ui/StatusBadge.vue'
|
||||
import { formatMeterage } from '@/utils/format'
|
||||
import type { Order } from '@/types'
|
||||
|
||||
defineProps<{
|
||||
order: Order
|
||||
settlementLabel: (method: string) => string
|
||||
layout?: 'desktop' | 'compact'
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
pricing: []
|
||||
checks: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="order-detail">
|
||||
<div class="order-detail__id">
|
||||
<strong>{{ order.orderNumber }}</strong>
|
||||
<StatusBadge :status="order.status" />
|
||||
</div>
|
||||
|
||||
<div class="order-detail__section">
|
||||
<h3 class="order-detail__section-title">اطلاعات مشتری</h3>
|
||||
<div class="admin-info-grid">
|
||||
<div class="admin-info-row">
|
||||
<AdminIcon name="building" :size="16" />
|
||||
<span class="admin-info-row__label">شرکت:</span>
|
||||
<span class="admin-info-row__value">{{ order.customerName }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<AdminIcon name="phone" :size="16" />
|
||||
<span class="admin-info-row__label">تلفن:</span>
|
||||
<span class="admin-info-row__value">{{ order.customerPhone ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<AdminIcon name="id-card" :size="16" />
|
||||
<span class="admin-info-row__label">شناسه ملی:</span>
|
||||
<span class="admin-info-row__value">{{ order.customerNationalId ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<AdminIcon name="user" :size="16" />
|
||||
<span class="admin-info-row__label">نوع مشتری:</span>
|
||||
<span class="admin-info-row__value">{{ order.customerType ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-detail__section">
|
||||
<h3 class="order-detail__section-title">اطلاعات سفارش</h3>
|
||||
<div class="admin-info-grid">
|
||||
<div class="admin-info-row">
|
||||
<span class="admin-info-row__label">شرکت:</span>
|
||||
<span class="admin-info-row__value">{{ order.companyName }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<span class="admin-info-row__label">روش تسویه:</span>
|
||||
<span class="admin-info-row__value">
|
||||
{{ settlementLabel(order.settlementMethod) }} — مختص
|
||||
</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<span class="admin-info-row__label">متراژ کل:</span>
|
||||
<span class="admin-info-row__value">{{ formatMeterage(order.meterage) }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<span class="admin-info-row__label">مبلغ کل:</span>
|
||||
<span class="admin-info-row__value">پس از قیمتگذاری</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order.items?.length" class="order-detail__section">
|
||||
<h3 class="order-detail__section-title">محصولات سفارش</h3>
|
||||
<div v-if="layout === 'desktop'" class="admin-table-wrap">
|
||||
<table class="admin-table admin-table--compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>کالیته</th>
|
||||
<th>محصول</th>
|
||||
<th>رنگ / نوع</th>
|
||||
<th>متراژ</th>
|
||||
<th>قیمت تأیید شده</th>
|
||||
<th>مبلغ کل</th>
|
||||
<th>وضعیت</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in order.items" :key="item.id">
|
||||
<td>{{ item.catalogCode }}</td>
|
||||
<td>{{ item.productName }}</td>
|
||||
<td>{{ item.color }}</td>
|
||||
<td>{{ item.confirmedMeterage ?? item.requestedMeterage }}</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><StatusBadge status="pending_review" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ul v-else class="order-detail__items">
|
||||
<li v-for="item in order.items" :key="item.id" class="order-detail__item">
|
||||
<strong>{{ item.productName }}</strong>
|
||||
<span>{{ item.catalogCode }} · {{ item.color }}</span>
|
||||
<span>{{ item.confirmedMeterage ?? item.requestedMeterage }} متر</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="order-detail__footer">
|
||||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="$emit('pricing')">
|
||||
قیمتگذاری سفارش
|
||||
</button>
|
||||
<button
|
||||
v-if="order.settlementMethod === 'check'"
|
||||
type="button"
|
||||
class="admin-btn admin-btn--outline admin-btn--sm"
|
||||
@click="$emit('checks')"
|
||||
>
|
||||
مدیریت چکها
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-detail__id {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.order-detail__section {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.order-detail__section-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-detail__items {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.order-detail__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 10px 12px;
|
||||
background: var(--color-border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.order-detail__item strong {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.order-detail__item span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.order-detail__footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user