初步修改完样式

web/src/views/tab3/index.vue

@@ -28,7 +28,10 @@
     </div>
     <!-- 右侧内容 -->
     <!-- 没有数据时 -->
-    <div class="hint" v-if="myArr.length === 0">暂 无 数 据</div>
+    <div class="hint" v-if="myArr.length === 0">
+      <img src="@/assets/img/nullData.png" alt="">
+      <p>暂无查询数据</p>
+    </div>
     <div class="right" v-else>
       <div class="row" v-for="item in myArr" :key="item.id">
         <!-- 模型/视频 -->
@@ -458,13 +461,19 @@ export default {
     }
   }
   .hint {
-    font-size: 36px;
-    min-width: 1200px;
-    flex: 1;
-    height: 825px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: block !important;
+  height: 500px !important;
+  &>img{
+    margin: 200px auto 30px;
+    display: block;
+    width: 150px;
+    height: 150px;
+  }
+  &>p{
+    text-align: center;
+    font-size: 18px;
+    color: #AC1D29;
+  }  
   }
   .right {
     padding: 0 200px;

web/src/views/tab4/audio.vue

@@ -4,7 +4,7 @@
     <div class="audiocon">
       <!-- 左侧按钮 -->
       <div class="leftBtn">
-        <div class="left" @click="$emit('sonCutMu','left')"></div>
+        <div class="left" @click="$emit('sonCutMu', 'left')"></div>
         <div class="play">
           <img
             @click="bofang"
@@ -14,7 +14,7 @@
             alt=""
           />
         </div>
-        <div class="right" @click="$emit('sonCutMu','right')"></div>
+        <div class="right" @click="$emit('sonCutMu', 'right')"></div>
       </div>
       <div class="adcon">
         <div class="titleTxt">{{ title }}</div>
@@ -61,6 +61,8 @@ export default {
         this._audio.pause();
         this.isPlay = false;
       }
+      // 传给父组件控制唱片样式
+      this.$emit("musicCd", this.isPlay);
     },
     transTime(time) {
       var duration = parseInt(time);
@@ -124,13 +126,15 @@ export default {
 
       $("#audioTag").on("ended", () => {
         // console.log('音乐播放完毕');
-        this.$emit('sonCutMu','right')
+        this.$emit("sonCutMu", "right");
         this.audioEnded();
       });
     });
   },
   activated() {
     this.isPlay = this.isMobile;
+    // 传给父组件控制唱片样式
+    this.$emit("musicCd", this.isPlay);
   },
 };
 </script>
@@ -175,7 +179,7 @@ export default {
     height: 100%;
     .adcon {
       .titleTxt {
-        letter-spacing:2px;
+        letter-spacing: 2px;
         position: absolute;
         left: 5px;
         top: -20px;
@@ -208,7 +212,7 @@ export default {
           cursor: pointer;
           overflow: hidden;
           position: absolute;
-          background-color: rgba(237, 211, 176, .5);
+          background-color: rgba(237, 211, 176, 0.5);
           top: 50%;
           transform: translateY(-50%);
           border-radius: 12px;
@@ -224,7 +228,7 @@ export default {
           left: 0;
           height: 5px;
           cursor: pointer;
-          background-color: #EDD3B0;
+          background-color: #edd3b0;
           top: 50%;
           transform: translateY(-50%);
 

web/src/views/tab4/tab4-1.vue

@@ -178,12 +178,14 @@ export default {
       }
     }
     .active {
-      .video_name {
-        display: none;
-      }
-
-      .moveShow {
-        display: block;
+      border: 2px solid #b9412e;
+      &:hover{
+        .moveShow{
+          display: none;
+        }
+        .video_name {
+          display: block;
+        }
       }
     }
   }

web/src/views/tab4/tab4-2.vue

@@ -23,7 +23,10 @@
         <p :title="item.name">{{ item.name }}</p>
       </div>
     </div>
-    <div class="tab4-2 conNull" v-else>暂 无 数 据</div>
+    <div class="tab4-2 conNull" v-else>
+      <img src="@/assets/img/nullData.png" alt="">
+      <p>暂无查询数据</p>
+    </div>
     <!-- 分页 -->
     <div class="paging">
       <el-pagination
@@ -174,11 +177,19 @@ export default {
 </script>
 <style lang='less' scoped>
 .conNull {
-  display: flex;
-  font-size: 30px;
-  align-items: center;
-  justify-content: center;
-  color: #b9412e !important;
+  display: block !important;
+  height: 500px !important;
+  &>img{
+    margin: 100px auto 30px;
+    display: block;
+    width: 150px;
+    height: 150px;
+  }
+  &>p{
+    text-align: center;
+    font-size: 18px;
+    color: #AC1D29;
+  }
 }
 .tab4-2 {
   position: relative;

web/src/views/tab4/tab4-3.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="tab4-3" v-if="musicList.length !== 0">
     <div class="right">
-      <div class="right_img"></div>
+      <!-- 唱片 -->
+      <div class="right_img" :class="{ musciPlay: musicCdShow }">
+        <img class="cd" src="../../assets/img/musicC.png" alt=""/>
+        <img class="hk" src="../../assets/img/musicH.png" alt="" />
+      </div>
       <div class="right_top">
         <!-- 歌词 -->
         <div class="title">{{ myObj.name }}</div>
@@ -12,6 +16,7 @@
           :audioSrc="baseURL + myObj.filePath"
           :title="myObj.name"
           @sonCutMu="sonCutMu"
+          @musicCd="musicCd"
         />
       </div>
     </div>
@@ -54,6 +59,8 @@ export default {
       baseURL: "",
       musicList: [],
       myObj: {},
+      // 控制唱片的样式
+      musicCdShow: true,
     };
   },
   // 监听属性 类似于data概念
@@ -74,6 +81,8 @@ export default {
       this.audioInd = index;
       // 记录访问量
       await webVisit("music", id);
+      // 唱片播放
+      this.musicCdShow=true
     },
     //子组件传过来的上一首下一首方法
     sonCutMu(val) {
@@ -85,6 +94,10 @@ export default {
         else this.audioInd++;
       }
     },
+    // 子组件传过来的控制唱片样式
+    musicCd(val) {
+      this.musicCdShow = val;
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -191,8 +204,41 @@ export default {
     flex: 1;
     display: flex;
     .right_img {
+      position: relative;
       width: 270px;
-      background: url('../../assets/img/musicC.png') no-repeat center center;
+      .cd {
+        display: block;
+        margin: 172px auto 0;
+      }
+      .hk {
+        position: absolute;
+        left: 26px;
+        top: 150px;
+        transition: all .3s;
+        transform: rotate(-30deg);
+        transform-origin: left;
+      }
+    }
+    .musciPlay {
+      .hk {
+        transform: rotate(0);
+      }
+
+      @-webkit-keyframes rotation {
+        from {
+          -webkit-transform: rotate(0deg);
+        }
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+      .cd {
+        -webkit-transform: rotate(360deg);
+        animation: rotation 1.4s linear infinite;
+        -moz-animation: rotation 1.4s linear infinite;
+        -webkit-animation: rotation 1.4s linear infinite;
+        -o-animation: rotation 1.4s linear infinite;
+      }
     }
     .right_top {
       overflow-y: auto;
@@ -223,7 +269,7 @@ export default {
       left: 0;
       width: 100%;
       height: 70px;
-      background-color: rgba(0,0,0,.6);
+      background-color: rgba(0, 0, 0, 0.6);
     }
   }
 }

web/src/views/tab4/tab4-4.vue

@@ -39,7 +39,10 @@
         </div>
       </div>
     </div>
-    <div class="tab4-4 conNull" v-else>暂 无 数 据</div>
+    <div class="tab4-4 conNull" v-else>
+      <img src="@/assets/img/nullData.png" alt="">
+      <p>暂无查询数据</p>
+    </div>
     <!-- 分页 -->
     <div class="paging" v-show="!details">
       <el-pagination
@@ -164,12 +167,20 @@ export default {
 }
 
 .conNull {
-  display: flex;
-  font-size: 30px;
-  align-items: center;
-  justify-content: center;
-  color: #b9412e !important;
-}
+  display: block !important;
+  height: 500px !important;
+  &>img{
+    margin: 100px auto 30px;
+    display: block;
+    width: 150px;
+    height: 150px;
+  }
+  &>p{
+    text-align: center;
+    font-size: 18px;
+    color: #AC1D29;
+  }
+  }
 .tab4-4 {
   position: relative;
   /*修改提示文字的颜色*/

web/src/views/tab4/tab4-5.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="tab4-5">
-      <div class="search" @keyup.enter="mySearch">
+      <div class="search" @keyup.enter="mySearch" v-show="!details">
         <el-input
           placeholder="姓名/学籍号"
           suffix-icon="el-icon-search"
           v-model="formData.searchKey"
         >
         </el-input>
+        <span class="btn" @click="mySearch"></span>
     </div>
     <!-- 内容 -->
-    <div class="conten conNull" v-if="baseTxt && myArr.length === 0">
-      没有此学员！请确认后重新输入！
+    <div class="conten conNull" v-if="myArr.length === 0">
+      <img src="@/assets/img/nullData.png" alt="">
+      <p>暂无查询数据</p>
     </div>
-    <div class="conten" v-else>
+    <div class="conten" v-else v-show="!details">
       <div
         class="row"
         v-for="item in myArr"
@@ -27,7 +29,7 @@
     <!-- 点击领导详情 -->
     <div class="details" v-show="details">
       <div class="left">
-        <div class="el-icon-arrow-left" @click="details = false"></div>
+        <div class="el-icon-arrow-left" @click="details = false">返 回</div>
         <img :src="baseURL + txtObj.thumb" alt="" v-if="txtObj.thumb" />
         <p>{{ txtObj.name }}</p>
       </div>
@@ -120,18 +122,26 @@ export default {
 </script>
 <style lang='less' scoped>
 /deep/::-webkit-scrollbar-thumb {
-  background-color: #b9412e !important;
-  outline: 1px solid #b9412e !important;
+  background-color: #D8B581 !important;
+  outline: 1px solid #D8B581 !important;
   outline-offset: 0;
 }
 
 .conNull {
-  padding-bottom: 200px;
-  display: flex;
-  font-size: 30px;
-  align-items: center;
-  justify-content: center;
-  color: #b9412e !important;
+  width: 100%;
+  display: block !important;
+  height: 500px !important;
+  &>img{
+    margin: 100px auto 30px;
+    display: block;
+    width: 150px;
+    height: 150px;
+  }
+  &>p{
+    text-align: center;
+    font-size: 18px;
+    color: #AC1D29;
+  }
 }
 .tab4-5 {
   position: relative;
@@ -208,37 +218,52 @@ export default {
   }
   }
   .conten {
-    margin-top: 50px;
+    padding-right: 80px;
+    padding-bottom: 30px;
+    margin-top: 30px;
     height: 550px;
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
     overflow-y: auto;
     .row {
+      box-shadow: 1px 1px 2px 2px #ccc;
+      background-color: #fff;
       cursor: pointer;
-      margin: 20px 64px 10px 0;
-      width: 260px;
-      height: 316px;
+      margin: 20px 55px 10px 0;
+      width: 190px;
+      height: 270px;
 
       & > img {
         object-fit: cover;
-        border: 2px solid #b9412e;
-        width: 260px;
-        height: 280px;
+        width: 190px;
+        height: 233px;
       }
       & > p {
+        padding: 0 5px;
+        height: 37px;
+        line-height: 37px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         font-size: 18px;
         color: #b9412e;
-        margin-top: 12px;
         text-align: center;
       }
+      &:hover{
+        background-color: #be1220;
+        border: 2px solid #be1220;
+        & > img{
+          width: 186px;
+          height: 229px;
+        }
+        & > p{
+          color: #fff;
+        }
+      }
+    }
+    .row:nth-of-type(6n) {
+      margin-right: 0;
     }
-    // .row:nth-of-type(5n) {
-    //   margin-right: 0;
-    // }
   }
   .paging {
     position: absolute;
@@ -247,41 +272,43 @@ export default {
     transform: translateX(-50%);
   }
   .details {
-    background-color: #fff;
     z-index: 9999;
     position: absolute;
-    right: 0;
+    left: 0;
     top: 0;
     display: flex;
     // width: calc(100% - 160px);
     width: 100%;
-    height: 100%;
-    padding: 0px 0 0 80px;
+    height: 620px;
+    padding: 30px 200px 0 200px;
     color: #707070;
     .left {
       margin-right: 100px;
-      padding-top: 50px;
+      padding-top: 20px;
       width: 200px;
       height: auto;
       & > div {
-        margin-left: -12px;
         cursor: pointer;
-        font-size: 50px;
+        font-size: 20px;
         margin-bottom: 30px;
+        color: #BE1220;
       }
       & > img {
-        width: 200px;
-        height: 230px;
+        width: 210px;
+        height: 300px;
         object-fit: cover;
       }
       & > P {
+        font-weight: 700;
+        font-size: 20px;
         margin-top: 8px;
         text-align: center;
+        color: #333333;
       }
     }
     .right {
       flex: 1;
-      padding-top: 100px;
+      overflow-y: auto;
       & > div {
         margin-top: 30px;
         width: 1000px;
@@ -304,8 +331,6 @@ export default {
       .intro {
         padding-top: 15px;
         margin-top: 0px;
-        height: 450px;
-        overflow-y: auto;
         border-bottom: none;
         font-size: 16px;
         /deep/p {