右侧数据滚动调整

src/assets/scss/common.scss

@@ -132,6 +132,7 @@ body {
 }
 .dv-scroll-board{
     .row-item{
+        overflow: hidden;
         &:hover{
             transform: scale(1.05);
             // transform：scaleZ(5);
@@ -214,7 +215,8 @@ body {
         font-size: 18px;
         // height: 50px;
         // line-height: 50px;
-        color: var(--main-color);
+        // color: var(--main-color);
+        color: #016262;
         background: url(../img/xiaoban-bg.png) no-repeat;
         background-size: 100% 100%;
         &::-webkit-input-placeholder {

src/views/index.vue

@@ -2,9 +2,9 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: wangcc 1053578651@qq.com
- * @LastEditTime: 2022-10-30 16:35:16
- * @FilePath: \castgroup_bigscreen\src\views\index.vue
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-10-31 11:05:53
+ * @FilePath: \ntbigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
 <template>
@@ -83,7 +83,7 @@
       </div>
       <div class="right_xiaoban">
         <div class="tab-box" v-if="showxiaoban">
-          <div class="tab-btn" :class="{ tabActive: cur == index }" @click="tabLink(index)" v-for="(item, index) in tabData"
+          <div class="tab-btn" :class="classFunc(index)" @click="tabLink(index)" v-for="(item, index) in tabData"
             :key="index">
             <span class="tab-span">{{ item.name }}</span>
           </div>
@@ -555,7 +555,7 @@ export default {
             ]);
           });
           this.scrollBoardKey = Date.now();
-          this.$refs.scrollBoard.updateRows(this.scrollPeojectConfig.data);
+          this.$refs.scrollProjectBoard.updateRows(this.scrollPeojectConfig.data);
 
           // console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
           // this.scrollBoardConfig = res.data;
@@ -1188,6 +1188,12 @@ export default {
     },
     tabLink(e) {
       this.cur = e;
+    },
+    classFunc(index){
+      if(this.cur==index){
+        return `active active${index}`
+      }
+      
     }
   }
 };
@@ -1198,43 +1204,47 @@ export default {
 
 .tab-box {
   // background-color: rgba(1, 33, 35, 0.7);
-  height: 36px;
+  // background: linear-gradient(90deg, rgba(0,99,113,0.9) 0%, #00ADAF 54%, rgba(0,50,57,0.9) 100%);
+  background-color: rgba(0, 161, 173, 0.2);
+  box-shadow: inset 0px -2px 9px -3px rgba(0,250,253,0.4);
   width: 100%;
-  // margin-left: auto;
-  display: flex;
-  justify-content: left;
-  align-items: center;
 
   .tab-btn {
-    width: 50%;
-    background-color: rgba(0, 69, 70, 0.6);
-    border: 1px solid;
-    border-color: rgba(0, 252, 255, 0.24);
-    height: 32px;
-    line-height: 32px;
+    float: left;
+    width: 148px;
+    height: 46px;
+    line-height: 46px;
     text-align: center;
     color: rgba(255, 255, 255, 0.6);
 
+    &:first-of-type{
+      text-indent: -10px;
+    }
     cursor: pointer;
+    &.active0{
+      background: url(../assets/img/tab-btn-first.png) no-repeat;
+    }
+    &.active1{
+      background: url(../assets/img/tab-btn-center.png) no-repeat;
+      transform:translateX(-22px);
+    }
+    &.active{
+      background-size: 100%;
+      color: #00fafd;
+    }
 
     .tab-span {
       display: inline-block;
     }
   }
-
-  .tabActive {
-    background-image: linear-gradient(rgba(0, 251, 255, 0.2) 6%,
-        transparent,
-        rgba(0, 251, 255, 0.2) 96%);
-    color: #00fafd;
-  }
 }
 
 .tab-class-search {
-  display: flex;
+  // display: flex;
   height: 40px;
   width: 100%;
   align-items: center;
+  margin: 0 15px;
 }
 
 /deep/ .row-item {
@@ -1252,7 +1262,7 @@ export default {
   display: flex;
     flex-direction: column;
     /* justify-content: right; */
-    width: 59%;
+    // width: 59%;
     float: right;
 }
 </style>