|
|
|
@ -1,41 +1,86 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="room" :style="{'width': winWidth+'px', 'height': winHeight+'px'}"> |
|
|
|
|
<view class="room-hd"> |
|
|
|
|
<zego-remote-view class="video-view" :style="{'width': winWidth+'px', 'height': winHeight+'px'}" :streamID="sellerStreamId"></zego-remote-view> |
|
|
|
|
<zego-local-view class="shitu"></zego-local-view> |
|
|
|
|
<view class="room-navbar" :style="{'width': winWidth+'px', 'height': (statusBarHeight+44)+'px'}"> |
|
|
|
|
<view class="navbar" :style="{'width': winWidth+'px', 'margin-top': (statusBarHeight)+'px'}"> |
|
|
|
|
<view class="back" @click="onBack()"> |
|
|
|
|
<image class="img" src="@/static/arrow-left.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="title" :style="{'width': winWidth+'px'}"><text class="txt">{{title}}</text></view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view v-if="type == 2 || type == 4"> |
|
|
|
|
<view class="room-hd" v-if="isToggle"> |
|
|
|
|
<zego-local-view class="video-view" :style="{'width': winWidth+'px', 'height': winHeight+'px'}"></zego-local-view> |
|
|
|
|
<zego-remote-view class="shitu" :streamID="sellerStreamId" :style="{'top': (statusBarHeight+60)+'px'}"></zego-remote-view> |
|
|
|
|
</view> |
|
|
|
|
<view class="room-hd" v-else> |
|
|
|
|
<zego-remote-view class="video-view" :streamID="sellerStreamId" :style="{'width': winWidth+'px', 'height': winHeight+'px'}"></zego-remote-view> |
|
|
|
|
<zego-local-view class="shitu" :style="{'top': (statusBarHeight+60)+'px'}"></zego-local-view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="room-fd" :style="{'width': winWidth+'px'}"> |
|
|
|
|
<view class="room-bd" :style="{'width': winWidth+'px', 'height': winHeight+'px'}" v-if="type == 1 || type == 3"> |
|
|
|
|
<image class="pic" src="@/static/yuyin-bg.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="room-fd" v-if="type==1 || type==3" :style="{'width': winWidth+'px'}" > |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="pic"> |
|
|
|
|
<image class="pimg" src="@/static/yuyin-01-on.png"></image> |
|
|
|
|
<view class="pic" @click="toggleYuyin()"> |
|
|
|
|
<image v-if="isYuyin" class="pimg" src="@/static/yuyin-01.png"></image> |
|
|
|
|
<image v-else class="pimg" src="@/static/yuyin-01-on.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="txt"><text>开启</text></view> |
|
|
|
|
</view> |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="pic"> |
|
|
|
|
<image class="pimg" src="@/static/yuyin-02.png"></image> |
|
|
|
|
<image v-if="isJieshou" @click="toGuaduan()" class="pimg" src="@/static/yuyin-02.png"></image> |
|
|
|
|
<image v-else class="pimg" @click="toJieshou()" src="@/static/yuyin-05.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="txt"><text>开启</text></view> |
|
|
|
|
</view> |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="pic" @click="toggleYangsheng()"> |
|
|
|
|
<image class="pimg" v-if="isYangshengqi" src="@/static/yuyin-03.png"></image> |
|
|
|
|
<image class="pimg" v-else src="@/static/yuyin-03-on.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="room-fd" v-if="type==2 || type==4" :style="{'width': winWidth+'px'}" > |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="pic" @click="toggleYuyin()"> |
|
|
|
|
<image v-if="isYuyin" class="pimg" src="@/static/yuyin-01.png"></image> |
|
|
|
|
<image v-else class="pimg" src="@/static/yuyin-01-on.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="pic" @click="toggleYangsheng()"> |
|
|
|
|
<image class="pimg" v-if="isYangshengqi" src="@/static/yuyin-03.png"></image> |
|
|
|
|
<image class="pimg" v-else src="@/static/yuyin-03-on.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="pic" @click="toggleShexiang()"> |
|
|
|
|
<image class="pimg" v-if="isShexiang" src="@/static/yuyin-04.png"></image> |
|
|
|
|
<image class="pimg" v-else src="@/static/yuyin-04-on.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="room-fd1" v-if="type==2 || type==4" :style="{'width': winWidth+'px'}" > |
|
|
|
|
<view class="items"> |
|
|
|
|
<view class="pic"> |
|
|
|
|
<image class="pimg" src="@/static/yuyin-03.png"></image> |
|
|
|
|
<image v-if="isJieshou" @click="toGuaduan()" class="pimg" src="@/static/yuyin-02.png"></image> |
|
|
|
|
<image v-else class="pimg" @click="toJieshou()" src="@/static/yuyin-05.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="txt"><text>开启</text></view> |
|
|
|
|
<image class="off" @click="toggleHuamian()" src="@/static/yuyin-off.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
let timer = null; |
|
|
|
|
import api from '@/api/index.js' |
|
|
|
|
import permision from "@/js_sdk/wa-permission/permission.js" |
|
|
|
|
//导入 ZEGO Express SDK |
|
|
|
|
import ZegoExpressEngine from '@/uni_modules/zego-ZegoExpressUniApp-JS/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine'; |
|
|
|
|
import ZegoRemoteView from "@/uni_modules/zego-ZegoExpressUniApp-JS/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoRemoteView"; |
|
|
|
|
import ZegoLocalView from "@/uni_modules/zego-ZegoExpressUniApp-JS/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoLocalView"; |
|
|
|
|
|
|
|
|
|
let roomConfig = {}; |
|
|
|
|
roomConfig.isUserStatusNotify = true; |
|
|
|
|
const profile = { |
|
|
|
@ -50,11 +95,18 @@ |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
isYuyin: true, |
|
|
|
|
isGuaduan: true, |
|
|
|
|
isYangshengqi: true, |
|
|
|
|
isShexiang: true, |
|
|
|
|
isJieshou: true, |
|
|
|
|
isToggle: true, |
|
|
|
|
winWidth: 0, |
|
|
|
|
winHeight: 0, |
|
|
|
|
userInfo: {}, |
|
|
|
|
playStreamId: "", |
|
|
|
|
title: "视频语音", |
|
|
|
|
title: "", |
|
|
|
|
count: 0, |
|
|
|
|
background: { |
|
|
|
|
// 导航栏背景图 |
|
|
|
|
background: 'url(https://api.lyiyuan.cn/profile/upload/static/yuyin-bg.png) center top no-repeat', |
|
|
|
@ -63,39 +115,117 @@ |
|
|
|
|
}, |
|
|
|
|
engine: null, |
|
|
|
|
roomId: "", |
|
|
|
|
sellerStreamId: "" |
|
|
|
|
type: 2, |
|
|
|
|
statusBarHeight: 0, |
|
|
|
|
sellerStreamId: "", |
|
|
|
|
viewModeIndex: 0, |
|
|
|
|
isCamera: true |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad(o) { |
|
|
|
|
this.id = o.id; |
|
|
|
|
this.type=o.type; |
|
|
|
|
this.title = (this.type == 2||this.type == 4)?"语音通话":"视频通话", |
|
|
|
|
this.isShexiang = (this.type == 2 || this.type == 4)?true:false |
|
|
|
|
this.winWidth = uni.getSystemInfoSync().windowWidth; |
|
|
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; |
|
|
|
|
this.winHeight = uni.getSystemInfoSync().windowHeight; |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.toPermission(); |
|
|
|
|
async onReady() { |
|
|
|
|
const that = this; |
|
|
|
|
uni.onSocketMessage(function (res) { |
|
|
|
|
const obj = res.data?JSON.parse(res.data):{}; |
|
|
|
|
console.log(obj) |
|
|
|
|
if(obj.topic == 'message'){ |
|
|
|
|
if(obj.type == 12){ |
|
|
|
|
if(uni.getStorageSync("userInfo").id == obj.sellerId){ |
|
|
|
|
that.toGuaduan(1) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
// #ifdef APP-PLUS |
|
|
|
|
if (uni.getSystemInfoSync().platform === "android") { |
|
|
|
|
const res = await permision.requestAndroidPermission( |
|
|
|
|
"android.permission.RECORD_AUDIO" |
|
|
|
|
); |
|
|
|
|
const res1 = await permision.requestAndroidPermission( |
|
|
|
|
"android.permission.CAMERA" |
|
|
|
|
); |
|
|
|
|
this.getUserInfo(); |
|
|
|
|
return ; |
|
|
|
|
} |
|
|
|
|
// #endif |
|
|
|
|
if(this.type <= 2){ |
|
|
|
|
this.toPermission(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
async toPermission() { |
|
|
|
|
// #ifdef APP-PLUS |
|
|
|
|
if (uni.getSystemInfoSync().platform === "android") { |
|
|
|
|
const res = await permision.requestAndroidPermission( |
|
|
|
|
"android.permission.RECORD_AUDIO" |
|
|
|
|
); |
|
|
|
|
const res1 = await permision.requestAndroidPermission( |
|
|
|
|
"android.permission.CAMERA" |
|
|
|
|
); |
|
|
|
|
this.getUserInfo(); |
|
|
|
|
return ; |
|
|
|
|
onBack() { |
|
|
|
|
const that = this; |
|
|
|
|
uni.showModal({ |
|
|
|
|
title: "温馨提示", |
|
|
|
|
content: "是否要退出房间?", |
|
|
|
|
confirmColor: "#000000", |
|
|
|
|
success(res) { |
|
|
|
|
if(res.confirm){ |
|
|
|
|
that.isGuaduan = false |
|
|
|
|
that.toGuaduan(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
toGuaduan(type) { |
|
|
|
|
if(type !=1){ |
|
|
|
|
uni.$emit("duanYinship",{ |
|
|
|
|
"userId": uni.getStorageSync("userInfo").id, |
|
|
|
|
sellerId: this.id, |
|
|
|
|
type: 12, |
|
|
|
|
"topic":"message", |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// #endif |
|
|
|
|
clearInterval(timer) |
|
|
|
|
this.isGuaduan = false |
|
|
|
|
/** 停止推流 */ |
|
|
|
|
this.engine?.stopPublishingStream(); |
|
|
|
|
/** 停止本地预览 */ |
|
|
|
|
this.engine?.stopPreview(); |
|
|
|
|
/** 停止拉流 */ |
|
|
|
|
this.engine?.stopPlayingStream(this.sellerStreamId); |
|
|
|
|
/** 退出房间 */ |
|
|
|
|
this.engine?.logoutRoom(this.roomId); |
|
|
|
|
/** 销毁引擎 */ |
|
|
|
|
ZegoExpressEngine.destroyEngine(); |
|
|
|
|
uni.navigateBack({ |
|
|
|
|
delta: 1 |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
toJieshou() { |
|
|
|
|
this.toPermission(); |
|
|
|
|
}, |
|
|
|
|
toggleYuyin() { |
|
|
|
|
this.isYuyin = !this.isYuyin; |
|
|
|
|
this.engine.muteMicrophone(this.isYuyin) |
|
|
|
|
}, |
|
|
|
|
toggleShexiang() { |
|
|
|
|
this.isShexiang = !this.isShexiang; |
|
|
|
|
this.engine.enableCamera(this.isShexiang) |
|
|
|
|
}, |
|
|
|
|
toggleHuamian() { |
|
|
|
|
this.isCamera = ! this.isCamera |
|
|
|
|
this.engine.useFrontCamera(this.isCamera) |
|
|
|
|
}, |
|
|
|
|
toggleYangsheng() { |
|
|
|
|
this.isYangshengqi = ! this.isYangshengqi |
|
|
|
|
this.engine.setAudioRouteToSpeaker(this.isCamera) |
|
|
|
|
}, |
|
|
|
|
async toPermission() { |
|
|
|
|
this.getUserInfo(); |
|
|
|
|
}, |
|
|
|
|
//查询个人信息 |
|
|
|
|
async getUserInfo() { |
|
|
|
|
const { code, data , msg} = await api.findUserInfo({userId: uni.getStorageSync("userInfo").id}); |
|
|
|
|
if(code == 200){ |
|
|
|
|
console.log("getUserInfo",data) |
|
|
|
|
this.userInfo = data; |
|
|
|
|
this.loginRoom(); |
|
|
|
|
}else{ |
|
|
|
@ -116,11 +246,11 @@ |
|
|
|
|
// 获取token传入 |
|
|
|
|
roomConfig.token = res.data.token; |
|
|
|
|
this.playStreamId = res.data.userStreamId; |
|
|
|
|
this.sellerStreamId = res.data.userStreamId; |
|
|
|
|
this.sellerStreamId = res.data.sellerStreamId; |
|
|
|
|
this.roomId = res.data.roomId; |
|
|
|
|
console.log("loginRoom11",res.data) |
|
|
|
|
this.engine = await ZegoExpressEngine.createEngineWithProfile(profile); |
|
|
|
|
this.engine.enableCamera(this.type == 1?true:false) |
|
|
|
|
this.engine.enableCamera(this.isShexiang) |
|
|
|
|
this.engine.enableEffectsBeauty(true); |
|
|
|
|
|
|
|
|
|
// 创建美颜参数对象 |
|
|
|
@ -132,7 +262,7 @@ |
|
|
|
|
beautyParam.sharpenIntensity = this.userInfo.reserved8; |
|
|
|
|
// 设置美颜参数 |
|
|
|
|
this.engine.setEffectsBeautyParam(beautyParam); |
|
|
|
|
this.engine.useFrontCamera(true) |
|
|
|
|
this.engine.useFrontCamera(this.isCamera) |
|
|
|
|
// 以下为常用的房间相关回调 |
|
|
|
|
this.engine.on('roomStateUpdate', (roomID, state, errorCode, extendedData) => { |
|
|
|
|
console.log("roomStateUpdate",roomID) |
|
|
|
@ -141,7 +271,7 @@ |
|
|
|
|
|
|
|
|
|
this.engine.on('roomUserUpdate', (roomID, updateType, userList) => { |
|
|
|
|
// 用户状态更新,登录房间后,当房间内有用户新增或删除时,SDK会通过该回调通知 |
|
|
|
|
console.log("roomUserUpdate",roomID,userList) |
|
|
|
|
console.log("roomUserUpdate",roomID,updateType,userList) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.engine.on('playerStateUpdate', (roomID, updateType, streamList) => { |
|
|
|
@ -149,7 +279,7 @@ |
|
|
|
|
// 调用拉流接口成功后,当拉流器状态发生变更,如出现网络中断导致推流异常等情况,SDK在重试拉流的同时,会通过该回调通知 |
|
|
|
|
}); |
|
|
|
|
this.engine.on('roomStreamUpdate', (roomID, updateType, streamList) => { |
|
|
|
|
console.log("playerStateUpdate",streamList) |
|
|
|
|
console.log("roomStreamUpdate",updateType,streamList) |
|
|
|
|
// 流状态更新,登录房间后,当房间内有用户新推送或删除音视频流时,SDK会通过该回调通知 |
|
|
|
|
// this.sellerStreamId = streamList[0].streamID; |
|
|
|
|
}); |
|
|
|
@ -167,45 +297,89 @@ |
|
|
|
|
}, |
|
|
|
|
roomConfig |
|
|
|
|
); |
|
|
|
|
// this.viewModeIndex = ZegoViewMode.AspectFit; |
|
|
|
|
this.engine.startPreview(); |
|
|
|
|
this.engine.startPublishingStream(this.playStreamId); |
|
|
|
|
this.isJieshou = true; |
|
|
|
|
clearInterval(timer); |
|
|
|
|
that.title = that.formatFun(that.count) |
|
|
|
|
timer = setInterval(()=>{ |
|
|
|
|
that.count ++; |
|
|
|
|
that.title = that.formatFun(that.count) |
|
|
|
|
},1000) |
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
this.toTuiliu() |
|
|
|
|
},100) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
formatFun(num){ |
|
|
|
|
let str = "",h,m,s; |
|
|
|
|
h=Math.floor(num/3600); |
|
|
|
|
m=Math.floor((num-h*3600)/60); |
|
|
|
|
s=(num-h*3600-m*60); |
|
|
|
|
str = (h<=9?'0'+h:h)+":"+(m<=9?'0'+m:m)+":"+(s<=9?'0'+s:s) |
|
|
|
|
return str; |
|
|
|
|
}, |
|
|
|
|
toTuiliu() { |
|
|
|
|
const that = this; |
|
|
|
|
console.log(this.sellerStreamId) |
|
|
|
|
console.log("toTuiliu",this.sellerStreamId) |
|
|
|
|
that.engine.startPlayingStream(this.sellerStreamId); |
|
|
|
|
|
|
|
|
|
ZegoExpressEngine.instance().on("playerStateUpdate", (streamID, state, errorCode, extendedData) => { |
|
|
|
|
/** 调用拉流接口成功后,当拉流器状态发生变更,如出现网络中断导致推流异常等情况,SDK在重试拉流的同时,会通过该回调通知 */ |
|
|
|
|
|
|
|
|
|
console.log("playerStateUpdate",roomID) |
|
|
|
|
console.log("playerStateUpdate",streamID) |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onBackPress() { |
|
|
|
|
uni.sendSocketMessage({data:JSON.stringify({ |
|
|
|
|
"userId": uni.getStorageSync("userInfo").id, |
|
|
|
|
type: 11, |
|
|
|
|
"topic":"message" |
|
|
|
|
})}) |
|
|
|
|
/** 停止推流 */ |
|
|
|
|
this.engine?.stopPublishingStream(); |
|
|
|
|
/** 停止本地预览 */ |
|
|
|
|
this.engine?.stopPreview(); |
|
|
|
|
/** 停止拉流 */ |
|
|
|
|
this.engine?.stopPlayingStream(this.sellerStreamId); |
|
|
|
|
/** 退出房间 */ |
|
|
|
|
this.engine?.logoutRoom(this.roomId); |
|
|
|
|
if(this.isGuaduan){ |
|
|
|
|
this.toGuaduan(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
.room{ |
|
|
|
|
&-hd{ |
|
|
|
|
&-navbar{ |
|
|
|
|
height: 44px; |
|
|
|
|
position: fixed; |
|
|
|
|
left: 0; |
|
|
|
|
top: 0; |
|
|
|
|
z-index: 22; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
.navbar{ |
|
|
|
|
flex-direction: row; |
|
|
|
|
height: 44px; |
|
|
|
|
line-height: 44px; |
|
|
|
|
position: relative; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 30px; |
|
|
|
|
.txt{ |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
.title{ |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
.back{ |
|
|
|
|
width: 50px; |
|
|
|
|
height: 44px; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 15px; |
|
|
|
|
top: 10px; |
|
|
|
|
z-index: 1; |
|
|
|
|
.img{ |
|
|
|
|
width: 20px; |
|
|
|
|
height: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&-hd{ |
|
|
|
|
flex-direction: column; |
|
|
|
|
position: relative; |
|
|
|
|
.shitu{ |
|
|
|
@ -213,38 +387,77 @@ |
|
|
|
|
height: 300rpx; |
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
position: fixed; |
|
|
|
|
position: absolute; |
|
|
|
|
right: 20rpx; |
|
|
|
|
top: 150rpx; |
|
|
|
|
z-index: 1222; |
|
|
|
|
top: 120rpx; |
|
|
|
|
z-index: 12; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&-hd{ |
|
|
|
|
.pic{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&-fd{ |
|
|
|
|
height: 220rpx; |
|
|
|
|
position: fixed; |
|
|
|
|
left: 0; |
|
|
|
|
bottom: 180rpx; |
|
|
|
|
z-index: 44; |
|
|
|
|
flex-direction: row; |
|
|
|
|
.item{ |
|
|
|
|
flex: 1; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
font-weight: 400; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
.txt{ |
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
text{ |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pic{ |
|
|
|
|
width: 130rpx; |
|
|
|
|
height: 130rpx; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-bottom: 10rpx; |
|
|
|
|
.pimg{ |
|
|
|
|
width: 130rpx; |
|
|
|
|
height: 130rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&-fd1{ |
|
|
|
|
height: 220rpx; |
|
|
|
|
position: fixed; |
|
|
|
|
left: 0; |
|
|
|
|
bottom: 40rpx; |
|
|
|
|
z-index: 44; |
|
|
|
|
flex-direction: row; |
|
|
|
|
.item{ |
|
|
|
|
flex: 1; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
font-weight: 400; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
.items{ |
|
|
|
|
flex: 1; |
|
|
|
|
margin-top: 70rpx; |
|
|
|
|
position: relative; |
|
|
|
|
flex-direction: row; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
.txt{ |
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
text{ |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pic{ |
|
|
|
|
width: 130rpx; |
|
|
|
|
height: 130rpx; |
|
|
|
|
background-color: rgba(0, 0, 0,0.36); |
|
|
|
|
border-radius: 50%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
@ -257,7 +470,15 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.off{ |
|
|
|
|
width: 49rpx; |
|
|
|
|
height: 44rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
right: 200rpx; |
|
|
|
|
z-index: 2; |
|
|
|
|
top: 50rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|