点击添加行内样式

src/assets/scss/common.scss

@@ -1,256 +1,255 @@
 html,
 body,
 :root {
-    --padding-left: 24px;
-    --padding-right: 24px;
-    --main-color: rgb(2, 238, 255);
-    --title-color: #58c96b;
-    --header-height: 85px;
-    --s: 6; // 轮播的个数
-    --h: 36; // 单个 li 容器的高度
-    --speed: 3s; // 单次动画的时长
+  --padding-left: 24px;
+  --padding-right: 24px;
+  --main-color: rgb(2, 238, 255);
+  --title-color: #58c96b;
+  --header-height: 85px;
+  --s: 6; // 轮播的个数
+  --h: 36; // 单个 li 容器的高度
+  --speed: 3s; // 单次动画的时长
 }
 @font-face {
-    font-family: 'Rubik';
-    src: url(../fonts/Rubik.ttf);
+  font-family: "Rubik";
+  src: url(../fonts/Rubik.ttf);
 }
 html,
 body {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 .u-m-t {
-    margin-top: 2vh;
+  margin-top: 2vh;
 }
 .u-p-t {
-    padding-top: 1vh;
+  padding-top: 1vh;
 }
 
 .page-padding-left {
-    padding-left: var(--padding-left);
+  padding-left: var(--padding-left);
 }
 
-.ntitle{
-    height: 38px;
-    line-height: 38px;
-    text-align: left;
-    // background: url(../img/ntitle.png) no-repeat;
-    // background-size: 100% 100%;
-    text-indent: 40px;
-    // margin-bottom: 10px;
+.ntitle {
+  height: 38px;
+  line-height: 38px;
+  text-align: left;
+  // background: url(../img/ntitle.png) no-repeat;
+  // background-size: 100% 100%;
+  text-indent: 40px;
+  // margin-bottom: 10px;
+}
+.addr {
+  text-align: right;
+  padding-right: 24px;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 1em;
 }
-.addr{
-    text-align: right;
-    padding-right: 24px;
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-left: 1em;
-  }
 
 // 更改下拉框颜色
-.el-select-dropdown.el-popper{
-    background-color: rgba(0,166,208,0.3);
-    border-color: var(--main-color);
-    backdrop-filter: blur(6px);
-    .el-select-dropdown__item{
-        color: #fff;
-    }
-    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-        background-color: var(--main-color);
-        color: #00292c;
-    }
-    .popper__arrow{
-        border-bottom-color: var(--main-color)!important;
-        &::after{
-            border-bottom-color: var(--main-color)!important;
-        }
+.el-select-dropdown.el-popper {
+  background-color: rgba(0, 166, 208, 0.3);
+  border-color: var(--main-color);
+  backdrop-filter: blur(6px);
+  .el-select-dropdown__item {
+    color: #fff;
+  }
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: var(--main-color);
+    color: #00292c;
+  }
+  .popper__arrow {
+    border-bottom-color: var(--main-color) !important;
+    &::after {
+      border-bottom-color: var(--main-color) !important;
     }
+  }
 }
 
 @mixin mbg($o) {
-    background-color: rgba(0, 166, 208, $o);
+  background-color: rgba(0, 166, 208, $o);
 }
 .blur-wrap {
-    // backdrop-filter: blur(6px);
-    @include mbg(0.3);
-    border: 1px solid var(--main-color);
-    border-radius: 8px;
-}
-.scroll-event{
-    height: calc( 100% - 48px );
-    // .header-item:last-child{
-    //     display: none;
-    // }
-    .row-item{
-        .ceil:last-of-type{
-            display: none;
-            flex: none;;
-        }
-        
+  // backdrop-filter: blur(6px);
+  @include mbg(0.3);
+  border: 1px solid var(--main-color);
+  border-radius: 8px;
+}
+.scroll-event {
+  height: calc(100% - 48px);
+  // .header-item:last-child{
+  //     display: none;
+  // }
+  .row-item {
+    .ceil:last-of-type {
+      display: none;
+      flex: none;
     }
+  }
 }
-.scroll-base{
-    .row-item{
-        .ceil:last-of-type{
-            display: none;
-            width: 0!important;
-            flex: none;;
-        }
-        
+.scroll-base {
+  .row-item {
+    .ceil:last-of-type {
+      display: none;
+      width: 0 !important;
+      flex: none;
     }
+  }
 }
 .left-wrap {
-    position: absolute;
-    left: calc(1vw + 1em + 48px + 20px);
-    height: calc(100vh - var(--header-height) - 24px);
-    top: calc(var(--header-height) + 24px);
-    width: 20vw;
-    min-width: 390px;
-    // padding: 15px;
-    box-sizing: border-box;
-    // display: flex;
-    // flex-direction: column;
-    .left-item{
-        background-image: url('../img/left_bac.png');
-        background-size: 100% 100%;
-        // flex: 1;
-        height: calc( ( 100vh - var(--header-height) - 24px - 50px ) / 3 );
-        // @include mbg(0.3);
-        // border: 1px solid var(--main-color);
-        // background: rgba(11,21,17,.6);
-        // border-radius: 8px;
-        margin-bottom: 17px;
-        &.chart-wrap .ntitle{
-            margin-bottom: 10px;
-        }
+  position: absolute;
+  left: calc(1vw + 1em + 48px + 20px);
+  height: calc(100vh - var(--header-height) - 24px);
+  top: calc(var(--header-height) + 24px);
+  width: 20vw;
+  min-width: 390px;
+  // padding: 15px;
+  box-sizing: border-box;
+  // display: flex;
+  // flex-direction: column;
+  .left-item {
+    background-image: url("../img/left_bac.png");
+    background-size: 100% 100%;
+    // flex: 1;
+    height: calc((100vh - var(--header-height) - 24px - 50px) / 3);
+    // @include mbg(0.3);
+    // border: 1px solid var(--main-color);
+    // background: rgba(11,21,17,.6);
+    // border-radius: 8px;
+    margin-bottom: 17px;
+    &.chart-wrap .ntitle {
+      margin-bottom: 10px;
     }
-    // &.event-page{
-    //     width: 30vw;
-    // }
+  }
+  // &.event-page{
+  //     width: 30vw;
+  // }
 }
-.dv-scroll-board{
-    .row-item{
-        overflow: hidden;
-        &:hover{
-            transform: scale(1.05);
-            // transform：scaleZ(5);
-            box-shadow: 0 0 5px 3px rgba(1, 68, 73, 0.5);
-        }
+.dv-scroll-board {
+  .row-item {
+    overflow: hidden;
+    &:active{
+        background-color: #fff;
     }
-
+    &:hover {
+      transform: scale(1.05);
+      // transform：scaleZ(5);
+      box-shadow: 0 0 5px 3px rgba(1, 68, 73, 0.5);
+    }
+  }
 }
 .right-wrap {
-    pointer-events: none;
-    & > * {
-        pointer-events: auto;
-    }
-    position: absolute;
-    top: calc(var(--header-height) + 24px);
-    // height: calc( 100vh - var(--header-height) - 24px );
-    right: 10px;
+  pointer-events: none;
+  & > * {
+    pointer-events: auto;
+  }
+  position: absolute;
+  top: calc(var(--header-height) + 24px);
+  // height: calc( 100vh - var(--header-height) - 24px );
+  right: 10px;
 
-    .scroll-board-wrap {
-        position: relative;
-        // margin-left: auto;
-        // background-color: rgba(1,33,35,.7);
-        width: 380px;
-        // border-radius: 8px;
-        overflow: hidden;
-        padding-top: 15px;
-        &.close{
-            height: 80px;
-            .scroll-board-01{
-                .rows{
-                    opacity: 0;
-                }
-            }
-            .inner{
-                img{
-                    transform: rotate(180deg);
-                }
-                
-            }
-        }
-        .scroll-board-01{
-            height: calc( 100vh - var(--header-height) - 272px );
-            // height: 60vh;
-            box-sizing: border-box;
-            padding: 0 15px;
-            color: #08eeff;
-            .header{
-                color: #fff;
-            }
-            .rows{
-                .ceil:last-of-type{
-                    padding: 0;
-                }
-            }
-            
+  .scroll-board-wrap {
+    position: relative;
+    // margin-left: auto;
+    // background-color: rgba(1,33,35,.7);
+    width: 380px;
+    // border-radius: 8px;
+    overflow: hidden;
+    padding-top: 15px;
+    &.close {
+      height: 80px;
+      .scroll-board-01 {
+        .rows {
+          opacity: 0;
         }
-        .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;
-            }
+      }
+      .inner {
+        img {
+          transform: rotate(180deg);
         }
+      }
     }
-}
-.xiaoban{
-    margin: 10px 0;
-    width: 380px;
-    // margin-left: auto;
-    color: var(--main-color);
-     .el-input .el-input__inner{
-        border: none;
-        font-size: 18px;
-        // height: 50px;
-        // line-height: 50px;
-        color: var(--main-color);
-        background: url(../img/xiaoban-bg.png) no-repeat;
-        background-size: 100% 100%;
-        &::-webkit-input-placeholder {
-            // color: var(--main-color);
-            color: #016262;
+    .scroll-board-01 {
+      height: calc(100vh - var(--header-height) - 272px);
+      // height: 60vh;
+      box-sizing: border-box;
+      padding: 0 15px;
+      color: #08eeff;
+      .header {
+        color: #fff;
+      }
+      .rows {
+        .ceil:last-of-type {
+          padding: 0;
         }
+      }
     }
-    .el-input__icon{
-        color: var(--main-color);
-        font-size: 24px;
+    .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, 0.1);
+        text-align: center;
+      }
     }
-    .title{
-        white-space: nowrap;
-        font-size: 18px;
+  }
+}
+.xiaoban {
+  margin: 10px 0;
+  width: 380px;
+  // margin-left: auto;
+  color: var(--main-color);
+  .el-input .el-input__inner {
+    border: none;
+    font-size: 18px;
+    // height: 50px;
+    // line-height: 50px;
+    color: var(--main-color);
+    background: url(../img/xiaoban-bg.png) no-repeat;
+    background-size: 100% 100%;
+    &::-webkit-input-placeholder {
+      // color: var(--main-color);
+      color: #016262;
     }
+  }
+  .el-input__icon {
+    color: var(--main-color);
+    font-size: 24px;
+  }
+  .title {
+    white-space: nowrap;
+    font-size: 18px;
+  }
 }
 .nav-wrap {
-    position: fixed;
-    left: 1vw;
-        top: calc(var(--header-height) + 24px);
-    
-    .nav-item {
-        color: var(--main-color);
-        &:not(:first-of-type) {
-            margin-top: 1vh;
-        }
+  position: fixed;
+  left: 1vw;
+  top: calc(var(--header-height) + 24px);
 
-        width: 1em;
-        background: url(../img/nav-item.png);
-        background-size: 100% 100%;
-        padding: 2vh 24px;
-        cursor: pointer;
-        &.active {
-            background-image: url(../img/nav-item-s.png);
-            color: #FFAA00;
-        }
+  .nav-item {
+    color: var(--main-color);
+    &:not(:first-of-type) {
+      margin-top: 1vh;
+    }
+
+    width: 1em;
+    background: url(../img/nav-item.png);
+    background-size: 100% 100%;
+    padding: 2vh 24px;
+    cursor: pointer;
+    &.active {
+      background-image: url(../img/nav-item-s.png);
+      color: #ffaa00;
     }
-}
+  }
+}

src/views/index.vue

@@ -2,8 +2,8 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: gcz
- * @LastEditTime: 2022-10-31 11:05:53
+ * @LastEditors: wangcc 1053578651@qq.com
+ * @LastEditTime: 2022-11-01 00:29:56
  * @FilePath: \ntbigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -14,8 +14,8 @@
     <Header></Header>
 
     <section class="nav-wrap">
-      <div class="nav-item" :class="{ active: (index + 1) == page }" v-for="(item,index) in navList" @click="navClick(index + 1)"
-        :key="index">{{ item.text }}</div>
+      <div class="nav-item" :class="{ active: (index + 1) == page }" v-for="(item,index) in navList"
+        @click="navClick(index + 1)" :key="index">{{ item.text }}</div>
     </section>
 
     <Alarm v-if="page == 6 && alarmData.length >= 1" :data="alarmData" />
@@ -102,26 +102,26 @@
             </el-input>
           </div>
         </div>
-        <section v-if="showxiaoban || showbase" class="scroll-board-wrap" :class="{ close: showScrollBoard == true }"
-        @mouseout="scrollOut">
-        <dv-scroll-board v-if="showbase" :key="scrollBoardKey" class="scroll-board-01 scroll-base"
-          :config="scrollBaseListConfig" ref="scrollBaseList" @click="scrollBaseListClick" @mouseout="baseListClick" />
-        <dv-scroll-board v-if="showxiaoban && cur == 1" :key="scrollBoardKey" class="scroll-board-01"
-          :config="scrollBoardConfig" ref="scrollBoard" @click="scrollBoardClick" @mouseout="scrollOut"
-          :style="scrollBoardStyle" />
-        <dv-scroll-board v-if="showxiaoban && cur == 0" :key="scrollBoardKey" class="scroll-board-01"
-          :config="scrollPeojectConfig" ref="scrollProjectBoard" @click="scrollProjectClick" @mouseout="scrollOut"
-          :style="scrollBoardStyle" />
-        <div class="scroll-board-tool" @click="toggleShowScrollBoard">
-          <div class="inner">
-            <img src="../assets/img/jiantou.png" alt />
+        <section v-if="showxiaoban || showbase" class="scroll-board-wrap" :class="{ close: showScrollBoard == true }">
+          <dv-scroll-board v-if="showbase" :key="scrollBoardKey" class="scroll-board-01 scroll-base"
+            :config="scrollBaseListConfig" ref="scrollBaseList" @click="scrollBaseListClick"
+            @mouseout="baseListClick" />
+          <dv-scroll-board v-if="showxiaoban && cur == 1" :key="scrollBoardKey" class="scroll-board-01"
+            :config="scrollBoardConfig" ref="scrollBoard" @click="scrollBoardClick" @mouseout="scrollOut"
+            :style="scrollBoardStyle" />
+          <dv-scroll-board v-if="showxiaoban && cur == 0" :key="scrollBoardKey" class="scroll-board-01" id="projectId"
+            :config="scrollPeojectConfig" ref="scrollProjectBoard" @click="scrollProjectClick" @mouseout="scrollOutPro"
+            :style="scrollBoardStyle" />
+          <div class="scroll-board-tool" @click="toggleShowScrollBoard">
+            <div class="inner">
+              <img src="../assets/img/jiantou.png" alt />
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
       </div>
 
 
-      
+
     </section>
     <!-- </dv-full-screen-container> -->
   </div>
@@ -1124,7 +1124,10 @@ export default {
       });
     },
     scrollProjectClick(e) {
-      console.log(e.row[4]);
+      console.log(e);
+      let proClass = document.getElementsByClassName('row-item')
+      proClass[e.rowIndex].style.background = 'rgb(4, 145, 110)';
+
       let rowId = e.row[4]
       let param = {
         courseId: rowId,
@@ -1157,8 +1160,14 @@ export default {
         });
       }
     },
-    scrollOut() {
+    scrollOut(e) {
+      console.log(e);
       this.changeSearchSmallClass({ name: false });
+
+    },
+    scrollOutPro(e) {
+      let proClass = document.getElementsByClassName('row-item')
+      proClass[e.rowIndex].style.background = '';
     },
     scrollBaseListClick(e) {
       console.log('scrollBaseListClick', e);
@@ -1189,11 +1198,11 @@ export default {
     tabLink(e) {
       this.cur = e;
     },
-    classFunc(index){
-      if(this.cur==index){
+    classFunc(index) {
+      if (this.cur == index) {
         return `active active${index}`
       }
-      
+
     }
   }
 };
@@ -1206,7 +1215,7 @@ export default {
   // background-color: rgba(1, 33, 35, 0.7);
   // 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);
+  box-shadow: inset 0px -2px 9px -3px rgba(0, 250, 253, 0.4);
   width: 100%;
 
   .tab-btn {
@@ -1217,18 +1226,22 @@ export default {
     text-align: center;
     color: rgba(255, 255, 255, 0.6);
 
-    &:first-of-type{
+    &:first-of-type {
       text-indent: -10px;
     }
+
     cursor: pointer;
-    &.active0{
+
+    &.active0 {
       background: url(../assets/img/tab-btn-first.png) no-repeat;
     }
-    &.active1{
+
+    &.active1 {
       background: url(../assets/img/tab-btn-center.png) no-repeat;
-      transform:translateX(-22px);
+      transform: translateX(-22px);
     }
-    &.active{
+
+    &.active {
       background-size: 100%;
       color: #00fafd;
     }
@@ -1257,12 +1270,21 @@ export default {
   overflow: unset;
   text-overflow: unset;
 }
-.right_xiaoban{
-  background-color: rgba(1,33,35,0.7);
+
+.right_xiaoban {
+  background-color: rgba(1, 33, 35, 0.7);
   display: flex;
-    flex-direction: column;
-    /* justify-content: right; */
-    // width: 59%;
-    float: right;
+  flex-direction: column;
+  /* justify-content: right; */
+  // width: 59%;
+  float: right;
+}
+
+.rowClass {
+  box-shadow: inset 0px 0px 31px 1px rgba(0, 250, 253, 0.4);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  border: 1px solid rgba(0, 250, 253, 1);
+  background: #04916e;
 }
 </style>