From c5864725606384e1172bac4eb856ed645c55ce21 Mon Sep 17 00:00:00 2001 From: yuyu <1981343953@qq.com> Date: 星期五, 18 八月 2023 17:07:03 +0800 Subject: [PATCH] 8.18 bug修复 --- src/views/experiment/passRateStatistics/index.vue | 40 ++++++++++++++++++++++++++++++++-------- 1 files changed, 32 insertions(+), 8 deletions(-) diff --git a/src/views/experiment/passRateStatistics/index.vue b/src/views/experiment/passRateStatistics/index.vue index 2c3d3cd..8783d00 100644 --- a/src/views/experiment/passRateStatistics/index.vue +++ b/src/views/experiment/passRateStatistics/index.vue @@ -32,6 +32,7 @@ </div> </el-form> </div> + <div class="top-bar-copy"></div> <div class="chart-content"> <div class="qualified-wrapper"> <div style="margin-left: 20px;padding:20px 0px;font-size:18px">妫�娴嬫壒娆″悎鏍肩巼缁熻</div> @@ -60,6 +61,18 @@ </template> <script> +// 娣诲姞婊氬姩鐩戝惉浜嬩欢 +window.addEventListener('scroll', function() { + var topBar = document.querySelector('.top-bar'); + var scrollTop = window.pageYOffset || document.documentElement.scrollTop; + + if (scrollTop > 0) { + topBar.classList.add('fixed'); + } else { + topBar.classList.remove('fixed'); + } +}) + import * as echarts from 'echarts' export default { data(){ @@ -245,19 +258,21 @@ <style lang="scss" scoped> .content-main{ - height: 100%; + height:100%; + width: 100%; .top-bar{ - position: fixed; - width: 93.8%; + position: absolute; + width: 99%; top: 0; left:0; z-index: 999; - margin-top: 0.48rem; - margin-left: 0.56rem; + margin-top: 5px; + margin-left: 9.5px; background-color: #fff; display: flex; justify-content: space-between; padding: 5px 24px 0px 24px; + transition: position 0.3s ease; .el-form{ width: 100%; .chooseMaterialBtn{ @@ -274,16 +289,25 @@ display:flex; justify-content:end; margin-right: 20px; - margin-top: -30px; + margin-top: -40px; margin-bottom: -10px; } } + .top-bar.fixed { + position: fixed; + top: 0.45rem; + left: 0.52rem; + width:93.8%; + } + .top-bar-copy{ + width: 100%; + height: 12vh; + } .chart-content{ margin: 0px -15px; - overflow-y:auto; margin-bottom: 60px; .qualified-wrapper{ - margin-top: 14vh; + // margin-top: 14vh; background-color: #fff; width: 100%; height:50vh; -- Gitblit v1.9.3