抖音

                关注

                推荐

                附近

@淘气的猫

《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演

                                @烟台融媒创作的原创原声-烟台传媒

@淘气的猫

《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演

                                @烟台融媒创作的原创原声-烟台传媒

@淘气的猫

《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演

                                @烟台融媒创作的原创原声-烟台传媒

                首页

                朋友

                消息

                我

* {

  padding: 0;

  margin: 0;

}

html,

body,

#app {

  width: 100%;

  height: 100%;

}

body {

  overflow: hidden;

  background-color: #111;

  padding: 0;

  margin: 0;

  overflow: hidden;

}

#top-bar {

  height: 1.2rem;

  width: 100%;

  font-weight: 200;

  color: #fff;

  font-size: 0.533333rem;

  display: flex;

  position: fixed;

  left: 0;

  line-height: 1.2rem;

  top: 0.533333rem;

  justify-content: space-around;

  z-index: 99999;

}

#top-bar i {

  font-size: 25px;

}

/* 交互功能区 点赞 评论 分享 */

.interactive {

  width: 1.333333rem;

  position: absolute;

  right: 0;

  top: 30%;

  display: flex;

  flex-direction: column;

}

.interactive div {

  margin: 0.266667rem -0.266667rem;

  color: #fee;

}

.interactive .avatar {

  height: 1.333333rem;

  width: 1.333333rem;

  border-radius: 50%;

  border: 2px solid #fff;

  overflow: hidden;

}

.interactive .avatar img {

  height: 1.333333rem;

  width: 1.333333rem;

}

.interactive div i {

  font-size: 1.333333rem;

}

.interactive div .add-friend {

  position: relative;

  top: -50px;

  left: 10px;

  font-size: 10px;

}

.video-msg {

  height: 3.333333rem;

  width: 100%;

  /* border: 2px solid #fff; */

  position: absolute;

  left: 0;

  bottom: 1.2rem;

  overflow: hidden;

  display: flex;

}

.video-msg .word-msg {

  padding-left: 10px;

  color: #fee;

  /* border: 1px solid pink; */

  width: 80%;

  overflow: hidden;

}

.video-msg .word-msg p {

  padding: 3px 0;

}

.video-msg .word-msg .uid {

  font-size: 16px;

}

.video-msg .word-msg .desc {

  font-size: 14px;

}

.video-msg .word-msg .author {

  font-size: 12px;

}

.video-msg .disk-area {

  width: 20%;

  position: relative;

  /* border: 1px solid orange; */

}

@keyframes disk-rotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

}

.video-msg .disk-area .rotate-disk {

  height: 40px;

  width: 40px;

  border: 15px solid #444;

  border-radius: 50%;

  position: absolute;

  right: 4px;

  bottom: 8px;

  overflow: hidden;

  animation: disk-rotate 10s linear infinite;

}

.video-msg .disk-area .rotate-disk img {

  height: 40px;

  width: 40px;

}

#tab-bar {

  height: 1.2rem;

  width: 100%;

  background-color: #000;

  font-weight: 200;

  color: #fff;

  font-size: 0.533333rem;

  display: flex;

  position: fixed;

  left: 0;

  line-height: 1.2rem;

  bottom: 0;

  justify-content: space-around;

  z-index: 99999;

}

#tab-bar .item .plus {

  position: relative;

  top: 8px;

  line-height: 30px;

  height: 30px;

  width: 40px;

  border: 2px solid #fee;

}

#tab-bar .item .plus i {

  padding-left: 10px;

}

#tab-bar .item.active {

  border-bottom: 0.026667rem solid #fff;

}

.swiper-container {

  height: 100%;

}

/* 视频翻页 */

.swiper-slide {

  /* 一定要设置溢出隐藏，不然会显示下一页的动画 */

  overflow: hidden;

}

.swiper-slide video {

  width: 100%;

  height: 100%;

  outline: none;

}

.play-btn {

  display: block;

}

/* 播放按钮 */

.play-btn {

  width: 100px;

  height: 100px;

  position: absolute;

  left: 50%;

  top: 50%;

  margin-left: -50px;

  margin-top: -75px;

  opacity: 0.5;

  z-index: 50;

  display: none;

}

const app = document.querySelector('#app');

const slides = document.querySelectorAll('.swiper-slide');

const slideswiper = new Swiper('.swiper-container',{

    direction: 'vertical',

    on:{

        slideChangeTeansitionEnd: function () {

        },

    },

})

var lastIndex=0;

var currentIndex=0;

var play = true;

function switchVideo(){

    var playBtn = document.querySelectorAll(".play-btn")[currentIndex];

    document.querySelector("#video_"+lastIndex).pause();

    document.querySelector("#video_"+currentIndex).play();

    playBtn.style.display = "none";

}

for (let index = 0; index < slides.length; index++) {

    var element = slides[index];

    element.addEventListener('click',function(){

        var playvideo = document.querySelector("#video_"+index);

        var playBtn = document.querySelectorAll(".play-btn")[currentIndex];

        if(play){

            playvideo.pause();

            play=false;

            playBtn.style.display = "block";

        }else{

            playvideo.play();

            play=true;

            playBtn.style.display = "none";

        }

    })

}