Skip to content

B
beyond-clouds-front
Commit 469a7350 by yanju
Options

Merge branch 'fix-issue#12' into 'master' 

fix-issue#12

See merge request pigbigbig/beyond-clouds-front!129
parents 44e73991 d7d12d84
Showing with 641 additions and 176 deletions
assets/reset.scss
img { -webkit-touch-callout: none; }
input{
outline:none;
box-sizing:border-box;
......
components/common/video/src/main.js deleted 100644 → 0
// 视频无法播放时展示的图片
HTMLVideoElement.poster = '';
// 视频的高度和宽度
HTMLVideoElement.width = '';
HTMLVideoElement.height = '';
/*
* 继承于HTMLMediaElement属性
* */
//视频是否自动播放
HTMLVideoElement.autoplay = true;
//是否显示播放界面控制
HTMLVideoElement.controls = false;
//当前播放时间(s)
HTMLVideoElement.currentTime = 10;
//自动播放时是否静音
HTMLVideoElement.defaultMuted = true;
//控制媒体默认播放速度
HTMLVideoElement.defaultPlaybackRate = 1.0;
//控制媒体的播放速度
HTMLVideoElement.playbackRate = 1.3;
//只读属性 媒体的播放时间
let duration = HTMLVideoElement.duration ;
//只读属性 媒体是否结束
let ended = HTMLVideoElement.ended ;
//表示是否暂停
let paused = HTMLVideoElement.paused;
// 是否循环播放
HTMLVideoElement.loop = true;
// 视频加载状态
HTMLVideoElement.networkState;
// 设置所播放的视频
HTMLVideoElement.src='';
//设置视频的音量 0.0 - 1.0
HTMLVideoElement.volume=1.0;
/*
* 继承于HTMLMediaElement方法
* */
//返回所播放视频是否为支持播放视频
HTMLVideoElement.canPlayType();
//直接定位视频播放位置
HTMLVideoElement.fastSeek();
//开始播放
HTMLVideoElement.play();
//暂停播放
HTMLVideoElement.pause();
//
HTMLVideoElement.setMediaKeys ();
components/common/video/src/main.vue
<template>
<div class="video-container__wrap" ref="videoCon" @contextmenu="showContextmenu">
<div :class="fullPage?'video-container__wrap-fix':'video-container__wrap'" @mouseover="mShowVideoContainerBottom" @mouseleave="mHideVideoContainerBottom" ref="videoCon" @contextmenu="showContextmenu">
<video ref="video" class="video" :src="src" @click="clickToPlay">
</video>
......@@ -32,10 +32,10 @@
<div class="video-container__top">
</div>
<div class="video-container__bottom">
<div class="process-container" @mousedown="dragVideo">
<div class="video-container__bottom" v-if="showVideoContainerBottom">
<div class="process-container" @click="clickVideo">
<div class="video-drag__btn" :style="{left:videoProcess}" @mousedown="dragVideo"></div>
<div class="video-process__line" @mousedown="dragVideo" :style="{width:videoProcess}" ></div>
<div class="video-process__line" @click="clickVideo" :style="{width:videoProcess}" ></div>
</div>
<div class="bottom-container">
......@@ -46,10 +46,11 @@
<p class="process__word"><span>{{currentTimePacked}}</span>/{{durationPacked}}</p>
</div>
<div class="bottom__right">
<yun-icon name="volume" @mouseleave.native="mouseLeaveToHideVolumeBox" @mouseover.native="mouseOverToShowVolumeBox" v-if="volume!==0"></yun-icon>
<yun-icon name="mute" @mouseleave.native="mouseLeaveToHideVolumeBox" @mouseover.native="mouseOverToShowVolumeBox" v-if="volume===0"></yun-icon>
<yun-icon name="setting"></yun-icon>
<yun-icon name="fullScreen2"></yun-icon>
<p class="speed-button" @mouseleave="mouseLeaveToHideSpeedBox" @mouseover="mouseOverToShowSpeedBox" >倍速</p>
<yun-icon name="volume" @click="volume=0" @mouseleave.native="mouseLeaveToHideVolumeBox" @mouseover.native="mouseOverToShowVolumeBox" v-if="volume!==0"></yun-icon>
<yun-icon name="mute" @click="volume=0.5" @mouseleave.native="mouseLeaveToHideVolumeBox" @mouseover.native="mouseOverToShowVolumeBox" v-if="volume===0"></yun-icon>
<!-- <yun-icon name="setting"></yun-icon>-->
<yun-icon name="fullScreen2" @click.native="FullPage"></yun-icon>
<yun-icon name="fullScreen1" @click.native="FullScreen"></yun-icon>
</div>
......@@ -64,7 +65,12 @@
</div>
<div class="abs__speed-box">
<div class="abs__speed-box" v-if="showSpeedBox" @mouseleave="mouseLeaveToHideSpeedBox" @mouseover="mouseOverToShowSpeedBox">
<p :style="playbackRate===0.5?{color:'#00AAE6'}:''" @click="playbackRate=0.5">0.5x</p>
<p :style="playbackRate===1?{color:'#00AAE6'}:''" @click="playbackRate=1">1.0x</p>
<p :style="playbackRate===1.25?{color:'#00AAE6'}:''" @click="playbackRate=1.25">1.25x</p>
<p :style="playbackRate===1.5?{color:'#00AAE6'}:''" @click="playbackRate=1.5">1.5x</p>
<p :style="playbackRate===2?{color:'#00AAE6'}:''" @click="playbackRate=2">2.0x</p>
</div>
</div>
......@@ -77,26 +83,60 @@
<script>
const DEFAULT_EVENTS = [
'loadeddata',
'canplay',
'canplaythrough',
'play',
'pause',
'waiting',
'playing',
'ended',
'error'
];
export default{
name:'yunVideo',
data(){
return{
play:false,
volume:0.5,
playbackRate:1.0,
showVideoContainerBottom:false,
showVideoContainerBottomTime:null,
showVolumeBox:false,
showVolumeBoxTime:null,
showSpeedBox:false,
showSpeedBoxTime:null,
currentTime:0,
duration:0,
src:''
src:'',
fullPage:false,
canBeControl:true,
fullScreen:false
}
},
props:{
dataSrc:String,
},
computed:{
volumePacked(){
},
videoProcess(){
return `${this.currentTime/this.duration*100*758/768}%`;
if(process.browser){
if(this.duration){
const boxWidth = this.$refs.videoCon.offsetWidth;
return `${this.currentTime/this.duration*100*(boxWidth-10)/boxWidth}%`;
}else{
return '0%'
}
}
},
volumeProcess(){
......@@ -119,27 +159,24 @@
created() {
if(process.browser){
this.src = ' http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
// this.src = ' https://v-cdn.zjol.com.cn/280443.mp4';
this.src = this.dataSrc;
setTimeout(()=>{
this.$refs.video.volume = this.volume;
this.$refs.video.oncontextmenu = function () {
return false
};
});
// firefox,opera
document.addEventListener('keypress',this.forbidBackSpace);
// ie , Chrome
document.addEventListener('keydown',this.forbidBackSpace);
this.autoPlay();
}
console.log(this.$store.state.auth.token);
},
destroyed(){
// firefox,opera
document.removeEventListener('keypress',this.forbidBackSpace)
// ie , Chrome
document.removeEventListener('keydown',this.forbidBackSpace);
},
watch:{
......@@ -147,19 +184,25 @@
if(process.browser){
if(val===true){
this.$refs.video.play();
this.videoProcessTime = setInterval(()=>{
let {currentTime,duration} = this;
if(currentTime<duration){
this.currentTime = this.currentTime +0.1;
}else if(currentTime>duration){
this.currentTime = duration;
clearInterval(this.videoProcessTime);
}else if(currentTime===duration){
this.currentTime = 0;
clearInterval(this.videoProcessTime);
}
},100)
// this.videoProcessTime = setInterval(()=>{
//
// if(currentTime<duration){
// this.currentTime = this.currentTime +0.1;
// }else if(currentTime>duration){
// this.currentTime = duration;
// clearInterval(this.videoProcessTime);
// }else if(currentTime===duration){
// this.currentTime = 0;
// clearInterval(this.videoProcessTime);
// }
//
// },100);
// this.$refs.video.on('timeupdate',()=>{
// })
let that = this;
this.$refs.video.addEventListener('timeupdate',()=>{
this.currentTime = this.$refs.video.currentTime;
})
}else{
this.$refs.video.pause();
let {currentTime,duration} = this;
......@@ -173,13 +216,41 @@
}
},
volume(val){
if(process.browser) {
this.$refs.video.volume = val;
}
},
fullScreen(val){
if(val){
if(process.browser){
let ele = this.$refs.videoCon;
if (ele .requestFullscreen) {
ele .requestFullscreen();
} else if (ele .mozRequestFullScreen) {
ele .mozRequestFullScreen();
} else if (ele .webkitRequestFullScreen) {
ele .webkitRequestFullScreen();
}
}
}else{
if(process.browser){
let de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
}
},
playbackRate(val){
if(process.browser) {
this.$refs.video.playbackRate = val;
}
},
src(val){
if(process.browser){
let that = this;
......@@ -191,12 +262,6 @@
}
},
currentTime(val){
if(process.browser){
this.$refs.video.currentTime = val;
}
}
},
methods:{
......@@ -216,38 +281,62 @@
if(ev.keyCode ===32 &&t!=="password"&&t!=="text"&&t!=="textarea"){ //阻止空格键默认事件
e.stopPropagation(); // 阻止事件冒泡传递
e.preventDefault();
this.clickToPlay();
this.canBeControl =false;
this.play = !this.play
}
},
FullScreen() {
let ele = this.$refs.videoCon;
if (ele .requestFullscreen) {
ele .requestFullscreen();
} else if (ele .mozRequestFullScreen) {
ele .mozRequestFullScreen();
} else if (ele .webkitRequestFullScreen) {
ele .webkitRequestFullScreen();
this.fullScreen = !this.fullScreen;
},
FullPage(){
this.fullPage=!this.fullPage;
},
clickToPlay(){
this.canBeControl = false;
this.play = !this.play;
},
scrollPlay(boolean){
if(this.canBeControl){
this.play = boolean
}else{
}
},
exitFullscreen() {
let de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
autoPlay(){
if(process.browser){
document.addEventListener('scroll',()=>{
let videoConTop = this.getElementToPageTop(this.$refs.videoCon);
let scrollTop = document.documentElement.scrollTop;
let clientHeight = document.documentElement.clientHeight;
let videoConHeight = this.$refs.videoCon.clientHeight;
if(scrollTop < videoConTop && videoConTop < (scrollTop + clientHeight - videoConHeight)){
// firefox,opera
document.addEventListener('keypress',this.forbidBackSpace);
// ie , Chrome
document.addEventListener('keydown',this.forbidBackSpace);
this.scrollPlay(true)
}else {
// firefox,opera
document.removeEventListener('keypress',this.forbidBackSpace)
// ie , Chrome
document.removeEventListener('keydown',this.forbidBackSpace);
this.canBeControl =true;
this.play = false;
}
})
}
},
getElementToPageTop(el) {
if(el.parentElement) {//父级元素须为定位元素
// console.log(el)
// console.log(el.offsetTop)
return this.getElementToPageTop(el.parentElement) + el.offsetTop
}
return el.offsetTop
......@@ -258,14 +347,10 @@
}
return el.offsetLeft
},
clickToPlay(){
this.play = !this.play;
},
showContextmenu(e){
e.stopPropagation();//阻止传递
e.preventDefault();//阻止默认事件
console.log(11)
},
dragVolume(el){
this.clickVolume(el);
......@@ -390,20 +475,84 @@
this.showVolumeBox = false;
},200)
},
mouseOverToShowSpeedBox(){
clearTimeout(this.showSpeedBoxTime);
this.showSpeedBox = true;
},
mouseLeaveToHideSpeedBox(){
this.showSpeedBoxTime=setTimeout(()=>{
this.showSpeedBox = false;
},200)
},
mShowVideoContainerBottom(){
clearTimeout(this.showVideoContainerBottomTime);
this.showVideoContainerBottom = true;
this.showVideoContainerBottomTime=setTimeout(()=>{
this.showVideoContainerBottom = false;
},2000)
},
mHideVideoContainerBottom(){
this.showVideoContainerBottomTime=setTimeout(()=>{
this.showVideoContainerBottom = false;
},200)
},
clickVideo(el){
let disX;
const boxWidth = this.$refs.videoCon.offsetWidth;
if(el.target.className==='video-process__line'||el.target.className==='video-drag__btn'){
disX = el.pageX - this.getElementToPageLeft(el.target.parentElement);
}else{
disX = el.pageX - this.getElementToPageLeft(el.target);
}
let left = disX;
if(left>=0&&left<=boxWidth){
if(left<5){
if(process.browser){
this.currentTime = 0;
this.$refs.video.currentTime = 0;
}
}else if(left >=boxWidth-5){
this.currentTime = this.duration;
if(process.browser){
this.$refs.video.currentTime = this.duration;
}
}else{
if(process.browser){
this.currentTime = left/boxWidth * this.duration;
this.$refs.video.currentTime = left/boxWidth * this.duration;
}
}
}
},
dragVideo(el){
let disX = el.pageX - this.getElementToPageLeft(el.target);
let disX;
const boxWidth = this.$refs.videoCon.offsetWidth;
if(el.target.className==='video-process__line'||el.target.className==='video-drag__btn'){
disX = this.getElementToPageLeft(el.target.parentElement);
}else{
disX = this.getElementToPageLeft(el.target);
}
this.clickVideo(el);
document.onmousemove = (e) => {
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.pageX - disX;
if(left>=0&&left<=758){
if(left>=0&&left<=boxWidth){
if(left<5){
this.currentTime = 0;
}else if(left >=752){
if(process.browser){
this.currentTime = 0;
this.$refs.video.currentTime = 0;
}
}else if(left >=boxWidth-5){
this.currentTime = this.duration;
if(process.browser){
this.$refs.video.currentTime = this.duration;
}
}else{
this.currentTime = left/758 * this.duration;
if(process.browser){
this.currentTime = left/boxWidth * this.duration;
this.$refs.video.currentTime = left/boxWidth * this.duration;
}
}
}
};
......@@ -412,25 +561,7 @@
document.onmouseup = null;
};
},
clickVideo(el){
let disX;
if(el.target.className==='video-process__line'||el.target.className==='video-drag__btn'){
disX = el.pageX - this.getElementToPageLeft(el.target.parentElement);
}else{
disX = el.pageX - this.getElementToPageLeft(el.target);
}
let left = disX;
if(left>=0&&left<=758){
if(left<5){
this.currentTime = 0;
}else if(left >=752){
this.currentTime = this.duration;
}else{
this.currentTime = left/758 * this.duration;
}
}
},
}
}
......@@ -441,14 +572,26 @@
div{
position: relative;
}
%cancelSelect{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.video-container__wrap{
position:relative;
width:768*$length;
height: 432*$length;
background-color: #000;
@extend %flex-row-center;
@extend %cancelSelect;
.video{
width:100%;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.advertise-container{
......@@ -458,7 +601,7 @@
left:30*$length;
right:30*$length;
z-index: 100;
background-color: rgba(34,34,34,.4);
/*background-color: rgba(34,34,34,.4);*/
.play__btn{
position:absolute;
margin:0 auto;
......@@ -561,9 +704,32 @@
}
.bottom__right{
@extend %flex-row-spb;
justify-content: flex-end;
i{
margin-right: 30*$length;
}
.speed-button{
margin-right: 30*$length;
position: relative;
height: 26px;
padding: 0 12px;
border-radius: 99em;
background-color:
rgba(0,0,0,.5);
color:
#ececec;
line-height: 26px;
text-align: center;
white-space: nowrap;
cursor: pointer;
@extend %animate-transition;
&:hover{
color:#fff;
background-color: #00AAE6;
}
}
}
.abs__setting-box{
......@@ -572,7 +738,8 @@
.abs__volume-box{
position: absolute;
right:170*$length;
z-index: 105;
right:110*$length;
bottom:50*$length;
width:54*$length;
height:130*$length;
......@@ -618,6 +785,22 @@
.abs__speed-box{
position: absolute;
right:130*$length;
z-index: 105;
bottom:50*$length;
width:146*$length;
border-radius: 4*$length;
background-color: rgb(41,41,41);
p{
padding:11*$length 0;
@include fontStyle(14,22,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color: #00AAE6;
}
}
}
}
......@@ -633,7 +816,6 @@
top:0;
left:0;
right:0;
background-color: orangered;
}
.video-container__left{
......@@ -643,7 +825,6 @@
top:0;
bottom:0;
left:0;
background-color: rebeccapurple;
}
......@@ -655,10 +836,271 @@
top:0;
bottom:0;
right:0;
background-color: salmon;
}
}
.video-container__wrap-fix{
top:0;
left:0;
position:fixed;
width:100%;
height: 100%;
background-color: #000;
z-index: 8000;
@extend %cancelSelect;
@extend %flex-row-center;
.video{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.advertise-container{
position:absolute;
bottom:48*$length;
top:48*$length;
left:30*$length;
right:30*$length;
z-index: 100;
/*background-color: rgba(34,34,34,.4);*/
.play__btn{
position:absolute;
margin:0 auto;
top:50%;
left:0;
right:0;
margin-top: -28*$length;
width:56*$length;
height:56*$length;
border-radius: 50%;
background-color: rgba(34,34,34,.8);
@extend %cursorPointer;
@extend %flex-column-center;
@extend %animate-transition;
&:hover{
transform:scale(1.2);
}
i{
color:#fff;
font-size: 18*$font-size;
}
}
}
.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;
.process-container{
height:8*$length;
width:100%;
position:absolute;
bottom:40*$length;
left:0;
right:0;
background-color: rgba(255,255,255,.5);
@extend %cursorPointer;
.video-drag__btn{
position:absolute;
height:10*$length;
width:10*$length;
box-shadow: 0 0 5px 2px #00AAE6;
left:50%;
top:-1*$length;
background-color: #fff;
border-radius: 50%;
@extend %cursorPointer;
}
.video-process__line{
width:50%;
height:100%;
@extend %cursorPointer;
background-color: #00AAE6;
}
}
.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{
@extend %flex-row-spb;
justify-content: flex-end;
i{
margin-right: 30*$length;
}
.speed-button{
margin-right: 30*$length;
position: relative;
height: 26px;
padding: 0 12px;
border-radius: 99em;
background-color:
rgba(0,0,0,.5);
color:
#ececec;
line-height: 26px;
text-align: center;
white-space: nowrap;
cursor: pointer;
@extend %animate-transition;
&:hover{
color:#fff;
background-color: #00AAE6;
}
}
}
.abs__setting-box{
position: absolute;
}
.abs__volume-box{
position: absolute;
z-index: 105;
right:110*$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;
right:130*$length;
z-index: 105;
bottom:50*$length;
width:146*$length;
border-radius: 4*$length;
background-color: rgb(41,41,41);
p{
padding:11*$length 0;
@include fontStyle(14,22,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color: #00AAE6;
}
}
}
}
}
.video-container__top{
height:30px;
width:100%;
position:absolute;
top:0;
left:0;
right:0;
}
.video-container__left{
width:30px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
}
.video-container__right{
width:30px;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
}
}
</style>
components/pc/socialContactCard.vue
......@@ -69,12 +69,14 @@
</p>
<banner v-if="showBanner" :currentImg2="currentImg" style="padding-top: 16px" :autoPlay=false :bannerType=2 :imgArr="pictures"></banner>
<video controls v-if="video" class="dynamic-video" >
<!-- <video controls v-if="video" class="dynamic-video" >-->
<source :src="video" type="video/mp4">
<source :src="video" type="video/ogg">
<source :src="video" type="video/webm">
</video>
<!-- <source :src="video" type="video/mp4">-->
<!-- <source :src="video" type="video/ogg">-->
<!-- <source :src="video" type="video/webm">-->
<!-- </video>-->
<yun-video v-if="video" :dataSrc="video"></yun-video>
<div class="card-footer">
......@@ -112,9 +114,11 @@
import config from '../../action/config';
import {globalBus} from '../common/globalBus'
import CommentCon from './comment/commentCon';
import YunVideo from "../common/video/src/main";
export default {
name:'socialContactCard',
components:{
YunVideo,
Banner,Dropdown,CommentCon
},
......
layouts/default.vue
......@@ -6,6 +6,17 @@
</div>
</template>
<!--
z-index message message-tip-box 9001
message-box 9000
page-video 8000
nuxt-progress header 7000
-->
<script>
import PageHeader from '../components/pc/pageHeader';
......
pages/blog/detail/_id.vue
......@@ -76,7 +76,16 @@
</div>
<div class="detail-container__right">
<user-card :isFollow="articleDetail.followedAuthor" :userId="articleDetail.userId"></user-card>
<card-container style="margin-top:16px" title="相关推荐" label="换一换" more="更多">
<card-container style="margin-top:16px;padding-bottom: 5px" title="相关文章推荐">
<nuxt-link tag="div" :to="'/blog/detail/'+val.blogId" class="right__hot-item" v-for="(val,index) in recommendList" :key="val.blogId">
<div class="right__hot-item__content">
<p>{{val.blogTitle}}</p>
<h6>{{val.blogAbstract}}</h6>
</div>
<div v-if="val.cover&&val.cover!=='无'" class="right__hot-item__cover">
<img :src="val.cover" alt="">
</div>
</nuxt-link>
</card-container>
</div>
<div class="article-option">
......@@ -146,6 +155,7 @@
return{
commentContent:'',
commentList:[],
recommendList:[],
tagString:''
}
......@@ -161,6 +171,7 @@
},
created(){
this.dataGetRecommendList();
globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.blogTitle,'blog');
if(this.articleDetail.tags){
this.articleDetail.tags.map((val,index)=>{
......@@ -219,6 +230,17 @@
},
dataGetRecommendList() {
let params={
page: 1,
size: 6
};
this.$axios.$get(config.api.get.Blog.recommendList+this.articleDetail.blogId+'/recommends',{params:params})
.then((response)=>{
this.recommendList = response.data.dataList;
});
},
dataPostPraise(){
this.$axios.$post(config.api.post.BlogPraise.praise+this.articleDetail.blogId+'/praise').then((response)=>{
......@@ -646,6 +668,53 @@
.detail-container__right{
width:302*$length;
.right__hot-item{
padding:8*$length 16*$length;
width:302*$length;
height:64*$length;
box-sizing: border-box;
@extend %cursorPointer;
@extend %flex-row-spb;
justify-content: flex-start;
&:hover{
.right__hot-item__content{
p{
color: rgba(0,170,230,1)
}
h6{
color: rgba(0,170,230,.8)
}
}
}
.right__hot-item__content{
margin-left:10*$length;
width:210*$length;
p{
@include fontStyle(14,19,500,#2F2F2F,left);
@extend %nowrap;
@extend %animate-transition;
}
h6{
margin-top:10*$length;
@include fontStyle(12,16,500,#999999,left);
@extend %nowrap;
@extend %animate-transition;
}
}
.right__hot-item__cover{
width:48*$length;
height:48*$length;
border-radius: 4*$length;
@extend %flex-row-center;
img{
max-width: 100%;
max-height: 100%;
}
}
}
}
.article-option{
......
pages/dynamic/index.vue
......@@ -385,11 +385,14 @@
<style lang="scss" scoped>
.dynamic-container{
width: $pageWidth;
margin:16*$length auto;
@extend %flex-row-spb;
align-items: flex-start;
position:relative;
div{
position:relative;
}
......
pages/project/index.vue
......@@ -27,13 +27,13 @@
width="302px"
style="margin-top: 16px;padding-bottom: 20px"
>
<nuxt-link tag="div" :to="'/project/detail/'+val.projectId" class="right__hot-item" v-for="(val,index) in hotProjectList" :key="val.projectId">
<div @click="changeRoute2('/project/detail/'+val.projectId)" class="right__hot-item" v-for="(val,index) in hotProjectList" :key="val.projectId">
<yun-avatar size="48px" border-r="4px" :src="val.cover" :name="val.projectName"></yun-avatar>
<div class="right__hot-item__content">
<p>{{val.projectName}}</p>
<h6>{{val.projectDescription}}</h6>
</div>
</nuxt-link>
</div>
</card-container>
</div>
</div>
......@@ -109,6 +109,12 @@ export default {
},
methods: {
changeRoute2(r){
let routeUrl = this.$router.resolve({
path: r
});
window.open(routeUrl.href,'_blank')
},
handleArticleList(){
this.projectList = this.articleList;
......
plugins/yunVideo.js 0 → 100644
import YunVideo from '../components/common/video/src/main.vue';
import Vue from 'vue';
Vue.use(YunVideo)
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