布局修改 页面滚动

tengsx

2023-04-06 ae20e58e9ca06f75a94120c9d88923376f7df647

布局修改 页面滚动

 src/styles/base/index.scss

@@ -14,8 +14,8 @@
    font-size: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    background: $bg-one-color;

    // background: $bg-one-color;
    background-color: #050E23;
    // scrollbar-width: none;
    // -ms-overflow-style: none;
}

 src/views/layout/index.vue

@@ -12,17 +12,19 @@
    <div class="wrapper">
        <map-box ref="modalForm">
            <!-- 主体内容区域 -->
            <div slot="mainContent" class="main-content" id="MainContent">
                <div class="main-header">
                    <div class="title">
                        湖北省水库大坝监测平台
                    </div>
                </div>
            <div slot="mainContent" id="MainContent">
                <div  class="main-content">
                  <div class="main-header">
                      <div class="title">
                          湖北省水库大坝监测平台
                      </div>
                  </div>

                <div class="main-container">
                    <!-- 地图区域 -->
                    <router-view ref="target-name"></router-view>
                  <div class="main-container">
                      <!-- 地图区域 -->
                      <router-view ref="target-name"></router-view>

                  </div>
                </div>
            </div>
        </map-box>
@@ -47,17 +49,22 @@
    position: relative;
    width: 100%;
    height: 100%;

    .main-content {
        position: fixed;
    #MainContent {
      position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        overflow-y: auto;
    }
    .main-content {
        
        height: 1080px;
        background:
            url(/images/header.png) no-repeat center / 100% 100%,
            url(/images/pro-bg.png) no-repeat center / 100% 100%;
        z-index: 99;
       
        pointer-events: none;

        .main-header {
@@ -82,6 +89,7 @@
                font-weight: 400;
                color: #EFF8FC;
                line-height: 22px;
                text-align: center;
                // opacity: 0.89;
                // text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);