<template>
|
<div class="container">
|
<div class="content-wrapper">
|
<!-- 控制面板区域 -->
|
<div class="control-panel">
|
<div class="panel-header">
|
<h3>控制面板</h3>
|
</div>
|
|
<div class="panel-body">
|
<div class="form-group">
|
<label class="form-label">仓库：</label>
|
<el-select size="mini" filterable v-model="selectedWarehouse" placeholder="请选择仓库" class="full-width"
|
@change="handleWarehouseChange">
|
<el-option v-for="item in warehouseList" :key="item.warehouseId" :value="item.warehouseId"
|
:label="getWarehouseName(item.warehouseId)">
|
</el-option>
|
</el-select>
|
</div>
|
|
<div class="form-group">
|
<label class="form-label">巷道：</label>
|
<el-select size="mini" clearable filterable v-model="selectedRoadwayNo" placeholder="请选择巷道"
|
class="full-width" @change="handleRoadwayNoChange">
|
<el-option v-for="item in roadwayNoList" :key="item" :value="item" :label="'巷道 ' + item"></el-option>
|
</el-select>
|
</div>
|
|
<el-button type="success" class="refresh-btn" @click="fetchLocationStatus" :loading="loading">
|
刷新
|
</el-button>
|
|
<div class="legend-section">
|
<div class="legend-header">
|
<h4>图例说明</h4>
|
</div>
|
<div class="legend-list">
|
<div class="legend-item" v-for="(item, index) in infoMsg" :key="index">
|
<span class="color-box" :style="{ 'background-color': item.bgcolor }"></span>
|
<span class="legend-label">{{ item.msg }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 货位展示区域 -->
|
<div class="main-content">
|
<div v-if="loading" class="loading-container">
|
<el-skeleton :rows="6" animated />
|
</div>
|
|
<div v-else-if="locationData.length > 0" class="location-container">
|
<div class="location-header">
|
<div class="location-info">
|
<span>当前查看：{{ getWarehouseName(selectedWarehouse) }} - 巷道 {{ selectedRoadwayNo }}</span>
|
<span class="total-count">共 {{ totalLocations }} 个货位</span>
|
</div>
|
</div>
|
|
<div class="layers-container">
|
<!-- 遍历每一层 -->
|
<div class="layer-row" v-for="layer in sortedLayerData" :key="layer.layer">
|
<div class="layer-title-area">
|
<h3 class="layer-title">层 {{ layer.layer }}</h3>
|
<span class="layer-count">{{ getLayerLocations(layer) }} 个货位</span>
|
</div>
|
|
<div class="layer-content-wrap">
|
<!-- 按行分组显示 -->
|
<div class="row-group" v-for="rowGroup in getRowGroups(layer)" :key="rowGroup.row">
|
<div class="row-title">
|
<span class="row-label">{{ rowGroup.row }}排</span>
|
<span class="row-count">{{ rowGroup.locations.length }} 个货位</span>
|
</div>
|
|
<div class="row-content">
|
<!-- 在每排内显示列（不显示列标签） -->
|
<div class="location-column" v-for="column in sortedColumns(rowGroup.columns)" :key="column.column">
|
<div class="locations-wrapper">
|
<!-- 每列显示深度（浅/深） -->
|
<div class="location-item" v-for="depth in column.depths" :key="depth.depth"
|
:class="getLocationStatusClass(depth)"
|
@mouseenter="showTooltip(depth, column.column, layer.layer, $event)"
|
@mouseleave="hideTooltip"
|
@click="handleLocationClick(depth)">
|
<div class="location-code">
|
{{ getLocationPositionForDisplay(depth, column.column, layer.layer) }}
|
</div>
|
<div class="location-status" v-if="depth.enableStatus !== 0">
|
禁用
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 无数据提示 -->
|
<div v-else class="empty-container">
|
<el-empty description="暂无货位数据">
|
<template #description>
|
<p>请选择仓库和巷道来查看货位信息</p>
|
</template>
|
</el-empty>
|
</div>
|
|
<!-- 悬浮提示框 -->
|
<div v-if="showTooltipFlag" class="location-tooltip" :style="{
|
left: tooltipPosition.x + 'px',
|
top: tooltipPosition.y + 'px',
|
}">
|
<div class="tooltip-content">
|
<div class="tooltip-header">
|
<h4>货位详情</h4>
|
</div>
|
<div class="tooltip-body">
|
<div class="tooltip-row">
|
<span class="tooltip-label">仓库：</span>
|
<span class="tooltip-value">{{ getWarehouseName(selectedWarehouse) }}</span>
|
</div>
|
<div class="tooltip-row">
|
<span class="tooltip-label">巷道：</span>
|
<span class="tooltip-value">{{ selectedRoadwayNo }}</span>
|
</div>
|
<div class="tooltip-row">
|
<span class="tooltip-label">货位编号：</span>
|
<span class="tooltip-value">{{ currentLocation?.locationCode || '--' }}</span>
|
</div>
|
<div class="tooltip-row">
|
<span class="tooltip-label">位置：</span>
|
<span class="tooltip-value">{{ getLocationPosition(currentLocation) }}</span>
|
</div>
|
<div class="tooltip-row">
|
<span class="tooltip-label">类型：</span>
|
<span class="tooltip-value">{{ getLocationTypeText(currentLocation?.locationType) }}</span>
|
</div>
|
<div class="tooltip-row">
|
<span class="tooltip-label">状态：</span>
|
<span class="tooltip-value" :class="getStatusClass(currentLocation?.locationStatus)">
|
{{ getStatusText(currentLocation?.locationStatus) }}
|
</span>
|
</div>
|
<div class="tooltip-row">
|
<span class="tooltip-label">启用状态：</span>
|
<span class="tooltip-value" :class="{ 'status-disabled': currentLocation?.enableStatus !== 0 }">
|
{{ getEnableStatusText(currentLocation?.enableStatus) }}
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ElButton, ElMessage, ElSelect, ElOption, ElEmpty, ElSkeleton } from "element-plus";
|
|
export default {
|
data() {
|
return {
|
warehouseList: [],
|
roadwayNoList: [],
|
selectedWarehouse: null,
|
selectedRoadwayNo: null,
|
selectedLocationCode: null,
|
infoMsg: [
|
{ bgcolor: "#2BB3D5", msg: "空货位" },
|
{ bgcolor: "orange", msg: "有货" },
|
{ bgcolor: "lightgreen", msg: "锁定" },
|
{ bgcolor: "#ccc", msg: "禁用" }
|
],
|
locationData: [],
|
showTooltipFlag: false,
|
currentLocation: null,
|
tooltipPosition: { x: 0, y: 0 },
|
currentColumn: null,
|
currentLayer: null,
|
loading: false
|
};
|
},
|
computed: {
|
sortedLayerData() {
|
const layerMap = {};
|
|
this.locationData.forEach(layer => {
|
if (!layerMap[layer.layer]) {
|
layerMap[layer.layer] = {
|
layer: layer.layer,
|
columns: []
|
};
|
}
|
|
layer.columns?.forEach(column => {
|
layerMap[layer.layer].columns.push({
|
column: column.column,
|
depths: column.depths || []
|
});
|
});
|
});
|
|
return Object.values(layerMap).sort((a, b) => a.layer - b.layer);
|
},
|
|
totalLocations() {
|
let count = 0;
|
this.locationData.forEach(layer => {
|
layer.columns?.forEach(column => {
|
count += column.depths?.length || 0;
|
});
|
});
|
return count;
|
}
|
},
|
methods: {
|
// 按行分组数据
|
getRowGroups(layer) {
|
const rowMap = {};
|
|
// 遍历所有列和深度，按行分组
|
layer.columns?.forEach(column => {
|
column.depths?.forEach(depth => {
|
const row = depth.row || '?';
|
|
if (!rowMap[row]) {
|
rowMap[row] = {
|
row: row,
|
locations: [],
|
columns: {}
|
};
|
}
|
|
// 添加到该行的位置列表
|
rowMap[row].locations.push({
|
...depth,
|
column: column.column,
|
layer: layer.layer
|
});
|
|
// 按列组织数据
|
if (!rowMap[row].columns[column.column]) {
|
rowMap[row].columns[column.column] = {
|
column: column.column,
|
depths: []
|
};
|
}
|
|
rowMap[row].columns[column.column].depths.push(depth);
|
});
|
});
|
|
// 转换为数组并按行排序
|
return Object.values(rowMap)
|
.sort((a, b) => this.compareRows(a.row, b.row));
|
},
|
|
sortedColumns(columnsObj) {
|
// 将对象转换为数组并按列号排序
|
const columns = Object.values(columnsObj || {});
|
return columns.sort((a, b) => a.column - b.column);
|
},
|
|
// 比较行号的辅助方法
|
compareRows(rowA, rowB) {
|
// 如果都是数字，按数字比较
|
if (!isNaN(rowA) && !isNaN(rowB)) {
|
return Number(rowA) - Number(rowB);
|
}
|
// 否则按字符串比较
|
return String(rowA).localeCompare(String(rowB));
|
},
|
|
// 获取位置信息用于显示
|
getLocationPositionForDisplay(location, column, layer) {
|
if (!location) return '';
|
const row = location.row || '?';
|
const depthText = location.depth === 1 ? '浅' : '深';
|
return `${row}排${column}列${layer}层${depthText}`;
|
},
|
|
// 获取位置信息（用于悬浮提示框）
|
getLocationPosition(location) {
|
if (!location || !this.currentColumn || !this.currentLayer) return '--';
|
const row = location.row || '?';
|
const depthText = location.depth === 1 ? '浅' : '深';
|
return `${row}排-${this.currentColumn}列-${this.currentLayer}层-${depthText}`;
|
},
|
|
async fetchWarehouseData() {
|
try {
|
this.loading = true;
|
const response = await this.http.get("/api/LocationInfo/GetArea");
|
this.warehouseList = response.data || [];
|
|
if (this.warehouseList.length > 0) {
|
this.selectedWarehouse = this.warehouseList[0].warehouseId;
|
this.roadwayNoList = this.warehouseList[0].roadwayNo || [];
|
|
if (this.roadwayNoList.length > 0) {
|
this.selectedRoadwayNo = this.roadwayNoList[0];
|
await this.fetchLocationStatus();
|
}
|
}
|
} catch (error) {
|
console.error("获取仓库数据失败:", error);
|
this.warehouseList = [];
|
this.roadwayNoList = [];
|
ElMessage.error("获取仓库数据失败，请稍后重试");
|
} finally {
|
this.loading = false;
|
}
|
},
|
|
async fetchLocationStatus() {
|
if (!this.selectedWarehouse || !this.selectedRoadwayNo) {
|
ElMessage.warning("请选择仓库和巷道");
|
return;
|
}
|
|
try {
|
this.loading = true;
|
const response = await this.http.get(
|
`/api/LocationInfo/GetLocationStatus?WarehouseId=${this.selectedWarehouse}&RoadwayNo=${this.selectedRoadwayNo}`
|
);
|
|
if (response.data && response.status) {
|
this.locationData = response.data || [];
|
|
// 验证数据
|
console.log("货位数据:", this.locationData);
|
if (this.locationData.length > 0 && this.locationData[0].columns) {
|
console.log("示例货位:", this.locationData[0].columns[0]?.depths?.[0]);
|
}
|
|
if (this.locationData.length === 0) {
|
ElMessage.info("该巷道没有货位数据");
|
}
|
} else {
|
this.locationData = [];
|
ElMessage.error(response.data?.message || "获取货位状态失败");
|
}
|
} catch (error) {
|
console.error("获取货位状态失败:", error);
|
this.locationData = [];
|
ElMessage.error("获取货位状态失败，请稍后重试");
|
} finally {
|
this.loading = false;
|
}
|
},
|
|
handleWarehouseChange() {
|
const selectedWarehouse = this.warehouseList.find(
|
w => w.warehouseId === this.selectedWarehouse
|
);
|
this.roadwayNoList = selectedWarehouse ? selectedWarehouse.roadwayNo : [];
|
this.selectedRoadwayNo = this.roadwayNoList.length > 0 ? this.roadwayNoList[0] : null;
|
this.fetchLocationStatus();
|
},
|
|
getWarehouseName(warehouseId) {
|
const warehouseMap = {
|
1: '原材料仓',
|
2: '成品仓'
|
};
|
return warehouseMap[warehouseId] || `仓库 ${warehouseId}`;
|
},
|
|
handleRoadwayNoChange() {
|
this.fetchLocationStatus();
|
},
|
|
getLocationStatusClass(depth) {
|
if (depth.enableStatus !== 0) {
|
return 'location-disabled';
|
}
|
|
switch (depth.locationStatus) {
|
case 0: return 'location-empty'; // 空货位
|
case 1: return 'location-locked'; // 锁定
|
case 100: return 'location-occupied'; // 有货
|
default: return 'location-other';
|
}
|
},
|
|
getLayerLocations(layer) {
|
let count = 0;
|
layer.columns?.forEach(column => {
|
count += column.depths?.length || 0;
|
});
|
return count;
|
},
|
|
showTooltip(depth, column, layer, event) {
|
this.currentLocation = depth;
|
this.currentColumn = column;
|
this.currentLayer = layer;
|
this.showTooltipFlag = true;
|
|
const offsetX = 15;
|
const offsetY = 15;
|
this.tooltipPosition = {
|
x: event.clientX + offsetX,
|
y: event.clientY + offsetY,
|
};
|
},
|
|
hideTooltip() {
|
this.showTooltipFlag = false;
|
this.currentLocation = null;
|
this.currentColumn = null;
|
this.currentLayer = null;
|
},
|
|
handleLocationClick(depth) {
|
console.log('点击货位:', depth);
|
// 这里可以添加点击货位的处理逻辑
|
ElMessage.info(`选中货位: ${depth.locationCode || '未知货位'}`);
|
},
|
|
getStatusText(status) {
|
const statusMap = {
|
0: "空货位",
|
1: "锁定",
|
100: "有货",
|
};
|
return statusMap[status] || "未知状态";
|
},
|
|
getStatusClass(status) {
|
const classMap = {
|
0: 'status-empty',
|
1: 'status-locked',
|
100: 'status-occupied'
|
};
|
return classMap[status] || '';
|
},
|
|
getLocationTypeText(type) {
|
const typeMap = {
|
1: "布卷",
|
2: "松布卷",
|
3: "成品货位"
|
};
|
return typeMap[type] || "未知类型";
|
},
|
|
getEnableStatusText(status) {
|
return status === 0 ? '启用' : '禁用';
|
}
|
},
|
mounted() {
|
this.fetchWarehouseData();
|
},
|
components: {
|
ElButton,
|
ElSelect,
|
ElOption,
|
ElEmpty,
|
ElSkeleton
|
},
|
};
|
</script>
|
|
<style scoped>
|
/* 样式部分 */
|
.container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
padding: 16px;
|
box-sizing: border-box;
|
background-color: #f0f2f5;
|
}
|
|
.content-wrapper {
|
display: flex;
|
flex: 1;
|
min-height: 0;
|
gap: 16px;
|
}
|
|
.control-panel {
|
width: 260px;
|
background-color: white;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
display: flex;
|
flex-direction: column;
|
flex-shrink: 0;
|
overflow: hidden;
|
}
|
|
.panel-header {
|
padding: 16px;
|
border-bottom: 1px solid #e8e8e8;
|
background-color: #fafafa;
|
}
|
|
.panel-header h3 {
|
margin: 0;
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.panel-body {
|
padding: 16px;
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
}
|
|
.form-group {
|
margin-bottom: 0;
|
}
|
|
.form-label {
|
display: block;
|
margin-bottom: 6px;
|
font-size: 14px;
|
color: #666;
|
font-weight: 500;
|
}
|
|
.full-width {
|
width: 100%;
|
}
|
|
.refresh-btn {
|
margin-top: 8px;
|
width: 100%;
|
height: 32px;
|
}
|
|
.legend-section {
|
margin-top: 8px;
|
padding-top: 16px;
|
border-top: 1px solid #e8e8e8;
|
}
|
|
.legend-header h4 {
|
margin: 0 0 12px 0;
|
font-size: 15px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.legend-list {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.legend-item {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.color-box {
|
width: 20px;
|
height: 20px;
|
border-radius: 4px;
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
flex-shrink: 0;
|
}
|
|
.legend-label {
|
font-size: 13px;
|
color: #666;
|
}
|
|
.main-content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
min-width: 0;
|
}
|
|
.loading-container {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: white;
|
border-radius: 8px;
|
padding: 24px;
|
}
|
|
.location-container {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
background: white;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
overflow: hidden;
|
min-height: 0;
|
}
|
|
.location-header {
|
padding: 16px 20px;
|
background: #fafafa;
|
border-bottom: 1px solid #e8e8e8;
|
flex-shrink: 0;
|
}
|
|
.location-info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 14px;
|
}
|
|
.total-count {
|
font-weight: 600;
|
color: #1890ff;
|
}
|
|
.layers-container {
|
width: 100%;
|
height: 100%;
|
flex: 1;
|
overflow-y: auto;
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
gap: 24px;
|
}
|
|
.layer-row {
|
background: #f9f9f9;
|
border-radius: 8px;
|
border: 1px solid #e8e8e8;
|
display: flex;
|
flex-direction: column;
|
min-height: auto;
|
}
|
|
.layer-title-area {
|
padding: 12px 16px;
|
background: #f0f0f0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-shrink: 0;
|
}
|
|
.layer-title {
|
margin: 0;
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.layer-count {
|
font-size: 12px;
|
color: #666;
|
background: white;
|
padding: 4px 10px;
|
border-radius: 12px;
|
border: 1px solid #ddd;
|
}
|
|
.layer-content-wrap {
|
width: 100%;
|
overflow: hidden;
|
flex: 1;
|
padding: 16px;
|
}
|
|
/* 行组样式 */
|
.row-group {
|
margin-bottom: 10px;
|
padding: 12px;
|
background: white;
|
border-radius: 6px;
|
border: 1px solid #e8e8e8;
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
}
|
|
.row-group:last-child {
|
margin-bottom: 0;
|
}
|
|
.row-title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
padding-bottom: 8px;
|
border-bottom: 1px dashed #e8e8e8;
|
}
|
|
.row-label {
|
font-size: 14px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.row-count {
|
font-size: 12px;
|
color: #666;
|
background: #f0f0f0;
|
padding: 2px 8px;
|
border-radius: 10px;
|
}
|
|
.row-content {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px; /* 减小间距 */
|
}
|
|
/* 缩小货位框尺寸 */
|
.location-column {
|
flex: 0 0 auto;
|
width: 70px; /* 减小宽度 */
|
min-height: 30px; /* 减小高度 */
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
}
|
|
.locations-wrapper {
|
display: flex;
|
flex-direction: column;
|
gap: 4px; /* 减小间距 */
|
flex: 1;
|
min-height: 0;
|
}
|
|
/* 缩小货位项 */
|
.location-item {
|
min-height: 32px; /* 减小高度 */
|
padding: 4px 2px; /* 减小内边距 */
|
border-radius: 4px;
|
text-align: center;
|
cursor: pointer;
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
transition: all 0.2s;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
gap: 1px;
|
flex: 1;
|
}
|
|
.location-item:hover {
|
transform: scale(1.05);
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
z-index: 10;
|
}
|
|
/* 缩小货位编号字体 */
|
.location-code {
|
font-size: 9px; /* 减小字体 */
|
font-weight: 500;
|
line-height: 1.2;
|
word-break: break-all;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 100%;
|
}
|
|
.location-status {
|
font-size: 8px; /* 减小字体 */
|
padding: 1px 3px;
|
border-radius: 2px;
|
background: rgba(0, 0, 0, 0.1);
|
}
|
|
/* 货位状态颜色 */
|
.location-empty {
|
background-color: #2BB3D5;
|
color: white;
|
}
|
|
.location-occupied {
|
background-color: orange;
|
color: white;
|
}
|
|
.location-locked {
|
background-color: lightgreen;
|
color: #333;
|
}
|
|
.location-disabled {
|
background-color: #ccc;
|
color: #666;
|
cursor: not-allowed;
|
}
|
|
.location-other {
|
background-color: #b7ba6b;
|
color: white;
|
}
|
|
.empty-container {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: white;
|
border-radius: 8px;
|
}
|
|
.location-tooltip {
|
position: fixed;
|
z-index: 9999;
|
background-color: white;
|
border: 1px solid #ddd;
|
border-radius: 6px;
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
pointer-events: none;
|
min-width: 220px;
|
max-width: 300px;
|
}
|
|
.tooltip-content {
|
overflow: hidden;
|
}
|
|
.tooltip-header {
|
padding: 12px 16px;
|
background-color: #1890ff;
|
color: white;
|
}
|
|
.tooltip-header h4 {
|
margin: 0;
|
font-size: 14px;
|
font-weight: 600;
|
}
|
|
.tooltip-body {
|
padding: 12px 16px;
|
}
|
|
.tooltip-row {
|
display: flex;
|
margin-bottom: 8px;
|
font-size: 13px;
|
line-height: 1.4;
|
}
|
|
.tooltip-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.tooltip-label {
|
flex: 0 0 80px;
|
color: #666;
|
font-weight: 500;
|
}
|
|
.tooltip-value {
|
flex: 1;
|
color: #333;
|
word-break: break-all;
|
}
|
|
.status-disabled {
|
color: #f5222d;
|
}
|
|
/* 滚动条样式 */
|
.layers-container::-webkit-scrollbar {
|
width: 8px;
|
}
|
|
.layers-container::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 4px;
|
}
|
|
.layers-container::-webkit-scrollbar-thumb {
|
background: #c1c1c1;
|
border-radius: 4px;
|
}
|
|
.layers-container::-webkit-scrollbar-thumb:hover {
|
background: #a8a8a8;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 1200px) {
|
.location-column {
|
width: 95px;
|
}
|
}
|
|
@media (max-width: 768px) {
|
.content-wrapper {
|
flex-direction: column;
|
}
|
|
.control-panel {
|
width: 100%;
|
}
|
|
.location-column {
|
width: 90px;
|
}
|
|
.row-content {
|
gap: 6px;
|
}
|
}
|
|
@media (max-width: 480px) {
|
.location-column {
|
width: 80px;
|
}
|
|
.location-code {
|
font-size: 8px;
|
}
|
|
.row-content {
|
gap: 4px;
|
}
|
|
.row-group {
|
padding: 8px;
|
}
|
}
|
|
@media (max-width: 380px) {
|
.location-column {
|
width: 70px;
|
}
|
|
.location-code {
|
font-size: 7px;
|
}
|
}
|
</style>
|
