121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<template>
|
|
<div class="video">
|
|
<video :controls="true" :src="info.livestatus == 0 ? info.fileurl : info.vodurl"></video>
|
|
<div class="liveinfo">
|
|
<div class="left">
|
|
<div>
|
|
<img src="@/static/images/livelesson.png" alt="" class="icon">
|
|
<span>{{lan.$t('xiabanyayu')}}</span>
|
|
</div>
|
|
<div>
|
|
<img src="@/static/images/livewatch.png" alt="" class="icon">
|
|
<span>{{info.dateline}}</span>
|
|
</div>
|
|
<div>
|
|
<img src="@/static/images/livetimetake.png" alt="" class="icon">
|
|
<span>{{info.livetime}}min</span>
|
|
</div>
|
|
<div>
|
|
<img src="@/static/images/shoucang.png" alt="" class="icon">
|
|
<span class="score">5.0{{lan.$t('fen')}}</span>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div class="right" @click="bianji">
|
|
{{lan.$t('bianjixinxi')}}
|
|
</div>
|
|
<div class="right" @click="kaishi">
|
|
{{lan.$t('kaishizhibo')}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.video {
|
|
width: 976px;
|
|
height: 563px;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
> video {
|
|
width: 100%;
|
|
height: 505px;
|
|
}
|
|
.liveinfo{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 58px;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
.left{
|
|
display: flex;
|
|
color: #121212;
|
|
font-size: 13px;
|
|
margin-left: 29px;
|
|
.score{
|
|
color: #D22C2E;
|
|
font-size: 13px;
|
|
}
|
|
>div{
|
|
margin-right: 57px;
|
|
}
|
|
.icon{
|
|
width: 25px;
|
|
height:24px;
|
|
margin-right: 6px;
|
|
|
|
}
|
|
}
|
|
.right{
|
|
width: 74px;
|
|
height: 29px;
|
|
border:1px solid #08AE98;
|
|
border-radius: 3px;
|
|
margin-right: 29px;
|
|
color: #08AE98;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
line-height: 29px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<script lang="ts">
|
|
import { livestart } from '@/api';
|
|
import router from '@/router';
|
|
import { useI18n } from '@/utils/i18n';
|
|
import { defineComponent, ref } from "vue";
|
|
|
|
export default defineComponent({
|
|
props:{
|
|
info: Object
|
|
},
|
|
setup(props) {
|
|
const lan: any = useI18n();
|
|
console.log(props.info);
|
|
function bianji(){
|
|
if(props.info != undefined){
|
|
router.push("/mine/webcast?id=" + props.info.liveid)
|
|
}
|
|
}
|
|
// todo 修改后报错
|
|
function kaishi(){
|
|
if(props.info != undefined){
|
|
const id = props.info.liveid;
|
|
livestart(id).then(()=>{
|
|
router.push("/regime/liveing?id=" + id)
|
|
})
|
|
}
|
|
}
|
|
// const liveinfo = ref(props.liveinfo)
|
|
return {
|
|
bianji,
|
|
kaishi,
|
|
lan
|
|
}
|
|
},
|
|
});
|
|
</script> |