<template>
<div class="container" :style="{'padding-top':navHeight +'px'}">
<div class="masker"></div>
<live-pusher
id="pusher"
:url="tuiStream"
:mode="clear"
bindstatechange="statechange"
:beauty="beauty"
:enable-camera="enableCamera"
:whiteness="whiteness"
:device-position="devicePosition"
:enable-mic="enableMic"
:remote-mirror="mirror"
:mirror="mirror"
:local-mirror="remoteMirror"
:waiting-image="liveInfo.coverUrl"
style="width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1"
@statechange="statechange"
@error="binderror"
@netstatus="bindnetstatus"
v-if="refreshLive"
/>
<image class="bg-img" v-if="isBgImg" :src="liveInfo.coverUrl" mode="aspectFill" alt=""></image>
<div class="content" :style="{'padding-top':navHeight +'px'}">
<navBar
:navTop="navTop"
:navHeight="navHeight"
:isSetBeauty="isSetBeauty"
:isLive="isLive"
:type="1"
:id="liveId"
:pusher="pusher"
:liveInfo="liveInfo"
:realStartTime="realStartTime"
@closeSetBeauty="closeSetBeauty"
@clearAllInterval="clearAllInterval"
@changeOver="changeOver"
>
</navBar>
<div class="live-active" v-if="!isSetBeauty">
<span>{{look}} 观看</span>
<span>{{praise}} 赞</span>
<span>{{online}} 在线</span>
</div>
<!-- 开播倒计时 -->
<div class="countdown" v-show="isCountDown">
{{liveCountDown}}
</div>
<!-- 还没开始直播 -->
<div class="wait-start" v-show="noStartLive">
<div class="title">{{liveInfo.title}}</div>
<div class="open-live-title">{{!liveTimeStatus ? '开播倒计时' : '已超时，请尽快开始'}}</div>
<div class="wait-time">{{liveTime}}</div>
<div class="start-btn" @click="toSetBeauty('start')">开始直播</div>
</div>
<!-- 直播异常 -->
<div class="unusual-wrap" v-show="recoverLive">
<div class="title">{{liveInfo.title}}</div>
<div class="unusual-text">直播异常中断</div>
<div class="recover-btn" @click="checkLiveEnv('recover')">恢复直播</div>
</div>
<!-- 公告 -->
<div class="notice" v-show="!isSetBeauty">
公告：{{liveInfo.liveNotice}}
</div>
<!-- 设置 -->
<div class="setting-wrap" @click="setBeauty" v-show="!isSetBeauty && !isCountDown">
<img class="set-img" src="../../../static/images/shezhi.png" alt="">
</div>
<!-- 商品 -->
<div class="product-wrap" v-show="!isSetBeauty && liveInfo.liveBroadcastSales == 0" @click="showPopup">
<div class="product-num">{{productList.length}}</div>
<img class="product-img" src="../../../static/images/shangpin.png" alt="">
</div>
<!-- 商品弹窗 -->
<product
:productList="productList"
:productDialogStatus="productDialogStatus"
@hideProductPopup="hideProductPopup"
@changeProduct="changeProduct"
>
</product>
<!-- 讲解商品列表 -->
<div class="speak-product" v-show="!isSetBeauty && isLive">
<!-- <div class="speak-product"> -->
<div class="speak-item" v-for="(item,index) in speakProductList" :key="index">
<div class="item-status">
讲解中
</div>
<div class="item-top">
<img :src="item.productImgUrl" alt="">
</div>
<div class="item-bottom">
￥{{item.minPrice}}
</div>
</div>
</div>
<!-- 设置 -->
<setting
:pusher="pusher"
:beauty="beauty"
:whiteness="whiteness"
:clear="clear"
:devicePosition="devicePosition"
:enableMic="enableMic"
:remoteMirror="remoteMirror"
:isLive="isLive"
:liveInfo="liveInfo"
@updateBeauty="updateBeauty"
@updateWhiteness="updateWhiteness"
@updateClear="updateClear"
@updateDevicePosition="updateDevicePosition"
@updateRemoteMirror="updateRemoteMirror"
@updateEnableMic="updateEnableMic"
v-if="isSetBeauty"
@setBeautyStart="checkLiveEnv"
>
</setting>
<!-- 评论 -->
<comments v-if="!isSetBeauty" :updateVal="updateVal" :id="liveId" :commentsList="commentsList"></comments>
<!-- 用户进入通知 -->
<div class="userComing userComingAni" v-if="userComing && !isSetBeauty">
<span>{{entryNoticeText}}</span>
<span>来了</span>
</div>
</div>
</div>
</template>
<script>
import navBar from '@/components/common/navbar.vue'
import product from '@/components/product'
import setting from '@/components/setting'
import comments from '@/components/comments'
import { getNavbarInfo,DFSImg } from '../../utils/common.js'
import liveApi from '@/api/liveing'
export default {
data(){
return{
navTop : '',
navHeight : '',
isSetBeauty : false, //是否点击了设置
isUsual : false, //直播异常
productDialogStatus : false, //商品弹出框状态
isLive : false, //是否在直播
enableCamera : false, //是否开启摄像头
isPruductUp : false,
speakProductList : [],
pusher:null,
beauty:5, //美颜
whiteness:5,//美白
clear:'HD',
devicePosition : 'front', //前置或者后置 back => 后置
enableMic: true, //麦克风是否开启
remoteMirror:'enable', //镜像
userInfo : null,
liveInfo : {}, //直播信息
liveTime :'', //开播时间
liveTimeStatus : false , //是否超时
liveCountDown : 3, //开播倒计时
isCountDown : false, //是否显示倒计时
liveId : '', //直播间id
userComing: false,
entryNoticeText : '', //进入通知
online : 0, //在线
look : 0, //观看
praise:0, //点赞
commentsList : [], //评论
noStartLive : false,//还没开始直播,
recoverLive : false,//恢复直播
openLiveTimer : null, //开播时间定时器
tuiStream : '', //推流
productList : [], //商品列表
realStartTime : 0, //直播时间
liveDetailTimer : null, //获取直播评论等数据的定时器
getProductTimer : null, //刷新商品定时器
isBgImg : true, //是否展示背景图片
openRecordSet : false, //控制录音授权
openCameraSet : false, //控制相机授权
isChangeProduct : true, //是否可以上下屏,防止多次点击上下屏
isTimeLock : true, //时间锁
isTimeFirstReq : true, //第一次数据请求
isDetailLock : true, //查看详情锁
updateVal : 0,
overOrStop : 1, //是暂停还是结束
isDetailControlLock : true,
mirror : true,
refreshLive : true
}
},
filter(){
formatNum : (val) => {
return val - 0 > 10000 ? Math.floor(val / 10000)+ "w" : val
}
},
watch:{
//用户通知
entryNoticeText(){
if(this.entryNoticeText){
this.userComing=true;
setTimeout(() => {
this.userComing=false;
}, 4600);
}else{
this.userComing=false;
}
},
//开关摄像头
enableCamera(){
if(this.isLive){
this.enableCamera = true
this.isBgImg = false;
}
},
},
components:{
navBar,
product,
setting,
comments
},
created(){
//获取导航栏信息
getNavbarInfo((res) => {
this.navTop = res.navTop
this.navHeight = res.navHeight
})
},
onLoad(options){
this.isLive = false;
this.enableCamera = false;
this.isSetBeauty = false;
this.noStartLive = false;
this.recoverLive = false;
this.realStartTime = 0;
this.isBgImg = true;
this.isTimeLock = true;
this.isTimeFirstReq = true;
this.overOrStop = 1;
this.isDetailLock = true;
this.refreshLive = true;
this.online = 0 //在线
this.look = 0 //观看
this.praise = 0 //点赞
this.liveInfo = {}
this.liveTime = '';
this.liveId = options.id;
this.getLiveDetail(options.id);
this.openLiveTimer = setInterval(() => {
this.getLiveDetail(options.id); //传入直播间id
},5000)
this.getServerTimeNow(); //获取服务器时间戳
},
onReady(){
this.userInfo = this.$store.state.userInfo;
this.pusher = wx.createLivePusherContext('pusher')
},
onShow(){
wx.setKeepScreenOn({
keepScreenOn: true
})
if(this.openRecordSet){
this.openRecordSet = false;
this.getAuthSet('record')
}
if(this.openCameraSet){
this.openCameraSet = false;
this.getAuthSet('camera');
}
},
onHide(){
this.commentsList = []
this.clearAllInterval()
console.log('onHide',this.overOrStop)
this.pusher.stop();
if(this.overOrStop){
if(this.liveInfo.liveBroadcastState == 1){
this.changeLiveStatus(3)
this.isSetBeauty = false;
}
}
},
onUnload(){
this.commentsList = []
this.clearAllInterval()
this.changeLiveStatus(3)
},
methods:{
getAuthSet(type){
wx.getSetting({
success :(res) => {
if(type == 'record'){
if (!res.authSetting["scope.record"]) {
this.refreshLive = false;
this.openConfirm(type);
}else{
this.refreshLive = true;
this.pusher = wx.createLivePusherContext('pusher');
this.pusher.startPreview()
}
}else if(type == 'camera'){
if (!res.authSetting["scope.camera"]) {
this.openConfirm(type);
}else{
this.enableCamera = true;
}
}
},
fail(res) {
console.log("调用失败");
}
});
},
openConfirm(type){
let contentText = '';
if(type == 'record'){
contentText = '检测到您没打开麦克风的权限，是否去设置打开？'
}else if(type == 'camera'){
this.enableCamera = false;
contentText = '检测到您没打开摄像头的权限，是否去设置打开？'
}
wx.showModal({
content: contentText,
confirmText : '确认',
confirmColor : '#07c160',
success : (res) => {
if (res.confirm) {
wx.openSetting({
success : (res1) => {
if(type == 'record'){
this.openRecordSet = true;
}else if(type == 'camera'){
this.openCameraSet = true;
}
}
});
} else if (res.cancel) {
wx.reLaunch({url:`../liveList/main`})
}
}
})
},
//点击设置美颜
setBeauty(){
this.enableCamera = true;
this.noStartLive = false;
this.recoverLive = false
this.isBgImg = false;
this.isSetBeauty = true;
this.isDetailControlLock = false;
this.pusher.startPreview()
},
showPopup(){
this.productDialogStatus = true
this.getProductList()
},
hideProductPopup(){
this.productDialogStatus = false
},
//设置美颜
updateBeauty(val){
this.beauty = val;
},
//设置美白
updateWhiteness(val){
this.whiteness = val;
},
//设置清晰度
updateClear(val){
this.clear = val
},
//镜像
updateRemoteMirror(val){
this.remoteMirror = val;
this.mirror = val == 'enable' ? true : false
},
//麦克风
updateEnableMic(val){
this.enableMic = val;
},
//获取直播间详情
getLiveDetail(id){
if(this.isDetailLock && this.isDetailControlLock){
this.isDetailLock = false;
liveApi.queryLiveDetail({id}).then(res => {
this.isDetailLock = true;
if(res.data.code == '200'){
let result = res.data.data
if(result){
result.coverUrl = DFSImg(result.coverUrl)
result.logoUrl = DFSImg(result.logoUrl)
this.liveInfo = result;
this.tuiStream = result.tuiStream
if(result.liveBroadcastState == 0){
this.isLive = false
this.isBgImg = true;
this.noStartLive = true;
}else if(result.liveBroadcastState == 1){
this.enableCamera = true
this.isLive = true
this.isBgImg = false;
}else if(result.liveBroadcastState == 3){
console.log('llll')
this.recoverLive = true;
this.isUsual = true;
this.isBgImg = true;
}
if(result.realStartTime){
this.realStartTime = Math.floor((new Date().getTime() - new Date(result.realStartTime.replace(/-/g, '/').replace(/-/g, '/')).getTime())/1000)
}else{
this.realStartTime = 0
}
this.getLiveTimeHandler(result.startTime)
this.getProductList(); //获取商品列表
}else{
wx.showModal({
title: '提示',
content: '直播已关闭',
success (res3) {
if (res3.confirm) {
wx.reLaunch({url:`../liveList/main`})
} else if (res3.cancel) {
console.log('用户点击取消')
}
}
})
}
}else if(res.data.code == '-1'){
wx.showModal({
title: '提示',
content: '直播已关闭',
success (res3) {
if (res3.confirm) {
wx.reLaunch({url:`../liveList/main`})
} else if (res3.cancel) {
console.log('用户点击取消')
}
}
})
}
})
}
},
//获取开播时间
getLiveTimeHandler(time){
let getTime = new Date(time.replace(/-/g, '/')).getTime() - new Date().getTime();
let getTimeAbs = Math.abs(getTime)
let hours = '';
let minute = '';
let day = '';
if(getTime > 0){
this.liveTimeStatus = false
}else{
this.liveTimeStatus = true
}
day = Math.floor(getTimeAbs / (3600*1000*24))
hours = Math.floor((getTimeAbs%(24*3600*1000))/(3600*1000));
minute = Math.floor((getTimeAbs%(24*3600*1000)%(3600*1000) )/(60*1000))
if(getTime > 0){
if(day > 0){
let showHours = "";
let showMinute = "";
if(hours > 0){
if(hours >= 10){
showHours = hours + '小时'
}else{
showHours = '0' + hours + '小时'
}
}
if(minute >= 10){
showMinute = minute + '分'
}else{
showMinute = '0' + minute + '分'
}
this.liveTime = `${day >= 10 ? day : '0' + day}天${showHours}${showMinute}`
}else if(day <= 0 && hours > 0){
let showMinute = "";
if(minute >= 10){
showMinute = minute + '分'
}else{
showMinute = '0' + minute + '分'
}
this.liveTime = `${hours >= 10 ? hours : '0' + hours}小时${showMinute}`
}else if(day <= 0 && hours <= 0 && minute >= 0){
this.liveTime = `${minute >= 10 ? minute : '0' + minute}分`
}
}else{
this.liveTime = `${15 - minute}分钟后关闭`
}
},
//开始直播去设置美颜
toSetBeauty(type){
this.noStartLive = false;
this.isSetBeauty = true;
this.enableCamera = true;
this.isDetailControlLock = false;
this.isBgImg = false;
this.pusher.startPreview()
},
//检测直播环境
checkLiveEnv(type){
wx.getNetworkType({
success :(res) => {
if(res.errMsg == 'getNetworkType:ok'){
if(res.networkType != 'wifi'){
wx.showModal({
title: '流量提醒',
content: '你目前处于非WIFI环境，是否继续',
confirmText : '继续',
confirmColor : '#07c160',
success :(res1) => {
if (res1.confirm) {
liveApi.queryLiveDetail({id : this.liveId}).then(res2 => {
if(res2.data.code == '200'){
if(res2.data.data.liveBroadcastState == 4 || res2.data.data.liveBroadcastState == 2){
wx.showModal({
title: '提示',
content: '直播已关闭',
success (res3) {
if (res3.confirm) {
wx.reLaunch({url:`../liveList/main`})
} else if (res3.cancel) {
console.log('用户点击取消')
}
}
})
}else{
this.startLive(type);
}
}
})
} else if (res1.cancel) {
// console.log('用户点击取消')
}
}
})
}else{
liveApi.queryLiveDetail({id : this.liveId}).then(res2 => {
if(res2.data.code == '200'){
if(res2.data.data == null || res2.data.data.liveBroadcastState == 4 || res2.data.data.liveBroadcastState == 2){
wx.showModal({
title: '提示',
content: '直播已关闭',
success (res3) {
if (res3.confirm) {
wx.reLaunch({url:`../liveList/main`})
} else if (res3.cancel) {
console.log('用户点击取消')
}
}
})
}else{
this.startLive(type);
}
}
})
}
}
}
})
},
//开始直播
startLive(type){
this.isDetailControlLock = false;
if(type == 'recover'){
this.recoverLive = false;
this.isUsual = false;
}else if(type == 'start'){
this.noStartLive = false;
}
this.isPruductUp = true;
this.liveCountDown = 3;
this.isCountDown = true;
let timer = setInterval(() => {
--this.liveCountDown;
if(this.liveCountDown == 0){
console.log('开始直播')
this.pusher.start(); //开始推流
this.isCountDown = false;
this.isSetBeauty = false;
clearInterval(timer)
this.changeLiveStatus(1);
}
},1000)
},
//改变直播状态
changeLiveStatus(val){
liveApi.updateLiveStatus({
id : this.liveId,
liveBroadcastState : val
}).then(res => {
if(res.data.code == '200'){
if(val == 1){
this.isLive = true;
this.enableCamera = true;
this.isBgImg = false;
this.pusher.resume();
}else if(val == 3){
this.isLive = false;
console.log('222222')
this.recoverLive = true;
this.isBgImg = true;
this.enableCamera = false;
this.pusher.pause();
}
this.isDetailControlLock = true;
this.$set(this.liveInfo,'liveBroadcastState',val)
// this.pusher.resume();
}
})
},
//设置点击右上角返回
closeSetBeauty(val){
this.isSetBeauty = val;
this.isBgImg = true;
this.enableCamera = false;
this.isDetailControlLock = true;
if(this.liveInfo.liveBroadcastState == 0){
this.noStartLive = true;
}else if(this.liveInfo.liveBroadcastState == 1){
this.noStartLive = false;
this.recoverLive = false;
}else if(this.liveInfo.liveBroadcastState ==3){
this.recoverLive = true;
}
},
//定时查询数据
timeGetInfo(serverTime){
let newCommentsTime = serverTime
let userActivebeginTime = serverTime
clearInterval(this.liveDetailTimer)
this.liveDetailTimer = setInterval(() => {
if(this.isTimeLock){
//第一次请求用服务器的时间减去2秒
this.isTimeLock = false;
let dataTime = this.isTimeFirstReq ? serverTime - 2000 : newCommentsTime
let userTime = this.isTimeFirstReq ? serverTime - 2000 : userActivebeginTime
liveApi.queryLiveComments({
id: Number(this.liveId),
beginTime: dataTime, //评论时间
userActivebeginTime : userTime, //用户进入时间
}).then(res => {
this.isTimeLock = true;
if(res.data.code == '200'){
this.isTimeFirstReq = false;
let result = res.data.data;
// if(result.liveState == 'IN_LIVE' || result.liveState == 'SUSPEND_LIVE' || result.liveState == 'NO_LIVE' || result.liveState == 'PAUSE_LIVE'){
//用户通知
this.entryNoticeText = "";
if (result.entryNoticeList.length > 0) {
if (result.entryNoticeList.length == 1) {
this.entryNoticeText = `${result.entryNoticeList[0].userName}`;//用户进入
} else {
this.entryNoticeText = `${
result.entryNoticeList[0].userName
}等${result.entryNoticeList.length}人`;//用户进入
}
}
//观看
this.look = result.historyWatchNum - 0 >= 10000 ? ((result.historyWatchNum - 0) / 10000).toFixed(1)+ "w" : result.historyWatchNum
//在线
this.online = result.watchNum - 0 >= 10000 ?((result.watchNum - 0) / 10000).toFixed(1)+ "w" : result.watchNum
//点赞
this.praise = result.likeInfo.likeNum - 0 >= 10000 ? ((result.likeInfo.likeNum - 0) / 10000).toFixed(1)+ "w" : result.likeInfo.likeNum
//评论
result.guestBookList.forEach(item => {
this.commentsList.push(item)
})
if(result.guestBookList && result.guestBookList.length){
newCommentsTime = result.guestBookList[result.guestBookList.length - 1].createTimeStamp
}
if(result.entryNoticeList && result.entryNoticeList.length){
userActivebeginTime = result.entryNoticeList[result.entryNoticeList.length - 1].createTimeStamp
}
this.updateVal = new Date().getTime(); //监听使用数据
// }
}
})
}else{
console.log('上次请求未结束，进行了下一次请求')
}
},2000)
},
//服务器时间戳
getServerTimeNow(){
liveApi.queryServerTimeNow().then(res => {
if(res.data.code == 200){
//定时查询数据
this.timeGetInfo(res.data.data);
}
})
},
//推流状态
statechange(e){
console.log('statechange',e.mp.detail)
if(e.mp.detail.code == -1307){
this.isLive = false;
this.clearAllInterval()
wx.showToast({ title: e.mp.detail.message, icon: "none" });
}
},
binderror(e){
console.log('binderror',e.mp.detail)
if(e.mp.detail.errCode == 10002){ //禁用麦克风
this.getAuthSet('record')
}
if(e.mp.detail.errCode == 10001){ //禁用摄像头
this.getAuthSet('camera')
}
},
bindnetstatus(e){
console.log('binderror',e.mp.detail)
},
//获取商品列表
getProductList(){
liveApi.queryProductList({id : this.liveId,pageNum : 0,pageSize:0}).then(res => {
if(res.data.code == '200'){
let productIdArr = []
let productIdArr1 = []
this.productList.forEach(item2 => {
productIdArr.push(item2.productId)
})
res.data.data.forEach(item1 => {
productIdArr1.push(item1.productId)
})
if(JSON.stringify(productIdArr) != JSON.stringify(productIdArr1)){
this.speakProductList = [];
res.data.data.forEach(item => {
item.productImgUrl = DFSImg(item.productImgUrl)
item.minPrice = Number(item.minPrice).toFixed(2)
if(item.upperScreenState == '1'){
this.speakProductList.push(item)
}
})
this.productList = res.data.data
}
}
})
},
//商品上下屏
changeProduct(type,id,item){
if(this.isChangeProduct){
this.isChangeProduct = false;
liveApi.queryProductUpDown({
productId : id,
liveBroadcastId : this.liveId,
upperScreenState : type
}).then(res => {
if(res.data.code == '200'){
this.isChangeProduct = true;
console.log('上下屏')
if(type == 1){
if(this.speakProductList.length == 1){
if(Number(item.number) < Number(this.speakProductList[0].number)){
this.speakProductList.unshift(item)
}else{
this.speakProductList.push(item)
}
}else{
this.speakProductList.push(item)
}
this.productList.forEach((productItem,productIndex) => {
if(productItem.productId == id){
this.$set(this.productList[productIndex],'upperScreenState',1)
}
})
}else{
this.speakProductList.forEach((i,index) => {
if(i.productId == id){
this.speakProductList.splice(index,1)
}
})
this.productList.forEach((productItem,productIndex) => {
if(productItem.productId == id){
this.$set(this.productList[productIndex],'upperScreenState',0)
}
})
}
console.log(this.speakProductList, '上下屏商品')
}else{
wx.showModal({
title: '提示',
content: res.data.msg,
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
}
},
//结束直播清除相关定时器
clearAllInterval(){
clearInterval(this.openLiveTimer)
clearInterval(this.getProductTimer)
clearInterval(this.liveDetailTimer)
},
changeOver(val){
this.overOrStop = 0;
}
}
}
</script>
<style scoped lang="scss">
@mixin btn {
width: 148px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
border-radius: 8px;
background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
background-image: linear-gradient(to right,#FF877D, #FB566D);
}
.container{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
}
.masker{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(102,102,102,0.38);
}
.bg-img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.content{
width: 100%;
height: 100vh;
z-index: 10;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.live-active{
width: 155px;
height: 17px;
background-color: rgba(0,0,0,.6);
margin-left: 36px;
border-radius: 17px;
font-size: 10px;
color: white;
display: flex;
align-items: center;
justify-content: space-around;
}
.wait-start{
text-align: center;
margin-top: 20vh;
.title{
font-size: 18px;
color: white;
font-weight: bold;
}
.open-live-title{
font-size: 15px;
color: #EEEEED;
line-height: 50px;
}
.wait-time{
font-size: 36px;
color: white;
font-weight: bold;
}
.start-btn{
@include btn;
margin: 23px auto 0;
}
}
.countdown{
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,.38);
padding-top: 35vh;
color: white;
font-size: 40px;
text-align: center;
z-index: 120;
}
.unusual-wrap{
text-align: center;
margin-top: 20vh;
color: white;
.title{
font-size: 18px;
font-weight: bold;
}
.unusual-text{
font-size: 36px;
line-height: 80px;
font-weight: bold;
}
.recover-btn{
@include btn;
margin: 20px auto 0;
}
}
.notice{
position: fixed;
left: 16px;
bottom: 60px;
width: 195px;
background-color: rgba(0,0,0,.4);
border-radius: 14px;
box-sizing: border-box;
padding: 10px 7px 7px 10px;
font-size: 12px;
color: white;
line-height: 18px;
}
.product-wrap{
position: fixed;
left: 19px;
bottom: 14px;
width: 31px;
height: 29px;
.product-num{
font-size:12px;
color: white;
width: 100%;
text-align: center;
position: absolute;
bottom: 4px;
}
.product-img{
width: 100%;
height: 100%;
}
}
.setting-wrap{
position: fixed;
right: 13px;
bottom: 14px;
width: 37px;
height: 37px;
.set-img{
width: 100%;
height: 100%;
}
}
.speak-product{
position: fixed;
left: 8px;
top:20vh;
.speak-item{
width: 78px;
margin-bottom: 15px;
border-radius: 2px;
overflow: hidden;
position: relative;
.item-status{
position: absolute;
top: 0;
left: 0;
width: 39px;
height: 16px;
color: white;
background-color: #FF4240;
border-bottom-right-radius: 2px;
font-size: 11px;
text-align: center;
line-height: 16px;
}
.item-top{
height: 78px;
background-color: #B1B1B1;
img{
width: 100%;
height: 100%;
}
}
.item-bottom{
height: 23px;
background-color: white;
text-align: center;
line-height: 23px;
font-size: 14px;
color: #FA7018;
}
}
}
.userComing {
margin-bottom: 10px;
background: rgba(#000, 0.4);
color: #fff;
font-size: 16px;
height: 26px;
line-height: 26px;
border-radius: 26px;
padding: 0 8px;
display: inline-block;
position: fixed;
bottom: 30vh;
}
.userComingAni {
animation: userComingAni 4.7s linear;
}
@keyframes userComingAni {
0% {
transform: translateX(150vw);
opacity: 0.3;
}
30% {
transform: translateX(24px);
opacity: 1;
}
80% {
transform: translateX(24px);
opacity: 1;
}
100% {
transform: translateX(-150vw);
opacity: 0;
}
}
</style>