适配
This commit is contained in:
@@ -2,8 +2,9 @@
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="title"
|
||||
width="600px"
|
||||
:width="isMobile ? '90%' : '600px'"
|
||||
:close-on-click-modal="false"
|
||||
class="export-dialog"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<!-- 企业选择 -->
|
||||
@@ -119,12 +120,13 @@
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<div :class="['flex justify-end gap-3', isMobile ? 'flex-col' : '']">
|
||||
<el-button @click="handleCancel" :class="isMobile ? 'w-full' : ''">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleConfirm"
|
||||
:class="isMobile ? 'w-full' : ''"
|
||||
>
|
||||
确认导出
|
||||
</el-button>
|
||||
@@ -135,8 +137,12 @@
|
||||
|
||||
<script setup>
|
||||
import { productApi, userApi } from '@/api'
|
||||
import { useMobileTable } from '@/composables/useMobileTable'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
|
||||
// 移动端检测
|
||||
const { isMobile } = useMobileTable()
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@@ -302,3 +308,14 @@ defineExpose({
|
||||
<style scoped>
|
||||
/* 样式保持简洁，主要依赖Tailwind CSS */
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 导出弹窗移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.export-dialog :deep(.el-dialog__body) {
|
||||
padding: 16px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,28 +5,30 @@
|
||||
>
|
||||
<!-- 单用户模式显示 -->
|
||||
<template #stats v-if="singleUserMode">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-600">
|
||||
<User class="w-4 h-4" />
|
||||
<span>当前用户：{{ currentUser?.company_name || currentUser?.phone }}</span>
|
||||
<span class="text-gray-400">(仅显示当前用户)</span>
|
||||
<div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'flex-wrap' : '']">
|
||||
<User class="w-4 h-4 flex-shrink-0" />
|
||||
<span class="truncate">当前用户：{{ currentUser?.company_name || currentUser?.phone }}</span>
|
||||
<span :class="['text-gray-400', isMobile ? 'w-full text-xs' : '']">(仅显示当前用户)</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 单用户模式操作按钮 -->
|
||||
<template #actions v-if="singleUserMode">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div :class="['flex items-center gap-3', isMobile ? 'flex-wrap' : '']">
|
||||
<div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'w-full mb-2' : '']">
|
||||
<User class="w-4 h-4" />
|
||||
<span>{{ currentUser?.company_name || currentUser?.phone }}</span>
|
||||
<span class="truncate">{{ currentUser?.company_name || currentUser?.phone }}</span>
|
||||
</div>
|
||||
<div :class="['flex gap-2', isMobile ? 'w-full' : '']">
|
||||
<el-button :size="isMobile ? 'small' : 'default'" @click="exitSingleUserMode" :class="isMobile ? 'flex-1' : ''">
|
||||
<Close class="w-4 h-4 mr-1" />
|
||||
取消
|
||||
</el-button>
|
||||
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="goBackToUsers" :class="isMobile ? 'flex-1' : ''">
|
||||
<Back class="w-4 h-4 mr-1" />
|
||||
返回用户管理
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button size="small" @click="exitSingleUserMode">
|
||||
<Close class="w-4 h-4 mr-1" />
|
||||
取消
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="goBackToUsers">
|
||||
<Back class="w-4 h-4 mr-1" />
|
||||
返回用户管理
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -79,21 +81,21 @@
|
||||
</FilterItem>
|
||||
|
||||
<FilterItem label="金额范围">
|
||||
<div class="flex gap-2">
|
||||
<div :class="['flex gap-2', isMobile ? 'flex-col' : '']">
|
||||
<el-input
|
||||
v-model="filters.min_amount"
|
||||
placeholder="最小金额"
|
||||
clearable
|
||||
@input="handleFilterChange"
|
||||
class="flex-1"
|
||||
:class="isMobile ? 'w-full' : 'flex-1'"
|
||||
/>
|
||||
<span class="text-gray-400 self-center">-</span>
|
||||
<span :class="['text-gray-400 self-center', isMobile ? 'hidden' : '']">-</span>
|
||||
<el-input
|
||||
v-model="filters.max_amount"
|
||||
placeholder="最大金额"
|
||||
clearable
|
||||
@input="handleFilterChange"
|
||||
class="flex-1"
|
||||
:class="isMobile ? 'w-full' : 'flex-1'"
|
||||
/>
|
||||
</div>
|
||||
</FilterItem>
|
||||
@@ -104,12 +106,18 @@
|
||||
</template>
|
||||
|
||||
<template #buttons>
|
||||
<el-button @click="resetFilters">重置筛选</el-button>
|
||||
<el-button type="primary" @click="loadTransactions">应用筛选</el-button>
|
||||
<el-button type="success" @click="showExportDialog">
|
||||
<Download class="w-4 h-4 mr-1" />
|
||||
导出数据
|
||||
</el-button>
|
||||
<div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
|
||||
<el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
|
||||
重置筛选
|
||||
</el-button>
|
||||
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadTransactions" :class="isMobile ? 'flex-1' : ''">
|
||||
应用筛选
|
||||
</el-button>
|
||||
<el-button :size="isMobile ? 'small' : 'default'" type="success" @click="showExportDialog" :class="isMobile ? 'flex-1' : ''">
|
||||
<Download class="w-4 h-4 mr-1" />
|
||||
导出数据
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</FilterSection>
|
||||
</template>
|
||||
@@ -120,73 +128,129 @@
|
||||
<el-loading size="large" />
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<el-table
|
||||
:data="transactions"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px'
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b'
|
||||
}"
|
||||
<!-- 移动端卡片布局 -->
|
||||
<div v-else-if="isMobile && transactions.length > 0" class="transaction-cards">
|
||||
<div
|
||||
v-for="transaction in transactions"
|
||||
:key="transaction.id"
|
||||
class="transaction-card"
|
||||
>
|
||||
<el-table-column prop="transaction_id" label="交易ID" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="company_name" label="企业名称" min-width="150" v-if="!singleUserMode">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<div class="font-medium text-blue-600">{{ row.company_name || '未知企业' }}</div>
|
||||
<div class="text-xs text-gray-500">{{ row.user?.phone }}</div>
|
||||
<div class="card-header">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-mono text-sm text-gray-600 truncate">{{ transaction.transaction_id }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="product_name" label="产品名称" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<div class="font-medium text-blue-600">{{ row.product_name || '未知产品' }}</div>
|
||||
<div v-if="!singleUserMode && transaction.company_name" class="text-xs text-gray-500 truncate">
|
||||
{{ transaction.company_name }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</div>
|
||||
<span class="font-semibold text-red-600 text-lg">¥{{ formatPrice(transaction.amount) }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-if="!singleUserMode && transaction.user?.phone" class="card-row">
|
||||
<span class="card-label">手机号</span>
|
||||
<span class="card-value text-sm">{{ transaction.user.phone }}</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="card-label">产品名称</span>
|
||||
<span class="card-value text-blue-600 font-medium">{{ transaction.product_name || '未知产品' }}</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="card-label">消费时间</span>
|
||||
<span class="card-value text-sm">
|
||||
<div>{{ formatDate(transaction.created_at) }}</div>
|
||||
<div class="text-gray-500">{{ formatTime(transaction.created_at) }}</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleViewDetail(transaction)"
|
||||
class="action-btn w-full"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table-column prop="amount" label="消费金额" width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="font-semibold text-red-600">¥{{ formatPrice(row.amount) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 桌面端表格布局 -->
|
||||
<div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="transactions"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px'
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b'
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="transaction_id" label="交易ID" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="created_at" label="消费时间" width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="text-sm">
|
||||
<div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
|
||||
<div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="company_name" label="企业名称" min-width="150" v-if="!singleUserMode">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<div class="font-medium text-blue-600">{{ row.company_name || '未知企业' }}</div>
|
||||
<div class="text-xs text-gray-500">{{ row.user?.phone }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center space-x-2">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleViewDetail(row)"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table-column prop="product_name" label="产品名称" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<div class="font-medium text-blue-600">{{ row.product_name || '未知产品' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="amount" label="消费金额" width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="font-semibold text-red-600">¥{{ formatPrice(row.amount) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="created_at" label="消费时间" width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="text-sm">
|
||||
<div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
|
||||
<div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center space-x-2">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleViewDetail(row)"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else-if="!loading && transactions.length === 0" class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
|
||||
<p class="text-gray-500">暂无消费记录</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -198,137 +262,26 @@
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
|
||||
:small="isMobile"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<!-- 导出数据弹窗 -->
|
||||
<el-dialog
|
||||
v-model="exportDialogVisible"
|
||||
title="导出消费记录"
|
||||
width="600px"
|
||||
class="export-dialog"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<!-- 导出范围设置 -->
|
||||
<div class="export-section">
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-4">筛选条件</h4>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- 企业选择 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">选择企业</label>
|
||||
<el-select
|
||||
v-model="exportOptions.companyIds"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="搜索并选择企业（不选则导出所有）"
|
||||
class="w-full"
|
||||
clearable
|
||||
:remote-method="handleCompanySearch"
|
||||
:loading="companyLoading"
|
||||
@focus="loadCompanyOptions"
|
||||
@visible-change="handleCompanyVisibleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="company in companyOptions"
|
||||
:key="company.id"
|
||||
:label="company.company_name"
|
||||
:value="company.id"
|
||||
/>
|
||||
<div v-if="companyLoading" class="text-center py-2">
|
||||
<span class="text-gray-500">加载中...</span>
|
||||
</div>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<!-- 日期范围 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">时间范围</label>
|
||||
<el-date-picker
|
||||
v-model="exportOptions.dateRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 产品选择 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">选择产品</label>
|
||||
<el-select
|
||||
v-model="exportOptions.productIds"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="搜索并选择产品（不选则导出所有）"
|
||||
class="w-full"
|
||||
clearable
|
||||
:remote-method="handleProductSearch"
|
||||
:loading="productLoading"
|
||||
@focus="loadProductOptions"
|
||||
@visible-change="handleProductVisibleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="product in productOptions"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
<div v-if="productLoading" class="text-center py-2">
|
||||
<span class="text-gray-500">加载中...</span>
|
||||
</div>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导出格式选择 -->
|
||||
<div class="export-section">
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-4">导出格式</h4>
|
||||
<el-radio-group v-model="exportOptions.format">
|
||||
<el-radio value="excel">Excel (.xlsx)</el-radio>
|
||||
<el-radio value="csv">CSV (.csv)</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<el-button @click="exportDialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
>
|
||||
<Download class="w-4 h-4 mr-1" />
|
||||
开始导出
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 消费记录详情弹窗 -->
|
||||
<el-dialog
|
||||
v-model="detailDialogVisible"
|
||||
title="消费记录详情"
|
||||
width="800px"
|
||||
:width="isMobile ? '90%' : '800px'"
|
||||
class="transaction-detail-dialog"
|
||||
>
|
||||
<div v-if="selectedTransaction" class="space-y-6">
|
||||
<!-- 基本信息 -->
|
||||
<div class="info-section">
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h4>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
|
||||
<div class="info-item">
|
||||
<span class="info-label">交易ID</span>
|
||||
<span class="info-value font-mono">{{ selectedTransaction?.transaction_id || '-' }}</span>
|
||||
@@ -351,7 +304,7 @@
|
||||
<!-- 时间信息 -->
|
||||
<div class="info-section">
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-4">时间信息</h4>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
|
||||
<div class="info-item">
|
||||
<span class="info-label">消费时间</span>
|
||||
<span class="info-value">{{ formatDateTime(selectedTransaction?.created_at) }}</span>
|
||||
@@ -390,6 +343,7 @@ import ExportDialog from '@/components/common/ExportDialog.vue'
|
||||
import FilterItem from '@/components/common/FilterItem.vue'
|
||||
import FilterSection from '@/components/common/FilterSection.vue'
|
||||
import ListPageLayout from '@/components/common/ListPageLayout.vue'
|
||||
import { useMobileTable } from '@/composables/useMobileTable'
|
||||
import { Back, Close, Download, User } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
@@ -398,6 +352,9 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 移动端检测
|
||||
const { isMobile, isTablet } = useMobileTable()
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const transactions = ref([])
|
||||
@@ -739,6 +696,75 @@ watch(() => route.query.user_id, async (newUserId) => {
|
||||
background: #f8fafc !important;
|
||||
}
|
||||
|
||||
/* 表格容器 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 移动端卡片布局 */
|
||||
.transaction-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.transaction-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
text-align: right;
|
||||
word-break: break-word;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.info-item {
|
||||
@@ -750,5 +776,92 @@ watch(() => route.query.user_id, async (newUserId) => {
|
||||
.info-label {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
/* 表格在移动端优化 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
font-size: 12px;
|
||||
min-width: 1000px;
|
||||
}
|
||||
|
||||
:deep(.el-table th),
|
||||
:deep(.el-table td) {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
:deep(.el-table .cell) {
|
||||
padding: 0 4px;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 分页组件在移动端优化 */
|
||||
:deep(.el-pagination) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-pagination .el-pagination__sizes) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.el-pagination .el-pagination__total) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.el-pagination .el-pagination__jump) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 对话框在移动端优化 */
|
||||
.transaction-detail-dialog :deep(.el-dialog__body),
|
||||
.export-dialog :deep(.el-dialog__body) {
|
||||
padding: 16px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕进一步优化 */
|
||||
@media (max-width: 480px) {
|
||||
.transaction-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,20 +89,21 @@
|
||||
</div> -->
|
||||
|
||||
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<el-table
|
||||
:data="apiCalls"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px'
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b'
|
||||
}"
|
||||
>
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="apiCalls"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px'
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b'
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="transaction_id" label="交易ID" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
|
||||
@@ -186,20 +187,23 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #pagination>
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
@@ -554,7 +558,9 @@ const handleViewDetail = (apiCall) => {
|
||||
}
|
||||
|
||||
.error-content {
|
||||
space-y: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.error-type {
|
||||
@@ -657,6 +663,19 @@ const handleViewDetail = (apiCall) => {
|
||||
background: #f8fafc !important;
|
||||
}
|
||||
|
||||
/* 表格容器 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 分页器包装器 */
|
||||
.pagination-wrapper {
|
||||
padding: 16px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.stat-item {
|
||||
@@ -683,5 +702,131 @@ const handleViewDetail = (apiCall) => {
|
||||
.detail-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 表格在移动端优化 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
font-size: 12px;
|
||||
min-width: 1000px;
|
||||
}
|
||||
|
||||
:deep(.el-table th),
|
||||
:deep(.el-table td) {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
:deep(.el-table .cell) {
|
||||
padding: 0 4px;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 分页组件在移动端优化 */
|
||||
.pagination-wrapper {
|
||||
padding: 12px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination) {
|
||||
flex-wrap: nowrap;
|
||||
min-width: fit-content;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__sizes) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__total) {
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__jump) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pager li) {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.btn-prev),
|
||||
.pagination-wrapper :deep(.btn-next) {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 对话框在移动端优化 */
|
||||
.detail-dialog :deep(.el-dialog) {
|
||||
margin: 20px;
|
||||
width: calc(100% - 40px) !important;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.detail-dialog :deep(.el-dialog__body) {
|
||||
padding: 16px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-dialog :deep(.grid-cols-2) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕进一步优化 */
|
||||
@media (max-width: 480px) {
|
||||
.pagination-wrapper {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__total) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination) {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pager li) {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.btn-prev),
|
||||
.pagination-wrapper :deep(.btn-next) {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 10px 12px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -79,20 +79,21 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<el-table
|
||||
:data="transactions"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b',
|
||||
}"
|
||||
>
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="transactions"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b',
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="transaction_id" label="交易ID" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-sm text-gray-700">{{ row.transaction_id }}</span>
|
||||
@@ -120,20 +121,23 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #pagination>
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
@@ -462,6 +466,19 @@ const handleViewDetail = (transaction) => {
|
||||
background: #f8fafc !important;
|
||||
}
|
||||
|
||||
/* 表格容器 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 分页器包装器 */
|
||||
.pagination-wrapper {
|
||||
padding: 16px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.stat-item {
|
||||
@@ -488,5 +505,136 @@ const handleViewDetail = (transaction) => {
|
||||
.detail-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 表格在移动端优化 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
font-size: 12px;
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
:deep(.el-table th),
|
||||
:deep(.el-table td) {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
:deep(.el-table .cell) {
|
||||
padding: 0 4px;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 分页组件在移动端优化 */
|
||||
.pagination-wrapper {
|
||||
padding: 12px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination) {
|
||||
flex-wrap: nowrap;
|
||||
min-width: fit-content;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__sizes) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__total) {
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__jump) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pager li) {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.btn-prev),
|
||||
.pagination-wrapper :deep(.btn-next) {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 对话框在移动端优化 */
|
||||
.detail-dialog :deep(.el-dialog) {
|
||||
margin: 20px;
|
||||
width: calc(100% - 40px) !important;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.detail-dialog :deep(.el-dialog__body) {
|
||||
padding: 16px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-dialog :deep(.grid-cols-2) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 金额范围输入框在移动端优化 */
|
||||
.flex.gap-2 {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕进一步优化 */
|
||||
@media (max-width: 480px) {
|
||||
.pagination-wrapper {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__total) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination) {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pager li) {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.btn-prev),
|
||||
.pagination-wrapper :deep(.btn-next) {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 10px 12px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -80,20 +80,21 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<el-table
|
||||
:data="records"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px'
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b'
|
||||
}"
|
||||
>
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="records"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#f8fafc',
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
fontSize: '14px'
|
||||
}"
|
||||
:cell-style="{
|
||||
fontSize: '14px',
|
||||
color: '#1e293b'
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="alipay_order_id" label="订单号">
|
||||
<template #default="{ row }">
|
||||
<div class="space-y-1">
|
||||
@@ -161,20 +162,23 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #pagination>
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</ListPageLayout>
|
||||
</template>
|
||||
@@ -354,6 +358,19 @@ onMounted(() => {
|
||||
background: #f8fafc !important;
|
||||
}
|
||||
|
||||
/* 表格容器 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 分页器包装器 */
|
||||
.pagination-wrapper {
|
||||
padding: 16px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.stat-item {
|
||||
@@ -368,5 +385,113 @@ onMounted(() => {
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 表格在移动端优化 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
font-size: 12px;
|
||||
min-width: 1000px;
|
||||
}
|
||||
|
||||
:deep(.el-table th),
|
||||
:deep(.el-table td) {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
:deep(.el-table .cell) {
|
||||
padding: 0 4px;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 分页组件在移动端优化 */
|
||||
.pagination-wrapper {
|
||||
padding: 12px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination) {
|
||||
flex-wrap: nowrap;
|
||||
min-width: fit-content;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__sizes) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__total) {
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__jump) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pager li) {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.btn-prev),
|
||||
.pagination-wrapper :deep(.btn-next) {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕进一步优化 */
|
||||
@media (max-width: 480px) {
|
||||
.pagination-wrapper {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination__total) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination) {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pager li) {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.btn-prev),
|
||||
.pagination-wrapper :deep(.btn-next) {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 10px 12px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user