小班滚动列表调整

src/assets/scss/common.scss

@@ -106,12 +106,48 @@ body {
     right: 10px;
 
     .scroll-board-wrap {
+        position: relative;
         margin-left: auto;
+        background-color: rgba(1,33,35,.7);
         width: 380px;
-        border-radius: 8px;
+        // border-radius: 8px;
         overflow: hidden;
-        .dv-scroll-board .header{
-            color: var(--main-color);
+        padding-top: 15px;
+        &.close{
+            height: 80px;
+            .scroll-board-01{
+                .rows{
+                    opacity: 0;
+                }
+            }
+            .inner{
+                img{
+                    transform: rotate(180deg);
+                }
+                
+            }
+        }
+        .scroll-board-01{
+            box-sizing: border-box;
+            padding: 0 15px;
+            color: #08eeff;
+            .header{
+                color: #fff;
+            }
+        }
+        .scroll-board-tool{
+            height: 40px;
+            margin: 30px 15px 0;
+            .inner{
+                position: absolute;
+                left: 15px;
+                right: 15px;
+                bottom: 0;
+                height: 40px;
+                line-height: 40px;
+                background-color: rgba(8,238,255,.1);
+                text-align: center;
+            }
         }
     }
 }

src/dataSchema/scrollBoardSchema.js

@@ -4,12 +4,12 @@
 let scrollBoardSchema = {
     header: ['小班号', '树种组成', '每亩蓄积', '小班面积'],
     data: [],
-    headerBGC: 'transparent',//表头背景色
+    headerBGC: 'rgba(8,238,255,.3)',//表头背景色
     // headerBGC:'rgba(38,80,179,1)',//表头背景色
     // oddRowBGC:'rgba(38,80,179,.5)',//奇数行背景色
     oddRowBGC: 'transparent',//奇数行背景色
-    evenRowBGC: 'transparent',//偶数行背景色	
+    evenRowBGC: 'rgba(0,175,169,.15)',//偶数行背景色	
     align: ['center', 'center', 'center', 'center'],//列对齐方式
-    rowNum: 15,//表行数	
+    rowNum: 13,//表行数	
 }
 export default scrollBoardSchema

src/views/index.vue

@@ -102,7 +102,7 @@
           <i class="el-icon-search el-input__icon" slot="suffix" @click="xiaobansearch"></i>
         </el-input>
       </div>
-      <section class="scroll-board-wrap blur-wrap">
+      <section class="scroll-board-wrap" :class="{close:showScrollBoard==true}">
         <dv-scroll-board
           :key="scrollBoardKey"
           class="scroll-board-01"
@@ -111,6 +111,9 @@
           @click="scrollBoardClick"
           :style="scrollBoardStyle"
         />
+        <div class="scroll-board-tool" @click="toggleShowScrollBoard">
+          <div class="inner"><img src="../assets/img/jiantou.png" alt=""></div>
+        </div>
       </section>
     </section>
     </dv-full-screen-container>
@@ -176,6 +179,7 @@ export default {
   },
   data() {
     return {
+      showScrollBoard:false,
       page: 1,
       // addrOptions: regionDataPlus,
       addrSelectedOptions: ['520000', ''],
@@ -190,7 +194,7 @@ export default {
       scrollBoardKey: Date.now(),
       scrollBoardStyle: {
         width: '100%',
-        height: '72vh'
+        height: '60vh'
       },
       scrollBoardConfig: scrollBoardSchema,
       page1numerical: [
@@ -782,6 +786,9 @@ export default {
     },
     scrollBoardClick(e) {
       console.log('scrollBoardClick', e);
+    },
+    toggleShowScrollBoard(){
+      this.showScrollBoard = !this.showScrollBoard;
     }
   }
 };