zyronon
4 years ago
14 changed files with 1148 additions and 791 deletions
@ -0,0 +1,115 @@ |
|||||||
|
<template> |
||||||
|
<div class="marquee" :class="name+'-marquee'" ref="marquee"> |
||||||
|
<span class="text" ref="marqueeText"> |
||||||
|
{{ text }}<span class="space"></span> |
||||||
|
{{ text }}<span class="space"></span> |
||||||
|
{{ text }}<span class="space"></span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Dom from "../utils/dom"; |
||||||
|
import {nextTick} from "vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "BaseMarquee", |
||||||
|
props: { |
||||||
|
text: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
name: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟 |
||||||
|
isPlay: { |
||||||
|
type: Boolean, |
||||||
|
default: () => { |
||||||
|
return true |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
timer: null, |
||||||
|
contentWidth: 0, |
||||||
|
transformX: 0, |
||||||
|
$marqueeContent: null, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
pause() { |
||||||
|
// console.log('pause') |
||||||
|
cancelAnimationFrame(this.timer) |
||||||
|
}, |
||||||
|
stop() { |
||||||
|
// console.log('stop') |
||||||
|
cancelAnimationFrame(this.timer) |
||||||
|
this.transformX = 0 |
||||||
|
this.marqueeText.css('transform', `translate3d(0,0,0)`) |
||||||
|
}, |
||||||
|
start() { |
||||||
|
// console.log('start') |
||||||
|
if (this.contentWidth <= 0) { // 没有内容搞什么动画 |
||||||
|
return; |
||||||
|
} |
||||||
|
let fn = () => { |
||||||
|
if (this.transformX > (-this.contentWidth / 3)) { |
||||||
|
this.transformX -= 1 |
||||||
|
this.marqueeText.css('transform', `translate3d(${this.transformX}px,0,0)`) |
||||||
|
} else { |
||||||
|
this.transformX = 0 |
||||||
|
} |
||||||
|
this.timer = requestAnimationFrame(fn) |
||||||
|
} |
||||||
|
fn() |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
nextTick(() => { |
||||||
|
//直接document.querySelectorAll，找不到dom，必须用$refs的方式 |
||||||
|
this.marqueeText = new Dom(this.$refs.marqueeText) |
||||||
|
//必须在nextTick在调用，不然后新生成dom，获取不到width |
||||||
|
this.contentWidth = this.marqueeText.getWidth() |
||||||
|
|
||||||
|
// console.log(this.name, this.isPlay, this.marqueeText) |
||||||
|
// console.log(this.name, this.isPlay, this.contentWidth) |
||||||
|
|
||||||
|
new Dom(this.$refs.marquee).on('pause', this.pause) |
||||||
|
new Dom(this.$refs.marquee).on('start', this.start) |
||||||
|
new Dom(this.$refs.marquee).on('stop', this.stop) |
||||||
|
if (this.isPlay) { |
||||||
|
this.start() |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
.marquee { |
||||||
|
width: 100%; |
||||||
|
display: block; |
||||||
|
margin: 0 auto; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: clip; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.text { |
||||||
|
color: white; |
||||||
|
display: inline-block; |
||||||
|
position: relative; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
.space { |
||||||
|
display: inline-block; |
||||||
|
width: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,163 @@ |
|||||||
|
<template> |
||||||
|
<div class="music-wrapper" :class="name+'-music'" ref="musicWrapper"> |
||||||
|
<template v-if="!isStop"> |
||||||
|
<img class="music1" src="../assets/img/icon/home/music1.png" alt=""> |
||||||
|
<img class="music2" src="../assets/img/icon/home/music2.png" alt=""> |
||||||
|
</template> |
||||||
|
<div class="music-bg" ref="musicBg"> |
||||||
|
<img class="music" :src="cover"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Dom from "../utils/dom"; |
||||||
|
import {nextTick} from "vue"; |
||||||
|
import BaseButton from "./BaseButton"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "BaseMusic", |
||||||
|
components: { |
||||||
|
BaseButton |
||||||
|
}, |
||||||
|
props: { |
||||||
|
cover: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
name: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟 |
||||||
|
isPlay: { |
||||||
|
type: Boolean, |
||||||
|
default: () => { |
||||||
|
return true |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
isStop: false, |
||||||
|
musicBg: null, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// triggerPause() { |
||||||
|
// new Dom('.music-wrapper').trigger('pause') |
||||||
|
// }, |
||||||
|
// triggerStart() { |
||||||
|
// new Dom('.music-wrapper').trigger('start') |
||||||
|
// }, |
||||||
|
pause() { |
||||||
|
this.isStop = true |
||||||
|
this.musicBg.css('webkitAnimationPlayState', 'paused') |
||||||
|
}, |
||||||
|
stop() { |
||||||
|
this.isStop = true |
||||||
|
this.musicBg.css('webkitAnimationPlayState', 'paused') |
||||||
|
}, |
||||||
|
start() { |
||||||
|
this.isStop = false |
||||||
|
this.musicBg.css('webkitAnimationPlayState', 'running') |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
nextTick(() => { |
||||||
|
//直接document.querySelectorAll，找不到dom，必须用$refs的方式 |
||||||
|
this.musicBg = new Dom(this.$refs.musicBg) |
||||||
|
|
||||||
|
new Dom(this.$refs.musicWrapper).on('pause', this.pause) |
||||||
|
new Dom(this.$refs.musicWrapper).on('start', this.start) |
||||||
|
new Dom(this.$refs.musicWrapper).on('stop', this.stop) |
||||||
|
if (this.isPlay) { |
||||||
|
this.start() |
||||||
|
} else { |
||||||
|
this.stop() |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.music-wrapper { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.music-bg { |
||||||
|
background-image: linear-gradient(black, #424242, black); |
||||||
|
border-radius: 50%; |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
animation: animations 5s linear forwards infinite; |
||||||
|
|
||||||
|
//animation-play-state:paused; |
||||||
|
//display: none; |
||||||
|
|
||||||
|
.music { |
||||||
|
//display: none; |
||||||
|
width: 25px; |
||||||
|
height: 25px; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.music1, .music2 { |
||||||
|
//display: none; |
||||||
|
position: absolute; |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.music1 { |
||||||
|
animation: anim-music1 2s linear forwards infinite; |
||||||
|
} |
||||||
|
|
||||||
|
.music2 { |
||||||
|
animation: anim-music1 2s linear forwards infinite; |
||||||
|
animation-delay: 1s; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@keyframes animations { |
||||||
|
0% { |
||||||
|
transform: rotate(0deg);; |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: rotate(360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
@keyframes anim-music1 { |
||||||
|
0% { |
||||||
|
transform: translate3d(0, 0, 0); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
20% { |
||||||
|
transform: translate3d(-8px, 0px, 0) rotate(30deg); |
||||||
|
opacity: .3; |
||||||
|
} |
||||||
|
40% { |
||||||
|
transform: translate3d(-16px, -5px, 0) rotate(15deg); |
||||||
|
opacity: .5; |
||||||
|
} |
||||||
|
60% { |
||||||
|
transform: translate3d(-24px, -15px, 0) rotate(0deg); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
80% { |
||||||
|
transform: translate3d(-32px, -30px, 0) rotate(-15deg); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: translate3d(-32px, -50px, 0) rotate(-30deg); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -1,193 +0,0 @@ |
|||||||
<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" @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/1.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: { |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="less"> |
|
||||||
.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%; |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.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> |
|
||||||
@ -0,0 +1,66 @@ |
|||||||
|
<template> |
||||||
|
<div class="Test"> |
||||||
|
<div class="content1"> |
||||||
|
<BaseMarquee :is-play="true" :text="text" style="width: 150px;"/> |
||||||
|
<BaseButton @click="triggerPause">pause</BaseButton> |
||||||
|
<BaseButton @click="triggerStart">start</BaseButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
|
||||||
|
import BaseButton from "../components/BaseButton"; |
||||||
|
import BaseMarquee from "../components/BaseMarquee"; |
||||||
|
import Dom from "../utils/dom"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "Test4", |
||||||
|
components: {BaseButton, BaseMarquee}, |
||||||
|
props: { |
||||||
|
text: { |
||||||
|
type: String, |
||||||
|
default: '@喵嗷污说电影创作的原声' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
timer: null, |
||||||
|
contentWidth: 0, |
||||||
|
transformX: 0, |
||||||
|
$marqueeContent: null, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
triggerPause() { |
||||||
|
new Dom('.text').trigger('pause') |
||||||
|
}, |
||||||
|
triggerStart() { |
||||||
|
new Dom('.text').trigger('start') |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "../assets/scss/index"; |
||||||
|
|
||||||
|
.Test { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
overflow: auto; |
||||||
|
font-size: 1.4rem; |
||||||
|
color: white; |
||||||
|
|
||||||
|
.content1 { |
||||||
|
padding-top: 6rem; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,199 @@ |
|||||||
|
<template> |
||||||
|
<div class="Music"> |
||||||
|
<BaseHeader> |
||||||
|
<template v-slot:center> |
||||||
|
<span class="f16">申报学校信息</span> |
||||||
|
</template> |
||||||
|
<template v-slot:right> |
||||||
|
<img src="../../assets/img/icon/share.svg" alt=""> |
||||||
|
</template> |
||||||
|
</BaseHeader> |
||||||
|
<div class="content"> |
||||||
|
<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> |
||||||
|
<div class="tabs"> |
||||||
|
<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/1.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: { |
||||||
|
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() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
|
||||||
|
@import "../../assets/scss/index"; |
||||||
|
|
||||||
|
.Music { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
overflow: auto; |
||||||
|
color: white; |
||||||
|
font-size: 1.4rem; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 2rem; |
||||||
|
height: 2rem; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
padding-top: 6rem; |
||||||
|
|
||||||
|
.bottom { |
||||||
|
display: flex; |
||||||
|
height: 120px; |
||||||
|
|
||||||
|
.logo { |
||||||
|
width: 120px; |
||||||
|
height: 100%; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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> |
||||||
Loading…
Reference in new issue