Skip to content

B
beyond-clouds-front
Commit a835acf2 by yanju
Options

fix-issue#9

parent 49f20bd9
Showing with 340 additions and 2 deletions
assets/common.scss
......@@ -383,6 +383,20 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
}
//icon
.fadeIcon-enter-active ,.fadeIcon-leave-active{
transition: all .5s;
}
.fadeIcon-enter {
opacity: 0;
transform: translateY(-10px);
}
.fadeIcon-leave-to{
opacity: 0;
transform: translateY(10px);
}
/* fade-transform */
.fade-transform-leave-active,
......
assets/font/iconfont.eot
No preview for this file type
assets/font/iconfont.ttf
No preview for this file type
components/common/video/src/main.vue
<template>
<div class="video-container__wrap">
<video class="video" src="">
</video>
<div class="video-container__left">
</div>
<div class="video-container__right">
</div>
<div class="video-container__top">
</div>
<div class="video-container__bottom">
<div class="bottom-container">
<div class="bottom__left">
<yun-icon class="play__btn" name="play" v-if="!play" @click.native="clickToPlay"></yun-icon>
<yun-icon class="pause__btn" name="pause" v-if="play" @click.native="clickToPlay"></yun-icon>
<p class="process__word"><span>1:00</span>/3:34</p>
</div>
<div class="bottom__right">
<yun-icon name="volume" v-if="volume!==0"></yun-icon>
<yun-icon name="mute" v-if="volume===0"></yun-icon>
<yun-icon name="setting"></yun-icon>
<yun-icon name="fullScreen2"></yun-icon>
<yun-icon name="fullScreen1"></yun-icon>
</div>
<div class="abs__setting-box">
</div>
<div class="abs__volume-box">
<div class="process__volume" @mousedown.stop="clickVolume">
<div class="drag__btn" @mousedown="dragVolume" :style="{bottom:`calc(${volume*100}% - 8px)`}"></div>
<div class="process__line" :style="{height:`calc(${volume*100}% - 8px)`}"></div>
</div>
</div>
<div class="abs__speed-box">
</div>
</div>
</div>
</div>
</template>
......@@ -7,11 +56,253 @@
export default{
data(){
return{
play:true,
volume:0.8,
}
},
methods:{
getElementToPageTop(el) {
if(el.parentElement) {//父级元素须为定位元素
// console.log(el)
// console.log(el.offsetTop)
return this.getElementToPageTop(el.parentElement) + el.offsetTop
}
return el.offsetTop
},
clickToPlay(){
this.play = !this.play;
},
dragVolume(el){
let disY = el.clientY - el.target.offsetTop;
document.onmousemove = (e) => {
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let top = e.clientY - disY;
let bottom = 100 - top;
if(bottom>=0&&bottom<=100){
console.log(bottom/100);
this.volume = bottom/100;
}
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
},
clickVolume(el){
el.stopPropagation();
if(el.target.className!=='process__line'){
let disY = el.pageY - this.getElementToPageTop(el.target);
this.volume = (100-disY)/100
}else{
let disY = el.pageY - this.getElementToPageTop(el.target);
console.log(disY);
this.volume =(100 - disY-el.target.offsetTop)/100;
}
}
},
directives: {
drag: {
// 指令的定义
bind: function (el) {
if(process.browser){
let odiv = el; //获取当前元素
odiv.onmousedown = (e) => {
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e) => {
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let top = e.clientY - disY;
console.log(top);
let bottom = 100 - top;
this.volume = bottom/100;
//绑定元素位置到positionX和positionY上面
// el.positionX = top;
//移动当前元素
// odiv.style.marginTop = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}}
}
}
</script>
<style>
<style lang="scss" scoped>
div{
position: relative;
}
.video-container__wrap{
position:relative;
width:768*$length;
height: 432*$length;
background-color: #000;
.video{
width:100%;
height:auto;
}
.video-container__bottom{
height: 120px;
position:absolute;
bottom:0;
left:0;
right:0;
background-image: linear-gradient(0deg,
rgba(0,0,0,.5) 0,
rgba(0,0,0,0));
background-position: 0 bottom;
background-repeat: repeat-x;
.bottom-container{
height:38*$length;
width:100%;
position:absolute;
bottom:0;
left:0;
right:0;
color:#fff;
@extend %flex-row-spb;
i{
font-size: 18*$font-size;
}
.bottom__left{
@extend %flex-row-spb;
justify-content: flex-start;
i{
transition: 1s all;
margin-left: 30*$length;
}
.process__word{
margin-left: 30*$length;
@include fontStyle(12,38,500,#999,left);
span{
color:#fff;
}
}
}
.bottom__right{
i{
margin-right: 30*$length;
}
}
.abs__setting-box{
position: absolute;
}
.abs__volume-box{
position: absolute;
right:170*$length;
bottom:50*$length;
width:54*$length;
height:130*$length;
border-radius: 4*$length;
background-color: rgb(41,41,41);
@extend %flex-row-center;
.process__volume{
height:100*$length;
width:6*$length;
position:relative;
border-radius: 3*$length;
background-color: rgb(109,109,109);
@extend %cursorPointer;
.drag__btn{
position:absolute;
left:0;
right:0;
bottom:50%;
margin-top: -8*$length;
margin-left: -1*$length;
width:8*$length;
height:8*$length;
border-radius: 4*$length;
background-color: #fff;
box-shadow: 0 0 5px 2px #00AAE6;
@extend %cursorPointer;
}
.process__line{
position:absolute;
left:0;
right:0;
bottom:0;
width:6*$length;
height:50%;
@extend %cursorPointer;
border-radius: 3*$length;
background-color: #00AAE6;
}
}
}
.abs__speed-box{
position: absolute;
}
}
}
.video-container__top{
height:30px;
width:100%;
position:absolute;
top:0;
left:0;
right:0;
background-color: orangered;
}
.video-container__left{
width:30px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
background-color: rebeccapurple;
}
.video-container__right{
width:30px;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
background-color: salmon;
}
}
</style>
components/pc/socialContactCard.vue
......@@ -92,7 +92,7 @@
</div>
<div class="footer-item4" @click="MessageAlert">
<yun-icon name="like1" size="12px" ></yun-icon>
<p class="like1"> 收藏</p>
<p class="like1"> 点赞</p>
</div>
</div>
......
pages/test.vue 0 → 100644
<template>
<yun-video></yun-video>
</template>
<script>
import YunVideo from '../components/common/video/src/main.vue';
export default {
components:{
YunVideo
},
data(){
return{
}
},
props:{
},
}
</script>
<style lang="scss" scoped>
.container{
width:$pageWidth;
margin:0 auto;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment