添加点击事件

src/components/common/Music.vue

@@ -20,8 +20,8 @@
         </header>
         <div class="content">
             <div class="tabs">
-                <div class="tab active">热门</div>
-                <div class="tab">最新</div>
+                <div class="tab active" @click="toggleTab($event,0)">热门</div>
+                <div class="tab" @click="toggleTab($event,1)">最新</div>
             </div>
             <div class="video-container" v-for="(item,index) of videos" v-bind:style="{'height':width/3*1.2+'px'}">
                 <video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
@@ -47,7 +47,21 @@
         },
         computed: {},
         methods: {
-            back(){
+            toggleTab(e, index) {
+                if (!e.target.classList.contains('active')) {
+                    e.target.classList.toggle('active')
+                }
+
+                if (index === 1) {
+                    let pre = e.target.previousElementSibling
+                    pre.classList.remove('active')
+                } else {
+                    let pre = e.target.nextElementSibling
+                    pre.classList.remove('active')
+                }
+
+            },
+            back() {
                 window.history.back()
             }
         }
@@ -78,6 +92,7 @@
                 .logo {
                     width: 120px;
                     height: 100%;
+                    border-radius: 4px;
                 }
 
                 .info {
@@ -119,23 +134,26 @@
         }
 
         .content {
-            .tabs{
+            .tabs {
                 height: 40px;
                 display: flex;
                 align-items: center;
                 color: #fff;
-                .tab{
+
+                .tab {
                     height: 90%;
                     width: 50%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     margin: 10px;
-                    &.active{
+
+                    &.active {
                         border-bottom: 3px solid yellow;
                     }
                 }
             }
+
             .video-container {
                 width: 33%;
                 float: left;
@@ -146,8 +164,9 @@
                 video {
                     width: 100%;
                 }
-                .first{
-                    padding:0 5px;
+
+                .first {
+                    padding: 0 5px;
                     border-radius: 4px;
                     position: absolute;
                     top: 10px;

src/components/home/Home2.vue

@@ -45,12 +45,12 @@
                                     </div>
                                     <img src="../../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="goMusic()">
                                 </div>
-                                <div class="content ml10p">
-                                    <div class="name mb10p">@TTentau</div>
+                                <div class="content ml10p" @click.stop="goUserInfo()">
+                                    <div class="name mb10p" >@TTentau</div>
                                     <div class="description mb10p">
                                         吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
                                     </div>
-                                    <div class="music mb10p">
+                                    <div class="music mb10p" @click.stop="goMusic()">
                                         <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
                                         <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
                                             光年之外
@@ -149,6 +149,7 @@
             this.width = document.body.clientWidth
         },
         methods: {
+
             goMusic(){
                 this.$router.push('/music')
             },

src/components/user/Other.vue

@@ -64,13 +64,13 @@
                             </div>
                         </div>
                         <div class="tabset">
-                            <div class="tab active">
+                            <div class="tab active" @click="toggleTab($event,0)">
                                 <span>作品1</span>
                             </div>
-                            <div class="tab">
+                            <div class="tab" @click="toggleTab($event,1)">
                                 <span>动态6</span>
                             </div>
-                            <div class="tab">
+                            <div class="tab" @click="toggleTab($event,2)">
                                 <span>喜欢6</span>
                             </div>
                         </div>
@@ -91,7 +91,7 @@
 </template>
 
 <script>
-    import Footer from '../common/Footer';
+    import Footer from '../common/Footer'
 
     export default {
         name: "Other",
@@ -102,12 +102,21 @@
             return {
                 height: 0,
                 width: 0,
-                videos: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
+                videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
             }
         },
         created() {
-            this.height = window.screen.height;
-            this.width = window.screen.width;
+            this.height = window.screen.height
+            this.width = window.screen.width
+        },
+        methods: {
+            toggleTab(e, index) {
+                let childNodes  = e.target.parentElement.childNodes
+                childNodes.forEach(function (item) {
+                    item.classList.remove('active')
+                })
+                e.target.classList.add('active')
+            },
         }
     }
 </script>
@@ -115,25 +124,30 @@
 <style scoped lang="scss">
     .me {
         color: white;
+
         .header {
             background: gray;
+
             .top {
                 /*height: 30%;*/
                 height: 100px;
                 display: flex;
                 justify-content: space-between;
                 background: url("../../assets/img/icon/top-bg.jpg");
+
                 img {
                     border-radius: 50%;
                     padding: 5px;
                     background: #524a4a;
                     height: 20px;
                     width: 20px;
+
                     &:nth-child(1) {
                         transform: rotate(180deg);
                     }
                 }
             }
+
             .bottom {
                 background-image: url("../../assets/img/icon/head-image.jpeg");
                 background-position: center;
@@ -144,6 +158,7 @@
                     height: 100%;
                     background-color: #2e3244ed;
                     position: relative;
+
                     .head {
                         width: 100%;
                         right: 10px;
@@ -152,6 +167,7 @@
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
+
                         .head-image {
                             background: black;
                             padding: 5px;
@@ -159,6 +175,7 @@
                             width: 60px;
                             height: 60px;
                         }
+
                         .my-buttons {
                             div {
                                 display: flex;
@@ -167,10 +184,12 @@
                                 border-radius: 2px;
                                 background: #676767;
                                 margin-right: 5px;
+
                                 img {
                                     padding: 6px;
                                     height: 20px;
                                 }
+
                                 span {
                                     color: #cdcdcd;
                                 }
@@ -178,26 +197,33 @@
 
                         }
                     }
+
                     .description {
                         margin-top: 60px;
                         color: white;
+
                         .number {
                             padding-bottom: 10px;
                             border-bottom: 1px solid gray;
+
                             .jrtt {
                                 float: right;
+
                                 img {
                                     height: 10px;
                                     width: 10px;
                                 }
+
                                 span {
                                     margin: 0 5px;
                                 }
                             }
                         }
+
                         .info {
                             display: flex;
                             align-items: center;
+
                             div {
                                 display: flex;
                                 align-items: center;
@@ -206,38 +232,46 @@
                                 background: #676767;
                                 margin-right: 5px;
                                 padding: 2px 4px;
+
                                 img {
                                     height: 10px;
                                     margin-right: 3px;
                                 }
+
                                 span {
                                     color: #cdcdcd;
                                 }
                             }
                         }
+
                         .heat {
                             span {
                                 margin-right: 10px;
                             }
                         }
                     }
+
                     .tabset {
                         display: flex;
                         justify-content: space-around;
+
                         .tab {
                             padding-top: 10px;
                             padding-bottom: 10px;
                             text-align: center;
                             width: 30%;
+
+                            &.active {
+                                border-bottom: 2px solid gold;
+                            }
                         }
-                        .active {
-                            border-bottom: 2px solid gold;
-                        }
+
                     }
                 }
 
             }
         }
+
         .content {
             .video-container {
                 width: 33%;
@@ -245,15 +279,18 @@
                 position: relative;
                 overflow: hidden;
                 border: .5px solid black;
+
                 video {
                     width: 100%;
                 }
+
                 .love {
                     position: absolute;
                     bottom: 10px;
                     left: 10px;
                     display: flex;
                     align-items: center;
+
                     img {
                         height: 20px;
                     }