添加音乐页面

package.json

@@ -9,8 +9,6 @@
         "push": "git add ./ && git commit -m 'dubug' && git push origin master"
     },
     "dependencies": {
-        "vue": "^2.6.10",
-        "vue-router": "^3.0.2"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^3.0.3",

public/index.html

@@ -10,8 +10,13 @@
     <meta name="x5-fullscreen" content="true">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>抖音</title>
+    <script crossorigin="anonymous" integrity="sha384-8t+aLluUVnn5SPPG/NbeZCH6TWIvaXIm/gDbutRvtEeElzxxWaZN+G/ZIEdI/f+y"
+            src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
+    <script crossorigin="anonymous" integrity="sha384-EnzMJi5PirMz1dgUr9a4DUHwg7e71+fxk3jLLfJn1vljGydxX8c6bdDYdPDE8224"
+            src="https://lib.baomitu.com/vue-router/3.0.2/vue-router.min.js"></script>
+
     <style>
-        body,html{
+        body, html {
             width: 100%;
             height: 100%;
             background: #2e3244;

src/App.vue

@@ -22,139 +22,4 @@
         margin: 0;
         font-family: "Microsoft Sans Serif";
     }
-    p{
-        padding: 0;
-        margin: 0;
-    }
-
-    $width: 1000;
-    @while $width > 0 {
-        .w#{$width}p {
-            width: #{$width}px !important;
-        }
-        $width: $width - 50;
-    }
-
-    $margin: 50;
-
-    @while $margin > 0 {
-        .ml#{$margin}p {
-            margin-left: #{$margin}px !important;
-        }
-        $margin: $margin - 1;
-    }
-
-    $margin: 50;
-    @while $margin > 0 {
-        .mr#{$margin}p {
-            margin-right: #{$margin}px !important;
-        }
-        $margin: $margin - 1;
-    }
-
-    $margin: 50;
-    @while $margin > 0 {
-        .mt#{$margin}p {
-            margin-top: #{$margin}px !important;
-        }
-        $margin: $margin - 1;
-    }
-
-    $margin: 50;
-    @while $margin > 0 {
-        .mb#{$margin}p {
-            margin-bottom: #{$margin}px !important;
-        }
-        $margin: $margin - 1;
-    }
-
-    $margin: 50;
-    @while $margin > 0 {
-        .m#{$margin}p {
-            margin: #{$margin}px !important;
-        }
-        $margin: $margin - 1;
-    }
-
-    $padding: 50;
-    @while $padding > 0 {
-        .pl#{$padding}p {
-            padding-left: #{$padding}px !important;
-        }
-        $padding: $padding - 1;
-    }
-
-    $padding: 50;
-    @while $padding > 0 {
-        .pr#{$padding}p {
-            padding-right: #{$padding}px !important;
-        }
-        $padding: $padding - 1;
-    }
-
-    $padding: 50;
-    @while $padding > 0 {
-        .pt#{$padding}p {
-            padding-top: #{$padding}px !important;
-        }
-        $padding: $padding - 1;
-    }
-
-    $padding: 50;
-    @while $padding > 0 {
-        .pb#{$padding}p {
-            padding-bottom: #{$padding}px !important;
-        }
-        $padding: $padding - 1;
-    }
-
-    $padding: 50;
-    @while $padding > 0 {
-        .p#{$padding}p {
-            padding: #{$padding}px !important;
-        }
-        $padding: $padding - 1;
-    }
-
-    $font: 30;
-    @while $font > 0 {
-        .f#{$font} {
-            font-size: #{$font}px;
-        }
-        $font: $font - 1;
-    }
-
-    $width: 300;
-    @while $width > 0 {
-        .w#{$width} {
-            width: percentage($width / 100);
-        }
-        $width: $width - 10;
-    }
-
-    .pull-left {
-        float: left;
-    }
-
-    .pull-right {
-        float: right;
-    }
-
-    .block {
-        display: block;
-    }
-
-    .oh {
-        overflow: hidden;
-    }
-
-    .tac {
-        text-align: center;
-    }
-
-    .red {background: red;}
-    .gold {background: gold;}
-    .green {background: green;}
-
-
 </style>

src/assets/scss/color.scss

@@ -0,0 +1,56 @@
+.c-red {
+    color: red;
+}
+
+.c-gray {
+    color: gray;
+}
+
+.c-text-notice {
+    color: #008000 !important;
+}
+
+.c-black {
+    color: black;
+}
+
+.c-text-gray {
+    color: #80808094;
+}
+
+.bg-red {
+    background: red;
+}
+
+.bg-gold {
+    background: gold;
+}
+
+.bg-green {
+    background: green;
+}
+
+.bg-white {
+    background: white;
+}
+
+.bg-gray {
+    background: gray;
+}
+
+.bg-second-gray {
+    background: #c1c1c1;
+
+}
+
+.red {
+    background: red;
+}
+
+.gold {
+    background: gold;
+}
+
+.green {
+    background: green;
+}

src/assets/scss/index.scss

@@ -0,0 +1,22 @@
+@import "variables";//一些变量
+@import "utils";//for循环生成的 margin、padding、width、height类
+@import "custom";//自定义的一些快捷css类
+@import "color";//颜色
+@import "dialog";//弹窗
+@import "layout";//布局
+
+//想自己写全局变量请到custom.scss里面写
+//想自己写全局变量请到custom.scss里面写
+//想自己写全局变量请到custom.scss里面写
+//想自己写全局变量请到custom.scss里面写
+//想自己写全局变量请到custom.scss里面写
+//想自己写全局变量请到custom.scss里面写
+//想自己写全局变量请到custom.scss里面写
+
+
+
+//使用的这个框架自带的而已样式表，改了页面会出问题
+p{
+    padding: 0;
+    margin: 0;
+}

src/assets/scss/layout.scss

@@ -0,0 +1,61 @@
+//布局常用类
+
+.d-none{
+    display: none!important;
+}
+//flex 布局常用类
+.d-flex {
+    display: flex !important;
+}
+
+.justify-content-center {
+    justify-content: center !important;
+}
+
+.justify-content-between {
+    justify-content: space-between !important;
+}
+
+.justify-content-around {
+    justify-content: space-around !important;
+}
+
+.align-items-center {
+    align-items: center !important;
+}
+
+.align-items-start {
+    align-items: flex-start !important;
+}
+
+.align-items-end {
+    align-items: flex-end !important;
+}
+
+.flex-wrap-wrap {
+    flex-wrap: wrap;
+}
+.flex-direction-column{
+    flex-direction: column;
+}
+
+
+.pull-left {
+    float: left;
+}
+
+.pull-right {
+    float: right;
+}
+
+.block {
+    display: block;
+}
+
+.oh {
+    overflow: hidden;
+}
+
+.tac {
+    text-align: center;
+}

src/assets/scss/utils.scss

@@ -0,0 +1,160 @@
+
+
+
+/*
+
+width
+
+*/
+$width: 500;
+@while $width >= 0 {
+    .w#{$width}p {
+        width: #{$width}px !important;
+    }
+    $width: $width - 10;
+}
+
+
+$width: 100;
+@while $width >= 0 {
+    .w#{$width} {
+        width: percentage($width / 100) !important;
+    }
+    $width: $width - 1;
+}
+
+/*
+
+$height
+
+*/
+$height: 500;
+@while $height >= 0 {
+    .h#{$height}p {
+        height: #{$height}px !important;
+    }
+    $height: $height - 10;
+}
+
+
+$height: 100;
+@while $height >= 0 {
+    .h#{$height} {
+        height: percentage($height / 100) !important;
+    }
+    $height: $height - 1;
+}
+
+
+
+
+
+/*
+
+margin
+
+*/
+$margin: 100;
+
+@while $margin >= 0 {
+    .ml#{$margin}p {
+        margin-left: #{$margin}px !important;
+    }
+    $margin: $margin - 1;
+}
+
+$margin: 100;
+@while $margin >= 0 {
+    .mr#{$margin}p {
+        margin-right: #{$margin}px !important;
+    }
+    $margin: $margin - 1;
+}
+
+$margin: 100;
+@while $margin >=0 {
+    .mt#{$margin}p {
+        margin-top: #{$margin}px !important;
+    }
+    $margin: $margin - 1;
+}
+
+$margin: 100;
+@while $margin >= 0 {
+    .mb#{$margin}p {
+        margin-bottom: #{$margin}px !important;
+    }
+    $margin: $margin - 1;
+}
+
+$margin: 100;
+@while $margin >= 0 {
+    .m#{$margin}p {
+        margin: #{$margin}px !important;
+    }
+    $margin: $margin - 1;
+}
+
+
+/*
+
+padding
+
+*/
+
+
+$padding: 100;
+@while $padding >= 0 {
+    .pl#{$padding}p {
+        padding-left: #{$padding}px !important;
+    }
+    $padding: $padding - 1;
+}
+
+$padding: 100;
+@while $padding >= 0 {
+    .pr#{$padding}p {
+        padding-right: #{$padding}px !important;
+    }
+    $padding: $padding - 1;
+}
+
+$padding: 100;
+@while $padding >= 0 {
+    .pt#{$padding}p {
+        padding-top: #{$padding}px !important;
+    }
+    $padding: $padding - 1;
+}
+
+$padding: 100;
+@while $padding >= 0 {
+    .pb#{$padding}p {
+        padding-bottom: #{$padding}px !important;
+    }
+    $padding: $padding - 1;
+}
+
+$padding: 100;
+@while $padding >= 0 {
+    .p#{$padding}p {
+        padding: #{$padding}px !important;
+    }
+    $padding: $padding - 1;
+}
+
+
+/*
+
+font
+
+*/
+
+$font: 40;
+@while $font >=0 {
+    .f#{$font} {
+        font-size: #{$font}px!important;
+    }
+    $font: $font - 1;
+}
+

src/components/common/Music.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class='Music'>
+        <header class="pl15p pr15p pt20p">
+            <div class="top pb20p d-flex justify-content-between">
+                <img src="../../assets/img/icon/next.svg" alt="" @click="back()">
+                <img src="../../assets/img/icon/share.svg" alt="">
+            </div>
+            <div class="bottom">
+                <img class="logo" src="../../assets/img/poster/src1-bg.png" alt="">
+                <div class="info">
+                    <div class="name">MT创作的原声</div>
+                    <div class="user">NT ></div>
+                    <div class="peoples">1人使用</div>
+                    <div class="collection">
+                        <img src="../../assets/img/icon/collect-white.svg" alt="">
+                        <span>收藏</span>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <div class="content">
+            <div class="tabs">
+                <div class="tab active">热门</div>
+                <div class="tab">最新</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>
+                <div class="no" v-if="index===1||index===2">
+                    NO. <span>{{index+1}}</span>
+                </div>
+                <span v-if="index===0" class="first">首发</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+    export default {
+        name: "Music",
+        components: {},
+        data() {
+            return {
+                videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+            }
+        },
+        created() {
+        },
+        computed: {},
+        methods: {
+            back(){
+                window.history.back()
+            }
+        }
+    }
+</script>
+
+<style scoped lang='scss'>
+    .Music {
+        header {
+            background: #454b66;
+            padding-bottom: 30px;
+
+            .top {
+                img {
+                    width: 20px;
+                    height: 20px;
+
+                    &:nth-child(1) {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+
+            .bottom {
+                display: flex;
+                height: 120px;
+
+                .logo {
+                    width: 120px;
+                    height: 100%;
+                }
+
+                .info {
+                    margin-left: 15px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+
+                    .name {
+                        font-size: 18px;
+                        color: #fff;
+                        font-weight: bold;
+                        margin-bottom: 10px;
+                    }
+
+                    .user, .peoples {
+                        margin-bottom: 5px;
+                        color: #999999;
+                    }
+
+                    .collection {
+                        display: flex;
+                        justify-content: center;
+                        height: 25px;
+                        width: 80px;
+                        align-items: center;
+                        color: #ffffff;
+                        background: #999;
+                        border-radius: 2px;
+
+                        img {
+                            margin-right: 10px;
+                            width: 15px;
+                            height: 15px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .content {
+            .tabs{
+                height: 40px;
+                display: flex;
+                align-items: center;
+                color: #fff;
+                .tab{
+                    height: 90%;
+                    width: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 10px;
+                    &.active{
+                        border-bottom: 3px solid yellow;
+                    }
+                }
+            }
+            .video-container {
+                width: 33%;
+                float: left;
+                position: relative;
+                overflow: hidden;
+                border: .5px solid black;
+
+                video {
+                    width: 100%;
+                }
+                .first{
+                    padding:0 5px;
+                    border-radius: 4px;
+                    position: absolute;
+                    top: 10px;
+                    left: 10px;
+                    background: yellow;
+                }
+
+                .no {
+                    position: absolute;
+                    color: #bdbdbd;
+                    bottom: 10px;
+                    right: 10px;
+                    font-style: italic;
+
+                    span {
+                        color: #ffffff;
+                        font-size: 20px;
+                    }
+                }
+
+            }
+        }
+    }
+</style>

src/components/home/Comment.vue

@@ -3,7 +3,7 @@
         <div class="comment f14" v-if="isCommenting">
             <div class="title mt10p">
                 <p>2.7w条评论</p>
-                <img src="../../assets/img/icon/close.svg" @click.stop="$emit('showComment')">
+                <img src="../../assets/img/icon/close.svg" @click.stop="$emit('update:is-commenting',false)">
             </div>
             <div class="items">
                 <div class="item pl5p pr15p mb5p  oh">

src/components/home/Home.vue

@@ -1,419 +0,0 @@
-<template>
-    <div id="home">
-        <swiper :options="swiperOptionh" :style="{'height':otherUserHeight+'px'}">
-            <swiper-slide>
-                <swiper :options="swiperOptionv">
-                    <swiper-slide v-for="(item,index) in data">
-                        <div class="bg-video" v-bind:style="{'height':height+'px'}">
-                            <video :src="item.videoUrl" :poster="item.poster" ref="video" :autoplay="index == 0" loop>
-                                <p> 您的浏览器不支持 video 标签。</p>
-                            </video>
-                            <div class="float" @click="togglePlayVideo($event)">
-                                <transition name="pause">
-                                    <img src="../../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
-                                         @click.stop="togglePlayVideo($event)">
-                                </transition>
-                                <div class="toolbar mb10p">
-                                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p">
-                                    <div class="love mb15p" @click.stop="loved($event,index)">
-                                        <div>
-                                            <transition name="love">
-                                                <img src="../../assets/img/icon/love.svg" class="love-image"
-                                                     v-if="!item.isLoved">
-                                                <img src="../../assets/img/icon/loved.svg" class="love-image"
-                                                     v-if="item.isLoved">
-
-                                            </transition>
-                                            <transition name="loved">
-                                            </transition>
-                                        </div>
-                                        <span class="f14">{{item.loves}}</span>
-                                    </div>
-                                    <div class="message mb15p" @click.stop="showComment">
-                                        <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
-                                        <span class="f14">{{item.comments}}</span>
-                                    </div>
-                                    <div class="share mb35p" @click.stop="showShare">
-                                        <img src="../../assets/img/icon/share.svg" alt="" class="share-image">
-                                        <span class="f14">{{item.shared}}</span>
-                                    </div>
-                                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="music">
-                                </div>
-                                <div class="content ml10p">
-                                    <div class="name mb10p">@TTentau</div>
-                                    <div class="description mb10p">
-                                        吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
-                                    </div>
-                                    <div class="music mb10p">
-                                        <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
-                                        <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
-                                            光年之外
-                                        </marquee>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </swiper-slide>
-                </swiper>
-                <Comment v-bind:is-commenting="isCommenting"
-                         v-on:showComment='isCommenting = !isCommenting'
-                         ref="comment"
-                         :style="{'top':height-commentHeight+'px'}"/>
-                <Share v-bind:is-sharing="isSharing" ref="share" :style="{'top':height-shareHeight+'px'}"/>
-                <Footer v-bind:init-tab="1" ref="footer" :style="{'top':height-footerHeight+'px'}"/>
-            </swiper-slide>
-            <swiper-slide>
-                <Other ref="other"/>
-            </swiper-slide>
-        </swiper>
-    </div>
-</template>
-
-<script>
-    import Comment from './Comment';
-    import Other from '../user/Other';
-    import Message from '../message/Message';
-    import Share from './Share';
-    import Footer from '../common/Footer';
-    import {swiper, swiperSlide} from 'vue-awesome-swiper';
-
-    require('swiper/dist/css/swiper.css');    //注意这里
-
-
-    let self = null;
-    export default {
-        name: "Home",
-        components: {
-            Comment,
-            Share,
-            Footer,
-            Message,
-            Other,
-            swiper,
-            swiperSlide
-        },
-        data() {
-            return {
-                currentPlayIndex: 0,
-                isPlaying: true,
-                isCommenting: false,
-                isSharing: false,
-                height: 0,
-                width: 0,
-                otherUserHeight: 0,
-                footerHeight: 0,
-                commentHeight: 0,
-                shareHeight: 0,
-                data: [
-                    {
-                        videoUrl: require('../../assets/video/吴三二的光年之外.mp4'),
-                        // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-                        videoPoster: require('../../assets/img/poster/src1-bg.png'),
-                        isLoved: false,
-                        loves: 1234,
-                        comments: 666,
-                        shared: 999
-                    },
-                    {
-                        videoUrl: require('../../assets/video/src1.mp4'),
-                        videoPoster: require('../../assets/img/poster/src1-bg.png'),
-                        isLoved: false,
-                        loves: 1234,
-                        comments: 666,
-                        shared: 999
-                    }
-                ],
-                swiperOptionh: {
-                    direction: 'horizontal',
-                    height: document.body.clientHeight,
-                    width: document.body.clientWidth,
-                    // autoHeight: true, //高度随内容变化
-                    on: {
-                        slideChange: function () {
-                            window.scrollTo(0, 0);
-                            self.isCommenting = false;
-                            self.isSharing = false;
-                            if (self.isPlaying) {
-                                let currentVideo = self.$refs.video[self.currentPlayIndex];
-                                currentVideo.pause();
-                                self.isPlaying = false;
-                            }
-                            if (this.activeIndex == 0 ) {
-                                if (!self.isPlaying){
-                                    let currentVideo = self.$refs.video[self.currentPlayIndex];
-                                    currentVideo.play();
-                                    self.isPlaying = true;
-                                }
-                            }
-                        },
-                    },
-                },
-                swiperOptionv: {
-                    direction: 'vertical',
-                    height: document.body.clientHeight,
-                    width: document.body.clientWidth,
-                    // autoHeight: true, //高度随内容变化
-                    on: {
-                        slideChange() {
-                            self.isCommenting = false;
-                            self.isSharing = false;
-
-
-                            let dateLength = self.data.length;
-                            let index = self.currentPlayIndex = this.activeIndex;
-                            console.log(index);
-                            console.log(dateLength)
-
-                            let currentVideo = self.$refs.video[index];
-                            self.isPlaying = true;
-                            currentVideo.currentTime = 0;
-                            // console.log(currentVideo);
-                            currentVideo.play();
-                            if (index == 0) {
-                                let nextVideo = self.$refs.video[index + 1];
-                                nextVideo.pause();
-                            } else if (index == dateLength - 1) {
-                                let preVideo = self.$refs.video[index - 1];
-                                preVideo.pause();
-                            } else {
-                                let nextVideo = self.$refs.video[index + 1];
-                                nextVideo.pause();
-                                let preVideo = self.$refs.video[index - 1];
-                                preVideo.pause();
-                            }
-
-                            if (index + 2 > dateLength) {
-                                self.data.push(
-                                    {
-                                        videoUrl: require('../../assets/video/src1.mp4'),
-                                        videoPoster: require('../../assets/img/poster/src1-bg.png'),
-                                        isLoved: false,
-                                        loves: 1234,
-                                        comments: 666,
-                                        shared: 999
-                                    }
-                                )
-                            }
-                            console.log(self.data);
-                        },
-                        touchStart(event) {
-                            // console.log();
-                            // event.stopPropagation();
-                            // self.isCommenting = false;
-                            // self.isSharing = false;
-                        }
-                    },
-
-                }
-            }
-        },
-        methods: {
-            togglePlayVideo(e) {
-                console.log('1');
-                console.log(this.isCommenting)
-                console.log(this.isSharing);
-                // return;
-                if (this.isSharing) {
-                    this.isSharing = false;
-                    return;
-                }
-                if (this.isCommenting) {
-                    this.isCommenting = false;
-                    return;
-                }
-                // console.log(e);
-                let el = e.target;
-                // console.log(el)
-                // console.log(el.nodeName);
-                let video = '';
-                if (el.nodeName == 'IMG') {
-                    video = el.parentNode.previousSibling;
-                } else {
-                    video = el.previousSibling;
-                }
-                if (video.paused) {
-                    video.play();
-                } else {
-                    video.pause();
-                }
-                this.isPlaying = !video.paused;
-
-                // this.isPlaying = !this.isPlaying;
-            },
-            showComment() {
-                this.isCommenting = !this.isCommenting;
-                setTimeout(() => {
-                    let comment = this.$refs.comment.$el;
-                    this.commentHeight = comment.offsetHeight;
-                    console.log(this.commentHeight);
-                    console.log(this.height);
-                }, 50);
-            },
-            showShare() {
-                this.isSharing = !this.isSharing;
-                setTimeout(() => {
-                    let share = this.$refs.share.$el;
-                    this.shareHeight = share.offsetHeight;
-                    console.log(this.shareHeight);
-                    console.log(this.height);
-                }, 50);
-            },
-            loved(e, index) {
-                let img = e.target.parentNode.childNodes[0];
-                console.log(img);
-                console.log(index);
-                this.data[index].isLoved = !this.data[index].isLoved;
-
-            }
-        },
-        created() {
-            self = this;
-            window.scrollTo(0, 0);
-            this.height = document.body.clientHeight;
-            this.width = document.body.clientWidth;
-        },
-        mounted() {
-            window.scrollTo(0, 0);
-            let other = this.$refs.other.$el;
-            let footer = this.$refs.footer.$el;
-            // let share = this.$refs.share.$el;
-            this.otherUserHeight = other.offsetHeight;
-            if (this.otherUserHeight < this.height) {
-                this.otherUserHeight = this.height;
-            }
-            this.footerHeight = footer.offsetHeight;
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    #home {
-        .bg-video {
-            position: relative;
-            background: black;
-            video {
-                width: 100%;
-                height: 100%;
-                /*position: absolute;*/
-            }
-            .float {
-                z-index: 1;
-                position: absolute;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-items: center;
-                .pause {
-                    width: 60px;
-                    height: 60px;
-                    opacity: 0.5;
-                    position: absolute;
-                    margin: auto;
-                    left: 0;
-                    top: 0;
-                    bottom: 0;
-                    right: 0;
-                }
-                .toolbar {
-                    width: 40px;
-                    position: absolute;
-                    bottom: 35px;
-                    right: 20px;
-                    color: #fff;
-                    div {
-                        text-align: center;
-                    }
-                    img {
-                        width: 90%;
-                        height: 90%;
-                    }
-                    .head-image, .music {
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 50%;
-                    }
-                    .love {
-                        img {
-
-                        }
-                    }
-                    .loved {
-                        background: red;
-                    }
-                    .music {
-                        animation: animations 4s linear forwards infinite;
-                    }
-                    @keyframes animations {
-                        0% {
-                            transform: rotate(0deg);;
-                        }
-                        100% {
-                            transform: rotate(360deg);
-                        }
-                    }
-                }
-                .content {
-                    color: #fff;
-                    position: absolute;
-                    bottom: 35px;
-                    width: 75%;
-                    .music {
-                        position: relative;
-                        width: 60%;
-                        .music-image {
-                            width: 20px;
-                            height: 20px;
-                            margin-top: 3px;
-                            position: absolute;
-                        }
-                        marquee {
-                            margin-left: 30px;
-                        }
-
-                    }
-                }
-            }
-        }
-    }
-
-    .pause-enter-active {
-        transition: all .3s ease;
-    }
-
-    .pause-leave-active {
-        /*transition: all 1s ease ;*/
-    }
-
-    .pause-enter, .pause-leave-to {
-        transform: scale(2);
-        opacity: 0;
-    }
-
-    .love-enter-active {
-        transition: all .3s ease;
-    }
-
-    .love-leave-active {
-        transition: all .3s ease;
-    }
-
-    .love-leave-to {
-        transform: scale(2);
-        opacity: 0;
-    }
-
-    .loved-enter-active {
-        transition: all .3s ease;
-    }
-
-    .loved-leave-active {
-        transition: all .3s ease;
-    }
-
-    .loved-leave-to {
-        opacity: 0;
-    }
-
-
-</style>

src/components/home/Home2.vue

@@ -11,7 +11,7 @@
                          @touchmove="contentItemTouchmove($event)"
                          @touchend="contentItemTouchend($event,index)">
                         <div class="bg-video" v-bind:style="{'height':height+'px'}">
-                            <video :src="item.videoUrl" :poster="item.poster" ref="video" :autoplay="index === 0" loop>
+                            <video :src="item.videoUrl" :poster="item.poster" ref="video" muted :autoplay="index === 0" loop>
                                 <p> 您的浏览器不支持 video 标签。</p>
                             </video>
                             <div class="float" @click="togglePlayVideo($event)">
@@ -20,7 +20,7 @@
                                          @click.stop="togglePlayVideo($event)">
                                 </transition>
                                 <div class="toolbar mb10p">
-                                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p">
+                                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p" @click.stop="goUserInfo(item)">
                                     <div class="love mb15p" @click.stop="loved($event,index)">
                                         <div>
                                             <transition name="love">
@@ -43,7 +43,7 @@
                                         <img src="../../assets/img/icon/share.svg" alt="" class="share-image">
                                         <span class="f14">{{item.shared}}</span>
                                     </div>
-                                    <img src="../../assets/img/icon/head-image.jpeg" alt="" class="music">
+                                    <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>
@@ -61,12 +61,12 @@
                         </div>
                     </div>
                 </div>
-                <Comment v-bind:is-commenting="isCommenting" v-on:showComment='isCommenting = !isCommenting' ref="comment"/>
-                <Share v-bind:is-sharing="isSharing" ref="share"/>
+                <Comment v-bind:is-commenting.sync="isCommenting"/>
+                <Share v-bind:is-sharing.sync="isSharing" ref="share"/>
                 <Footer v-bind:init-tab="1"/>
             </div>
             <div class="right-container swiper-item">
-                <Other ref="other"/>
+                <Other ref="other" @back="backVideoList"/>
             </div>
         </div>
     </div>
@@ -149,6 +149,9 @@
             this.width = document.body.clientWidth
         },
         methods: {
+            goMusic(){
+                this.$router.push('/music')
+            },
             checkDirection() {
                 if (!this.isNeedCheck) {
                     return
@@ -335,6 +338,7 @@
                     videos[this.currentIndex - 1].pause()
                 }
                 videos[this.currentIndex].play()
+                videos[this.currentIndex].muted  = false
                 videos[this.currentIndex + 1].pause()
 
 
@@ -369,24 +373,20 @@
             //展示评论
             showComment() {
                 this.isCommenting = !this.isCommenting
-                // setTimeout(() => {
-                //     let comment = this.$refs.comment.$el;
-                //     this.commentHeight = comment.offsetHeight;
-                //     console.log(this.commentHeight);
-                //     console.log(this.height);
-                // }, 50);
             },
             showShare() {
                 this.isSharing = !this.isSharing
-                // setTimeout(() => {
-                //     let share = this.$refs.share.$el;
-                //     this.shareHeight = share.offsetHeight;
-                //     console.log(this.shareHeight);
-                //     console.log(this.height);
-                // }, 50);
             },
             loved(e, index) {
                 this.data[index].isLoved = !this.data[index].isLoved
+            },
+            //前往用户中心
+            goUserInfo(item){
+                this.wrapperLeft = '-100%'
+            },
+            //返回视频列表
+            backVideoList(){
+                this.wrapperLeft = '0'
             }
         },
         created() {

src/components/home/Share.vue

@@ -108,7 +108,7 @@
                     </div>
                 </div>
             </div>
-            <div class="dismiss">
+            <div class="dismiss" @click="closeShare()">
                 取消
             </div>
         </div>
@@ -118,12 +118,23 @@
 <script>
     export default {
         name: "Share",
-        props:['isSharing']
+        props: ['isSharing'],
+        methods: {
+            closeShare() {
+                this.$emit("update:is-sharing", false)
+                // this.isSharing = false
+                console.log('关闭')
+            }
+        }
     }
 </script>
 
 <style lang="scss" scoped>
 
+    .w200 {
+        width: 200%;
+    }
+
     .share {
         position: fixed;
         /*top: 200px;*/
@@ -132,27 +143,34 @@
         z-index: 5;
         background: #eaeaea;
         border-radius: 10px 10px 0 0;
+
         .friends {
             overflow-x: scroll;
+
             .friend {
                 float: left;
+
                 img {
                     width: 40px;
                     height: 40px;
                     border-radius: 50%;
                 }
+
                 span {
                     display: block;
                     text-align: center;
                 }
             }
         }
+
         .shares {
             background: white;
             overflow-x: scroll;
+
             .share-to {
                 float: left;
                 width: 50px;
+
                 img {
                     width: 27px;
                     height: 27px;
@@ -160,18 +178,22 @@
                     border-radius: 50%;
                     background: #1ace04;
                 }
+
                 span {
                     display: block;
                     text-align: center;
                 }
             }
         }
+
         .toolbar {
             border-top: 1px solid #eaeaea;
             background: white;
             overflow-x: scroll;
+
             .tool {
                 float: left;
+
                 img {
                     width: 22px;
                     height: 22px;
@@ -179,12 +201,14 @@
                     border-radius: 50%;
                     background: #eaeaea;
                 }
+
                 span {
                     display: block;
                     text-align: center;
                 }
             }
         }
+
         .dismiss {
             background: white;
             border-top: 1px solid #eaeaea;

src/components/user/Other.vue

@@ -4,7 +4,7 @@
             <!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
             <div class="header">
                 <div class="top pt20p pl10p pr10p">
-                    <img src="../../assets/img/icon/next.svg" alt="">
+                    <img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
                     <img src="../../assets/img/icon/more.svg" alt="">
                 </div>
                 <div class="bottom">

src/main.js

@@ -1,26 +1,27 @@
-import Vue from 'vue'
+// import Vue from 'vue'
 import App from './App.vue'
-import VueRouter from 'vue-router'
+// import VueRouter from 'vue-router'
+import './assets/scss/index.scss'
 import Home2 from './components/home/Home2.vue'
-import Home from './components/home/Home.vue'
 import Attention from './components/attention/Attention.vue'
 import Message from './components/message/Message.vue'
 import Me from './components/user/Me.vue'
+import Music from './components/common/Music.vue'
 
 Vue.config.productionTip = false;
 
-// Vue.use(VueAwesomeSwiper, /* { default global options } */)
 Vue.use(VueRouter);
 
 const router = new VueRouter({
-    mode: 'history',
+    mode: 'hash',
     routes: [
-        {path: '', component: Home2},
+        // {path: '', component: Music},
         {path: '/', component: Home2},
-        {path: '/home', component: Home},
+        {path: '/home', component: Home2},
         {path: '/attention', component: Attention},
         {path: '/message', component: Message},
         {path: '/user', component: Me},
+        {path: '/music', component: Music},
     ]
 });
 new Vue({

vue.config.js

@@ -4,4 +4,13 @@ module.exports = {
     publicPath: process.env.NODE_ENV === 'production' ? '' : '',
     assetsDir: './',//资源路径
     outputDir: process.env.outputDir,//打包输出路径
+    configureWebpack: config => {
+        config.externals = {
+            "vue": "Vue",
+            "vue-router": "VueRouter",
+        }
+    },
+    // 是否为生产环境构建生成 source map
+    productionSourceMap: false,
+    css: {},
 }