1923 lines
38 KiB
Plaintext
1923 lines
38 KiB
Plaintext
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="top-do-box">
|
|||
|
|
<view class="room-info">
|
|||
|
|
<view class="room-logo-box">
|
|||
|
|
<image :src="room.cover" class="room-logo-box"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="room-info-message">
|
|||
|
|
<view class="room-user-name">
|
|||
|
|
<text
|
|||
|
|
style="color: #fff;font-size: 25rpx;">{{room.live_name.length>6?room.live_name.substring(0, 6)+'...': room.live_name}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="room-user-money">
|
|||
|
|
<text style="color: #fff;font-size: 25rpx;">4000</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="room-guanzhu" @click="interest" v-if="!isshow">
|
|||
|
|
<text class="guanzhu" v-if="!follow">关注</text>
|
|||
|
|
<text class="guanzhu" v-else>已关注</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="room-users-box">
|
|||
|
|
<scroll-view class="right_top_scroll" scroll-x="true" scroll-left="0">
|
|||
|
|
<view class="top-scroll-users-header" v-for="(bitem,bindex) in users" :key="bindex">
|
|||
|
|
<image :src="bitem.app_user_avatar" class="top-scroll-users-header"
|
|||
|
|
v-if="bitem.app_user_avatar"></image>
|
|||
|
|
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
|
|||
|
|
class="top-scroll-users-header" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="users-count web-font">
|
|||
|
|
<view class="users-count web-font">
|
|||
|
|
<text class="users-count-text"> {{users.length}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="users-count " @click="outroom">
|
|||
|
|
<image src="@/static/img/close.png" class="users-count-img" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="top-left" v-if="isshow">
|
|||
|
|
<view class="top-left-a" @click="switchCamera">
|
|||
|
|
<image class="left-img" src="/static/img/qiehuan.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="msgview">
|
|||
|
|
<mh-msgList ref="msgList" :msgList="msgList"></mh-msgList>
|
|||
|
|
</view>
|
|||
|
|
<!-- 底部操作 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="inpit-box-bg" v-if="focus">
|
|||
|
|
<view class="inpit-box-body">
|
|||
|
|
<input class="uni-input" @input="onKeyInput" maxlength="20" cursor-spacing="10" hold-keyboard
|
|||
|
|
placeholder="说点什么吧..." :value="inputValue" :focus="focus" />
|
|||
|
|
<view v-if="inputValue!=''" @click="send_message">
|
|||
|
|
<text class="send-but">发送</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dobox" v-else>
|
|||
|
|
<view class="inpit-box">
|
|||
|
|
<view class="input-tpl" @click="set_focus">
|
|||
|
|
<text class="input-tpls">说点什么..</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="functionbox">
|
|||
|
|
<view class="function-box">
|
|||
|
|
|
|||
|
|
<view class="ico-box" @click="send_liwu">
|
|||
|
|
<image class="ico-box-img" src="@/static/img/li.png" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="ico-box" @click="send_shop">
|
|||
|
|
<image class="ico-box-img" src="@/static/img/shanpin.png" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="ico-box" @click="send_lick">
|
|||
|
|
<image class="ico-box-img" src="@/static/img/gn.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部分享弹窗 -->
|
|||
|
|
<uni-popup ref="share" :type="type" :custom="true" @change="change">
|
|||
|
|
<template v-if="popup==1">
|
|||
|
|
<view class="uni-share" style="background-color: #333333;">
|
|||
|
|
|
|||
|
|
<view class="send-boj" id="tes">
|
|||
|
|
<view class="send-boj-txt">
|
|||
|
|
<text class="send-boj-txta">礼物</text>
|
|||
|
|
<view class="gift-jb-con">
|
|||
|
|
<image class="gift-jb-img" src="@/static/img/jb.png" mode=""></image>
|
|||
|
|
<text class="gift-web-je">
|
|||
|
|
{{now_money}}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="send-boj-close" @tap="close">
|
|||
|
|
<image class="send-boj-close-img" src="/static/img/close.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<scroll-view scroll-y style="height: 480rpx;overflow: hidden;">
|
|||
|
|
|
|||
|
|
<view class="uni-share-content">
|
|||
|
|
<view class="lw-box" v-for="(litem,lindex) in liwu" :key="lindex"
|
|||
|
|
@click="send_liwu_obj(litem)" @touchstart="handleTouchStart(lindex)"
|
|||
|
|
@touchend="handleTouchEnd(lindex)" :class="{ 'hovered': lindex== hoveredIndex }">
|
|||
|
|
<image class="lw-ico" :src="litem.gift_img"></image>
|
|||
|
|
<view class="lw-name">
|
|||
|
|
<text class="lw-name">{{litem.gift_name}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="lw-money">
|
|||
|
|
<image class="lw-money-img" src="@/static/img/jb.png" mode=""></image>
|
|||
|
|
|
|||
|
|
<text class="lw-moneya">{{litem.gift_price}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="send-m" v-if="lindex== hoveredIndex">赠送</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</scroll-view>
|
|||
|
|
<!-- <view class="gift-botton-view" @click="rechargejb">
|
|||
|
|
<text class="gift-web-cz">充值</text>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="popup==2">
|
|||
|
|
<view class="uni-shop">
|
|||
|
|
|
|||
|
|
<view class="shop">
|
|||
|
|
<view class="shop-top">
|
|||
|
|
<image class="shop-top-img" :src="room.cover" mode=""></image>
|
|||
|
|
<text class="shop-top-txt">{{roomDetail.live_name}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="shop-close" @tap="close">
|
|||
|
|
<image class="shop-close-img" src="/static/img/colse1.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<scroll-view scroll-y style="height: 680rpx;overflow: hidden;">
|
|||
|
|
<view class="uni-shop-content">
|
|||
|
|
|
|||
|
|
<view class="shop-content" v-for="(litem,lindex) in roomDetail.goods" :key="lindex">
|
|||
|
|
<image class="shop-content-img" :src="litem.app_goods_pic"></image>
|
|||
|
|
<view class="shop-content-txt">
|
|||
|
|
<view class="sp-txta">{{litem.app_goods_name}}</view>
|
|||
|
|
<view class="sp-txtb">
|
|||
|
|
|
|||
|
|
<view class="txtba">
|
|||
|
|
<text class="txtba-a">￥</text>
|
|||
|
|
<text class="txtba-b">{{litem.app_goods_price.split('.')[0]}}.</text>
|
|||
|
|
<text class="txtba-c">{{litem.app_goods_price.split('.')[1]}}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="txtbb" @click="shopp(litem)" v-if="!isshow">去抢购</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</uni-popup>
|
|||
|
|
<uni-popup ref="recharge" :type="type" :custom="true" @change="change">
|
|||
|
|
<view class="uni-recharge">
|
|||
|
|
<view class="recharge">
|
|||
|
|
<view class="recharge_title">
|
|||
|
|
<text class="recharge_title">我的金币</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="recharge-one">
|
|||
|
|
<image class="recharge-one-img" src="../../static/img/jb.png" mode="aspectFit"></image>
|
|||
|
|
<view class="recharge-one-txt"><text class="recharge-one-txt" {{now_money}}</text></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="recharge-con">
|
|||
|
|
<view class="recharge-con-title">
|
|||
|
|
<text class="recharge-con-title">金币充值</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="recharge-con-detail">
|
|||
|
|
|
|||
|
|
<view class="con-detail" v-for="(item,ik) in Recharglist" :key='ik'
|
|||
|
|
@click="RechargClick(ik)" :class="{ 'carecharge': ik== regIndex }">
|
|||
|
|
<view class="" v-if='item.id=="AA"'>
|
|||
|
|
<!-- <text class="con-detaila">输入金额</text> -->
|
|||
|
|
<input type="text" class="con-detaila" value="" placeholder="输入金额" />
|
|||
|
|
<text class="con-detailb">最低可充值1元</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="" v-else>
|
|||
|
|
<text class="con-detaila">{{item.data.give}}金币</text>
|
|||
|
|
<text class="con-detailb">{{item.data.price}}元</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<text class="recharge-conbottom">
|
|||
|
|
立即充值
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</uni-popup>
|
|||
|
|
<!-- 礼物弹窗 -->
|
|||
|
|
<view class="gift-alert" v-for="(gift,gindex) in giftobj" :key="gindex"
|
|||
|
|
:style="{ top: gift.top + 'px', left: gift.left + 'px' }">
|
|||
|
|
|
|||
|
|
<view class="gift-alerta">
|
|||
|
|
<view class="send-boj-user-header">
|
|||
|
|
<image :src="gift.app_user_avatar" class="send-boj-user-header-img" mode="aspectFill"
|
|||
|
|
v-if="gift.app_user_avatar"></image>
|
|||
|
|
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
|
|||
|
|
class="send-boj-user-header-img" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="gift-detail">
|
|||
|
|
<text class="gifta">{{gift.app_user_name}}</text>
|
|||
|
|
<text class="giftb">送{{room.app_user_name}}{{gift.gift_name}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="gift-ico">
|
|||
|
|
<image :src="gift.gift_img" class="gift-ico-img" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="gift-alertb">
|
|||
|
|
<image class="gift-alertb-img" src="@/static/img/X.png" mode=""></image>
|
|||
|
|
<view class="gift-alertb-txt"> <text class="gift-alertb-txt">{{gift.gift_num}}</text> </view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<gb-popup :isShow="isShow1" rName="确定" :isBut="false" lName="取消" @lEvent="show1" @rEvent="copyData"
|
|||
|
|
title="请输入礼物数量">
|
|||
|
|
<view style="padding: 30rpx;">
|
|||
|
|
<input type="value" v-model="gift_num" placeholder="请输入" />
|
|||
|
|
</view>
|
|||
|
|
</gb-popup>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
joinChatRoom,
|
|||
|
|
sendGroupMessage,
|
|||
|
|
bindUser,
|
|||
|
|
stopPushLive,
|
|||
|
|
liveDetail,
|
|||
|
|
getfans,
|
|||
|
|
rewardList,
|
|||
|
|
giftList,
|
|||
|
|
liveAudience,
|
|||
|
|
getuser,
|
|||
|
|
getRechargeApi,
|
|||
|
|
sendGift,
|
|||
|
|
getAjuser
|
|||
|
|
} from '@/api/api.js'
|
|||
|
|
import {
|
|||
|
|
VUE_APP_WS_URL
|
|||
|
|
} from '@/config/app';
|
|||
|
|
|
|||
|
|
import uniPopup from '@/components/uni-popup/live-uni-popup.vue';
|
|||
|
|
import gbpopup from '@/components/gb-popup/gb-popup.vue';
|
|||
|
|
import msgList from '@/components/mh-msgList/mh-msgList.vue';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "sd-float-page",
|
|||
|
|
props: {
|
|||
|
|
role_val: {
|
|||
|
|
type: String,
|
|||
|
|
default: '0'
|
|||
|
|
},
|
|||
|
|
roomid_val: {
|
|||
|
|
type: String,
|
|||
|
|
default: '0'
|
|||
|
|
},
|
|||
|
|
room: {
|
|||
|
|
type: Object,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
uniPopup,
|
|||
|
|
'mh-msgList': msgList,
|
|||
|
|
'gb-popup': gbpopup,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
windowWidth: '',
|
|||
|
|
// room: [], //房间信息
|
|||
|
|
roomobj: [],
|
|||
|
|
isShow1: false,
|
|||
|
|
users: [],
|
|||
|
|
rid: 0, //房间id
|
|||
|
|
role: '', //角色
|
|||
|
|
focus: false,
|
|||
|
|
inputValue: '',
|
|||
|
|
isshow: false,
|
|||
|
|
message_arr: [
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
msgList: [{
|
|||
|
|
userName: "系统通知",
|
|||
|
|
content: "倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
|
|||
|
|
cmd: "say",
|
|||
|
|
msg_type: "system"
|
|||
|
|
}, ],
|
|||
|
|
view_id: '',
|
|||
|
|
liwu: [],
|
|||
|
|
liwu2: [],
|
|||
|
|
liwu3: [],
|
|||
|
|
type: 'bottom',
|
|||
|
|
follow: false, //关注
|
|||
|
|
popup: 3, //1礼物操作 2其他操作 3.商品
|
|||
|
|
user: '',
|
|||
|
|
giftobj: [], //礼物
|
|||
|
|
join_arr: [],
|
|||
|
|
userName: '',
|
|||
|
|
now_money: 0,
|
|||
|
|
roomDetail: '',
|
|||
|
|
userinfo: null,
|
|||
|
|
hoveredIndex: -1,
|
|||
|
|
regIndex: -1,
|
|||
|
|
gifts: [],
|
|||
|
|
gifsobj: {},
|
|||
|
|
gift_num: ''
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
// console.log(this.$store.state.app.userInfo, '房间id 以及当前用户id')
|
|||
|
|
|
|||
|
|
if (typeof this.$store.state.app.userInfo === 'string' && this.$store.state.app.userInfo.length > 0) {
|
|||
|
|
this.userinfo = JSON.parse(this.$store.state.app.userInfo)
|
|||
|
|
} else {
|
|||
|
|
this.userinfo = this.$store.state.app.userInfo
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.get_live_room(); //调用直播间信息
|
|||
|
|
this.rewardList()
|
|||
|
|
this.giftList()
|
|||
|
|
this.liveAudience()
|
|||
|
|
this.getuser()
|
|||
|
|
this.getRecharg()
|
|||
|
|
this.getjuser()
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
|
|||
|
|
const t = this;
|
|||
|
|
t.role = this.$props.role_val;
|
|||
|
|
t.rid = this.$props.roomid_val;
|
|||
|
|
t.user = uni.getStorageSync('user');
|
|||
|
|
console.log('浮动模板被加载的事件')
|
|||
|
|
console.log(this.$props)
|
|||
|
|
// 保持屏幕常亮
|
|||
|
|
uni.setKeepScreenOn({
|
|||
|
|
keepScreenOn: true,
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('手机长亮时间')
|
|||
|
|
console.log(res)
|
|||
|
|
},
|
|||
|
|
fail: (e) => {
|
|||
|
|
console.log(e)
|
|||
|
|
console.log('手机长亮时间')
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
uni.onKeyboardHeightChange(res => {
|
|||
|
|
if (res.height == 0) {
|
|||
|
|
this.focus = false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//关注
|
|||
|
|
getjuser() {
|
|||
|
|
getAjuser(this.room.app_user_id).then((res) => {
|
|||
|
|
if (res.status == 200) {
|
|||
|
|
this.follow = res.data.is_start
|
|||
|
|
}
|
|||
|
|
}).catch((err) => {
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//获取充值数据
|
|||
|
|
getRecharg() {
|
|||
|
|
getRechargeApi().then((res) => {
|
|||
|
|
|
|||
|
|
this.Recharglist = res.data.recharge_quota
|
|||
|
|
this.Recharglist.push({
|
|||
|
|
data: {},
|
|||
|
|
id: 'AA'
|
|||
|
|
})
|
|||
|
|
// this.now_money = res.data.now_money
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//获取余额
|
|||
|
|
getuser() {
|
|||
|
|
getuser().then((res) => {
|
|||
|
|
|
|||
|
|
this.now_money = res.data.now_money
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//获取房间人数列表
|
|||
|
|
liveAudience() {
|
|||
|
|
let data = {
|
|||
|
|
app_name: 'shop',
|
|||
|
|
live_stream_id: this.room.live_stream_id
|
|||
|
|
}
|
|||
|
|
liveAudience(data).then((res) => {
|
|||
|
|
this.users = res.data.lists
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//礼物列表
|
|||
|
|
rewardList() {
|
|||
|
|
rewardList().then((res) => {
|
|||
|
|
console.log(res, '11111111')
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//送礼
|
|||
|
|
|
|||
|
|
bosendGift(gif) {
|
|||
|
|
// 执行关闭模态对话框的操作
|
|||
|
|
let data = {
|
|||
|
|
app_name: 'shop',
|
|||
|
|
gift_id: gif.gift_id,
|
|||
|
|
live_stream_id: this.room.live_stream_id,
|
|||
|
|
gift_num: gif.gift_num,
|
|||
|
|
}
|
|||
|
|
console.log(data)
|
|||
|
|
sendGift(data).then((res) => {
|
|||
|
|
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
this.$refs.share.close()
|
|||
|
|
uni.hideModal()
|
|||
|
|
} else {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: res.msg,
|
|||
|
|
confirmColor: '#ee6666', //确定字体颜色
|
|||
|
|
showCancel: false, //没有取消按钮的弹框
|
|||
|
|
buttonText: '确定',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//礼物列表
|
|||
|
|
giftList() {
|
|||
|
|
giftList().then((res) => {
|
|||
|
|
this.liwu = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//关注
|
|||
|
|
interest() {
|
|||
|
|
this.follow = !this.follow
|
|||
|
|
if (this.follow) {
|
|||
|
|
getfans(this.room.app_user_id, {
|
|||
|
|
status: 1
|
|||
|
|
}).then((res) => {
|
|||
|
|
console.log(res, '11111111')
|
|||
|
|
if (res.status == 200) {
|
|||
|
|
console.log('关注成功')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.log(err)
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
getfans(this.room.app_user_id, {
|
|||
|
|
status: 0
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.status == 200) {
|
|||
|
|
|
|||
|
|
console.log('已取消关注')
|
|||
|
|
}
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.log(err)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//充值
|
|||
|
|
RechargClick(index) {
|
|||
|
|
this.regIndex = index
|
|||
|
|
},
|
|||
|
|
//hover效果设置
|
|||
|
|
handleTouchStart(index) {
|
|||
|
|
this.hoveredIndex = index;
|
|||
|
|
},
|
|||
|
|
handleTouchEnd(index) {
|
|||
|
|
this.hoveredIndex = -1;
|
|||
|
|
},
|
|||
|
|
//加入直播间
|
|||
|
|
joinChatRoom() {
|
|||
|
|
let data = {
|
|||
|
|
live_stream_id: this.room.live_stream_id,
|
|||
|
|
app_name: 'shop',
|
|||
|
|
app_user_id: this.userinfo.uid,
|
|||
|
|
app_user_name: this.userinfo.nickname,
|
|||
|
|
app_user_avatar: this.userinfo.avatar,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
joinChatRoom(data).then((res) => {
|
|||
|
|
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
console.log('加入房间成功')
|
|||
|
|
} else {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: res.msg,
|
|||
|
|
confirmColor: '#ee6666', //确定字体颜色
|
|||
|
|
showCancel: false, //没有取消按钮的弹框
|
|||
|
|
buttonText: '确定',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: '/pages/room/room_list'
|
|||
|
|
})
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//购买商品
|
|||
|
|
|
|||
|
|
shopp(item) {
|
|||
|
|
uni.sendHostEvent('live_shop', item, (ret) => {
|
|||
|
|
//发送消息成功回调
|
|||
|
|
console.log('购买商品' + JSON.stringify(item));
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//绑定用户id
|
|||
|
|
bindUser(client_id) {
|
|||
|
|
let data = {
|
|||
|
|
app_name: 'shop',
|
|||
|
|
app_user_id: uni.getStorageSync('UID'),
|
|||
|
|
client_id: client_id
|
|||
|
|
}
|
|||
|
|
bindUser(data).then((res) => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
console.log('绑定成功')
|
|||
|
|
this.joinChatRoom()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.log(err)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
|
|||
|
|
connectSocketInit() {
|
|||
|
|
|
|||
|
|
// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
|
|||
|
|
this.socketTask = uni.connectSocket({
|
|||
|
|
// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
|
|||
|
|
url: VUE_APP_WS_URL,
|
|||
|
|
success(data) {
|
|||
|
|
console.log("websocket连接成功", data);
|
|||
|
|
},
|
|||
|
|
fail() {
|
|||
|
|
console.log("websocket连接失败", data);
|
|||
|
|
},
|
|||
|
|
complete(data) {
|
|||
|
|
console.log("websocket连接完成", data);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.socketTask.onError((res) => {
|
|||
|
|
console.log("连接发生错误", res)
|
|||
|
|
})
|
|||
|
|
// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
|
|||
|
|
this.socketTask.onOpen(res => {
|
|||
|
|
console.log(res, '连接打开');
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
this.socketTask.onMessage((res) => {
|
|||
|
|
console.log("收到服务器内容：" + res.data);
|
|||
|
|
let str = res.data
|
|||
|
|
let obj = JSON.parse(str);
|
|||
|
|
if (obj.type == 'init') {
|
|||
|
|
this.bindUser(obj.client_id)
|
|||
|
|
} else if (obj.type == 'message') {
|
|||
|
|
|
|||
|
|
// console.log(this.msgList.length, '11111111111')
|
|||
|
|
|
|||
|
|
let data1 = {
|
|||
|
|
userName: obj.name,
|
|||
|
|
content: obj.text,
|
|||
|
|
avatar: obj.avatar,
|
|||
|
|
cmd: "say",
|
|||
|
|
msg_type: "user"
|
|||
|
|
}
|
|||
|
|
this.msgList.push(data1)
|
|||
|
|
this.$refs.msgList.setMsgPanelScroll()
|
|||
|
|
} else if (obj.type == 'sys_message') {
|
|||
|
|
let data1 = {
|
|||
|
|
userName: obj.name,
|
|||
|
|
content: obj.text,
|
|||
|
|
avatar: obj.avatar,
|
|||
|
|
cmd: "say",
|
|||
|
|
msg_type: "system"
|
|||
|
|
}
|
|||
|
|
this.msgList.push(data1)
|
|||
|
|
this.$refs.msgList.setMsgPanelScroll()
|
|||
|
|
} else if (obj.type == 'stream') {
|
|||
|
|
if (obj.status == -1) {
|
|||
|
|
uni.showModal({
|
|||
|
|
|
|||
|
|
title: '提示',
|
|||
|
|
content: '直播间已关闭',
|
|||
|
|
confirmColor: '#ee6666', //确定字体颜色
|
|||
|
|
showCancel: false, //没有取消按钮的弹框
|
|||
|
|
buttonText: '确定',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: '/pages/room/room_list'
|
|||
|
|
})
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
} else if (obj.type == 'gift_message') {
|
|||
|
|
this.sendGift(obj)
|
|||
|
|
|
|||
|
|
} else if (obj.type == 'audience') {
|
|||
|
|
this.liveAudience()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
// 这里仅是事件监听【如果socket关闭了会执行】
|
|||
|
|
this.socketTask.onClose(() => {
|
|||
|
|
console.log("已经被关闭了")
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
sendGift(gift) {
|
|||
|
|
// userName: "11111111",
|
|||
|
|
// number: 33330,
|
|||
|
|
// gift_name: "333333333",
|
|||
|
|
// userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
|
|||
|
|
// gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
|
|||
|
|
gift.top = Math.random() * 200 // 随机生成礼物的位置
|
|||
|
|
gift.left = Math.random() * 200 // 随机生成礼物的位置
|
|||
|
|
|
|||
|
|
this.giftobj.push(gift);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.giftobj.splice(this.gifts.indexOf(gift), 1); // 礼物消失
|
|||
|
|
}, 3000);
|
|||
|
|
},
|
|||
|
|
start() {
|
|||
|
|
this.timeoutObj = setTimeout(() => {
|
|||
|
|
//这里发送一个心跳，后端收到后，返回一个心跳消息，
|
|||
|
|
//onmessage拿到返回的心跳就说明连接正常
|
|||
|
|
console.log('ping');
|
|||
|
|
this.socketTask.send({
|
|||
|
|
data: "ping"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}, this.timeout)
|
|||
|
|
},
|
|||
|
|
// 关闭websocket【离开这个页面的时候执行关闭】
|
|||
|
|
closeSocket() {
|
|||
|
|
this.socketTask.close({
|
|||
|
|
success(res) {
|
|||
|
|
this.is_open_socket = false;
|
|||
|
|
console.log("关闭成功", res)
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
console.log("关闭失败", err)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
//关闭弹窗
|
|||
|
|
close() {
|
|||
|
|
this.$refs.share.close()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//切换摄像头
|
|||
|
|
switchCamera() {
|
|||
|
|
console.log('切换摄像头')
|
|||
|
|
this.$emit('switchCamera', '')
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//关闭直播间
|
|||
|
|
outroom: function() {
|
|||
|
|
if (this.roomDetail.app_user_id == this.userinfo.uid) {
|
|||
|
|
// console.log(this.roomDetail)
|
|||
|
|
stopPushLive({
|
|||
|
|
app_name: 'shop',
|
|||
|
|
stream_name: this.roomDetail.stream_name
|
|||
|
|
}).then((res) => {
|
|||
|
|
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
console.log('关闭直播间')
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: '/pages/room/room_list'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: '/pages/room/room_list'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//获取房间详情
|
|||
|
|
get_live_room() {
|
|||
|
|
liveDetail({
|
|||
|
|
app_name: 'shop',
|
|||
|
|
live_stream_id: this.room.live_stream_id,
|
|||
|
|
}).then(res => {
|
|||
|
|
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
this.roomDetail = res.data
|
|||
|
|
console.log(res.data.app_user_id, this.userinfo.uid, 'AAAAAAAAAA')
|
|||
|
|
if (res.data.app_user_id == this.userinfo.uid) {
|
|||
|
|
this.isshow = true
|
|||
|
|
this.userinfo.nickname = res.data.app_user_name
|
|||
|
|
this.userinfo.avatar = res.data.app_user_avatar
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.connectSocketInit()
|
|||
|
|
}).catch((err) => {})
|
|||
|
|
},
|
|||
|
|
togglePopup(type, open) {
|
|||
|
|
this.type = type
|
|||
|
|
if (open === 'tip') {
|
|||
|
|
this.show = true
|
|||
|
|
} else {
|
|||
|
|
this.$refs[open].open()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
cancel(type) {
|
|||
|
|
if (type === 'tip') {
|
|||
|
|
this.show = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// this.$refs[type].close()
|
|||
|
|
},
|
|||
|
|
change(e) {
|
|||
|
|
console.log('是否打开:' + e.show)
|
|||
|
|
},
|
|||
|
|
//充值
|
|||
|
|
rechargejb: function() {
|
|||
|
|
this.$refs['share'].close()
|
|||
|
|
const t = this;
|
|||
|
|
this.type = 'bottom'
|
|||
|
|
this.$refs['recharge'].open()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
send_liwu: function() {
|
|||
|
|
const t = this;
|
|||
|
|
t.popup = 1;
|
|||
|
|
this.type = 'bottom'
|
|||
|
|
t.togglePopup('bottom', 'share');
|
|||
|
|
|
|||
|
|
// this.$refs['recharge'].open()
|
|||
|
|
},
|
|||
|
|
send_shop: function() {
|
|||
|
|
const t = this;
|
|||
|
|
t.popup = 2;
|
|||
|
|
|
|||
|
|
this.type = 'bottom'
|
|||
|
|
t.togglePopup('bottom', 'share');
|
|||
|
|
},
|
|||
|
|
send_lick: function() {
|
|||
|
|
this.sendGift()
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//礼物弹窗
|
|||
|
|
show1() {
|
|||
|
|
this.isShow1 = !this.isShow1
|
|||
|
|
this.gift_num = ''
|
|||
|
|
},
|
|||
|
|
//礼物弹窗0
|
|||
|
|
copyData() {
|
|||
|
|
this.gifsobj.gift_num = this.gift_num
|
|||
|
|
this.bosendGift(this.gifsobj)
|
|||
|
|
this.show1()
|
|||
|
|
},
|
|||
|
|
//礼物弹窗1
|
|||
|
|
send_liwu_obj: function(gt) {
|
|||
|
|
console.log(this.gift_num)
|
|||
|
|
let gift = {
|
|||
|
|
'gift_id': gt.id,
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
this.isShow1 = true
|
|||
|
|
this.gifsobj = gift
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//对话监听
|
|||
|
|
set_focus: function() {
|
|||
|
|
this.focus = !this.focus
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//对话输入监听
|
|||
|
|
onKeyInput: function(event) {
|
|||
|
|
this.inputValue = event.detail.value
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//发消息
|
|||
|
|
send_message: function() {
|
|||
|
|
const t = this;
|
|||
|
|
t.focus = false;
|
|||
|
|
|
|||
|
|
if (t.to_userid == '') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '内容不能为空',
|
|||
|
|
duration: 2000,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let data = {
|
|||
|
|
live_stream_id: this.room.live_stream_id,
|
|||
|
|
app_name: 'shop',
|
|||
|
|
app_user_id: uni.getStorageSync('UID'),
|
|||
|
|
message: this.inputValue
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
sendGroupMessage(data).then(res => {
|
|||
|
|
console.log('发送的消息' + JSON.stringify(res))
|
|||
|
|
this.inputValue = ''
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
console.log('发送的消息成功')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// let message = {
|
|||
|
|
// userName: '大黄',
|
|||
|
|
// content: this.inputValue,
|
|||
|
|
// cmd: "say",
|
|||
|
|
// msg_type: "user"
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// /** 实际应用应发送到服务端，通过监听服务端传回的消息加入的msgList **/
|
|||
|
|
// if (this.msgList.length > 100) {
|
|||
|
|
// this.msgList.splice(0, 1);
|
|||
|
|
// this.msgList.push(message)
|
|||
|
|
// this.$refs.msgList.setMsgPanelScroll()
|
|||
|
|
// this.inputValue = ''
|
|||
|
|
// } else {
|
|||
|
|
// this.msgList.push(message)
|
|||
|
|
// this.$refs.msgList.setMsgPanelScroll()
|
|||
|
|
// this.inputValue = ''
|
|||
|
|
// }
|
|||
|
|
// console.log(this.msgList)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// onBackPress() {
|
|||
|
|
// this.$refs['showpopup'].close()
|
|||
|
|
// this.$refs['showtip'].close()
|
|||
|
|
// this.$refs['showimage'].close()
|
|||
|
|
// this.$refs['showshare'].close()
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
page {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
width: 100%;
|
|||
|
|
/* 设置容器的宽度 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dobox {
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
bottom: 0rpx;
|
|||
|
|
width: 750rpx;
|
|||
|
|
background-color: #F8F8F8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inpit-box {
|
|||
|
|
padding: 20upx 20rpx;
|
|||
|
|
width: 700rpx;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
/* padding-top: 40upx; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inpit-box-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
bottom: 0;
|
|||
|
|
height: 80rpx;
|
|||
|
|
width: 750rpx;
|
|||
|
|
background-color: #F8F8F8;
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inpit-box-body {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-input {
|
|||
|
|
font-size: 32upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-but {
|
|||
|
|
width: 120upx;
|
|||
|
|
background-color: #0081FF;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
line-height: 60upx;
|
|||
|
|
border-radius: 60upx;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.function-box {
|
|||
|
|
width: 380rpx;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
padding-left: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ico-box {
|
|||
|
|
width: 77rpx;
|
|||
|
|
height: 77rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: rgba(0, 0, 0, .1);
|
|||
|
|
line-height: 77rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ico-box-img {
|
|||
|
|
width: 77rpx;
|
|||
|
|
height: 77rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: rgba(0, 0, 0, .1);
|
|||
|
|
line-height: 77rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ico {
|
|||
|
|
|
|||
|
|
font-size: 48upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-tpl {
|
|||
|
|
height: 70upx;
|
|||
|
|
width: 300upx;
|
|||
|
|
line-height: 70upx;
|
|||
|
|
text-align: left;
|
|||
|
|
background: rgba(0, 0, 0, 0.25);
|
|||
|
|
opacity: 1;
|
|||
|
|
border-radius: 39upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-tpls {
|
|||
|
|
height: 70upx;
|
|||
|
|
width: 300upx;
|
|||
|
|
line-height: 70upx;
|
|||
|
|
text-align: left;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
font-size: 25upx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
border-radius: 70upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-left {
|
|||
|
|
// height: auto;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 40rpx;
|
|||
|
|
right: 20rpx;
|
|||
|
|
top: 230rpx;
|
|||
|
|
z-index: 99999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-img {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.gifta {
|
|||
|
|
font-size: 23rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
margin-bottom: 5rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.giftb {
|
|||
|
|
|
|||
|
|
font-size: 19rpx;
|
|||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nickname {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #22c8ef;
|
|||
|
|
/* font-weight: 800; */
|
|||
|
|
padding: 0 10upx;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
padding-left: 4upx;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-scroll-box {
|
|||
|
|
line-height: 40upx;
|
|||
|
|
color: #f9f9f9;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-scroll-box-xi {
|
|||
|
|
line-height: 40upx;
|
|||
|
|
color: #f9f9f9;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-scroll-box-gift {
|
|||
|
|
color: #22c8ef;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-lever {
|
|||
|
|
background-color: #ebc602;
|
|||
|
|
padding: 4upx 10upx;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
height: 20upx;
|
|||
|
|
line-height: 20upx;
|
|||
|
|
float: left;
|
|||
|
|
display: flex;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.msgview {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 540rpx;
|
|||
|
|
height: 540rpx;
|
|||
|
|
left: 20rpx;
|
|||
|
|
bottom: 180rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: none;
|
|||
|
|
|
|||
|
|
z-index: 9;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-area-line {
|
|||
|
|
width: 550upx;
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin-bottom: 5upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.system-msg {
|
|||
|
|
width: 550upx;
|
|||
|
|
margin-bottom: 5upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.system-msg-detail {
|
|||
|
|
// max-width: 550upx;
|
|||
|
|
|
|||
|
|
padding: 10upx;
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|||
|
|
flex-direction: row;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-right: 14upx;
|
|||
|
|
|
|||
|
|
>.system-msg-detail-username {
|
|||
|
|
color: red;
|
|||
|
|
font-size: 32upx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
>.system-msg-detail-content {
|
|||
|
|
font-size: 32upx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
color: #A0CFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-line {
|
|||
|
|
// max-width: 530upx;
|
|||
|
|
padding: 10upx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
flex-direction: row;
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|||
|
|
margin-right: 14upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-msg {
|
|||
|
|
width: 530upx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
margin-bottom: 5upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-msg-detail {
|
|||
|
|
padding: 10upx;
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|||
|
|
flex-direction: row;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-right: 14upx;
|
|||
|
|
|
|||
|
|
>.user-msg-detail-tag {
|
|||
|
|
color: #A0CFFF;
|
|||
|
|
background-color: #53C21D;
|
|||
|
|
width: 80upx;
|
|||
|
|
height: 40upx;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
font-size: 32upx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
>.user-msg-detail-username {
|
|||
|
|
color: #A0CFFF;
|
|||
|
|
font-size: 32upx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
>.user-msg-detail-content {
|
|||
|
|
font-size: 32upx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-lever-ico-box {
|
|||
|
|
width: 100rpx;
|
|||
|
|
width: 15upx;
|
|||
|
|
height: 15upx;
|
|||
|
|
border-radius: 100%;
|
|||
|
|
background-color: #e0ad07;
|
|||
|
|
padding: 2upx;
|
|||
|
|
margin-right: 5upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-lever-ico {
|
|||
|
|
width: 15upx;
|
|||
|
|
height: 15upx;
|
|||
|
|
|
|||
|
|
// margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-lever-text {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 22upx;
|
|||
|
|
height: 20upx;
|
|||
|
|
line-height: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-recharge {
|
|||
|
|
background-color: #fff;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
flex: 1;
|
|||
|
|
width: 750rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-top-left-radius: 30upx;
|
|||
|
|
border-top-right-radius: 30upx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge-one {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center; //弹性盒子对象在主轴上的对齐方式
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge_title {
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
margin-bottom: 42rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge-one-img {
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
vertical-align: middle;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge-one-txt {
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 18rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge-con {
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge-con-title {
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge-con-detail {
|
|||
|
|
flex-direction: row;
|
|||
|
|
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
margin-bottom: 200rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge-conbottom {
|
|||
|
|
|
|||
|
|
width: 589rpx;
|
|||
|
|
height: 84rpx;
|
|||
|
|
line-height: 84rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 30rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
margin-left: -299.5rpx;
|
|||
|
|
background: #F84221;
|
|||
|
|
border-radius: 42rpx 42rpx;
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.con-detail {
|
|||
|
|
width: 217rpx;
|
|||
|
|
height: 159rpx;
|
|||
|
|
margin-right: 18rpx;
|
|||
|
|
|
|||
|
|
border-radius: 21rpx 21rpx;
|
|||
|
|
background: #F4F4F4;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carecharge {
|
|||
|
|
border-width: 1px;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-color: #F84221;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.con-detaila {
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
margin-bottom: 17rpx;
|
|||
|
|
font-size: 37rpx;
|
|||
|
|
font-family: PingFang SC-Semibold, PingFang SC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.con-detailb {
|
|||
|
|
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部分享 */
|
|||
|
|
.uni-share {
|
|||
|
|
|
|||
|
|
background-color: #fff;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 750rpx;
|
|||
|
|
border-top-left-radius: 30upx;
|
|||
|
|
border-top-right-radius: 30upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-shop {
|
|||
|
|
|
|||
|
|
background-color: #fff;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 750rpx;
|
|||
|
|
border-top-left-radius: 30upx;
|
|||
|
|
border-top-right-radius: 30upx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop {
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-top {
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-top-img {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-close {
|
|||
|
|
margin: 20rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-close-img {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-top-txt {
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-share-title {
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 15rpx 0;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.uni-shop-content {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
/* display: flex; */
|
|||
|
|
/* #endif */
|
|||
|
|
// width: 750rpx;
|
|||
|
|
|
|||
|
|
// display: flex;
|
|||
|
|
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
// justify-content: center;
|
|||
|
|
|
|||
|
|
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* padding-bottom: 0; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-content {
|
|||
|
|
width: 700rpx;
|
|||
|
|
// border-width: 1px;
|
|||
|
|
// border-style: solid;
|
|||
|
|
// border-color: red;
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-content-img {
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
// border-width: 1px;
|
|||
|
|
// border-style: solid;
|
|||
|
|
// border-color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-content-txt {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
width: 500rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sp-txta {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sp-txtb {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20rpx;
|
|||
|
|
width: 500rpx;
|
|||
|
|
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.txtba {
|
|||
|
|
color: red;
|
|||
|
|
flex-direction: row;
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #F84221;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txtba-a {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #F84221;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txtba-b {
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #F84221;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txtba-c {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
color: #F84221;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txtbb {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
background-color: red;
|
|||
|
|
border-radius: 0px 11rpx 11rpx 0px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-share-content {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
/* display: flex; */
|
|||
|
|
/* #endif */
|
|||
|
|
// width: 750rpx;
|
|||
|
|
|
|||
|
|
// display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
// justify-content: center;
|
|||
|
|
padding: 15px 28rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* padding-bottom: 0; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-image {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-share-content-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
padding-top: 5px;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-share-btn {
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border-top-color: #f5f5f5;
|
|||
|
|
border-top-width: 1px;
|
|||
|
|
border-top-style: solid;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-botton-view {
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border-top-color: #5c1398;
|
|||
|
|
border-top-width: 1px;
|
|||
|
|
border-top-style: solid;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-jb-con {
|
|||
|
|
width: 221rpx;
|
|||
|
|
height: 43rpx;
|
|||
|
|
background: rgba(0, 0, 0, 0.25);
|
|||
|
|
border-radius: 39rpx 39rpx;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-web-je {
|
|||
|
|
font-size: 23rpx;
|
|||
|
|
line-height: 43rpx;
|
|||
|
|
font-weight: normal;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-jb-img {
|
|||
|
|
width: 33rpx;
|
|||
|
|
height: 33rpx;
|
|||
|
|
margin-top: 3rpx;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-web-cz {
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 礼物 */
|
|||
|
|
.lw-box {
|
|||
|
|
width: 168rpx;
|
|||
|
|
height: 224rpx;
|
|||
|
|
background: rgba(0, 0, 0, 0.2);
|
|||
|
|
border-radius: 21rpx 21rpx;
|
|||
|
|
margin-bottom: 30upx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hovered {
|
|||
|
|
border: 2rpx solid #707070;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-m {
|
|||
|
|
width: 168rpx;
|
|||
|
|
height: 49rpx;
|
|||
|
|
line-height: 49rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
position: absolute;
|
|||
|
|
background: #F84221;
|
|||
|
|
bottom: 0;
|
|||
|
|
border-radius: 0 0 21rpx 21rpx;
|
|||
|
|
font-size: 23rpx;
|
|||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lw-ico {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
margin-left: 35rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lw-name {
|
|||
|
|
font-size: 23rpx;
|
|||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lw-money {
|
|||
|
|
flex-direction: row;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lw-moneya {
|
|||
|
|
font-size: 23rpx;
|
|||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lw-money-img {
|
|||
|
|
width: 28rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
margin-left: 38rpx;
|
|||
|
|
margin-right: 5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-boj {
|
|||
|
|
// display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 20upx 30upx;
|
|||
|
|
// border-bottom: 2upx solid #5c1398;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-boj-txt {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
padding-right: 40rpx;
|
|||
|
|
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-boj-txta {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-boj-close {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-boj-close-img {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-alert {
|
|||
|
|
width: 430rpx;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
// background-color: green;
|
|||
|
|
animation: slideRight 1s linear forwards;
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-alerta {
|
|||
|
|
width: 359rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
background: rgba(0, 0, 0, 0.25);
|
|||
|
|
border-radius: 39rpx 39rpx;
|
|||
|
|
padding-left: 2rpx;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-alertb {
|
|||
|
|
flex-direction: row;
|
|||
|
|
height: 72rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-alertb-img {
|
|||
|
|
width: 44rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-alertb-txt {
|
|||
|
|
font-size: 45rpx;
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideRight {
|
|||
|
|
0% {
|
|||
|
|
transform: translateX(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: translateX(100%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.gift-ico {
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gift-ico-img {
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-boj-user-header {
|
|||
|
|
width: 63upx;
|
|||
|
|
height: 63upx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-top: 3rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-boj-user-header-img {
|
|||
|
|
width: 63upx;
|
|||
|
|
height: 63upx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-do-box {
|
|||
|
|
width: 750rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
margin-top: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-info {
|
|||
|
|
width: 350rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
height: 80upx;
|
|||
|
|
background-color: rgba(0, 0, 0, .2);
|
|||
|
|
|
|||
|
|
border-radius: 90upx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-logo-box {
|
|||
|
|
width: 80upx;
|
|||
|
|
height: 80upx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.room-info-message {
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-user-name {
|
|||
|
|
width: 150rpx;
|
|||
|
|
|
|||
|
|
font-size: 25upx;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-user-money {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
font-size: 25upx;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.room-xin-box {
|
|||
|
|
height: 30upx;
|
|||
|
|
line-height: 30upx;
|
|||
|
|
font-size: 20upx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
background-color: #f4305e;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
padding: 0 10upx;
|
|||
|
|
margin-right: 4upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-money {
|
|||
|
|
height: 30upx;
|
|||
|
|
line-height: 30upx;
|
|||
|
|
font-size: 20upx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-guanzhu {
|
|||
|
|
width: 105upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
line-height: 60upx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #f4305e;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 50upx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guanzhu {
|
|||
|
|
width: 105upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
line-height: 60upx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
color: #f4305e;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 50upx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-users-box {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 65upx;
|
|||
|
|
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right_top_scroll {
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex-direction: row;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 85upx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.top-scroll-users-header {
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 10upx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .top-scroll-users-header image {
|
|||
|
|
// width: 100%;
|
|||
|
|
// height: 100%;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
.users-count {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.users-count-text {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
width: 70upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
line-height: 60upx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 60upx;
|
|||
|
|
background-color: rgba(0, 0, 0, .2);
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.users-count-img {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|