Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Sign in / Register
Toggle navigation
N
newLive
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孟庆瑞
newLive
Commits
d4d41056
Commit
d4d41056
authored
Nov 27, 2022
by
jyh
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
卡片 以及支付
parent
ccb96193
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
0 additions
and
3626 deletions
+0
-3626
live copy 2.vue
src/views/live copy 2.vue
+0
-1218
live copy 3.vue
src/views/live copy 3.vue
+0
-1219
live copy.vue
src/views/live copy.vue
+0
-1189
No files found.
src/views/live copy 2.vue
deleted
100644 → 0
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
:
15
x
;
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
deleted
100644 → 0
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
:
15
x
;
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
deleted
100644 → 0
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
:
15
x
;
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
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment