81 lines
4.0 KiB
HTML
81 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>箭头动画</title>
|
|
<link rel="stylesheet" href="../layui/css/layui.css">
|
|
<!--引入layui layer-->
|
|
<script src="../js/jquery-3.7.1.min.js"></script>
|
|
<script src="../layui/layui.all.js" charset="utf-8"></script>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<style>
|
|
.data-operation .layui-btn {
|
|
height: 42px;
|
|
font-size: 16px;
|
|
}
|
|
.data-operation {
|
|
padding: 0 10px;
|
|
}
|
|
.control-panel {
|
|
width: 320px; /* 从默认宽度增加到320px */
|
|
padding: 15px;
|
|
box-sizing: border-box; /* 确保内边距不会增加总宽度 */
|
|
}
|
|
.data-operation .layui-btn {
|
|
height: 42px;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="background-container"></div>
|
|
<div class="control-panel">
|
|
<div class="control-section">
|
|
<div class="control-section">
|
|
<h3>增加箭头</h3>
|
|
<div class="image-selector">
|
|
<div class="image-btn" data-image="images/1.png" style="background-image: url('images/1.png');"></div>
|
|
<div class="image-btn" data-image="images/2.png" style="background-image: url('images/2.png');"></div>
|
|
<div class="image-btn" data-image="images/3.png" style="background-image: url('images/3.png');"></div>
|
|
<div class="image-btn" data-image="images/4.png" style="background-image: url('images/4.png');"></div>
|
|
<div class="image-btn" data-image="images/5.png" style="background-image: url('images/5.png');"></div>
|
|
<div class="image-btn" data-image="images/6.png" style="background-image: url('images/6.png');"></div>
|
|
</div>
|
|
<!-- 删除全局停止距离输入框 -->
|
|
<button class="save-btn" id="markCenterBtn" style="margin-top: 10px;">标记中心点</button>
|
|
<button class="save-btn" id="startAnimationBtn" style="margin-top: 10px;">开始</button>
|
|
<button class="save-btn" id="resetBtn" style="margin-top: 10px;">重置</button>
|
|
<!-- 添加数据操作按钮 -->
|
|
<div class="data-operation layui-row" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee;">
|
|
<div class="layui-form-item" style="margin-top: 15px;">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<button id="saveDataBtn" class="layui-btn layui-btn-fluid">保存数据</button>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<button id="importDataBtn" class="layui-btn layui-btn-fluid layui-btn-normal">导入数据</button>
|
|
</div>
|
|
</div>
|
|
<!-- 添加清空数据按钮 -->
|
|
<div class="layui-row" style="margin-top: 10px;">
|
|
<div class="layui-col-md12">
|
|
<button id="clearDataBtn" class="layui-btn layui-btn-fluid layui-btn-danger">清空数据</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="contextMenu">
|
|
<div id="deleteArrow">删除箭头</div>
|
|
<div class="menu-separator"></div>
|
|
<div class="menu-item" data-point="top-left"><span class="check-mark"></span>左上角</div>
|
|
<div class="menu-item" data-point="top-right"><span class="check-mark"></span>右上角</div>
|
|
<div class="menu-item" data-point="bottom-left"><span class="check-mark"></span>左下角</div>
|
|
<div class="menu-item" data-point="bottom-right"><span class="check-mark"></span>右下角</div>
|
|
</div>
|
|
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |