企业A:目录/栏杆机：修订间差异

来自鲁班出摊
可视化wikitext
无编辑摘要
标签：已被回退
无编辑摘要
标签：手工回退
第4行： 第4行：


     <style>
     <style>
         /* ========== 禁止修改区：与主页面完全一致 ========== */
         /* ========================================================
          全局基础样式
        ======================================================== */
         * { margin: 0; padding: 0; box-sizing: border-box; }
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
         body {
             background: #eef2f7;
             background: #eef2f7;
             padding: 20px;
             padding: 20px;
             font-family: "Microsoft YaHei", sans-serif;
             font-family: "Microsoft YaHei";
             display: flex;
             display: flex;
            flex-direction: column;
             justify-content: center;
            align-items: center;      /* 垂直居中 */
             justify-content: center;   /* 水平居中（新增） */
         }
         }
        /* ========================================================
          外层容器与图片样式
        ======================================================== */
         .container {
         .container {
             position: relative;
             position: relative;
             width: 90%;
             width: 90%;
             max-width: 900px;
             max-width: 900px;
            margin-bottom: 10px;      /* 多图间距保留 */
         }
         }
         .image {
         .image {
             width: 100%;
             width: 100%;
第26行： 第31行：
         }
         }


         /* ========== 标记点：主页面同款 ========== */
         /* ========================================================
          标记点样式
        ======================================================== */
         .marker {
         .marker {
             position: absolute;
             position: absolute;
             width: 0.7vw;
             width: 0.3vw;
             height: 0.7vw;
             height: 0.3vw;
             min-width: 4px;
             min-width: 4px;
             min-height: 4px;
             min-height: 4px;
             border-radius: 50%;
             border-radius: 50%;
             background: rgba(255, 0, 0, 1);
             background: rgba(255, 255, 255, 1);
color: white;
             cursor: pointer;
             font-weight: bold;
            font-size: 0.6vw;
display: flex;
            align-items: center;
justify-content: center;
             transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
             z-index: 10;
             z-index: 10;
第46行： 第48行：
         }
         }


         /* ========== 文本框：主页面同款 ========== */
        .marker:hover {
            transform: translate(-50%, -50%) scale(1.4);
            background: rgb(0,255,0);
            color: rgb(255,0,0);
        }
 
         /* ========================================================
          文本框样式
        ======================================================== */
         .text-note {
         .text-note {
             position: absolute;
             position: absolute;
             transform: translate(0, -50%);
             transform: translate(0, -50%);
             background: rgba(255, 255, 255, 0.9);
             background: rgba(255, 255, 255, 0.9);
             border: 1px solid rgba(255, 0, 0, 0.9);
             border: 2px solid #3498db;
             padding: 0.6vw 1vw;
             padding: 0.6vw 1vw;
             font-size: 1vw;
             font-size: 1vw;
             min-font-size: 12px;
             min-font-size: 12px;
             border-radius: 2px;
             border-radius: 6px;
            z-index: 9;
            cursor: pointer;
            transition: 0.2s;
             font-weight: bold;
             font-weight: bold;
             text-align: left;
             text-align: center;
             color: #000;
        }
 
        .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>
     </style>
</head>
</head>
<body>
<body>
<!-- 需要编辑①：图片 URL -->
<div class="container" id="box" style="position: relative;">
<div class="container" 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">
     <img class="image" src="http://10.20.9.176:8080/images/b/b0/%E4%BB%BB%E5%8A%A1%E5%AF%BC%E8%88%AA-%E8%BD%A6%E6%A3%80%E5%99%A8%E6%9B%B4%E6%8D%A2.png">


     <div class="marker" style="top:43.22%; left:68.17%;">1</div>
     <div class="marker" style="top:64.59%; left:26.24%;" data-link="http://10.20.9.176:8080/index.php/企业A:目录/栏杆机/车检器拆除/车检器"></div>
     <div class="marker" style="top:43.08%; left:63.41%;">2</div>
     <div class="text-note" style="top:62.94%; left:50.04%;" data-link="http://10.20.9.176:8080/index.php/企业A:目录/栏杆机/车检器拆除/车检器">       栏杆机<br>点击跳转    </div>
     <div class="text-note" style="top:43.81%; left:22.03%;">①确认故障车检器<br>②断电操作</div>
     <svg class="connector" id="connector" ></svg>
</div>
</div>


<div class="container" style="position: relative;">
    <img class="image" src="http://10.20.9.176:8080/images/d/df/%E4%BB%BB%E5%8A%A1%E5%AF%BC%E8%88%AA-%E8%BD%A6%E6%A3%80%E5%99%A8.png">


     <div class="marker" style="top:46.12%; left:37.78%;">1</div>
<script>
     <div class="marker" style="top:47.22%; left:83.56%;">2</div>
     /* ========================================================
    <div class="text-note" style="top:74.32%; left:47.48%;">①往上拔出故障车检器<br>②车检器与底座分离</div>
      点击跳转脚本
</div>
    ========================================================= */
    document.querySelectorAll(".marker, .text-note").forEach(el => {
        el.onclick = () => window.location.href = el.dataset.link;
    });
 
    /* ========================================================
      连线自动计算脚本
    ========================================================= */
     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();


<div class="container" style="position: relative;">
            const x1 = a.left - box.left + a.width / 2;
    <img class="image" src="http://10.20.9.176:8080/images/9/95/%E4%BB%BB%E5%8A%A1%E5%AF%BC%E8%88%AA-%E8%BD%A6%E6%A3%80%E5%99%A82.png">
            const y1 = a.top  - box.top  + a.height / 2;
            const x2 = b.left - box.left;
            const y2 = b.top  - box.top  + b.height / 2;


    <div class="marker" style="top:55.24%; left:17.27%;">1</div>
            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    <div class="text-note" style="top:89.19%; left:3.72%;">更换新车检器<br>①按照原来的车检器拨码进行调整<br>注意：通电况下，若有调整拨码开关，需要按复位按键生效</div>
            line.setAttribute("x1", x1);
</div>
            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>
</body>
</html>
</html>

2026年5月26日 (二) 17:10的版本

栏杆机
点击跳转

取自“http://10.20.9.176:8080/index.php?title=企业A:目录/栏杆机&oldid=179”