编辑“企业A:目录/栏杆机”

来自鲁班出摊

Admin（讨论 | 贡献）2026年5月26日 (二) 17:02的版本（创建页面，内容为“<html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> →‎======================================================== 全局基础样式 ========================================================： * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #eef2f7; padding: 20px; font-fami…”）

(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

警告：您正在编辑的是本页面的旧版本。如果您发布该更改，该版本后的所有更改都会丢失。

警告：您没有登录。如果您做出任意编辑，您的IP地址将会公开可见。如果您登录或创建一个账户，您的编辑将归属于您的用户名，且将享受其他好处。

body {
            background: #eef2f7;
            padding: 20px;
            font-family: "Microsoft YaHei";
            display: flex;
            justify-content: center;
        }

/* ========================================================
           外层容器与图片样式
        ======================================================== */
        .container {
            position: relative;
            width: 90%;
            max-width: 900px;
        }

.image {
            width: 100%;
            display: block;
        }

/* ========================================================
           标记点样式
        ======================================================== */
        .marker {
            position: absolute;
            width: 0.3vw;
            height: 0.3vw;
            min-width: 4px;
            min-height: 4px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 1);
            cursor: pointer;
            transform: translate(-50%, -50%);
            z-index: 10;
            transition: transform 0.2s;
        }

.marker:hover {
            transform: translate(-50%, -50%) scale(1.4);
            background: rgb(0,255,0);
            color: rgb(255,0,0);
        }

/* ========================================================
           文本框样式
        ======================================================== */
        .text-note {
            position: absolute;
            transform: translate(0, -50%);
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #3498db;
            padding: 0.6vw 1vw;
            font-size: 1vw;
            min-font-size: 12px;
            border-radius: 6px;
            z-index: 9;
            cursor: pointer;
            transition: 0.2s;
            font-weight: bold;
            text-align: center;
        }

.text-note:hover {
            background: #3498db;
            color: #fff;
        }

/* ========================================================
           连线样式
        ======================================================== */
        .connector {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0; left: 0;
            pointer-events: none;
        }

.connector line {
            stroke: rgb(0, 255, 0);
            stroke-width: 1;
            stroke-dasharray: 2,2;
        }

</style>
</head>
<body>
<div class="container" id="box" style="position: relative;">
    <img class="image" id="image" src="http://10.20.9.176:8080/images/6/6f/%E4%BB%BB%E5%8A%A1%E5%AF%BC%E8%88%AA-%E6%A0%8F%E6%9D%86%E6%9C%BA.jpg">

/* ========================================================
       连线自动计算脚本
    ========================================================= */
    function updateLines() {
        const svg = document.getElementById("connector");
        svg.innerHTML = "";

const markers = document.querySelectorAll(".marker");
        const texts   = document.querySelectorAll(".text-note");
        const box     = document.getElementById("box").getBoundingClientRect();

const count = Math.min(markers.length, texts.length);

for (let i = 0; i < count; i++) {
            const a = markers[i].getBoundingClientRect();
            const b = texts[i].getBoundingClientRect();

const x1 = a.left - box.left + a.width / 2;
            const y1 = a.top  - box.top  + a.height / 2;
            const x2 = b.left - box.left;
            const y2 = b.top  - box.top  + b.height / 2;

const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
            line.setAttribute("x1", x1);
            line.setAttribute("y1", y1);
            line.setAttribute("x2", x2);
            line.setAttribute("y2", y2);

svg.appendChild(line);
        }
    }

window.addEventListener("load", updateLines);
    window.addEventListener("resize", updateLines);
</script>
</body>
</html>

摘要：

请注意您对鲁班出摊的所有贡献都被认为是在广州锦南机器人智能科技有限责任公司下发布，请查看在鲁班出摊:版权的细节。如果您不希望您的文字被任意修改和再散布，请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作，或得自一个不受版权保护或相似自由的来源。 未经许可，请勿提交受版权保护的作品！

取消编辑帮助（在新窗口中打开）

取自“http://10.20.9.176:8080/index.php/企业A:目录/栏杆机”

匿名

搜索

编辑“企业A:目录/栏杆机”

命名空间

更多

页面操作

导航

导航

企业

特殊页面

工具集

工具集