Commit 469a7350 by yanju

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

fix-issue#12

See merge request pigbigbig/beyond-clouds-front!129
parents 44e73991 d7d12d84
img { -webkit-touch-callout: none; }
input{ input{
outline:none; outline:none;
box-sizing:border-box; box-sizing:border-box;
......
// 视频无法播放时展示的图片
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 ();
...@@ -69,12 +69,14 @@ ...@@ -69,12 +69,14 @@
</p> </p>
<banner v-if="showBanner" :currentImg2="currentImg" style="padding-top: 16px" :autoPlay=false :bannerType=2 :imgArr="pictures"></banner> <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/mp4">-->
<source :src="video" type="video/ogg"> <!-- <source :src="video" type="video/ogg">-->
<source :src="video" type="video/webm"> <!-- <source :src="video" type="video/webm">-->
</video> <!-- </video>-->
<yun-video v-if="video" :dataSrc="video"></yun-video>
<div class="card-footer"> <div class="card-footer">
...@@ -112,9 +114,11 @@ ...@@ -112,9 +114,11 @@
import config from '../../action/config'; import config from '../../action/config';
import {globalBus} from '../common/globalBus' import {globalBus} from '../common/globalBus'
import CommentCon from './comment/commentCon'; import CommentCon from './comment/commentCon';
import YunVideo from "../common/video/src/main";
export default { export default {
name:'socialContactCard', name:'socialContactCard',
components:{ components:{
YunVideo,
Banner,Dropdown,CommentCon Banner,Dropdown,CommentCon
}, },
......
...@@ -6,6 +6,17 @@ ...@@ -6,6 +6,17 @@
</div> </div>
</template> </template>
<!--
z-index message message-tip-box 9001
message-box 9000
page-video 8000
nuxt-progress header 7000
-->
<script> <script>
import PageHeader from '../components/pc/pageHeader'; import PageHeader from '../components/pc/pageHeader';
......
...@@ -76,7 +76,16 @@ ...@@ -76,7 +76,16 @@
</div> </div>
<div class="detail-container__right"> <div class="detail-container__right">
<user-card :isFollow="articleDetail.followedAuthor" :userId="articleDetail.userId"></user-card> <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> </card-container>
</div> </div>
<div class="article-option"> <div class="article-option">
...@@ -146,6 +155,7 @@ ...@@ -146,6 +155,7 @@
return{ return{
commentContent:'', commentContent:'',
commentList:[], commentList:[],
recommendList:[],
tagString:'' tagString:''
} }
...@@ -161,6 +171,7 @@ ...@@ -161,6 +171,7 @@
}, },
created(){ created(){
this.dataGetRecommendList();
globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.blogTitle,'blog'); globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.blogTitle,'blog');
if(this.articleDetail.tags){ if(this.articleDetail.tags){
this.articleDetail.tags.map((val,index)=>{ this.articleDetail.tags.map((val,index)=>{
...@@ -219,6 +230,17 @@ ...@@ -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(){ dataPostPraise(){
this.$axios.$post(config.api.post.BlogPraise.praise+this.articleDetail.blogId+'/praise').then((response)=>{ this.$axios.$post(config.api.post.BlogPraise.praise+this.articleDetail.blogId+'/praise').then((response)=>{
...@@ -646,6 +668,53 @@ ...@@ -646,6 +668,53 @@
.detail-container__right{ .detail-container__right{
width:302*$length; 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{ .article-option{
......
...@@ -385,11 +385,14 @@ ...@@ -385,11 +385,14 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.dynamic-container{ .dynamic-container{
width: $pageWidth; width: $pageWidth;
margin:16*$length auto; margin:16*$length auto;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: flex-start; align-items: flex-start;
position:relative;
div{ div{
position:relative; position:relative;
} }
......
...@@ -27,13 +27,13 @@ ...@@ -27,13 +27,13 @@
width="302px" width="302px"
style="margin-top: 16px;padding-bottom: 20px" 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> <yun-avatar size="48px" border-r="4px" :src="val.cover" :name="val.projectName"></yun-avatar>
<div class="right__hot-item__content"> <div class="right__hot-item__content">
<p>{{val.projectName}}</p> <p>{{val.projectName}}</p>
<h6>{{val.projectDescription}}</h6> <h6>{{val.projectDescription}}</h6>
</div> </div>
</nuxt-link> </div>
</card-container> </card-container>
</div> </div>
</div> </div>
...@@ -109,6 +109,12 @@ export default { ...@@ -109,6 +109,12 @@ export default {
}, },
methods: { methods: {
changeRoute2(r){
let routeUrl = this.$router.resolve({
path: r
});
window.open(routeUrl.href,'_blank')
},
handleArticleList(){ handleArticleList(){
this.projectList = this.articleList; this.projectList = this.articleList;
......
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