diff --git a/css/demo.css b/css/demo.css index 6d65b77..97b5f02 100644 --- a/css/demo.css +++ b/css/demo.css @@ -92,9 +92,9 @@ body{ height: 40%; } .screen-btn{ - position: fixed; - left: -50px; - top: 70px; + position: absolute; + right: 15px; + top: 15px; color: #fff; z-index: 100; cursor: pointer; @@ -365,4 +365,10 @@ body{ } .voice-btn a:hover{ color: rgba(255,255,255,1); +} + +.map-container{ + position: relative; + width: 100%; + height: 100vh; } \ No newline at end of file diff --git a/css/flexleft.css b/css/flexleft.css index 871fe5b..5d5c1c9 100644 --- a/css/flexleft.css +++ b/css/flexleft.css @@ -1,12 +1,12 @@ .fixed-left{ - position: fixed; + position: absolute; top: 0px; bottom: 0; left: -400px; width: 400px; - padding-top: 60px; z-index: 40; transition: width .3s; + height: 100%; } .fixed-left::before{ @@ -21,6 +21,11 @@ .fixed-left.active{ width: 100%; + position: fixed; + top: 60px; + left: 0px; + height: 100%; + } /* .fixed-left.active .left_echart{ @@ -62,6 +67,10 @@ transition: .3s; box-sizing: border-box; } +.map_header.active{ + opacity: 0; + z-index: 49; +} .logo_txt{ margin-left: 15px; @@ -166,9 +175,9 @@ .left_echart{ - position: fixed !important; + position: absolute !important; height: 60%; - left: -100%; + left: 0; top: 0; width: 400px; z-index: 50; diff --git a/css/slider.css b/css/slider.css index 731a3c5..572c221 100644 --- a/css/slider.css +++ b/css/slider.css @@ -3,7 +3,7 @@ .slider_one_big_picture { position: relative; width: 100%; - height: 100%; + height: 40%; margin: 0 auto; user-select: none; /*overflow: hidden;*/ diff --git a/map.html b/map.html index c26d60b..cd86761 100755 --- a/map.html +++ b/map.html @@ -43,24 +43,6 @@ - -
  • @@ -115,43 +84,47 @@
    -
    -
    -
    - +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    + + +
    +
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - -
    - + + +
    -
    + @@ -587,6 +560,7 @@ latOrLonSearch(); }) + // 左侧滑屏结束后调用该事件，重新渲染知识图谱 // $('.fixed-left').on('transitionend', function () { // console.log('滑屏结束时，调用渲染知识图谱');