Skip to content

N
newLive
Commit ccb96193 authored by jyh's avatar jyh
Browse files
Options

Merge branch 'newlive_jyh'

parents 2f2e4bff 90e22ba1
Hide whitespace changes
Inline Side-by-side
Showing with 16917 additions and 66 deletions
package-lock.json
View file @ ccb96193
This source diff could not be displayed because it is too large. You can view the blob instead.
src/axios/api.js
View file @ ccb96193
......@@ -49,8 +49,18 @@ live: {
},
getLive:function(data){
return service.post('/app/live/liveList', data)
},
payinfo:function(data){
return service.post('/oapi/v1/h5/pay/payInfo', data)
},
order:function(data){
return service.post('/oapi/v1/h5/pay/order', data)
},
buy:function(data){
return service.post('/oapi/v1/h5/pay/buy', data)
}
},
}
......
src/router/index.js
View file @ ccb96193
......@@ -7,6 +7,9 @@ import register from '../views/register'
import live from '../views/live'
import pdf from '../views/pdf'
import fullScreen from '../views/fullScreen'
// import bullet from '../views/bullet'
// import login from '../views/login'
// import monthlyReport from '@/components/monthlyReport'//月报
// import personnelManagement from '@/components/personnelManagement'//人员管理
......@@ -63,6 +66,13 @@ const router = new Router({
component: fullScreen,
},
// {
// path: '/bullet',
// name: 'bullet',
// component: bullet,
// },
// {
// path: '/login',
// name: 'login',
......
src/views/bullet.vue 0 → 100644
View file @ ccb96193
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
src/views/live copy 2.vue 0 → 100644
View file @ ccb96193
<template>
<div class="videoPlayer">
<!-- <LivePlayer :videoUrl="url" /> -->
<div class='demo'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
<!-- <span class="text">12314342</span> -->
<!-- <preview-pdf ref="previewPdfh5"></preview-pdf> -->
<mt-navbar v-model="selected">
<mt-tab-item id="1">讨论</mt-tab-item>
<mt-tab-item id="2">主播</mt-tab-item>
<mt-tab-item id="3">回放</mt-tab-item>
<div @click="pay_p">支付</div>
</mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<div class="firstBody1" :style="{'height':getClientHeight}">
<div class="background">
<img class="headImg" src="../common/img/horn.png" alt="">
<span class="fistTitle">斗牛TV直播间倡导绿色直播，禁止传播违法、违规低俗、暴力等不良行为。请不要相信直播间中出现广告信息，非官方互动请谨慎参与，避免上当受骗。</span>
</div>
<div class="get-message">
<div v-for="i in userList" :key="i.id">
<div class="mq-message1" v-if="i.type==3">
<span class="welcome">欢迎</span><span class="info1">{{i.sender}}</span><span class="into1">进入直播间</span>
</div>
<div class="mq-messageTwo2" v-else-if="i.type==1">
<img class="get-horn" src="../common/img/get-message.png" alt=""><span class="infoTwo1">{{i.sender}} :</span><span class="intoTwo1">{{i.info}}</span>
</div>
</div>
</div>
<div class="sendMessage">
<input type="text" v-model="messages" placeholder="吐个槽吧~" class="wbk2">
<img class="send-message" src="../common/img/send-message.png" @click="clickmessage()" alt="">
</div>
<div class="tips" style="display: none;">
<span>发送成功</span>
</div>
</div>
</mt-tab-container-item>
<mt-tab-container-item id="2">
<div class="introduction">
<span v-html="lvrInfoText"></span>
<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
</div>
</mt-tab-container-item>
<mt-tab-container-item id="3">
<div class="scoll">
<div class="box" v-for="i in source" :key="i.fkLvrId">
<div style="display: flex;justify-content: space-around;" @click="videoClick(i.lvrrVideo)">
<div style="width:5vw;height:5vw">
<img v-show="i.imageList!=''&&ifcli==false" class="openImg" @click="clickOpen(1)" src="../common/img/open.png" alt="">
<img v-show="i.imageList!=''&&ifcli==true" class="openImg" @click="clickOpen(2)" src="../common/img/cliopen.png" alt="">
</div>
<img class="titleImg" :src="i.lvrrSmallImg" alt="">
<span class="titleText">{{i.lvrrTitle}}</span>
<span class="author">{{i.hotNum}}</span>
<span class="timer">{{i.lvrrDiffTime}}</span>
</div>
<div v-show="ifcli==false" class="checkPdf" v-for="j in i.imageList" :key="j.fileType" @click="pdfClick(j.imgeUrl)">
<img class="subordinate" src="../common/img/subordinate.png" alt="">
<img class="pdfImg" src="../common/img/Pdf.png" alt="">
<span class="pdfTitle" >{{j.imgeName}}</span>
</div>
</div>
</div>
</mt-tab-container-item>
</mt-tab-container>
<div class="p_conte" v-if="pten">
<div class="conten">
<div class="Sue">确认支付</div>
<div class="odiv">
<ul>
<!--第一个卡片 -->
<li class="live_b" @click="tab_li" :class="{active_p:currentIndex === index}" v-for="(item,index) in Listfor" :key="index">
<div class="one_day">{{item.leftPromptText}}</div>
<div class="Plef">
<div class="div_p">{{item.chargeModeName}}</div>
<div class="Uimg">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>20</span>
</div>
<div class="Mar_p">
<img src="../assets/niu.png" alt="" class="U_both">
<span>200/节</span>
</div>
</div>
</li>
</ul>
</div>
<div class="Lent">
<div class="Usret">
<span class="buy">购买者</span><span class="name">{{udRealname}}</span>
</div>
<div class="Usret_p">
<span class="buy">购买项目</span><span class="name">xxxx谁的直播间</span>
</div>
<div class="Lpin">支付方式 <span>{{text}}</span></div>
<!--牛币-->
<div class="ov" :class="n==1?'active':''">
<div>
<img src="../assets/niu.png" alt="">
<span>金牛（账户余额：20金牛）</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 1" @click="slect_one(1)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n == 1">
</div>
<!--微信-->
<div class="ov" :class="n==2?'active':''">
<div>
<img src="../assets/wx.png" alt="">
<span>微信</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 2" @click="slect_one(2)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n==2">
</div>
<!--支付宝-->
<div class="ov" :class="n==3?'active':''">
<div>
<img src="../assets/zfb.png" alt="">
<span>支付宝</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 3" @click="slect_one(3)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n==3">
</div>
<div class="z_sen">
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-if="isImg_show_p" @click="x_login">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="isImg_show" @click="x_login">
<span>同意</span><span class="no_p">《风险揭示书》《服务协议书》</span>
<div v-if="a_plert" class="gtert">请勾选同意</div>
</div>
<div class="gr"><img src="../assets/login.png" alt="" class="Pl" @click="login_t"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import Vue from 'vue'
import $ from 'jquery'
import { Navbar, TabItem } from 'mint-ui';
import store from '../store/index';
import PreviewPdf from '../components/PreviewpdfH5';
import mqtt from "../assets/sysconstant.js";
import request from '../axios/request';
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
name: 'H5LiveLive',
data() {
return {
n : 1,
url: '' ,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: true, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: true, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "video/mp4", // 类型
src: '' // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true, // 是否显示全屏按钮
}
},
selected:'1',
ifcli:false,
lvrStatus:'',
lvrInfoText:'',
timestamp:Date.parse(new Date())/1000,
messages:'',
source:[
],
messageList:[],
userList:[
],
clientHeight:0,
// showPrise:true,
a_plert:false,
isImg_show:false,//提交勾选协议
isImg_show_p:true,
udRealname:'',
text:'',
pten:false,
active:0,
Listfor:'',
pmoId:'',
pmoOrder:'',
currentIndex:0
// is_show_p:false //默认选中按钮隐藏
};
},
mounted() {
this.liveList()
this.videoList()
this.getHeight()
this.pay_info()
// 连接mqtt
mqtt.connect({
user: request.mqtt.mqttUser,
pwd: request.mqtt.mqttPwd,
domain: request.mqtt.mqttDomain,
port: request.mqtt.mqttPort,
destination: request.douniuLive.destination[0] + 46 +
request.douniuLive.destination[1],
}, this.getMessage);
},
components:{
PreviewPdf,
LivePlayer
},
computed:{
getClientHeight(){
//屏幕可视区域的高度
let clientHeight
if(document.documentElement.clientHeight<=750){
clientHeight=90+'vw'
}else if(document.documentElement.clientHeight<1024){
clientHeight=125+'vw'
}else{
clientHeight=55+'vw'
}
console.log("clientHeight 1=="+clientHeight)
//窗口可视区域发生变化的时候执行
window.onresize = () => {
// clientHeight=90+'vw'
// if(document.documentElement.clientHeight<=750){
// clientHeight=90+'vw'
// }else if(document.documentElement.clientHeight>750){
// clientHeight=125+'vw'
// }else if(document.documentElement.clientHeight>1024){
// clientHeight=55+'vw'
// }
// if(document.documentElement.clientHeight<750){
// clientHeight = 90 + "vw"
// return clientHeight
// }
// console.log("clientHeight changed2=="+clientHeight)
// return clientHeight
}
// console.log("clientHeight 3=="+clientHeight)
return clientHeight
}
},
// 销毁前
beforeDestroy() {
mqtt.disconnect();
// clearInterval(this.setInterval);
},
methods: {
clickOpen(i){
if(i==1){
this.ifcli=true
}else{
this.ifcli=false
}
},
clickmessage(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
applicationType:4,
pmIp:1,
pmMac:1,
info:this.messages,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.setMessage(temp).then(res=>{
let name=sessionStorage.getItem("name")
let ubId=sessionStorage.getItem("ubId")
console.log("阿道夫",name)
console.log("撒旦给",ubId)
$('.tips').show().delay(3000).hide(300)
let list={
sender:name,
info:this.messages,
type:1,
id:ubId,
}
this.userList.push(list)
this.messages=''
// this.lvrInfoText=res.data.data.lvrInfoText
// this.lvrStatus=res.data.data.lvrStatus
// if(res.data.data.lvrStatus==0){
// this.url=res.data.data.lvpPullUrl
// }else{
// this.videoList(1)
// }
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
getMessage(item){
console.log("啊哈哈哈",item)
let list={
sender:item.data.sender,
info:item.data.info,
type:item.data.info_type,
id:item.data.ub_id,
}
if(item.type==3 || item.type==1){
this.userList.push(list)
}
console.log("用户列表",this.userList)
},
getHeight(){
this.clientHeight=window.screen.height
console.log("屏幕高度",this.clientHeight)
},
liveList(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.liveDetail(temp).then(res=>{
this.lvrInfoText=res.data.data.lvrInfoText
this.lvrStatus=res.data.data.lvrStatus
if(res.data.data.lvrStatus==1){
this.playerOptions.sources[0].src=res.data.data.lvpPullUrl
}else{
this.videoList(1)
}
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
videoList(i){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.videoList(temp).then(res=>{
// this.url=res.data.data.lvpPullUrl
if(res.data.data.businessCode==10){
this.source=res.data.data.info
if(i==1){
this.playerOptions.sources[0].src=res.data.data.info[0].lvrrVideo
}
}
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
//获取支付信息
pay_info(){
let temp=this.qs.stringify({
pmAppVersion:'884',
// pmModel:'iPhone 12/13 (Pro)',
// pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
// goodsId:115,
// pmOperator:'无运营商',
applicationType:4,
pmAppVersion: 868,
// applicationType: 3,
goodsType:3,
goodsId:429,
})
this.server.live.payinfo(temp).then(res=>{
this.udRealname=res.data.data.udRealname
this.text=res.data.data.text,
this.Listfor =res.data.data.fees
// this.lvrStatus=res.data.data.lvrStatus
})
},
// 订单
payorder(){
let temp=this.qs.stringify({
goodsId:429,
goodsType:3,
sxUbId:26,
pmoType:0,
subscribeDayType:26,
applicationType:4,
payType:1,
// orderType:2,
subscribeDayType:19,
rechargeFrom:1,
isCheckBuy:1,
paySource:"douniu_h5",
chargeModeKey:'Month'
})
this.server.live.order(temp).then(res=>{
this.pmoId=res.data.data.pmoId,
this.pmoOrder=res.data.data.pmoOrder
if(res.code=200){
console.log(res.data.data.pmoOrder,'===-')
this.paybuy()
}
})
},
paybuy(){
let temp=this.qs.stringify({
orderId:this.pmoId,
orderNo:this.pmoOrder,
payType:1,
orderType:3,
pmoType:0,
goodsType:3,
})
this.server.live.buy(temp).then(res=>{
console.log(this.pmoOrder,'===')
})
},
videoClick(lv){
this.playerOptions.sources[0].src=lv
},
pdfClick(i){
// this.$refs.previewPdfh5.openPdf(i)
this.$router.push(
{
path:'/pdf',
query:{url:i},
});
},
//点击支付选中按钮
x_login(){
this.isImg_show=true
this.isImg_show_p=false
if(this.isImg_show == false){
this.a_plert = false;
}else if(this.isImg_show == true){
this.a_plert = false;
}
},
login_t(){
this.payorder()
if(!this.isImg_show){
this.a_plert=true
return;
}
},
tab_li(index){
// alert(1)
  this.currentIndex = index
},
slect_one(val){
this.n = val
},
pay_p(){
this.pten = true
},
},
};
</script>
<style>
.mint-tab-item-label {
/* color: inherit; */
font-size: 4vw;
/* line-height: 1; */
}
.vjs-custom-skin > .video-js .vjs-big-play-button {
display: none;
}
.video-js .vjs-modal-dialog{
display: none;
}
</style>
<style scoped>
.videoPlayer{
position: relative;
}
.subordinate{
height: 5vw;
width: 5vw;
margin-top: 6vw;
margin-left: 14vw;
}
.openImg{
height: 5vw;
width: 5vw;
margin-top: 12vw;
}
.checkPdf{
width: 100%;
height: 20vw;
/* margin-bottom: 5vw; */
display: flex;justify-content: space-around;
}
.pdfImg{
height: 12vw;
width: 10vw;
margin-top: 4vw;
}
.titleText{
margin-top: 3vw;
font-size: 4vw;
width: 54vw;
overflow: hidden;
}
.gtert{
margin-left:24px;
color:red
}
.Sue{
text-align: center;
margin-top:10px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #222222;
line-height: 22px;
}
.author{
position: absolute;
left: 40vw;
font-size: 3vw;
top: 21vw;
color: #797979;
}
.Pl{
width: 272px;
height:46px;
margin:0 auto
}
.gr{
text-align: center;
margin-top:25px
}
.timer{
position: absolute;
right: 2vw;
font-size: 3vw;
top: 21vw;
color: #797979;
}
.titleImg{
height: 23vw;
width: 23vw;
margin: 3vw;
}
.text{
position: absolute;
top: 59vw;
left: 1vw;
font-size: 3.7vw;
}
.mint-navbar .mint-tab-item.is-selected {
border-bottom: 0.8vw solid red;
color: red;
font-size: 4vw;
margin-bottom: -0.8vw;
}
.mint-navbar{
background-color: #25232E;
display: flex;
text-align: center;
color: white;
}
.pdfTitle{
font-size: 4vw;
margin-top: 9vw;
width: 57vw;
margin-left: 6vw;
overflow: hidden;
}
/* .mint-tab-item {
display: block;
padding: 1.86667vw 0;
flex: 1;
margin-left: 19vw;
text-decoration: none;
}
.mint-navbar {
background-color: #fff;
display: flex;
float: left;
text-align: center;
} */
.box{
width: 90vw;
position: relative;
margin-left: 5vw;
/* height: 30vw; */
margin-top: 3vw;
/* background: red; */
border-bottom: 0.1vw dashed #797979;
/* margin-top: 40px; */
/* font-size: 18px; */
}
.scoll{
overflow-x: auto;
overflow-y:auto;
height: 140vw;
}
.introduction{
width: 90vw;
/* position: relative; */
margin-left: 5vw;
font-size: 4vw;
/* height: 30vw; */
margin-top: 3vw;
}
.background{
height: 28vw;
width: 90%;
background: rgb(248, 239, 201);
position: relative;
margin-top: 4vw;
margin-left: 5%;
/* text-align: center; */
}
.fistTitle{
display: block;
width: 90%;
font-size: 3.8vw;
padding: 3vw 1vw 1vw 5vw;
text-indent: 8vw;
letter-spacing: 0.4vw;
color: red;
}
.headImg{
height: 6vw;
width: 5vw;
position: absolute;
top: 3vw;
left: 5vw;
}
.sendMessage{
width: 98%;
height: 16vw;
/* border: 0.5vw solid red; */
background: white;
position: fixed;
box-shadow: #797979 0 -0.5vw 1vw;
bottom: 1%;
line-height: 15vw;
left: 1%;
display: flex;
justify-content: space-around;
}
.wbk2 {
font-size: 3.7vw;
color: #797979;
border-radius: 5vw;
width: 65vw;
height: 13vw;
/* line-height: 10vw; */
margin-top: 1.5vw;
padding: 0 3vw;
background: none;
box-shadow: none;
outline: none;
background: rgb(243, 243, 243);
margin-left: 4vw;
/* border-color: rgb(213, 225, 245); */
border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px;
padding-left: 9vw;
}
.send-message{
height: 10vw;
width: 10vw;
margin-top: 3vw;
}
.get-message{
/* height: 48vw; */
width: 90%;
/* background: rgb(248, 239, 201); */
position: relative;
margin-top: 4vw;
margin-left: 2%;
}
.firstBody1{
overflow-x: auto;
overflow-y:auto;
margin-top: 2vw;
height: 125vw;
/* background: #0C0A16; */
background: url('../assets/b.png');
}
.mq-message1{
/* height: 10vw; */
padding: 2vw 0 2vw 0;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
display: flex;
justify-content: space-around;
position: relative;
}
.mq-messageTwo2{
padding: 3vw 0 5vw 0;
margin-bottom: 1vw;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
/* display: flex; */
/* justify-content: space-around; */
position: relative;
}
.welcome{
margin-left: -23vw;
}
.info1{
color: red;
margin-left: -50vw;
}
.infoTwo1{
color: #FF9B00;
margin-left: 11vw;
float: left;
display: block;
width: 32%;
}
.into1{
margin-left: -50vw;
}
.intoTwo1{
/* margin-left: -43vw; */
/* margin-left: 2vw; */
width: 42vw;
/* left: 37vw; */
display: block;
float: left;
color: white;
}
.get-horn{
height: 5vw;
width: 5vw;
left: 4vw;
/* margin-left: -19vw; */
position: absolute;
}
.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;
}
.live_b{
background:url('../assets/payone.png') no-repeat;
width: 121.33333vw;
height: 41.86667vw;
display:flex;
margin-right:6px;
}
.conten{
position:fixed;
top:27%;
left:0%;
width:100%;
/* background:red */
background: white;
height:100%
}
.p_conte{
position: relative;
}
.odiv{
width: 76.33333vw;
/* display: flex; */
overflow-x: auto;
margin:0 auto
}
.Plef_thr span{
color: #F79D2E;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
width: 17px;
height: 50px;
}
.sent_r{
width:12px;
height:15x;
margin-right:6px
}
.Mar_p{
margin-left:4px
}
.div_p{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FF7874;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.div_p_thr{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.U_both{
width: 3.2vw;
height: 4.2vw;
}
.div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.one_day{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF7874;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_thr{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_six{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Plef_six .C_div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.Uimg span{
color: #F79D2E;
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
.Colo_r{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Uimg_l{
margin-left: 3.2vw;
width: 9.6vw;
}
.one_day_ten{
width: 5.33333vw;
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B37EEB;
line-height: 4.53333vw;
margin-top: 5.33333vw;
margin-left: 2vw;
}
.div_p_ten{
width: 4.53333vw;
height: 13.33333vw;
font-size: 4.8vw;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #B37EEB;
line-height: 6.66667vw;
margin-left: 5.6vw;
margin-top: 5.33333vw;
}
.Uimg_t{
margin-left: 3.2vw;
width: 9.6vw;
}
.Uimg_t span{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B37EEB;
}
.Uimg_l span{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
}
.Plef img{
/* width:20px; */
/* margin-left:12px; */
/* margin-top:10px; */
/* margin-right:6px */
}
.Uimg{
margin-left:12px;
width: 36px;
}
.one_day_nine{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
color: #DBC114;
}
.Uimg_p {
margin-left: 3.2vw;
width: 9.6vw;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
}
.Plef_six span{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
/* color: #41A9FF; */
}
.Uimg_nine{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color:#DBC114;
margin-left: 3.2vw;
width: 9.6vw;
}
.div_p_nine{
width: 4.53333vw;
height: 13.33333vw;
font-size: 4.8vw;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #DBC114;
line-height: 6.66667vw;
margin-left: 5.6vw;
margin-top: 5.33333vw;
}
.Plef span {
width: 16px;
height: 16px;
font-size: 12px;
font-family: HelveticaNeue;
color: #FF7874;
line-height: 16px;
}
.conten ul{
width: 76.33333vw;
display: flex;
padding-left: 5.33333vw;
padding-top: 7.73333vw;
margin: 0 auto;
width: 126.33333vw;
}
.Lent{
height:100%;
margin-left:20px;
margin-right:20px;
}
.name{
float:right
}
.buy{
float:left
}
.ov{
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #F5F5F5;
padding-bottom: 20px;
padding-top:12px
}
.z_sen{margin-top: 12px;}
.ov div{
display: flex;
}
.Ig{
width:20px;
height:20px;
margin-right:6px
}
.no_p{
color:red
}
.Lpin{
margin-top:20px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;
}
.Lpin span{
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #E31D1A;
line-height: 22px;
}
.Usret{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.Usret_p{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top:14px
}
.ov img{
width: 6.33333vw;
height: 5.86667vw;
padding-right: 7px;
}
.activeClass{
background:url("../assets/back_a.png") no-repeat
}
.active_p{
background: red;;
}
</style>
src/views/live copy 3.vue 0 → 100644
View file @ ccb96193
<template>
<div class="videoPlayer">
<!-- <LivePlayer :videoUrl="url" /> -->
<div class='demo'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
<!-- <span class="text">12314342</span> -->
<!-- <preview-pdf ref="previewPdfh5"></preview-pdf> -->
<mt-navbar v-model="selected">
<mt-tab-item id="1">讨论</mt-tab-item>
<mt-tab-item id="2">主播</mt-tab-item>
<mt-tab-item id="3">回放</mt-tab-item>
<div @click="pay_p">支付</div>
</mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<div class="firstBody1" :style="{'height':getClientHeight}">
<div class="background">
<img class="headImg" src="../common/img/horn.png" alt="">
<span class="fistTitle">斗牛TV直播间倡导绿色直播，禁止传播违法、违规低俗、暴力等不良行为。请不要相信直播间中出现广告信息，非官方互动请谨慎参与，避免上当受骗。</span>
</div>
<div class="get-message">
<div v-for="i in userList" :key="i.id">
<div class="mq-message1" v-if="i.type==3">
<span class="welcome">欢迎</span><span class="info1">{{i.sender}}</span><span class="into1">进入直播间</span>
</div>
<div class="mq-messageTwo2" v-else-if="i.type==1">
<img class="get-horn" src="../common/img/get-message.png" alt=""><span class="infoTwo1">{{i.sender}} :</span><span class="intoTwo1">{{i.info}}</span>
</div>
</div>
</div>
<div class="sendMessage">
<input type="text" v-model="messages" placeholder="吐个槽吧~" class="wbk2">
<img class="send-message" src="../common/img/send-message.png" @click="clickmessage()" alt="">
</div>
<div class="tips" style="display: none;">
<span>发送成功</span>
</div>
</div>
</mt-tab-container-item>
<mt-tab-container-item id="2">
<div class="introduction">
<span v-html="lvrInfoText"></span>
<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
</div>
</mt-tab-container-item>
<mt-tab-container-item id="3">
<div class="scoll">
<div class="box" v-for="i in source" :key="i.fkLvrId">
<div style="display: flex;justify-content: space-around;" @click="videoClick(i.lvrrVideo)">
<div style="width:5vw;height:5vw">
<img v-show="i.imageList!=''&&ifcli==false" class="openImg" @click="clickOpen(1)" src="../common/img/open.png" alt="">
<img v-show="i.imageList!=''&&ifcli==true" class="openImg" @click="clickOpen(2)" src="../common/img/cliopen.png" alt="">
</div>
<img class="titleImg" :src="i.lvrrSmallImg" alt="">
<span class="titleText">{{i.lvrrTitle}}</span>
<span class="author">{{i.hotNum}}</span>
<span class="timer">{{i.lvrrDiffTime}}</span>
</div>
<div v-show="ifcli==false" class="checkPdf" v-for="j in i.imageList" :key="j.fileType" @click="pdfClick(j.imgeUrl)">
<img class="subordinate" src="../common/img/subordinate.png" alt="">
<img class="pdfImg" src="../common/img/Pdf.png" alt="">
<span class="pdfTitle" >{{j.imgeName}}</span>
</div>
</div>
</div>
</mt-tab-container-item>
</mt-tab-container>
<div class="p_conte" v-if="pten">
<div class="conten">
<div class="Sue">确认支付</div>
<div class="odiv">
<ul>
<!--第一个卡片 -->
<li class="live_b" @click="tab_li(index)" :class="{active_p:currentIndex === index}" v-for="(item,index) in Listfor" :key="index">
<div class="one_day">{{item.leftPromptText}}</div>
<div class="Plef">
<div class="div_p">{{item.chargeModeName}}</div>
<div class="Uimg">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>20</span>
</div>
<div class="Mar_p">
<img src="../assets/niu.png" alt="" class="U_both">
<span>200/节</span>
</div>
</div>
</li>
</ul>
</div>
<div class="Lent">
<div class="Usret">
<span class="buy">购买者</span><span class="name">{{udRealname}}</span>
</div>
<div class="Usret_p">
<span class="buy">购买项目</span><span class="name">xxxx谁的直播间</span>
</div>
<div class="Lpin">支付方式 <span>{{text}}</span></div>
<!--牛币-->
<div class="ov" :class="n==1?'active':''">
<div>
<img src="../assets/niu.png" alt="">
<span>金牛（账户余额：20金牛）</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 1" @click="slect_one(1)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n == 1">
</div>
<!--微信-->
<div class="ov" :class="n==2?'active':''">
<div>
<img src="../assets/wx.png" alt="">
<span>微信</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 2" @click="slect_one(2)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n==2">
</div>
<!--支付宝-->
<div class="ov" :class="n==3?'active':''">
<div>
<img src="../assets/zfb.png" alt="">
<span>支付宝</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 3" @click="slect_one(3)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n==3">
</div>
<div class="z_sen">
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-if="isImg_show_p" @click="x_login">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="isImg_show" @click="x_login">
<span>同意</span><span class="no_p">《风险揭示书》《服务协议书》</span>
<div v-if="a_plert" class="gtert">请勾选同意</div>
</div>
<div class="gr"><img src="../assets/login.png" alt="" class="Pl" @click="login_t"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import Vue from 'vue'
import $ from 'jquery'
import { Navbar, TabItem } from 'mint-ui';
import store from '../store/index';
import PreviewPdf from '../components/PreviewpdfH5';
import mqtt from "../assets/sysconstant.js";
import request from '../axios/request';
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
name: 'H5LiveLive',
data() {
return {
n : 1,
url: '' ,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: true, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: true, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "video/mp4", // 类型
src: '' // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true, // 是否显示全屏按钮
}
},
selected:'1',
ifcli:false,
lvrStatus:'',
lvrInfoText:'',
timestamp:Date.parse(new Date())/1000,
messages:'',
source:[
],
messageList:[],
userList:[
],
clientHeight:0,
// showPrise:true,
a_plert:false,
isImg_show:false,//提交勾选协议
isImg_show_p:true,
udRealname:'',
text:'',
pten:false,
active:0,
Listfor:'',
pmoId:'',
pmoOrder:'',
currentIndex:0
// is_show_p:false //默认选中按钮隐藏
};
},
mounted() {
this.liveList()
this.videoList()
this.getHeight()
this.pay_info()
// 连接mqtt
mqtt.connect({
user: request.mqtt.mqttUser,
pwd: request.mqtt.mqttPwd,
domain: request.mqtt.mqttDomain,
port: request.mqtt.mqttPort,
destination: request.douniuLive.destination[0] + 46 +
request.douniuLive.destination[1],
}, this.getMessage);
},
components:{
PreviewPdf,
LivePlayer
},
computed:{
getClientHeight(){
//屏幕可视区域的高度
let clientHeight
if(document.documentElement.clientHeight<=750){
clientHeight=90+'vw'
}else if(document.documentElement.clientHeight<1024){
clientHeight=125+'vw'
}else{
clientHeight=55+'vw'
}
console.log("clientHeight 1=="+clientHeight)
//窗口可视区域发生变化的时候执行
window.onresize = () => {
// clientHeight=90+'vw'
// if(document.documentElement.clientHeight<=750){
// clientHeight=90+'vw'
// }else if(document.documentElement.clientHeight>750){
// clientHeight=125+'vw'
// }else if(document.documentElement.clientHeight>1024){
// clientHeight=55+'vw'
// }
// if(document.documentElement.clientHeight<750){
// clientHeight = 90 + "vw"
// return clientHeight
// }
// console.log("clientHeight changed2=="+clientHeight)
// return clientHeight
}
// console.log("clientHeight 3=="+clientHeight)
return clientHeight
}
},
// 销毁前
beforeDestroy() {
mqtt.disconnect();
// clearInterval(this.setInterval);
},
methods: {
clickOpen(i){
if(i==1){
this.ifcli=true
}else{
this.ifcli=false
}
},
clickmessage(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
applicationType:4,
pmIp:1,
pmMac:1,
info:this.messages,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.setMessage(temp).then(res=>{
let name=sessionStorage.getItem("name")
let ubId=sessionStorage.getItem("ubId")
console.log("阿道夫",name)
console.log("撒旦给",ubId)
$('.tips').show().delay(3000).hide(300)
let list={
sender:name,
info:this.messages,
type:1,
id:ubId,
}
this.userList.push(list)
this.messages=''
// this.lvrInfoText=res.data.data.lvrInfoText
// this.lvrStatus=res.data.data.lvrStatus
// if(res.data.data.lvrStatus==0){
// this.url=res.data.data.lvpPullUrl
// }else{
// this.videoList(1)
// }
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
getMessage(item){
console.log("啊哈哈哈",item)
let list={
sender:item.data.sender,
info:item.data.info,
type:item.data.info_type,
id:item.data.ub_id,
}
if(item.type==3 || item.type==1){
this.userList.push(list)
}
console.log("用户列表",this.userList)
},
getHeight(){
this.clientHeight=window.screen.height
console.log("屏幕高度",this.clientHeight)
},
liveList(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.liveDetail(temp).then(res=>{
this.lvrInfoText=res.data.data.lvrInfoText
this.lvrStatus=res.data.data.lvrStatus
if(res.data.data.lvrStatus==1){
this.playerOptions.sources[0].src=res.data.data.lvpPullUrl
}else{
this.videoList(1)
}
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
videoList(i){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.videoList(temp).then(res=>{
// this.url=res.data.data.lvpPullUrl
if(res.data.data.businessCode==10){
// this.source=res.data.data.info 先隐藏
if(i==1){
this.playerOptions.sources[0].src=res.data.data.info[0].lvrrVideo
}
}
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
//获取支付信息
pay_info(){
let temp=this.qs.stringify({
pmAppVersion:'884',
// pmModel:'iPhone 12/13 (Pro)',
// pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
// goodsId:115,
// pmOperator:'无运营商',
applicationType:4,
pmAppVersion: 868,
// applicationType: 3,
goodsType:3,
goodsId:429,
})
this.server.live.payinfo(temp).then(res=>{
this.udRealname=res.data.data.udRealname
this.text=res.data.data.text,
this.Listfor =res.data.data.fees
// this.lvrStatus=res.data.data.lvrStatus
})
},
// 订单
payorder(){
let temp=this.qs.stringify({
goodsId:429,
goodsType:3,
sxUbId:26,
pmoType:0,
subscribeDayType:26,
applicationType:4,
payType:1,
// orderType:2,
subscribeDayType:19,
rechargeFrom:1,
isCheckBuy:1,
paySource:"douniu_h5",
chargeModeKey:'Month'
})
this.server.live.order(temp).then(res=>{
this.pmoId=res.data.data.pmoId,
this.pmoOrder=res.data.data.pmoOrder
if(res.code=200){
console.log(res.data.data.pmoOrder,'===-')
this.paybuy()
}
})
},
paybuy(){
let temp=this.qs.stringify({
orderId:this.pmoId,
orderNo:this.pmoOrder,
payType:1,
orderType:3,
pmoType:0,
goodsType:3,
})
this.server.live.buy(temp).then(res=>{
console.log(this.pmoOrder,'===')
})
},
videoClick(lv){
this.playerOptions.sources[0].src=lv
},
pdfClick(i){
// this.$refs.previewPdfh5.openPdf(i)
this.$router.push(
{
path:'/pdf',
query:{url:i},
});
},
//点击支付选中按钮
x_login(){
this.isImg_show=true
this.isImg_show_p=false
if(this.isImg_show == false){
this.a_plert = false;
}else if(this.isImg_show == true){
this.a_plert = false;
}
},
login_t(){
this.payorder()
if(!this.isImg_show){
this.a_plert=true
return;
}
},
tab_li(index){
alert(1)
  this.currentIndex = index
},
slect_one(val){
this.n = val
},
pay_p(){
this.pten = true
},
},
};
</script>
<style>
.mint-tab-item-label {
/* color: inherit; */
font-size: 4vw;
/* line-height: 1; */
}
.vjs-custom-skin > .video-js .vjs-big-play-button {
display: none;
}
.video-js .vjs-modal-dialog{
display: none;
}
</style>
<style scoped>
.videoPlayer{
position: relative;
}
.subordinate{
height: 5vw;
width: 5vw;
margin-top: 6vw;
margin-left: 14vw;
}
.openImg{
height: 5vw;
width: 5vw;
margin-top: 12vw;
}
.checkPdf{
width: 100%;
height: 20vw;
/* margin-bottom: 5vw; */
display: flex;justify-content: space-around;
}
.pdfImg{
height: 12vw;
width: 10vw;
margin-top: 4vw;
}
.titleText{
margin-top: 3vw;
font-size: 4vw;
width: 54vw;
overflow: hidden;
}
.gtert{
margin-left:24px;
color:red
}
.Sue{
text-align: center;
margin-top:10px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #222222;
line-height: 22px;
}
.author{
position: absolute;
left: 40vw;
font-size: 3vw;
top: 21vw;
color: #797979;
}
.Pl{
width: 272px;
height:46px;
margin:0 auto
}
.gr{
text-align: center;
margin-top:25px
}
.timer{
position: absolute;
right: 2vw;
font-size: 3vw;
top: 21vw;
color: #797979;
}
.titleImg{
height: 23vw;
width: 23vw;
margin: 3vw;
}
.text{
position: absolute;
top: 59vw;
left: 1vw;
font-size: 3.7vw;
}
.mint-navbar .mint-tab-item.is-selected {
border-bottom: 0.8vw solid red;
color: red;
font-size: 4vw;
margin-bottom: -0.8vw;
}
.mint-navbar{
background-color: #25232E;
display: flex;
text-align: center;
color: white;
}
.pdfTitle{
font-size: 4vw;
margin-top: 9vw;
width: 57vw;
margin-left: 6vw;
overflow: hidden;
}
/* .mint-tab-item {
display: block;
padding: 1.86667vw 0;
flex: 1;
margin-left: 19vw;
text-decoration: none;
}
.mint-navbar {
background-color: #fff;
display: flex;
float: left;
text-align: center;
} */
.box{
width: 90vw;
position: relative;
margin-left: 5vw;
/* height: 30vw; */
margin-top: 3vw;
/* background: red; */
border-bottom: 0.1vw dashed #797979;
/* margin-top: 40px; */
/* font-size: 18px; */
}
.scoll{
overflow-x: auto;
overflow-y:auto;
height: 140vw;
}
.introduction{
width: 90vw;
/* position: relative; */
margin-left: 5vw;
font-size: 4vw;
/* height: 30vw; */
margin-top: 3vw;
}
.background{
height: 28vw;
width: 90%;
background: rgb(248, 239, 201);
position: relative;
margin-top: 4vw;
margin-left: 5%;
/* text-align: center; */
}
.fistTitle{
display: block;
width: 90%;
font-size: 3.8vw;
padding: 3vw 1vw 1vw 5vw;
text-indent: 8vw;
letter-spacing: 0.4vw;
color: red;
}
.headImg{
height: 6vw;
width: 5vw;
position: absolute;
top: 3vw;
left: 5vw;
}
.sendMessage{
width: 98%;
height: 16vw;
/* border: 0.5vw solid red; */
background: white;
position: fixed;
box-shadow: #797979 0 -0.5vw 1vw;
bottom: 1%;
line-height: 15vw;
left: 1%;
display: flex;
justify-content: space-around;
}
.wbk2 {
font-size: 3.7vw;
color: #797979;
border-radius: 5vw;
width: 65vw;
height: 13vw;
/* line-height: 10vw; */
margin-top: 1.5vw;
padding: 0 3vw;
background: none;
box-shadow: none;
outline: none;
background: rgb(243, 243, 243);
margin-left: 4vw;
/* border-color: rgb(213, 225, 245); */
border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px;
padding-left: 9vw;
}
.send-message{
height: 10vw;
width: 10vw;
margin-top: 3vw;
}
.get-message{
/* height: 48vw; */
width: 90%;
/* background: rgb(248, 239, 201); */
position: relative;
margin-top: 4vw;
margin-left: 2%;
}
.firstBody1{
overflow-x: auto;
overflow-y:auto;
margin-top: 2vw;
height: 125vw;
/* background: #0C0A16; */
background: url('../assets/b.png');
}
.mq-message1{
/* height: 10vw; */
padding: 2vw 0 2vw 0;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
display: flex;
justify-content: space-around;
position: relative;
}
.mq-messageTwo2{
padding: 3vw 0 5vw 0;
margin-bottom: 1vw;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
/* display: flex; */
/* justify-content: space-around; */
position: relative;
}
.welcome{
margin-left: -23vw;
}
.info1{
color: red;
margin-left: -50vw;
}
.infoTwo1{
color: #FF9B00;
margin-left: 11vw;
float: left;
display: block;
width: 32%;
}
.into1{
margin-left: -50vw;
}
.intoTwo1{
/* margin-left: -43vw; */
/* margin-left: 2vw; */
width: 42vw;
/* left: 37vw; */
display: block;
float: left;
color: white;
}
.get-horn{
height: 5vw;
width: 5vw;
left: 4vw;
/* margin-left: -19vw; */
position: absolute;
}
.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;
}
.live_b{
background:url('../assets/payone.png') no-repeat;
width: 121.33333vw;
height: 41.86667vw;
display:flex;
margin-right:6px;
}
.conten{
position:fixed;
top:27%;
left:0%;
width:100%;
/* background:red */
background: white;
height:100%
}
.p_conte{
position: relative;
}
.odiv{
width: 76.33333vw;
/* display: flex; */
overflow-x: auto;
margin:0 auto
}
.Plef_thr span{
color: #F79D2E;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
width: 17px;
height: 50px;
}
.sent_r{
width:12px;
height:15x;
margin-right:6px
}
.Mar_p{
margin-left:4px
}
.div_p{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FF7874;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.div_p_thr{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.U_both{
width: 3.2vw;
height: 4.2vw;
}
.div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.one_day{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF7874;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_thr{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_six{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Plef_six .C_div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.Uimg span{
color: #F79D2E;
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
.Colo_r{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Uimg_l{
margin-left: 3.2vw;
width: 9.6vw;
}
.one_day_ten{
width: 5.33333vw;
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B37EEB;
line-height: 4.53333vw;
margin-top: 5.33333vw;
margin-left: 2vw;
}
.div_p_ten{
width: 4.53333vw;
height: 13.33333vw;
font-size: 4.8vw;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #B37EEB;
line-height: 6.66667vw;
margin-left: 5.6vw;
margin-top: 5.33333vw;
}
.Uimg_t{
margin-left: 3.2vw;
width: 9.6vw;
}
.Uimg_t span{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B37EEB;
}
.Uimg_l span{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
}
.Plef img{
/* width:20px; */
/* margin-left:12px; */
/* margin-top:10px; */
/* margin-right:6px */
}
.Uimg{
margin-left:12px;
width: 36px;
}
.one_day_nine{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
color: #DBC114;
}
.Uimg_p {
margin-left: 3.2vw;
width: 9.6vw;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
}
.Plef_six span{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
/* color: #41A9FF; */
}
.Uimg_nine{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color:#DBC114;
margin-left: 3.2vw;
width: 9.6vw;
}
.div_p_nine{
width: 4.53333vw;
height: 13.33333vw;
font-size: 4.8vw;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #DBC114;
line-height: 6.66667vw;
margin-left: 5.6vw;
margin-top: 5.33333vw;
}
.Plef span {
width: 16px;
height: 16px;
font-size: 12px;
font-family: HelveticaNeue;
color: #FF7874;
line-height: 16px;
}
.conten ul{
width: 76.33333vw;
display: flex;
padding-left: 5.33333vw;
padding-top: 7.73333vw;
margin: 0 auto;
width: 126.33333vw;
}
.Lent{
height:100%;
margin-left:20px;
margin-right:20px;
}
.name{
float:right
}
.buy{
float:left
}
.ov{
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #F5F5F5;
padding-bottom: 20px;
padding-top:12px
}
.z_sen{margin-top: 12px;}
.ov div{
display: flex;
}
.Ig{
width:20px;
height:20px;
margin-right:6px
}
.no_p{
color:red
}
.Lpin{
margin-top:20px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;
}
.Lpin span{
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #E31D1A;
line-height: 22px;
}
.Usret{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.Usret_p{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top:14px
}
.ov img{
width: 6.33333vw;
height: 5.86667vw;
padding-right: 7px;
}
.activeClass{
}
.active_p{
background:url("../assets/back_a.png") no-repeat;color:white
}
</style>
src/views/live copy.vue 0 → 100644
View file @ ccb96193
<template>
<div class="videoPlayer">
<!-- <LivePlayer :videoUrl="url" /> -->
<div class='demo'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
<!-- <span class="text">12314342</span> -->
<!-- <preview-pdf ref="previewPdfh5"></preview-pdf> -->
<mt-navbar v-model="selected">
<mt-tab-item id="1">讨论</mt-tab-item>
<mt-tab-item id="2">主播</mt-tab-item>
<mt-tab-item id="3">回放</mt-tab-item>
<div @click="pay_p">支付</div>
</mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<div class="firstBody1" :style="{'height':getClientHeight}">
<div class="background">
<img class="headImg" src="../common/img/horn.png" alt="">
<span class="fistTitle">斗牛TV直播间倡导绿色直播，禁止传播违法、违规低俗、暴力等不良行为。请不要相信直播间中出现广告信息，非官方互动请谨慎参与，避免上当受骗。</span>
</div>
<div class="get-message">
<div v-for="i in userList" :key="i.id">
<div class="mq-message1" v-if="i.type==3">
<span class="welcome">欢迎</span><span class="info1">{{i.sender}}</span><span class="into1">进入直播间</span>
</div>
<div class="mq-messageTwo2" v-else-if="i.type==1">
<img class="get-horn" src="../common/img/get-message.png" alt=""><span class="infoTwo1">{{i.sender}} :</span><span class="intoTwo1">{{i.info}}</span>
</div>
</div>
</div>
<div class="sendMessage">
<input type="text" v-model="messages" placeholder="吐个槽吧~" class="wbk2">
<img class="send-message" src="../common/img/send-message.png" @click="clickmessage()" alt="">
</div>
<div class="tips" style="display: none;">
<span>发送成功</span>
</div>
</div>
</mt-tab-container-item>
<mt-tab-container-item id="2">
<div class="introduction">
<span v-html="lvrInfoText"></span>
<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
</div>
</mt-tab-container-item>
<mt-tab-container-item id="3">
<div class="scoll">
<div class="box" v-for="i in source" :key="i.fkLvrId">
<div style="display: flex;justify-content: space-around;" @click="videoClick(i.lvrrVideo)">
<div style="width:5vw;height:5vw">
<img v-show="i.imageList!=''&&ifcli==false" class="openImg" @click="clickOpen(1)" src="../common/img/open.png" alt="">
<img v-show="i.imageList!=''&&ifcli==true" class="openImg" @click="clickOpen(2)" src="../common/img/cliopen.png" alt="">
</div>
<img class="titleImg" :src="i.lvrrSmallImg" alt="">
<span class="titleText">{{i.lvrrTitle}}</span>
<span class="author">{{i.hotNum}}</span>
<span class="timer">{{i.lvrrDiffTime}}</span>
</div>
<div v-show="ifcli==false" class="checkPdf" v-for="j in i.imageList" :key="j.fileType" @click="pdfClick(j.imgeUrl)">
<img class="subordinate" src="../common/img/subordinate.png" alt="">
<img class="pdfImg" src="../common/img/Pdf.png" alt="">
<span class="pdfTitle" >{{j.imgeName}}</span>
</div>
</div>
</div>
</mt-tab-container-item>
</mt-tab-container>
<div class="p_conte" v-if="pten">
<div class="conten">
<div class="Sue">确认支付</div>
<div class="odiv">
<ul>
<!--第一个卡片 -->
<li class="live_b" @click="tab_li">
<div class="one_day">畅听1天</div>
<div class="Plef">
<div class="div_p">次卡</div>
<div class="Uimg">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>20</span>
</div>
<div class="Mar_p">
<img src="../assets/niu.png" alt="" class="U_both">
<span>200/节</span>
</div>
</div>
</li>
<!--第二个卡片 -->
<li class="live_b" @click="tab_li">
<div class="Colo_r">畅听7天</div>
<div class="Plef_six">
<div class="C_div_p_six">次卡</div>
<div class="Uimg">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>20</span>
</div>
</div>
</li>
<!--第三个卡片 -->
<li class="live_b" @click="tab_li">
<div class="one_day_nine">畅听7天</div>
<div class="Plef_six">
<div class="div_p_nine">次卡</div>
<div class="Uimg_nine">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>20</span>
</div>
</div>
</li>
<!--第四个卡片 -->
<li class="live_b" @click="tab_li">
<div class="one_day_six">畅听7天</div>
<div class="Plef_six">
<div class="div_p_six">次卡</div>
<div class="Uimg_l">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>20</span>
</div>
</div>
</li>
<!--第五个卡片 -->
<li class="live_b" @click="tab_li">
<div class="one_day_ten">畅听7天</div>
<div class="Plef_six">
<div class="div_p_ten">次卡</div>
<div class="Uimg_t">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>20</span>
</div>
</div>
</li>
</ul>
</div>
<div class="Lent">
<div class="Usret">
<span class="buy">购买者</span><span class="name">{{udRealname}}</span>
</div>
<div class="Usret_p">
<span class="buy">购买项目</span><span class="name">xxxx谁的直播间</span>
</div>
<div class="Lpin">支付方式 <span>{{text}}</span></div>
<!--牛币-->
<div class="ov" :class="n==1?'active':''">
<div>
<img src="../assets/niu.png" alt="">
<span>金牛（账户余额：20金牛）</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 1" @click="slect_one(1)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n == 1">
</div>
<!--微信-->
<div class="ov" :class="n==2?'active':''">
<div>
<img src="../assets/wx.png" alt="">
<span>微信</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 2" @click="slect_one(2)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n==2">
</div>
<!--支付宝-->
<div class="ov" :class="n==3?'active':''">
<div>
<img src="../assets/zfb.png" alt="">
<span>支付宝</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 3" @click="slect_one(3)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n==3">
</div>
<div class="z_sen">
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-if="isImg_show_p" @click="x_login">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="isImg_show" @click="x_login">
<span>同意</span><span class="no_p">《风险揭示书》《服务协议书》</span>
<div v-if="a_plert" class="gtert">请勾选同意</div>
</div>
<div class="gr"><img src="../assets/login.png" alt="" class="Pl" @click="login_t"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import Vue from 'vue'
import $ from 'jquery'
import { Navbar, TabItem } from 'mint-ui';
import store from '../store/index';
import PreviewPdf from '../components/PreviewpdfH5';
import mqtt from "../assets/sysconstant.js";
import request from '../axios/request';
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
name: 'H5LiveLive',
data() {
return {
n : 1,
url: '' ,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: true, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: true, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "video/mp4", // 类型
src: '' // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true, // 是否显示全屏按钮
}
},
selected:'1',
ifcli:false,
lvrStatus:'',
lvrInfoText:'',
timestamp:Date.parse(new Date())/1000,
messages:'',
source:[
],
messageList:[],
userList:[
],
clientHeight:0,
// showPrise:true,
a_plert:false,
isImg_show:false,//提交勾选协议
isImg_show_p:true,
udRealname:'',
text:'',
pten:false,
active:0
// is_show_p:false //默认选中按钮隐藏
};
},
mounted() {
this.liveList()
this.videoList()
this.getHeight()
this.pay_info()
// 连接mqtt
mqtt.connect({
user: request.mqtt.mqttUser,
pwd: request.mqtt.mqttPwd,
domain: request.mqtt.mqttDomain,
port: request.mqtt.mqttPort,
destination: request.douniuLive.destination[0] + 46 +
request.douniuLive.destination[1],
}, this.getMessage);
},
components:{
PreviewPdf,
LivePlayer
},
computed:{
getClientHeight(){
//屏幕可视区域的高度
let clientHeight
if(document.documentElement.clientHeight<=750){
clientHeight=90+'vw'
}else if(document.documentElement.clientHeight<1024){
clientHeight=125+'vw'
}else{
clientHeight=55+'vw'
}
console.log("clientHeight 1=="+clientHeight)
//窗口可视区域发生变化的时候执行
window.onresize = () => {
// clientHeight=90+'vw'
// if(document.documentElement.clientHeight<=750){
// clientHeight=90+'vw'
// }else if(document.documentElement.clientHeight>750){
// clientHeight=125+'vw'
// }else if(document.documentElement.clientHeight>1024){
// clientHeight=55+'vw'
// }
// if(document.documentElement.clientHeight<750){
// clientHeight = 90 + "vw"
// return clientHeight
// }
// console.log("clientHeight changed2=="+clientHeight)
// return clientHeight
}
// console.log("clientHeight 3=="+clientHeight)
return clientHeight
}
},
// 销毁前
beforeDestroy() {
mqtt.disconnect();
// clearInterval(this.setInterval);
},
methods: {
clickOpen(i){
if(i==1){
this.ifcli=true
}else{
this.ifcli=false
}
},
clickmessage(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
applicationType:4,
pmIp:1,
pmMac:1,
info:this.messages,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.setMessage(temp).then(res=>{
let name=sessionStorage.getItem("name")
let ubId=sessionStorage.getItem("ubId")
console.log("阿道夫",name)
console.log("撒旦给",ubId)
$('.tips').show().delay(3000).hide(300)
let list={
sender:name,
info:this.messages,
type:1,
id:ubId,
}
this.userList.push(list)
this.messages=''
// this.lvrInfoText=res.data.data.lvrInfoText
// this.lvrStatus=res.data.data.lvrStatus
// if(res.data.data.lvrStatus==0){
// this.url=res.data.data.lvpPullUrl
// }else{
// this.videoList(1)
// }
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
getMessage(item){
console.log("啊哈哈哈",item)
let list={
sender:item.data.sender,
info:item.data.info,
type:item.data.info_type,
id:item.data.ub_id,
}
if(item.type==3 || item.type==1){
this.userList.push(list)
}
console.log("用户列表",this.userList)
},
getHeight(){
this.clientHeight=window.screen.height
console.log("屏幕高度",this.clientHeight)
},
liveList(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.liveDetail(temp).then(res=>{
this.lvrInfoText=res.data.data.lvrInfoText
this.lvrStatus=res.data.data.lvrStatus
if(res.data.data.lvrStatus==1){
this.playerOptions.sources[0].src=res.data.data.lvpPullUrl
}else{
this.videoList(1)
}
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
videoList(i){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
pmOperator:'无运营商'
})
this.server.live.videoList(temp).then(res=>{
// this.url=res.data.data.lvpPullUrl
if(res.data.data.businessCode==10){
this.source=res.data.data.info
if(i==1){
this.playerOptions.sources[0].src=res.data.data.info[0].lvrrVideo
}
}
// let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken);
// this.$router.push(
// {
// path:'/live',
// });
})
},
//获取支付信息
pay_info(){
let temp=this.qs.stringify({
pmAppVersion:'884',
// pmModel:'iPhone 12/13 (Pro)',
// pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
// goodsId:115,
// pmOperator:'无运营商',
applicationType:4,
pmAppVersion: 868,
// applicationType: 3,
goodsType:3,
goodsId:428,
})
this.server.live.payinfo(temp).then(res=>{
this.udRealname=res.data.data.udRealname
this.text=res.data.data.text
// this.lvrStatus=res.data.data.lvrStatus
})
},
videoClick(lv){
this.playerOptions.sources[0].src=lv
},
pdfClick(i){
// this.$refs.previewPdfh5.openPdf(i)
this.$router.push(
{
path:'/pdf',
query:{url:i},
});
},
//点击支付选中按钮
x_login(){
this.isImg_show=true
this.isImg_show_p=false
if(this.isImg_show == false){
this.a_plert = false;
}else if(this.isImg_show == true){
this.a_plert = false;
}
},
login_t(){
if(!this.isImg_show){
this.a_plert=true
return;
}
},
tab_li(){
// alert(1)
},
slect_one(val){
this.n = val
},
pay_p(){
this.pten = true
}
},
};
</script>
<style>
.mint-tab-item-label {
/* color: inherit; */
font-size: 4vw;
/* line-height: 1; */
}
.vjs-custom-skin > .video-js .vjs-big-play-button {
display: none;
}
.video-js .vjs-modal-dialog{
display: none;
}
</style>
<style scoped>
.videoPlayer{
position: relative;
}
.subordinate{
height: 5vw;
width: 5vw;
margin-top: 6vw;
margin-left: 14vw;
}
.openImg{
height: 5vw;
width: 5vw;
margin-top: 12vw;
}
.checkPdf{
width: 100%;
height: 20vw;
/* margin-bottom: 5vw; */
display: flex;justify-content: space-around;
}
.pdfImg{
height: 12vw;
width: 10vw;
margin-top: 4vw;
}
.titleText{
margin-top: 3vw;
font-size: 4vw;
width: 54vw;
overflow: hidden;
}
.gtert{
margin-left:24px;
color:red
}
.Sue{
text-align: center;
margin-top:10px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #222222;
line-height: 22px;
}
.author{
position: absolute;
left: 40vw;
font-size: 3vw;
top: 21vw;
color: #797979;
}
.Pl{
width: 272px;
height:46px;
margin:0 auto
}
.gr{
text-align: center;
margin-top:25px
}
.timer{
position: absolute;
right: 2vw;
font-size: 3vw;
top: 21vw;
color: #797979;
}
.titleImg{
height: 23vw;
width: 23vw;
margin: 3vw;
}
.text{
position: absolute;
top: 59vw;
left: 1vw;
font-size: 3.7vw;
}
.mint-navbar .mint-tab-item.is-selected {
border-bottom: 0.8vw solid red;
color: red;
font-size: 4vw;
margin-bottom: -0.8vw;
}
.mint-navbar{
background-color: #25232E;
display: flex;
text-align: center;
color: white;
}
.pdfTitle{
font-size: 4vw;
margin-top: 9vw;
width: 57vw;
margin-left: 6vw;
overflow: hidden;
}
/* .mint-tab-item {
display: block;
padding: 1.86667vw 0;
flex: 1;
margin-left: 19vw;
text-decoration: none;
}
.mint-navbar {
background-color: #fff;
display: flex;
float: left;
text-align: center;
} */
.box{
width: 90vw;
position: relative;
margin-left: 5vw;
/* height: 30vw; */
margin-top: 3vw;
/* background: red; */
border-bottom: 0.1vw dashed #797979;
/* margin-top: 40px; */
/* font-size: 18px; */
}
.scoll{
overflow-x: auto;
overflow-y:auto;
height: 140vw;
}
.introduction{
width: 90vw;
/* position: relative; */
margin-left: 5vw;
font-size: 4vw;
/* height: 30vw; */
margin-top: 3vw;
}
.background{
height: 28vw;
width: 90%;
background: rgb(248, 239, 201);
position: relative;
margin-top: 4vw;
margin-left: 5%;
/* text-align: center; */
}
.fistTitle{
display: block;
width: 90%;
font-size: 3.8vw;
padding: 3vw 1vw 1vw 5vw;
text-indent: 8vw;
letter-spacing: 0.4vw;
color: red;
}
.headImg{
height: 6vw;
width: 5vw;
position: absolute;
top: 3vw;
left: 5vw;
}
.sendMessage{
width: 98%;
height: 16vw;
/* border: 0.5vw solid red; */
background: white;
position: fixed;
box-shadow: #797979 0 -0.5vw 1vw;
bottom: 1%;
line-height: 15vw;
left: 1%;
display: flex;
justify-content: space-around;
}
.wbk2 {
font-size: 3.7vw;
color: #797979;
border-radius: 5vw;
width: 65vw;
height: 13vw;
/* line-height: 10vw; */
margin-top: 1.5vw;
padding: 0 3vw;
background: none;
box-shadow: none;
outline: none;
background: rgb(243, 243, 243);
margin-left: 4vw;
/* border-color: rgb(213, 225, 245); */
border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px;
padding-left: 9vw;
}
.send-message{
height: 10vw;
width: 10vw;
margin-top: 3vw;
}
.get-message{
/* height: 48vw; */
width: 90%;
/* background: rgb(248, 239, 201); */
position: relative;
margin-top: 4vw;
margin-left: 2%;
}
.firstBody1{
overflow-x: auto;
overflow-y:auto;
margin-top: 2vw;
height: 125vw;
/* background: #0C0A16; */
background: url('../assets/b.png');
}
.mq-message1{
/* height: 10vw; */
padding: 2vw 0 2vw 0;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
display: flex;
justify-content: space-around;
position: relative;
}
.mq-messageTwo2{
padding: 3vw 0 5vw 0;
margin-bottom: 1vw;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
/* display: flex; */
/* justify-content: space-around; */
position: relative;
}
.welcome{
margin-left: -23vw;
}
.info1{
color: red;
margin-left: -50vw;
}
.infoTwo1{
color: #FF9B00;
margin-left: 11vw;
float: left;
display: block;
width: 32%;
}
.into1{
margin-left: -50vw;
}
.intoTwo1{
/* margin-left: -43vw; */
/* margin-left: 2vw; */
width: 42vw;
/* left: 37vw; */
display: block;
float: left;
color: white;
}
.get-horn{
height: 5vw;
width: 5vw;
left: 4vw;
/* margin-left: -19vw; */
position: absolute;
}
.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;
}
.live_b{
background:url('../assets/payone.png') no-repeat;
width: 121.33333vw;
height: 41.86667vw;
display:flex;
margin-right:6px;
}
.conten{
position:fixed;
top:27%;
left:0%;
width:100%;
/* background:red */
background: white;
height:100%
}
.p_conte{
position: relative;
}
.odiv{
width: 76.33333vw;
/* display: flex; */
overflow-x: auto;
margin:0 auto
}
.Plef_thr span{
color: #F79D2E;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
width: 17px;
height: 50px;
}
.sent_r{
width:12px;
height:15x;
margin-right:6px
}
.Mar_p{
margin-left:4px
}
.div_p{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FF7874;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.div_p_thr{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.U_both{
width: 3.2vw;
height: 4.2vw;
}
.div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.one_day{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF7874;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_thr{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_six{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Plef_six .C_div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.Uimg span{
color: #F79D2E;
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
.Colo_r{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Uimg_l{
margin-left: 3.2vw;
width: 9.6vw;
}
.one_day_ten{
width: 5.33333vw;
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B37EEB;
line-height: 4.53333vw;
margin-top: 5.33333vw;
margin-left: 2vw;
}
.div_p_ten{
width: 4.53333vw;
height: 13.33333vw;
font-size: 4.8vw;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #B37EEB;
line-height: 6.66667vw;
margin-left: 5.6vw;
margin-top: 5.33333vw;
}
.Uimg_t{
margin-left: 3.2vw;
width: 9.6vw;
}
.Uimg_t span{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B37EEB;
}
.Uimg_l span{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
}
.Plef img{
/* width:20px; */
/* margin-left:12px; */
/* margin-top:10px; */
/* margin-right:6px */
}
.Uimg{
margin-left:12px;
width: 36px;
}
.one_day_nine{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
color: #DBC114;
}
.Uimg_p {
margin-left: 3.2vw;
width: 9.6vw;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
}
.Plef_six span{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
/* color: #41A9FF; */
}
.Uimg_nine{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color:#DBC114;
margin-left: 3.2vw;
width: 9.6vw;
}
.div_p_nine{
width: 4.53333vw;
height: 13.33333vw;
font-size: 4.8vw;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #DBC114;
line-height: 6.66667vw;
margin-left: 5.6vw;
margin-top: 5.33333vw;
}
.Plef span {
width: 16px;
height: 16px;
font-size: 12px;
font-family: HelveticaNeue;
color: #FF7874;
line-height: 16px;
}
.conten ul{
width: 76.33333vw;
display: flex;
padding-left: 5.33333vw;
padding-top: 7.73333vw;
margin: 0 auto;
width: 126.33333vw;
}
.Lent{
height:100%;
margin-left:20px;
margin-right:20px;
}
.name{
float:right
}
.buy{
float:left
}
.ov{
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #F5F5F5;
padding-bottom: 20px;
padding-top:12px
}
.z_sen{margin-top: 12px;}
.ov div{
display: flex;
}
.Ig{
width:20px;
height:20px;
margin-right:6px
}
.no_p{
color:red
}
.Lpin{
margin-top:20px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;
}
.Lpin span{
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #E31D1A;
line-height: 22px;
}
.Usret{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.Usret_p{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top:14px
}
.ov img{
width: 6.33333vw;
height: 5.86667vw;
padding-right: 7px;
}
.alin_ba{
background:url("../assets/back_a.png")
}
</style>
src/views/live.vue
View file @ ccb96193
......@@ -16,7 +16,9 @@
<mt-tab-item id="1">讨论</mt-tab-item>
<mt-tab-item id="2">主播</mt-tab-item>
<mt-tab-item id="3">回放</mt-tab-item>
<div @click="pay_p">支付</div>
</mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<div class="firstBody1" :style="{'height':getClientHeight}">
......@@ -78,6 +80,122 @@
</mt-tab-container-item>
</mt-tab-container>
<div class="p_conte" v-if="pten">
<div class="conten">
<div class="Sue">确认支付</div>
<div class="odiv">
<ul>
<!--第一个卡片 -->
<li class="live_b" @click="tab_li(index,item.chargeModeKey)" v-for="(item,index) in Listfor" :key="index"
:class="is_xuanzhong == `${is_Month + index}` ? 'Month'+index : item.chargeModeKey"
>
<div class="one_day">{{item.leftPromptText}}</div>
<div class="Plef">
<div class="div_p">{{item.chargeModeName}}</div>
<div class="Uimg">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>20</span>
</div>
<div class="Mar_p">
<img src="../assets/niu.png" alt="" class="U_both">
<span class="d_num">200/节</span>
</div>
</div>
</li>
</ul>
<!-- <ul>
<li class="live_b" @click="tab_li(index,item.chargeModeKey)" :class="{active_p:currentIndex === index}" v-for="(item,index) in Listfor" :key="index">
<div class="one_day">畅享受{{item.num}}天</div>
<div class="Plef">
<div class="div_p">{{item.chargeModeName}}</div>
<div class="Uimg">
<img src="../assets/niu.png" alt="" class="sent_r">
<span>{{item.lvrfFee}} </span>
</div>
<div class="Mar_p">
<img src="../assets/niu.png" alt="" class="U_both">
<span>{{item.promptFee}}月</span>
</div>
</div>
</li>
</ul> -->
</div>
<div class="Lent">
<div class="Usret">
<span class="buy">购买者</span><span class="name">{{udRealname}}</span>
</div>
<div class="Usret_p">
<span class="buy">购买项目</span><span class="name">xxxx谁的直播间</span>
</div>
<div class="Lpin">支付方式 <span>{{text}}</span></div>
<!--牛币-->
<div class="ov" :class="n==1?'active':''">
<div>
<img src="../assets/niu.png" alt="">
<span>金牛（账户余额：20金牛）</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 1" @click="slect_one(1)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n == 1">
</div>
<!--微信-->
<div class="ov" :class="n==2?'active':''">
<div>
<img src="../assets/wx.png" alt="">
<span>微信</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 2" @click="slect_one(2)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n==2">
</div>
<!--支付宝-->
<div class="ov" :class="n==3?'active':''">
<div>
<img src="../assets/zfb.png" alt="">
<span>支付宝</span>
</div>
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-show="n != 3" @click="slect_one(3)">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="n==3">
</div>
<div class="z_sen">
<!--未选中-->
<img src="../assets/noxuanzhong.png" alt="" class="Ig" v-if="isImg_show_p" @click="x_login">
<!--选中-->
<img src="../assets/select.png" alt="" class="Ig" v-if="isImg_show" @click="x_login">
<span>同意</span><span class="no_p">《风险揭示书》《服务协议书》</span>
<div v-if="a_plert" class="gtert">请勾选同意</div>
</div>
<div class="gr"><img src="../assets/login.png" alt="" class="Pl" @click="login_t"></div>
</div>
</div>
</div>
</div>
</template>
......@@ -97,6 +215,10 @@ export default {
data() {
return {
n : 1,
chargeModeKey:'Month',
is_xuanzhong : 'Month0',
is_Month : 'Month',
url: '' ,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
......@@ -128,13 +250,28 @@ export default {
timestamp:Date.parse(new Date())/1000,
messages:'',
source:[
],
messageList:[],
userList:[
],
clientHeight:0,
// showPrise:true,
a_plert:false,
isImg_show:false,//提交勾选协议
isImg_show_p:true,
udRealname:'',
text:'',
pten:false,
active:0,
Listfor:'',
pmoId:'',
pmoOrder:'',
active_p:'Month',
currentIndex:0
// is_show_p:false //默认选中按钮隐藏
};
},
......@@ -142,6 +279,7 @@ export default {
this.liveList()
this.videoList()
this.getHeight()
this.pay_info()
// 连接mqtt
mqtt.connect({
user: request.mqtt.mqttUser,
......@@ -315,7 +453,7 @@ export default {
this.server.live.videoList(temp).then(res=>{
// this.url=res.data.data.lvpPullUrl
if(res.data.data.businessCode==10){
this.source=res.data.data.info
// this.source=res.data.data.info 先隐藏
if(i==1){
this.playerOptions.sources[0].src=res.data.data.info[0].lvrrVideo
}
......@@ -329,6 +467,96 @@ export default {
// });
})
},
//获取支付信息
pay_info(){
let temp=this.qs.stringify({
pmAppVersion:'884',
// pmModel:'iPhone 12/13 (Pro)',
// pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
// goodsId:115,
// pmOperator:'无运营商',
applicationType:4,
pmAppVersion: 868,
// applicationType: 3,
goodsType:3,
goodsId:429,
})
this.server.live.payinfo(temp).then(res=>{
this.udRealname=res.data.data.udRealname
this.text=res.data.data.text,
this.Listfor =res.data.data.fees
// this.lvrStatus=res.data.data.lvrStatus
console.log()
})
},
// 订单
payorder(){
let temp=this.qs.stringify({
goodsId:429,
goodsType:3,
sxUbId:26,
pmoType:0,
subscribeDayType:26,
applicationType:4,
payType:1,
// orderType:2,
subscribeDayType:19,
rechargeFrom:1,
isCheckBuy:1,
paySource:"douniu_h5",
chargeModeKey:this.chargeModeKey
})
this.server.live.order(temp).then(res=>{
this.pmoId=res.data.data.pmoId,
this.pmoOrder=res.data.data.pmoOrder
if(res.code=200){
console.log(res.data.data.pmoOrder,'===-')
this.paybuy()
}
})
},
paybuy(){
let temp=this.qs.stringify({
orderId:this.pmoId,
orderNo:this.pmoOrder,
payType:1,
orderType:3,
pmoType:0,
goodsType:3,
})
this.server.live.buy(temp).then(res=>{
console.log(this.pmoOrder,'===')
})
},
videoClick(lv){
this.playerOptions.sources[0].src=lv
......@@ -340,7 +568,43 @@ export default {
path:'/pdf',
query:{url:i},
});
},
//点击支付选中按钮
x_login(){
this.isImg_show=true
this.isImg_show_p=false
if(this.isImg_show == false){
this.a_plert = false;
}else if(this.isImg_show == true){
this.a_plert = false;
}
},
login_t(){
this.payorder()
if(!this.isImg_show){
this.a_plert=true
return;
}
},
tab_li(index,chargeModeKey){
  this.is_xuanzhong = 'Month' + index;
this.chargeModeKey = chargeModeKey;
// this.idx=index
// this.Modekey=chargeModeKey
console.log( this.chargeModeKey+"是否收费模式")
},
slect_one(val){
this.n = val
},
pay_p(){
this.pten = true
},
},
};
</script>
......@@ -393,6 +657,21 @@ export default {
font-size: 4vw;
width: 54vw;
overflow: hidden;
}
.gtert{
margin-left:24px;
color:red
}
.Sue{
text-align: center;
margin-top:10px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #222222;
line-height: 22px;
}
.author{
position: absolute;
......@@ -401,8 +680,17 @@ export default {
top: 21vw;
color: #797979;
}
.Pl{
width: 272px;
height:46px;
margin:0 auto
}
.gr{
text-align: center;
margin-top:25px
}
.timer{
position: absolute;
position: absolute;
right: 2vw;
font-size: 3vw;
top: 21vw;
......@@ -426,6 +714,12 @@ font-size: 3.7vw;
font-size: 4vw;
margin-bottom: -0.8vw;
}
.mint-navbar{
background-color: #25232E;
display: flex;
text-align: center;
color: white;
}
.pdfTitle{
font-size: 4vw;
......@@ -515,68 +809,69 @@ display: block;
justify-content: space-around;
}
.wbk2 {
font-size: 3.7vw;
color: #797979;
border-radius: 5vw;
width: 65vw;
height: 13vw;
/* line-height: 10vw; */
margin-top: 1.5vw;
padding: 0 3vw;
background: none;
box-shadow: none;
outline: none;
background: rgb(243, 243, 243);
margin-left: 4vw;
/* border-color: rgb(213, 225, 245); */
border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px;
padding-left: 9vw;
font-size: 3.7vw;
color: #797979;
border-radius: 5vw;
width: 65vw;
height: 13vw;
/* line-height: 10vw; */
margin-top: 1.5vw;
padding: 0 3vw;
background: none;
box-shadow: none;
outline: none;
background: rgb(243, 243, 243);
margin-left: 4vw;
/* border-color: rgb(213, 225, 245); */
border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px;
padding-left: 9vw;
}
.send-message{
height: 10vw;
width: 10vw;
margin-top: 3vw;
height: 10vw;
width: 10vw;
margin-top: 3vw;
}
.get-message{
/* height: 48vw; */
width: 90%;
/* background: rgb(248, 239, 201); */
position: relative;
margin-top: 4vw;
margin-left: 2%;
width: 90%;
/* background: rgb(248, 239, 201); */
position: relative;
margin-top: 4vw;
margin-left: 2%;
}
.firstBody1{
overflow-x: auto;
overflow-y:auto;
margin-top: 2vw;
height: 125vw;
/* background: red; */
overflow-y:auto;
margin-top: 2vw;
height: 125vw;
/* background: #0C0A16; */
background: url('../assets/b.png');
}
.mq-message1{
/* height: 10vw; */
padding: 2vw 0 2vw 0;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
display: flex;
justify-content: space-around;
position: relative;
padding: 2vw 0 2vw 0;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
display: flex;
justify-content: space-around;
position: relative;
}
.mq-messageTwo2{
padding: 3vw 0 5vw 0;
margin-bottom: 1vw;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
/* display: flex; */
/* justify-content: space-around; */
position: relative;
width: 91%;
/* background: green; */
font-size: 3.8vw;
margin-left: 4%;
/* display: flex; */
/* justify-content: space-around; */
position: relative;
}
.welcome{
margin-left: -23vw;
......@@ -587,10 +882,10 @@ height: 125vw;
}
.infoTwo1{
color: #FF9B00;
margin-left: 11vw;
float: left;
display: block;
width: 32%;
margin-left: 11vw;
float: left;
display: block;
width: 32%;
}
.into1{
margin-left: -50vw;
......@@ -598,10 +893,11 @@ height: 125vw;
.intoTwo1{
/* margin-left: -43vw; */
/* margin-left: 2vw; */
width: 42vw;
/* left: 37vw; */
display: block;
float: left;
width: 42vw;
/* left: 37vw; */
display: block;
float: left;
color: white;
}
.get-horn{
......@@ -624,4 +920,452 @@ height: 125vw;
opacity: 0.6;
line-height: 10vw;
}
.live_b{
background:url('../assets/payone.png') no-repeat;
width: 121.33333vw;
height: 41.86667vw;
display:flex;
margin-right:6px;
}
.conten{
position:fixed;
top:27%;
left:0%;
width:100%;
/* background:red */
background: white;
height:100%
}
.p_conte{
position: relative;
}
.odiv{
width: 76.33333vw;
/* display: flex; */
overflow-x: auto;
margin:0 auto
}
.Plef_thr span{
color: #F79D2E;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
width: 17px;
height: 50px;
}
.sent_r{
width:12px;
height:15x;
margin-right:6px
}
.Mar_p{
margin-left:4px
}
.div_p{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FF7874;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.div_p_thr{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.U_both{
width: 3.2vw;
height: 4.2vw;
}
.div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.one_day{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF7874;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_thr{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_six{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Plef_six .C_div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.Uimg span{
color: #F79D2E;
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
.Colo_r{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Uimg_l{
margin-left: 3.2vw;
width: 9.6vw;
}
.one_day_ten{
width: 5.33333vw;
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B37EEB;
line-height: 4.53333vw;
margin-top: 5.33333vw;
margin-left: 2vw;
}
.div_p_ten{
width: 4.53333vw;
height: 13.33333vw;
font-size: 4.8vw;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #B37EEB;
line-height: 6.66667vw;
margin-left: 5.6vw;
margin-top: 5.33333vw;
}
.Uimg_t{
margin-left: 3.2vw;
width: 9.6vw;
}
.Uimg_t span{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B37EEB;
}
.Uimg_l span{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
}
.Plef img{
/* width:20px; */
/* margin-left:12px; */
/* margin-top:10px; */
/* margin-right:6px */
}
.Uimg{
margin-left:12px;
width: 36px;
}
.one_day_nine{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
color: #DBC114;
}
.Uimg_p {
margin-left: 3.2vw;
width: 9.6vw;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
}
.Plef_six span{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
/* color: #41A9FF; */
}
.Uimg_nine{
font-size: 3.2vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color:#DBC114;
margin-left: 3.2vw;
width: 9.6vw;
}
.div_p_nine{
width: 4.53333vw;
height: 13.33333vw;
font-size: 4.8vw;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #DBC114;
line-height: 6.66667vw;
margin-left: 5.6vw;
margin-top: 5.33333vw;
}
.Plef span {
width: 16px;
height: 16px;
font-size: 12px;
font-family: HelveticaNeue;
color: #FF7874;
line-height: 16px;
}
.Mar_p span{
color: #999999
}
.conten ul{
width: 76.33333vw;
display: flex;
padding-left: 5.33333vw;
padding-top: 7.73333vw;
margin: 0 auto;
width: 126.33333vw;
}
.Lent{
height:100%;
margin-left:20px;
margin-right:20px;
}
.name{
float:right
}
.buy{
float:left
}
.ov{
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #F5F5F5;
padding-bottom: 20px;
padding-top:12px
}
.z_sen{margin-top: 12px;}
.ov div{
display: flex;
}
.Ig{
width:20px;
height:20px;
margin-right:6px
}
.no_p{
color:red
}
.Lpin{
margin-top:20px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;
}
.Lpin span{
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #E31D1A;
line-height: 22px;
}
.Usret{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.Usret_p{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top:14px
}
.ov img{
width: 6.33333vw;
height: 5.86667vw;
padding-right: 7px;
}
.activeClass{
}
.active_p{
background:url("../assets/back_a.png") no-repeat;color:white
}
.active_one{
background:url("../assets/pay_inone.png") no-repeat;color:white
}
.active_two{
background:url("../assets/bac_p.png") no-repeat;color:white
}
.active_thre{
background:url("../assets/back_a.png") no-repeat;color:white
}
.active_pfoue{
background:url("../assets/bac_l.png") no-repeat;color:white
}
.active_five{
background:url("../assets/back_c.png") no-repeat;color:white
}
.Month0{
background:url("../assets/back_a.png") no-repeat;color:white
}
.Month1{
background:url("../assets/bac_l.png") no-repeat;color:white
}
.Month2{
background:url("../assets/back_c.png") no-repeat;color:white
}
.Month3{
background:url("../assets/bac_p.png") no-repeat;color:white
}
.Month4{
background:url("../assets/pay_inone.png") no-repeat;color:white
}
.Quarter .div_p{color:#41A9FF
}
.Quarter .one_day{
color:#41A9FF
}
.Quarter span{
color:#41A9FF
}
.HalfYear .div_p{
color:#CCA9F1
}
.HalfYear span{
color:#CCA9F1
}
.HalfYear .one_day{
color:#CCA9F1
}
.Month0 .one_day{
color:white
}
.Month0 .div_p{
color:white
}
.Month0 span{
color:white
}
.Month1 .one_day{
color:white
}
.Month1 .div_p{
color:white
}
.Month1 span{
color:white
}
.Month2 .one_day{
color:white
}
.Month2 .div_p{
color:white
}
.Month2 span{
color:white
}
.Month3 .one_day{
color:white
}
.Month3 .div_p{
color:white
}
.Month3 span{
color:white
}
.Month4 .one_day{
color:white
}
.Month4 .div_p{
color:white
}
.Month4 span{
color:white
}
.HalfYear .d_num{
color: #999999;
}
.Quarter .d_num{
color: #999999;
}
</style>
vue.config.js
View file @ ccb96193
......@@ -25,4 +25,5 @@ assetsDir: 'assets', // build时放置生成的静态资源 (js、css、img、fo
filenameHashing: true, // 默认在生成的静态资源文件名中包含hash以控制缓存
runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: true, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
lintOnSave:false//关闭语法错误
}
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