feat(web/route): 适配移动端响应式布局 + 统一站点拖拽逻辑
1. 线路规划页面(/route)移动端适配:
- 新增 980px / 768px / 480px 三档响应式CSS
- 侧边栏改为抽屉式叠加层,主容器垂直流式布局
- 顶部导航、工具栏、编辑器堆叠式排列
- SVG线路容器开启横向惯性滚动,最小宽度720px
- 票价地图、表格、模态框均针对小屏优化
- 按钮/输入框统一最小高度44px,满足可访问性
2. 重构站点拖拽逻辑(修复电脑端拖拽失效):
- 原实现:mousemove绑定单站点<g>,鼠标离开即丢失拖拽
- 新实现:mousedown/touchstart仅记录起点,
window级别监听 mousemove/mouseup/touchmove/touchend
- 通过 SVG createSVGPoint + getScreenCTM().inverse()
统一将屏幕坐标转换为SVG逻辑坐标再换算站点索引
- 共用 swapStationByIndex() / saveDragResult() 核心函数
3. 静态资源版本号升级: style.css v16, ticket-route.js v5
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<title>线路规划|FSE铁路运输票务系统</title>
|
||||
<link rel="icon" type="image/png" href="/FSE-ticket.png">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="/style.css?v=14">
|
||||
<link rel="stylesheet" href="/style.css?v=16">
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
</head>
|
||||
@@ -239,8 +239,10 @@
|
||||
|
||||
<!--车站节点-->
|
||||
<g v-for="(sCode, index) in selectedLine.stations" :key="sCode"
|
||||
@mousedown="onStationDragStart(index)" @mouseup="onStationDrop"
|
||||
@mousemove="onStationDragOver(index)" @click="handleStationClick(sCode)"
|
||||
@mousedown="onStationDragStart(index, $event)"
|
||||
@mouseup="onStationDrop"
|
||||
@click="handleStationClick(sCode)"
|
||||
@touchstart.passive="onStationTouchStart(index, $event)"
|
||||
class="station-node" :class="{
|
||||
'selected': isStationSelected(sCode),
|
||||
'fare-source': fareSelection[0] === sCode,
|
||||
@@ -600,7 +602,7 @@
|
||||
</div>
|
||||
<script src="/custom-dialog.js?v=11"></script>
|
||||
<script src="/public-status.js?v=14"></script>
|
||||
<script src="ticket-route.js?v=3"></script>
|
||||
<script src="ticket-route.js?v=5"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const isDomain = location.hostname.includes('fse-media.group');
|
||||
|
||||
Reference in New Issue
Block a user