Skip to content

N
newLive
Commit 4d6b342b authored by mengqr's avatar mengqr
Browse files
Options

样式修改

parent 9486a08b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 523 additions and 12468 deletions
package-lock.json
View file @ 4d6b342b
This diff is collapsed.
package.json
View file @ 4d6b342b
......@@ -19,6 +19,7 @@
"pdfh5": "^1.4.2",
"qs": "^6.11.0",
"vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-pdf": "^4.3.0",
"vue-router": "^3.5.2",
"vue-video-player": "^5.0.2",
......
src/components/plugin/shareCard.vue 0 → 100644
View file @ 4d6b342b
<template>
<div class="body">
<img class="share-img" @click="clickShare()" src="../../common/img/share.png" alt="">
<div v-if="ifShow">
<img v-if="checkType==0" class="style-one" src="../../common/img/card-style-One.png" alt="">
<img v-if="checkType==1" class="style-one" src="../../common/img/card-style-Two.png" alt="">
<img v-if="checkType==2" class="style-one" src="../../common/img/card-style-Three.png" alt="">
<!-- 信息样式 -->
<div>
<img class="headImg" :src="headPro" alt="">
<span class="udStyle">{{udName}}</span>
</div>
<div class="bottom-countent">
<div @click="checkImg(0)" :class="{smallOneRed:checkType==0,smallOne:checkType!=0}">
<img class="small-img" src="../../common/img/thumbnail-One.png" alt="">
</div>
<div @click="checkImg(1)" class="smallTwo" :class="{smallTwoRed:checkType==1,smallTwo:checkType!=1}">
<img class="small-img" src="../../common/img/thumbnail-Two.png" alt="">
</div>
<div @click="checkImg(2)" class="smallThree" :class="{smallThreeRed:checkType==2,smallThree:checkType!=2}">
<img class="small-img" src="../../common/img/thumbnail-Three.png" alt="">
</div>
<div class="clickWechat">
<img class="wechactImg" src="../../common/img/wechact-share.png" alt="">
<span class="wechactText">微信</span>
</div>
<div class="clickCopy copy"
v-clipboard:copy="copyContent"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>
<img class="linkImg" src="../../common/img/copy-link.png" alt="">
<span class="linkText">复制链接</span>
</div>
<!-- 提示框 -->
<div class="tips" style="display: none;">
<span>复制成功</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'shareCard',
props:{
headPortrait:String,//头像
udNickname:String,//主播名称
lvrName:String,//直播间名称
lvrImgLargeUrl:String,//占位图
},
data() {
return {
checkType:0,
copyContent:window.location.href,//需要复制的内容
ifShow:false,
headPro:'',//头像图片
udName:'',//主播名称
lvrImg:'',//占位图
liveName:'',//房间名称
};
},
created() {
// this.getMessage()
},
methods: {
checkImg(e){
this.checkType=e
},
onCopy({value}){
// console.log('success',value);
// console.log(this.copyContent)
$('.tips').show().delay(3000).hide(300)
console.log('复制成功')
},
onError({value}){
// console.log('error',value)
// console.log('复制成功')
},
//获取信息
// getMessage(){
// setTimeout(() => {
// }, 1000)
// },
//点击分享按钮
clickShare(){
if(this.ifShow==false){
this.ifShow=true
}else{
this.ifShow=false
}
console.log("头像信息",this.headPortrait)
console.log("主播名称",this.udNickname)
console.log("直播名称",this.lvrName)
console.log("占位图",this.lvrImgLargeUrl)
// headPro:'',//头像图片
// udName:'',//主播名称
// lvrImg:'',//占位图
// liveName:'',//房间名称
this.headPro=this.headPortrait//头像图片
this.udName=this.udNickname//主播名称
this.lvrImg=this.lvrImgLargeUrl//占位图
this.liveName=this.lvrName//房间名称
}
},
};
</script>
<style scoped>
.body{
position: relative;
}
.style-one{
height: 145vw;
position: absolute;
top: 10vw;
z-index: 99;
left: 7.5vw;
width: 85vw;
}
.bottom-countent{
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 50vw;
border-radius: 4vw;
background: yellowgreen;
}
.smallOne{
position: absolute;
top: 6vw;
left: 10vw;
height: 25vw;
width: 15vw;
/* border: 1vw solid red; */
}
.smallOneRed{
position: absolute;
top: 6vw;
left: 10vw;
height: 25vw;
width: 15vw;
border: 1vw solid red;
}
.smallTwoRed{
position: absolute;
top: 6vw;
left: 43vw;
height: 25vw;
width: 15vw;
border: 1vw solid red;
}
.smallThreeRed{
position: absolute;
top: 6vw;
left: 75vw;
height: 25vw;
width: 15vw;
border: 1vw solid red;
}
.small-img{
height: 25vw;
width: 15vw;
}
.smallTwo{
position: absolute;
top: 6vw;
left: 43vw;
}
.smallThree{
position: absolute;
top: 6vw;
left: 75vw;
}
.wechactImg{
height: 10vw;
width: 10vw;
position: absolute;
top: 1vw;
left: 2vw;
}
.wechactText{
font-size: 4vw;
position: absolute;
top: 3vw;
left: 14vw;
color: #656565;
}
.clickWechat{
height: 12vw;
width: 30vw;
/* background: yellow; */
position: absolute;
top: 34vw;
left: 10vw;
}
.clickCopy{
height: 12vw;
width: 30vw;
/* background: yellow; */
position: absolute;
top: 34vw;
right: 10vw;
}
.linkImg{
height: 10vw;
width: 10vw;
position: absolute;
top: 1vw;
left: 2vw;
}
.linkText{
font-size: 4vw;
position: absolute;
top: 3vw;
left: 14vw;
color: #656565;
}
.tips {
width: 40vw;
text-align: center;
height: 10vw;
background: black;
color: white;
position: fixed;
top: 80vw;
left: 30vw;
border-radius: 4vw;
opacity: 0.6;
line-height: 10vw;
}
.share-img{
position: absolute;
top: 2vw;
right: 3vw;
height: 8vw;
width: 8vw;
}
.headImg{
height: 19vw;
width: 19vw;
position: absolute;
top: 20vw;
z-index: 100;
left: 22vw;
border-radius: 50%;
}
.udStyle{
font-size: 5vw;
color: white;
position: absolute;
top: 41vw;
z-index: 100;
left: 22vw;
}
</style>
\ No newline at end of file
src/main.js
View file @ 4d6b342b
......@@ -11,12 +11,14 @@ import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import common from '../static/js/common.js' //公共方法
import 'video.js/dist/video-js.css'
import VueClipboard from "vue-clipboard2";
//引入 hls,视频直播(m3u8)必须引入的
import 'videojs-contrib-hls'
//播放rtmp视频
// import 'videojs-flash'
import Qs from 'qs'
Vue.use(Mint);
Vue.use(VueClipboard);
Vue.use(VideoPlayer);
Vue.prototype.server = server;
Vue.prototype.store = store;
......
src/views/fullScreen.vue
View file @ 4d6b342b
<template>
<div class="videoPlayer">
<img class="back-list" src="../common/img/back-list.png" alt="">
<div class="teach-box">
</div>
<img class="head-img" :src='udPhotoFileid' alt="">
<span class="teach-name">{{udNickname}}</span>
<span class="home-number">房间号: {{lvrId}}</span>
<!-- //分享卡片 -->
<share-card :headPortrait='udPhotoFileid' :udNickname='udNickname' :lvrName='lvrName' :lvrImgLargeUrl='lvrImgLargeUrl'> </share-card>
<img v-if="!ifFollow" @click="clickFollow()" class="follow-img" src="../common/img/follow.png" alt="">
<img v-if="ifFollow" @click="clickUnFollow()" class="follow-img" src="../common/img/unfollow.png" alt="">
<!-- <img class="share-img" src="../common/img/share.png" alt=""> -->
<div v-if="imgShow==true">
......@@ -85,7 +97,7 @@
</mt-tab-container> -->
</div>
<div v-if="imgShow==false">
<img src="../common/img/background-imge.jpg" style="height:100vh;width:100%" alt="">
<img src="../common/img/vertical-screen.webp" style="height:100vh;width:100%" alt="">
<img src="../common/img/video_play.png" style="height:14vw;width:14vw;position: fixed;top:74vw;left:42vw;" @click="goLive()" alt="">
<span style="font-size:4vw;color:white;position: fixed;top:100vw;left:20vw;">直播暂未开始，先看看其它视频吧</span>
</div>
......@@ -105,14 +117,23 @@ import mqtt from "../assets/sysconstant.js";
import 'video.js/dist/video-js.css'
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
name: 'H5LiveLive',
export default {
// components:{
// shareCard: () => import('@/components/plugin/shareCard.vue')
// },
data() {
return {
url: '' ,
urlStor:'',
udNickname:'',//主播名称
udPhotoFileid:'',//主播头像
lvrName:'',//直播名称
lvrImgLargeUrl:'',//占位图
lvrId:'',
stop:true,
ifFollow:false,
imgShow:true,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
......@@ -157,6 +178,7 @@ export default {
this.liveList()
this.videoList()
this.getHeight()
this.getListState()
// 连接mqtt
mqtt.connect({
user: request.mqtt.mqttUser,
......@@ -170,7 +192,8 @@ export default {
},
components:{
PreviewPdf,
LivePlayer
LivePlayer,
shareCard: () => import('@/components/plugin/shareCard.vue')
},
computed:{
......@@ -266,6 +289,14 @@ export default {
this.stop=true
this.url=this.urlStor
}
},
//点击关注事件
clickFollow(){
this.ifFollow=true
},
//点击已经关注按钮
clickUnFollow(){
this.ifFollow=false
},
//在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调
onPlayerCanplay(player) {
......@@ -298,7 +329,7 @@ export default {
pmIp:1,
pmMac:1,
info:this.messages,
lvrId:115,
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商'
})
this.server.live.setMessage(temp).then(res=>{
......@@ -360,7 +391,7 @@ export default {
this.clientHeight=window.screen.height
console.log("屏幕高度",this.clientHeight)
},
//获取直播详情接口
liveList(){
let temp=this.qs.stringify({
......@@ -368,12 +399,17 @@ export default {
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商'
})
this.server.live.liveDetail(temp).then(res=>{
this.lvrInfoText=res.data.data.lvrInfoText
this.lvrStatus=res.data.data.lvrStatus
this.lvrInfoText=res.data.data.lvrInfoText//富文本简介
this.lvrStatus=res.data.data.lvrStatus//直播状态
this.lvrImgLargeUrl=res.data.data.lvrImgLargeUrl//占位图
this.lvrName=res.data.data.lvrName//直播名称
this.udNickname=res.data.data.udNickname//主播名称
this.udPhotoFileid=res.data.data.udPhotoFileid//主播头像
this.lvrId=res.data.data.lvrId
if(res.data.data.lvrStatus==1){
this.url=res.data.data.lvpPullUrl
this.urlStor=res.data.data.lvpPullUrl
......@@ -398,7 +434,7 @@ export default {
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商'
})
this.server.live.videoList(temp).then(res=>{
......@@ -430,7 +466,67 @@ export default {
path:'/pdf',
query:{url:i},
});
}
},
//获取直播列表状态
getListState(){
console.log("好舒服擦",this.$route.query.ifrecom)
let ifrecom=this.$route.query.ifrecom
let lvrId=this.$route.query.lvrId
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
pmMac:1,
pmIp:1,
pmOperator:'无运营商',
applicationType:4,
})
if(!ifrecom){
this.server.live.getLive(temp).then(res=>{
// this.url=res.data.data.lvpPullUrl
if(res.data.data.businessCode==10){
let list=res.data.data.appSingleLiveResponseVOList
list.forEach(i => {
// i.ifrecom=true
if(i.lvrIsFree==0){
this.freeList.push(i)
}else{
this.vipList.push(i)
}
});
console.log('列表信息111',list)
console.log('vip列表111',this.vipList)
console.log('免费列表222',this.freeList)
// this.source=res.data.data.info
// if(i==1){
// this.url=res.data.data.info[0].lvrrVideo
// this.urlStor=res.data.data.info[0].lvrrVideo
// }
}
})
}else{
this.server.live.getLiveRecommendList(temp).then(res=>{
let list=res.data.data.appSingleLiveResponseVOList
list.forEach(i => {
if(i.lvrIsFree==0){
}else{
}
});
console.log('列表信息',list)
console.log('vip列表',this.vipList)
console.log('免费列表',this.freeList)
})
}
},
},
};
</script>
......@@ -441,7 +537,65 @@ export default {
height: 74vh;
}
.videoPlayer{
position: relative;
}
.back-list{
position: absolute;
top: 2vw;
left: 1vw;
height: 8vw;
width: 8vw;
}
.teach-box{
position: absolute;
top: 2vw;
left: 12vw;
height: 8vw;
width: 38vw;
border-radius: 10vw;
background: #000000;
}
.head-img{
position: absolute;
top: 2.4vw;
left: 12.7vw;
height: 7vw;
width: 7vw;
border-radius: 50%;
}
.teach-name{
font-size: 4vw;
transform: scale(0.8);
position: absolute;
top: 1.4vw;
left: 19vw;
color: white;
}
.home-number{
font-size: 1vw;
transform: scale(0.7);
position: absolute;
top: 6vw;
left: 18vw;
color: white;
}
.follow-img{
position: absolute;
top: 3vw;
left: 35vw;
height: 6vw;
width: 14vw;
}
.share-img{
position: absolute;
top: 2vw;
right: 3vw;
height: 8vw;
width: 8vw;
}
.subordinate{
height: 5vw;
width: 5vw;
......
src/views/liveList.vue
View file @ 4d6b342b
......@@ -11,7 +11,7 @@
<span :class="{member:!ifFree,nonemember:ifFree}" @click="clickVIP()">VIP</span>
</div>
<div class="content">
<div v-if="ifFree" v-for="i in freeList" :key="i.lvrId" class="moudle" >
<div v-if="ifFree" @click="liveDetail(i)" v-for="i in freeList" :key="i.lvrId" class="moudle" >
<img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt="">
<img class="head-img" src="../common/img/wechact.png" alt="">
<span class="head-name">{{i.udNickname}}</span>
......@@ -22,7 +22,7 @@
<span class="people-num">{{i.hotNum}}</span>
</div>
<div v-if="!ifFree" v-for="i in vipList" :key="i.lvrId" class="moudle">
<div v-if="!ifFree" @click="liveDetail(i)" v-for="i in vipList" :key="i.lvrId" class="moudle">
<img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt="">
<img class="head-img" src="../common/img/wechact.png" alt="">
<span class="head-name">{{i.udNickname}}</span>
......@@ -163,6 +163,36 @@ export default {
})
},
liveDetail(i){
let ifrecom
if(i.ifrecom){
ifrecom=true
}else{
ifrecom=false
}
if(i.lvrLiveType==0){
this.$router.push(
{
path:'/fullScreen',
query:{
lvrId:i.lvrId,
ifrecom:ifrecom
}
});
}else{
this.$router.push(
{
path:'/live',
query:{
lvrId:i.lvrId,
ifrecom:ifrecom
}
});
}
}
},
};
......
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