<template>
|
<div class="inventory-container">
|
<div class="header">
|
<h1 class="title">库存预警中心</h1>
|
<div class="datetime">{{ currentTime }}</div>
|
</div>
|
|
<div class="nav-menu">
|
<router-link to="/dashboard" class="nav-item">综合看板</router-link>
|
<router-link to="/warehouse" class="nav-item">仓库监控</router-link>
|
<router-link to="/production" class="nav-item">生产监控</router-link>
|
<router-link to="/inventory" class="nav-item active">库存预警</router-link>
|
</div>
|
|
<div class="main-content">
|
<!-- 预警统计 -->
|
<div class="alert-summary">
|
<div class="alert-card critical">
|
<div class="alert-icon">
|
<el-icon :size="36"><WarningFilled /></el-icon>
|
</div>
|
<div class="alert-content">
|
<div class="alert-count">{{ alertStats.critical }}</div>
|
<div class="alert-label">紧急预警</div>
|
</div>
|
</div>
|
<div class="alert-card warning">
|
<div class="alert-icon">
|
<el-icon :size="36"><Warning /></el-icon>
|
</div>
|
<div class="alert-content">
|
<div class="alert-count">{{ alertStats.warning }}</div>
|
<div class="alert-label">预警提醒</div>
|
</div>
|
</div>
|
<div class="alert-card info">
|
<div class="alert-icon">
|
<el-icon :size="36"><InfoFilled /></el-icon>
|
</div>
|
<div class="alert-content">
|
<div class="alert-count">{{ alertStats.info }}</div>
|
<div class="alert-label">信息提醒</div>
|
</div>
|
</div>
|
<div class="alert-card normal">
|
<div class="alert-icon">
|
<el-icon :size="36"><CircleCheckFilled /></el-icon>
|
</div>
|
<div class="alert-content">
|
<div class="alert-count">{{ alertStats.normal }}</div>
|
<div class="alert-label">库存正常</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 库存预警列表 -->
|
<div class="alert-lists">
|
<div class="list-card">
|
<div class="list-header">
|
<span class="list-title">
|
<el-icon><WarningFilled /></el-icon>
|
库存不足预警
|
</span>
|
<el-badge :value="lowStockAlerts.length" class="badge" />
|
</div>
|
<el-table :data="lowStockAlerts" style="width: 100%" max-height="250">
|
<el-table-column prop="materialCode" label="物料编码" width="130" />
|
<el-table-column prop="materialName" label="物料名称" />
|
<el-table-column prop="currentStock" label="当前库存" width="100">
|
<template #default="{ row }">
|
<span :class="getStockClass(row.currentStock, row.minStock)">{{ row.currentStock }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="minStock" label="最小库存" width="100" />
|
<el-table-column prop="maxStock" label="最大库存" width="100" />
|
<el-table-column prop="unit" label="单位" width="60" />
|
<el-table-column prop="suggestion" label="建议补货" width="100" />
|
<el-table-column prop="warehouse" label="仓库" width="100" />
|
<el-table-column label="操作" width="100" fixed="right">
|
<template #default="{ row }">
|
<el-button type="primary" size="small" link>补货</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="list-card">
|
<div class="list-header">
|
<span class="list-title">
|
<el-icon><Top /></el-icon>
|
库存积压预警
|
</span>
|
<el-badge :value="overStockAlerts.length" class="badge" />
|
</div>
|
<el-table :data="overStockAlerts" style="width: 100%" max-height="250">
|
<el-table-column prop="materialCode" label="物料编码" width="130" />
|
<el-table-column prop="materialName" label="物料名称" />
|
<el-table-column prop="currentStock" label="当前库存" width="100">
|
<template #default="{ row }">
|
<span class="over-stock">{{ row.currentStock }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="maxStock" label="最大库存" width="100" />
|
<el-table-column prop="overRate" label="超储率" width="100">
|
<template #default="{ row }">
|
<el-progress type="circle" :percentage="row.overRate" :width="50" :color="'#f56c6c'" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="unit" label="单位" width="60" />
|
<el-table-column prop="daysInStock" label="库龄(天)" width="90" />
|
<el-table-column prop="warehouse" label="仓库" width="100" />
|
<el-table-column label="操作" width="100" fixed="right">
|
<template #default="{ row }">
|
<el-button type="warning" size="small" link>处理</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<!-- 库存趋势图表 -->
|
<div class="charts-row">
|
<div class="chart-card">
|
<div class="card-title">库存周转率趋势</div>
|
<div ref="turnoverChartRef" class="chart-container"></div>
|
</div>
|
|
<div class="chart-card">
|
<div class="card-title">ABC分类库存占比</div>
|
<div ref="abcChartRef" class="chart-container"></div>
|
</div>
|
|
<div class="chart-card">
|
<div class="card-title">近效期物料预警</div>
|
<div ref="expiryChartRef" class="chart-container"></div>
|
</div>
|
</div>
|
|
<!-- 即将过期物料 -->
|
<div class="expiry-list">
|
<div class="list-title">即将过期物料清单</div>
|
<el-table :data="expiryItems" style="width: 100%" height="200">
|
<el-table-column prop="batchNo" label="批次号" width="140" />
|
<el-table-column prop="materialName" label="物料名称" />
|
<el-table-column prop="quantity" label="数量" width="100" />
|
<el-table-column prop="expiryDate" label="有效期" width="120" />
|
<el-table-column prop="daysLeft" label="剩余天数" width="100">
|
<template #default="{ row }">
|
<el-tag :type="getExpiryTagType(row.daysLeft)">{{ row.daysLeft }}天</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="location" label="库位" width="100" />
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="{ row }">
|
<el-tag :type="row.status === '已锁定' ? 'danger' : 'warning'">{{ row.status }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" fixed="right">
|
<template #default="{ row }">
|
<el-button size="small" type="primary" link>优先出库</el-button>
|
<el-button size="small" type="danger" link>报废</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, onMounted, onUnmounted } from 'vue'
|
import * as echarts from 'echarts'
|
import { http } from '@/utils/http'
|
import { formatDateTime } from '@/utils'
|
|
export default {
|
name: 'Inventory',
|
setup() {
|
const currentTime = ref('')
|
const turnoverChartRef = ref(null)
|
const abcChartRef = ref(null)
|
const expiryChartRef = ref(null)
|
|
const alertStats = ref({
|
critical: 8,
|
warning: 23,
|
info: 15,
|
normal: 1456
|
})
|
|
const lowStockAlerts = ref([
|
{ materialCode: 'M001', materialName: '钢板 Q235', currentStock: 50, minStock: 200, maxStock: 1000, unit: '吨', suggestion: '150吨', warehouse: 'A区' },
|
{ materialCode: 'M002', materialName: '铝板 6061', currentStock: 80, minStock: 150, maxStock: 800, unit: '吨', suggestion: '70吨', warehouse: 'A区' },
|
{ materialCode: 'M003', materialName: '螺丝 M8', currentStock: 500, minStock: 2000, maxStock: 10000, unit: '个', suggestion: '1500个', warehouse: 'B区' },
|
{ materialCode: 'M004', materialName: '螺母 M8', currentStock: 300, minStock: 1500, maxStock: 8000, unit: '个', suggestion: '1200个', warehouse: 'B区' },
|
{ materialCode: 'M005', materialName: '垫片 Φ10', currentStock: 200, minStock: 1000, maxStock: 5000, unit: '个', suggestion: '800个', warehouse: 'B区' }
|
])
|
|
const overStockAlerts = ref([
|
{ materialCode: 'M101', materialName: '轴承 6204', currentStock: 8000, maxStock: 5000, overRate: 160, unit: '个', daysInStock: 180, warehouse: 'C区' },
|
{ materialCode: 'M102', materialName: '密封圈 O型', currentStock: 15000, maxStock: 8000, overRate: 187, unit: '个', daysInStock: 240, warehouse: 'C区' },
|
{ materialCode: 'M103', materialName: '润滑油', currentStock: 500, maxStock: 200, overRate: 250, unit: '升', daysInStock: 300, warehouse: 'D区' }
|
])
|
|
const expiryItems = ref([
|
{ batchNo: 'B20240601', materialName: '化工原料A', quantity: 100, expiryDate: '2025-01-15', daysLeft: 22, location: 'D-01-01', status: '预警' },
|
{ batchNo: 'B20240701', materialName: '胶粘剂', quantity: 50, expiryDate: '2025-01-20', daysLeft: 27, location: 'D-02-03', status: '预警' },
|
{ batchNo: 'B20240515', materialName: '防锈油', quantity: 80, expiryDate: '2025-01-10', daysLeft: 17, location: 'D-01-05', status: '已锁定' },
|
{ batchNo: 'B20240801', materialName: '清洗剂', quantity: 120, expiryDate: '2025-02-01', daysLeft: 39, location: 'D-03-02', status: '预警' },
|
{ batchNo: 'B20240620', materialName: '涂料', quantity: 200, expiryDate: '2025-01-25', daysLeft: 32, location: 'D-02-01', status: '预警' }
|
])
|
|
let timer
|
const updateTime = () => {
|
currentTime.value = formatDateTime(new Date())
|
}
|
|
const getStockClass = (current, min) => {
|
if (current < min * 0.3) return 'critical'
|
if (current < min) return 'warning'
|
return 'normal'
|
}
|
|
const getExpiryTagType = (days) => {
|
if (days < 15) return 'danger'
|
if (days < 30) return 'warning'
|
return 'info'
|
}
|
|
// 初始化周转率图表
|
const initTurnoverChart = () => {
|
const chart = echarts.init(turnoverChartRef.value)
|
const option = {
|
tooltip: { trigger: 'axis' },
|
grid: {
|
left: '3%', right: '4%', bottom: '3%', top: '10%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
axisLine: { lineStyle: { color: '#fff' } }
|
},
|
yAxis: {
|
type: 'value',
|
name: '周转率',
|
axisLine: { lineStyle: { color: '#fff' } },
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
|
},
|
series: [
|
{
|
name: '周转率',
|
type: 'line',
|
smooth: true,
|
data: [4.2, 3.8, 4.5, 5.2, 4.8, 5.5],
|
itemStyle: { color: '#4facfe' },
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: 'rgba(79, 172, 254, 0.5)' },
|
{ offset: 1, color: 'rgba(79, 172, 254, 0)' }
|
])
|
}
|
}
|
]
|
}
|
chart.setOption(option)
|
return chart
|
}
|
|
// 初始化ABC分类图表
|
const initAbcChart = () => {
|
const chart = echarts.init(abcChartRef.value)
|
const option = {
|
tooltip: { trigger: 'item' },
|
legend: {
|
orient: 'vertical',
|
right: '5%',
|
top: 'center',
|
textStyle: { color: '#fff' }
|
},
|
series: [
|
{
|
name: 'ABC分类',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
center: ['40%', '50%'],
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#0a0e27',
|
borderWidth: 2
|
},
|
label: { show: false },
|
data: [
|
{ value: 4850, name: 'A类(高价值)', itemStyle: { color: '#f56c6c' } },
|
{ value: 3280, name: 'B类(中价值)', itemStyle: { color: '#e6a23c' } },
|
{ value: 4450, name: 'C类(低价值)', itemStyle: { color: '#67c23a' } }
|
]
|
}
|
]
|
}
|
chart.setOption(option)
|
return chart
|
}
|
|
// 初始化近效期图表
|
const initExpiryChart = () => {
|
const chart = echarts.init(expiryChartRef.value)
|
const option = {
|
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
grid: {
|
left: '3%', right: '4%', bottom: '3%', top: '10%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: ['15天内', '30天内', '60天内', '90天内', '90天以上'],
|
axisLine: { lineStyle: { color: '#fff' } },
|
axisLabel: { color: '#fff', rotate: 30 }
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: { lineStyle: { color: '#fff' } },
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
|
},
|
series: [
|
{
|
data: [5, 12, 28, 45, 18],
|
type: 'bar',
|
barWidth: '50%',
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#fa709a' },
|
{ offset: 1, color: '#fee140' }
|
]),
|
borderRadius: [5, 5, 0, 0]
|
}
|
}
|
]
|
}
|
chart.setOption(option)
|
return chart
|
}
|
|
const handleResize = () => {
|
try {
|
const refs = [turnoverChartRef.value, abcChartRef.value, expiryChartRef.value]
|
refs.forEach(dom => {
|
if (dom) {
|
const chart = echarts.getInstanceByDom(dom)
|
if (chart) {
|
chart.resize()
|
}
|
}
|
})
|
} catch (error) {
|
console.warn('图表重绘时出错:', error)
|
}
|
}
|
|
onMounted(() => {
|
updateTime()
|
timer = setInterval(updateTime, 1000)
|
initTurnoverChart()
|
initAbcChart()
|
initExpiryChart()
|
window.addEventListener('resize', handleResize)
|
})
|
|
onUnmounted(() => {
|
clearInterval(timer)
|
window.removeEventListener('resize', handleResize)
|
|
// 销毁图表实例
|
try {
|
const refs = [turnoverChartRef.value, abcChartRef.value, expiryChartRef.value]
|
refs.forEach(dom => {
|
if (dom) {
|
const chart = echarts.getInstanceByDom(dom)
|
if (chart) {
|
chart.dispose()
|
}
|
}
|
})
|
} catch (error) {
|
console.warn('图表销毁时出错:', error)
|
}
|
})
|
|
return {
|
currentTime,
|
alertStats,
|
lowStockAlerts,
|
overStockAlerts,
|
expiryItems,
|
turnoverChartRef,
|
abcChartRef,
|
expiryChartRef,
|
getStockClass,
|
getExpiryTagType
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.inventory-container {
|
width: 100%;
|
height: 100%;
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
gap: 15px;
|
overflow-y: auto;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 20px;
|
height: 60px;
|
background: linear-gradient(90deg, rgba(30, 58, 138, 0.5) 0%, rgba(30, 58, 138, 0.1) 100%);
|
border-radius: 10px;
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
}
|
|
.title {
|
font-size: 24px;
|
font-weight: bold;
|
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.datetime {
|
font-size: 16px;
|
color: #4facfe;
|
}
|
|
.nav-menu {
|
display: flex;
|
gap: 15px;
|
padding: 0 20px;
|
}
|
|
.nav-item {
|
padding: 10px 25px;
|
background: rgba(255, 255, 255, 0.05);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
border-radius: 8px;
|
color: #fff;
|
text-decoration: none;
|
transition: all 0.3s;
|
}
|
|
.nav-item:hover {
|
background: rgba(79, 172, 254, 0.2);
|
border-color: #4facfe;
|
}
|
|
.nav-item.active {
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
border-color: transparent;
|
}
|
|
.main-content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
gap: 15px;
|
}
|
|
.alert-summary {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 15px;
|
}
|
|
.alert-card {
|
display: flex;
|
align-items: center;
|
gap: 20px;
|
padding: 20px;
|
border-radius: 10px;
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
}
|
|
.alert-card.critical {
|
background: linear-gradient(135deg, rgba(245, 108, 108, 0.2) 0%, rgba(245, 108, 108, 0.05) 100%);
|
border-color: rgba(245, 108, 108, 0.3);
|
}
|
|
.alert-card.warning {
|
background: linear-gradient(135deg, rgba(230, 162, 60, 0.2) 0%, rgba(230, 162, 60, 0.05) 100%);
|
border-color: rgba(230, 162, 60, 0.3);
|
}
|
|
.alert-card.info {
|
background: linear-gradient(135deg, rgba(64, 158, 255, 0.2) 0%, rgba(64, 158, 255, 0.05) 100%);
|
border-color: rgba(64, 158, 255, 0.3);
|
}
|
|
.alert-card.normal {
|
background: linear-gradient(135deg, rgba(103, 194, 58, 0.2) 0%, rgba(103, 194, 58, 0.05) 100%);
|
border-color: rgba(103, 194, 58, 0.3);
|
}
|
|
.alert-icon {
|
width: 60px;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 12px;
|
background: rgba(255, 255, 255, 0.1);
|
}
|
|
.alert-card.critical .alert-icon {
|
color: #f56c6c;
|
}
|
|
.alert-card.warning .alert-icon {
|
color: #e6a23c;
|
}
|
|
.alert-card.info .alert-icon {
|
color: #409eff;
|
}
|
|
.alert-card.normal .alert-icon {
|
color: #67c23a;
|
}
|
|
.alert-content {
|
flex: 1;
|
}
|
|
.alert-count {
|
font-size: 32px;
|
font-weight: bold;
|
margin-bottom: 5px;
|
}
|
|
.alert-card.critical .alert-count {
|
color: #f56c6c;
|
}
|
|
.alert-card.warning .alert-count {
|
color: #e6a23c;
|
}
|
|
.alert-card.info .alert-count {
|
color: #409eff;
|
}
|
|
.alert-card.normal .alert-count {
|
color: #67c23a;
|
}
|
|
.alert-label {
|
font-size: 14px;
|
color: rgba(255, 255, 255, 0.7);
|
}
|
|
.alert-lists {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 15px;
|
}
|
|
.list-card {
|
padding: 20px;
|
background: rgba(255, 255, 255, 0.05);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
border-radius: 10px;
|
}
|
|
.list-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
}
|
|
.list-title {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: 16px;
|
font-weight: bold;
|
color: #4facfe;
|
}
|
|
.critical {
|
color: #f56c6c !important;
|
}
|
|
.warning {
|
color: rgba(255, 255, 255, 0.7);
|
}
|
|
.normal {
|
color: #67c23a;
|
}
|
|
.over-stock {
|
color: #e6a23c;
|
font-weight: bold;
|
}
|
|
.charts-row {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 15px;
|
}
|
|
.chart-card {
|
padding: 20px;
|
background: rgba(255, 255, 255, 0.05);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
border-radius: 10px;
|
}
|
|
.card-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #4facfe;
|
margin-bottom: 15px;
|
}
|
|
.chart-container {
|
width: 100%;
|
height: 200px;
|
}
|
|
.expiry-list {
|
padding: 20px;
|
background: rgba(255, 255, 255, 0.05);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
border-radius: 10px;
|
}
|
|
.expiry-list .list-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #4facfe;
|
margin-bottom: 15px;
|
}
|
|
:deep(.el-table) {
|
background: transparent !important;
|
}
|
|
:deep(.el-table th) {
|
background: rgba(255, 255, 255, 0.1) !important;
|
color: #fff !important;
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
}
|
|
:deep(.el-table td) {
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
}
|
|
:deep(.el-table tr) {
|
background: transparent !important;
|
}
|
|
:deep(.el-table__row:hover td) {
|
background: rgba(255, 255, 255, 0.05) !important;
|
}
|
|
:deep(.el-badge__content) {
|
background-color: #f56c6c;
|
}
|
|
/* 响应式适配 */
|
@media screen and (max-width: 1600px) {
|
.alert-summary {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
|
.charts-row {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
@media screen and (max-width: 1366px) {
|
.inventory-container {
|
padding: 15px;
|
}
|
|
.header {
|
height: 50px;
|
padding: 0 15px;
|
}
|
|
.title {
|
font-size: 18px;
|
}
|
|
.alert-summary {
|
grid-template-columns: repeat(2, 1fr);
|
gap: 10px;
|
}
|
|
.alert-card {
|
padding: 15px;
|
}
|
|
.alert-count {
|
font-size: 24px;
|
}
|
|
.alert-lists {
|
grid-template-columns: 1fr;
|
}
|
|
.list-card {
|
padding: 15px;
|
}
|
|
.charts-row {
|
grid-template-columns: 1fr;
|
gap: 10px;
|
}
|
|
.chart-container {
|
height: 180px;
|
}
|
}
|
|
@media screen and (max-width: 1024px) {
|
.alert-summary {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
|
.charts-row {
|
grid-template-columns: 1fr;
|
}
|
|
.list-card {
|
padding: 12px;
|
}
|
}
|
|
@media screen and (max-width: 768px) {
|
.inventory-container {
|
padding: 10px;
|
}
|
|
.header {
|
flex-direction: column;
|
height: auto;
|
padding: 10px;
|
gap: 10px;
|
}
|
|
.title {
|
font-size: 16px;
|
}
|
|
.nav-menu {
|
gap: 8px;
|
padding: 0;
|
flex-wrap: wrap;
|
}
|
|
.nav-item {
|
padding: 6px 12px;
|
font-size: 12px;
|
}
|
|
.alert-summary {
|
grid-template-columns: 1fr 1fr;
|
gap: 8px;
|
}
|
|
.alert-card {
|
padding: 12px;
|
flex-direction: column;
|
text-align: center;
|
}
|
|
.alert-icon {
|
width: 45px;
|
height: 45px;
|
}
|
|
.alert-count {
|
font-size: 20px;
|
}
|
|
.alert-lists {
|
grid-template-columns: 1fr;
|
}
|
|
.list-card {
|
padding: 12px;
|
}
|
|
.list-header {
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 10px;
|
}
|
|
.charts-row {
|
grid-template-columns: 1fr;
|
}
|
|
.chart-container {
|
height: 150px;
|
}
|
|
.expiry-list {
|
padding: 12px;
|
}
|
|
:deep(.el-table) {
|
font-size: 12px;
|
}
|
|
:deep(.el-table th) {
|
padding: 8px 0;
|
}
|
|
:deep(.el-table td) {
|
padding: 8px 0;
|
}
|
}
|
</style>
|
