zyronon
6 years ago
30 changed files with 542 additions and 586 deletions
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 634 B After Width: | Height: | Size: 634 B |
|
Before Width: | Height: | Size: 550 B After Width: | Height: | Size: 550 B |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 606 KiB After Width: | Height: | Size: 59 KiB |
@ -0,0 +1,56 @@
@@ -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; |
||||
} |
||||
@ -0,0 +1,22 @@
@@ -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; |
||||
} |
||||
@ -0,0 +1,61 @@
@@ -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; |
||||
} |
||||
@ -0,0 +1,160 @@
@@ -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; |
||||
} |
||||
|
||||
@ -0,0 +1,174 @@
@@ -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> |
||||
@ -1,419 +0,0 @@
@@ -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> |
||||
Loading…
Reference in new issue