map12

Scene/public/js/loadCAD.js

@@ -28,21 +28,32 @@ window.grendCAD = (function grendCAD() {
     if (initDOM) return initDOM
     let $layer = document.createElement('div')
     let $cad = document.createElement('div')
+    let $img = document.createElement('img')
 
     $layer.className = 'cad'
+    $img.className = 'img'
     $cad.id = 'cad'
     $layer.appendChild($cad)
 
     let style = document.createElement('style')
     style.innerHTML = `
       .cad {
+        cursor: pointer;
         position: absolute;
         right: 20px;
         top: 16px;
         width: 200px;
         height: 200px;
         background: rgba(0, 0, 0, .3);
-        border-radius: 5px;
+        border-radius: 5px; 
+        background-image: url('./images/map_1.png');
+        background-size: 100% 100%;
+        path {
+          opacity: 0;
+        }
+        g.sign>path {
+          opacity: 1;
+        }
       }
 
       .cad > div {
@@ -50,6 +61,17 @@ window.grendCAD = (function grendCAD() {
         height: 100%;
       }
 
+      .img {
+        display: none;
+        width: 35%;
+        object-fit: cover;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        transition: opacity 0.3s ease;
+      }
+
       @media only screen and (max-width: 1000px) {
         .cad {
             position: absolute;
@@ -59,15 +81,30 @@ window.grendCAD = (function grendCAD() {
             height: 100px;
             background: rgba(0, 0, 0, .3);
             border-radius: 5px;
-        }
+            background-image: url('./images/map_1.png');
+            background-size: 100% 100%;
+            path {
+              opacity: 0;
+            }
+            g.sign>path {
+              opacity: 1;
+            }
+          }
+          .img {
+            width: 90%;
+            z-index: 30000;
+          }
+        
       }
     `
 
     document.documentElement.appendChild(style)
     document.documentElement.appendChild($layer)
+    document.documentElement.appendChild($img)
     $parent.appendChild(style)
     $parent.appendChild($layer)
-    return $layer
+    $parent.appendChild($img)
+    return [$layer, $img]
   }
 
   function setStyle(signColor, borderColor, borderWidth) {
@@ -96,7 +133,13 @@ window.grendCAD = (function grendCAD() {
     initFloor = floor
 
     loadScript(function () {
-      let $layer = loadDOM($parent)
+      let [$layer, $img] = loadDOM($parent)
+
+      $layer.addEventListener('click', () => {
+        console.log(12)
+        $img.src = './images/map_2.png'
+        $img.style.display = $img.style.display === 'block' ? 'none' : 'block'
+      })
 
       $layer.style.visibility = 'hidden'
       window.cad = structureCAD({
@@ -126,3 +169,19 @@ window.grendCAD = (function grendCAD() {
     })
   }
 })()
+
+$.ajax({
+  url: g_Prefix + 'data/' + window.number + '/someData.json' + '?' + Date.now(),
+  method: 'GET',
+  success(data) {
+    if (!data.showCad) return
+
+    $.ajax({
+      url: '//super.4dage.com/data/' + window.number + '/floor.json',
+      method: 'GET',
+      success(res) {
+        grendCAD(res, document.documentElement, data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
+      }
+    })
+  }
+})

Scene/public/showa/js/loadCAD.js

@@ -38,6 +38,7 @@ window.grendCAD = (function grendCAD() {
     let style = document.createElement('style')
     style.innerHTML = `
       .cad {
+        cursor: pointer;
         position: absolute;
         right: 20px;
         top: 16px;
@@ -45,6 +46,11 @@ window.grendCAD = (function grendCAD() {
         height: 200px;
         background: rgba(0, 0, 0, .3);
         border-radius: 5px; 
+        background-image: url('./images/map_1.png');
+        background-size: 100% 100%;
+        path {
+          opacity: 0;
+        }
         g.sign>path {
           opacity: 1;
         }
@@ -57,7 +63,7 @@ window.grendCAD = (function grendCAD() {
 
       .img {
         display: none;
-        width: 60%;
+        width: 35%;
         object-fit: cover;
         position: fixed;
         top: 50%;
@@ -75,6 +81,11 @@ window.grendCAD = (function grendCAD() {
             height: 100px;
             background: rgba(0, 0, 0, .3);
             border-radius: 5px;
+            background-image: url('./images/map_1.png');
+            background-size: 100% 100%;
+            path {
+              opacity: 0;
+            }
             g.sign>path {
               opacity: 1;
             }
@@ -124,11 +135,11 @@ window.grendCAD = (function grendCAD() {
     loadScript(function () {
       let [$layer, $img] = loadDOM($parent)
 
-      // $layer.addEventListener('click', () => {
-      //   console.log(12)
-      //   $img.src = './images/map_2.png'
-      //   $img.style.display = $img.style.display === 'block' ? 'none' : 'block'
-      // })
+      $layer.addEventListener('click', () => {
+        console.log(12)
+        $img.src = './images/map_2.png'
+        $img.style.display = $img.style.display === 'block' ? 'none' : 'block'
+      })
 
       $layer.style.visibility = 'hidden'
       window.cad = structureCAD({

Scene/src/pages/A0base/index.tsx

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
-import isMobile from '../../utils/isMobile'
+import React from 'react'
 import A1home from '../A1home'
-import styles from './index.module.scss'
+// import styles from './index.module.scss'
 function A0base() {
-  const [show, setShow] = useState(true)
   return (
     <>
       {/* 初始封面 */}