初步完善军哥嘹亮界面

web/src/views/tab4/audio.vue

@@ -2,24 +2,30 @@
   <div class="images">
     <audio id="audioTag" class="noshow" autoplay :src="audioSrc"></audio>
     <div class="audiocon">
-      <div class="adcon">
-        <div class="bar">
-          <div class="activeLine" @click="seekTime"></div>
-          <div :style="{ left: currentPosi + '%' }" class="dot"></div>
+      <!-- 左侧按钮 -->
+      <div class="leftBtn">
+        <div class="left" @click="$emit('sonCutMu','left')"></div>
+        <div class="play">
+          <img
+            @click="bofang"
+            :src="
+              require(`@/assets/images/tab4/${isPlay ? 'stop' : 'play'}.png`)
+            "
+            alt=""
+          />
         </div>
-        <img
-          @click="bofang"
-          :src="
-            require(`@/assets/images/project/${
-              isPlay ? 'zanting' : 'bofang'
-            }.png`)
-          "
-          alt=""
-        />
+        <div class="right" @click="$emit('sonCutMu','right')"></div>
+      </div>
+      <div class="adcon">
+        <div class="titleTxt">{{ title }}</div>
         <div class="time">
           <span>{{ time }}</span
           ><span> / {{ allTime }}</span>
         </div>
+        <div class="bar">
+          <div class="activeLine" @click="seekTime"></div>
+          <div :style="{ width: currentPosi + '%' }" class="dot"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -32,6 +38,9 @@ export default {
     audioSrc: {
       type: String,
     },
+    title: {
+      type: String,
+    },
   },
   data() {
     return {
@@ -115,6 +124,7 @@ export default {
 
       $("#audioTag").on("ended", () => {
         // console.log('音乐播放完毕');
+        this.$emit('sonCutMu','right')
         this.audioEnded();
       });
     });
@@ -164,12 +174,24 @@ export default {
     height: 100%;
     background-color: #c04340;
     .adcon {
-      width: 94%;
+      .titleTxt {
+        letter-spacing:2px;
+        position: absolute;
+        left: 5px;
+        top: -20px;
+        color: #fff;
+        font-size: 16px;
+      }
+      .time {
+        position: absolute;
+        right: 0;
+        top: -20px;
+      }
+      width: 85%;
       margin: 0 auto;
       position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+      bottom: 7px;
+      right: 40px;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -178,15 +200,15 @@ export default {
         position: relative;
         background: none;
         display: flex;
-        width: 80%;
+        width: 100%;
         height: 30px;
         overflow: visible;
         .activeLine {
-          height: 10px;
+          height: 5px;
           cursor: pointer;
           overflow: hidden;
           position: absolute;
-          background-color: @color;
+          background-color: #fff;
           top: 50%;
           transform: translateY(-50%);
           border-radius: 12px;
@@ -195,16 +217,27 @@ export default {
 
         @wh: 20px;
         .dot {
-          width: @wh;
-          height: @wh;
-          display: inline-block;
+          pointer-events: none;
+          border-radius: 12px;
           position: absolute;
-          z-index: 999;
-          background-color: #fff;
-          top: 50%;
-          transform: translate(-@wh*0.5, -50%);
-          border-radius: 50%;
+          top: 0;
+          left: 0;
+          height: 5px;
           cursor: pointer;
+          background-color: #fad676;
+          top: 50%;
+          transform: translateY(-50%);
+
+          // width: @wh;
+          // height: @wh;
+          // display: inline-block;
+          // position: absolute;
+          // z-index: 999;
+          // background-color: #fff;
+          // top: 50%;
+          // transform: translate(-@wh*0.5, -50%);
+          // border-radius: 50%;
+          // cursor: pointer;
         }
       }
 
@@ -224,11 +257,48 @@ export default {
           }
 
           &:last-of-type {
-            color: @color;
+            color: #fff;
           }
         }
       }
     }
+    .leftBtn {
+      cursor: pointer;
+      margin-left: 12px;
+      height: 100%;
+      display: flex;
+      width: 120px;
+      justify-content: space-around;
+      align-items: center;
+      & > div {
+        width: 18px;
+        height: 24px;
+      }
+      .left {
+        background: url("../../assets/images/tab4/12.png");
+        background-size: 100% 100%;
+      }
+      .left:hover {
+        background: url("../../assets/images/tab4/13.png");
+        background-size: 100% 100%;
+      }
+      .right {
+        background: url("../../assets/images/tab4/14.png");
+        background-size: 100% 100%;
+      }
+      .right:hover {
+        background: url("../../assets/images/tab4/15.png");
+        background-size: 100% 100%;
+      }
+      .play {
+        width: 30px;
+        height: 30px;
+        & > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
   }
 }
 

web/src/views/tab4/index.vue

@@ -2,7 +2,11 @@
 <div class='tab4'>
   <div class="conten">
       <div class="con_top">
-        <div :class="{active:imgListInd===item.url}" v-for="item in imgList" :key="item.id" @click="cutTab(item.url)">{{item.name}}</div>
+        <div :class="{active:imgListInd===item.url}" v-for="item in imgList" :key="item.id" @click="cutTab(item.url)">
+          <img :src="require('@/assets/images/tab4/4_'+item.id+'.png')" alt="" v-if="imgListInd===item.url">
+          <img :src="require('@/assets/images/tab4/4_'+item.id+'ac.png')" alt="" v-else>
+          {{item.name}}
+          </div>
       </div>
       <!-- 动态组件 -->
       <keep-alive>
@@ -78,11 +82,15 @@ export default {
       &>div {
         font-weight: 700;
         font-size: 20px;
-        text-align: center;
-        line-height: 56px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         width: 280px;
         cursor: pointer;
         color: #bc4b39;
+        &>img{
+          margin-right: 10px;
+        }
       }
       .active {
         background-color: #b9412e;

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

@@ -2,15 +2,19 @@
   <div class="tab4-3" v-if="musicList.length !== 0">
     <div class="left">
       <div class="title">歌单列表</div>
+      <div class="listCon">
       <p
         :title='item.name'
         v-for="(item, index) in musicList"
         :key="item.id"
         :class="{ active: audioInd === index }"
-        @click="cutAudio(item,index)"
+        @click="audioInd=index"
       >
-        <span>{{ index + 1 }}</span>&emsp;{{ item.name }}
+        <img src="@/assets/images/tab4/11.png" alt="" v-if="audioInd === index">
+        <span v-else>{{ index + 1 }}</span>
+        &emsp;{{ item.name }}
       </p>
+      </div>
     </div>
     <!-- <div class="right_top" :style="{'background':`url(${baseURL+myObj.thumb}) #f3ebdd no-repeat center center`}"> -->
 
@@ -21,7 +25,7 @@
         <div class="txt" v-html="myObj.description"></div>
       </div>
       <div class="right_bottom">
-        <Audio :audioSrc='baseURL+myObj.filePath'/>
+        <Audio :audioSrc='baseURL+myObj.filePath' :title='myObj.name' @sonCutMu='sonCutMu'/>
       </div>
     </div>
   </div>
@@ -45,15 +49,28 @@ export default {
     };
   },
   // 监听属性 类似于data概念
-  computed: {},
+  computed: {
+  },
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    audioInd(index){
+      this.myObj=this.musicList[index]
+      //控制被选中的音乐滚动在中间
+      const gundong = document.querySelector('.listCon')
+      gundong.scrollTo({ top: index * 40, behavior: 'smooth' })
+ }
+  },
   // 方法集合
   methods: {
-    //点击歌单列表
-    cutAudio(item,index){
-      this.audioInd=index
-      this.myObj=item
+    //子组件传过来的上一首下一首方法
+    sonCutMu(val){
+      if(val==='left'){
+        if(this.audioInd===0) this.audioInd=this.musicList.length-1
+        else this.audioInd--
+      }else {
+        if(this.audioInd===this.musicList.length-1) this.audioInd=0
+        else this.audioInd++
+      }
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -104,10 +121,14 @@ export default {
     color: #b9412e;
     width: 280px;
     height: 100%;
-    overflow-y: auto;
     background-color: #fff;
     .title {
       font-size: 28px;
+      margin-bottom: 10px;
+    }
+    .listCon{
+      height: 617px;
+      overflow-y: auto;
     }
     p {
       text-align: left;
@@ -120,10 +141,16 @@ export default {
       height: 40px;
       line-height: 40px;
       margin: 10px 0;
+      &>img{
+        margin-top: -5px;
+      }
       &:hover {
         background-color: #b9412e;
         color: #fff;
       }
+      &:first-child{
+        margin-top: 0px;
+      }
     }
     .active {
       background-color: #b9412e;
@@ -135,7 +162,8 @@ export default {
     .right_top {
       overflow-y: auto;
       padding: 15px 50px;
-      background-color: #f3ebdd;
+      background: url('../../assets/images/tab4/bg.png') #f3ebdd center center no-repeat;
+      background-size: 750px 287px;
       width: 100%;
       height: 580px;
       margin-bottom: 23px;
@@ -151,6 +179,7 @@ export default {
         font-size: 22px;
         /deep/p {
           margin: 10px 0;
+          font-size: 18px;
         }
       }
     }