|
|
@@ -1,43 +1,588 @@
|
|
|
<template>
|
|
|
- <!-- 客服聊天 -->
|
|
|
- <view>
|
|
|
+ <view class="chat-pages">
|
|
|
<u-navbar title="在线客服" :safeAreaInsetTop="true" :placeholder='true'>
|
|
|
<view class="u-nav-slot u-flex" slot="left">
|
|
|
- <u-icon @click="retu" name="arrow-left" size="19"></u-icon>
|
|
|
+ <u-icon @click="return1" name="arrow-left" size="19"></u-icon>
|
|
|
<image src="../static/images/phone.png" style="width: 40rpx;height: 40rpx;margin-left: 44rpx;" mode="">
|
|
|
</image>
|
|
|
</view>
|
|
|
</u-navbar>
|
|
|
- <view class="box">
|
|
|
- <view class=""></view>
|
|
|
- </view>
|
|
|
- <view class="bottom">
|
|
|
|
|
|
+ <view class="" style="height: 100rpx;"></view>
|
|
|
+
|
|
|
+ <view class="chat-item" v-for="(item,index) in list" :key="index">
|
|
|
+ <view class="chat-time">
|
|
|
+ {{renderTime(item.time)}}
|
|
|
+ </view>
|
|
|
+ <view class="chat-item-box u-flex u-col-top acenter" v-if="item.from == user_other_no">
|
|
|
+ <image src="/pageA/static/images/kefu.png" class="user-img" mode=""></image>
|
|
|
+ <view style="max-width: 80%;" class="" v-if="item.type == 'txt' && !item.ext.type">
|
|
|
+ <view class="chat-text" :style="{background:item.from == user_no ? '#D3E5FB' : '#fff'}">
|
|
|
+ {{item.msg}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="max-width: 80%;" v-if="item.type == 'audio'">
|
|
|
+ <view class="chat-text hflex acenter" style="background: #D3E5FB;max-width: 550rpx;"
|
|
|
+ @click="playaudio(item.url)">
|
|
|
+ <image src="static/yuyin-left.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
|
|
|
+ <text :style="'padding-right: ' + item.length * 10 + 'rpx'">{{item.length}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image :src="item.msg ? item.msg : item.url" v-if="item.type === 'img'" mode="widthFix"
|
|
|
+ style="width: 200px;text-align: right;" @click="previewimg(item.url)"></image>
|
|
|
+ <view class="chat-header" v-if="item.type == 'txt' && item.ext.type == 'cand'"
|
|
|
+ :style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'pos')">
|
|
|
+ <view class="header-top u-flex u-row-between">
|
|
|
+ <view class="header-left">
|
|
|
+ <view class="u-flex">
|
|
|
+ <text class="text1">{{item.ext.order.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="header-right">
|
|
|
+ <image :src="item.ext.order.avatar" class="right-img" mode=""></image>
|
|
|
+ <image src="../static/images/nan.png" class="sex" mode=""
|
|
|
+ v-if="item.ext.order.sex == 'male'"></image>
|
|
|
+ <image src="../static/images/nv.png" class="sex" mode="" v-else></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goutong-time">
|
|
|
+ {{renderTime(item.time)}} 发起沟通
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat-header1" v-if="item.type == 'txt' && item.ext.type == 'pos'"
|
|
|
+ :style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'pos')">
|
|
|
+ <view class="header1-top u-flex u-row-between">
|
|
|
+ <text>{{item.ext.order.title}}</text>
|
|
|
+ <text>{{item.ext.order.salary}}K</text>
|
|
|
+ </view>
|
|
|
+ <view class="goutong-time1">
|
|
|
+ {{renderTime(item.time)}} 发起沟通
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat-header1" v-if="item.type == 'txt' && item.ext.type == 'order'"
|
|
|
+ :style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'order')">
|
|
|
+ <view class="header1-top u-flex u-row-between">
|
|
|
+ <text>{{item.ext.order.title}}</text>
|
|
|
+ <text>{{item.ext.order.salary}}K</text>
|
|
|
+ </view>
|
|
|
+ <view class="goutong-time1">
|
|
|
+ {{renderTime(item.time)}} 发起沟通
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat-item-box u-flex u-col-top jend" v-if="item.from == user_no">
|
|
|
+ <view style="max-width: 80%;" class="" v-if="item.type == 'txt' && !item.ext.type">
|
|
|
+ <view class="chat-text" :style="{background:item.from == user_no ? '#D3E5FB' : '#fff'}">
|
|
|
+ {{item.msg}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="max-width: 80%;" v-if="item.type == 'audio'">
|
|
|
+ <view class="chat-text hflex acenter jend" style="background: #D3E5FB;max-width: 550rpx;"
|
|
|
+ @click="playaudio(item.url)">
|
|
|
+ <text :style="'padding-left: ' + item.length * 10 + 'rpx'">{{item.length}}</text>
|
|
|
+ <image src="static/yuyin-right.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image :src="item.msg ? item.msg : item.url" v-if="item.type === 'img'" mode="widthFix"
|
|
|
+ style="width: 200px;text-align: right;" @click="previewimg(item.url)"></image>
|
|
|
+ <view class="chat-header" v-if="item.type == 'txt' && item.ext.type == 'cand'"
|
|
|
+ :style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'pos')">
|
|
|
+ <view class="header-top u-flex u-row-between">
|
|
|
+ <view class="header-left">
|
|
|
+ <view class="u-flex">
|
|
|
+ <text class="text1">{{item.ext.order.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="header-right">
|
|
|
+ <image :src="item.ext.order.avatar" class="right-img" mode=""></image>
|
|
|
+ <image src="../static/images/nan.png" class="sex" mode=""
|
|
|
+ v-if="item.ext.order.sex == 'male'"></image>
|
|
|
+ <image src="../static/images/nv.png" class="sex" mode="" v-else></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goutong-time">
|
|
|
+ {{renderTime(item.time)}} 发起沟通
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat-header1" v-if="item.type == 'txt' && item.ext.type == 'pos'"
|
|
|
+ :style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'pos')">
|
|
|
+ <view class="header1-top u-flex u-row-between">
|
|
|
+ <text>{{item.ext.order.title}}</text>
|
|
|
+ <text>{{item.ext.order.salary}}K</text>
|
|
|
+ </view>
|
|
|
+ <view class="goutong-time1">
|
|
|
+ {{renderTime(item.time)}} 发起沟通
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat-header1" v-if="item.type == 'txt' && item.ext.type == 'order'"
|
|
|
+ :style="{top:(statusheight + 58) + 'px'}" @click="toinfo(item,'order')">
|
|
|
+ <view class="header1-top u-flex u-row-between">
|
|
|
+ <text>{{item.ext.order.title}}</text>
|
|
|
+ <text>{{item.ext.order.salary}}K</text>
|
|
|
+ </view>
|
|
|
+ <view class="goutong-time1">
|
|
|
+ {{renderTime(item.time)}} 发起沟通
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image v-if="item.from == user_no" :src="user.avatar" class="user-img" mode=""></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <view class="" style="height: 55rpx;"></view>
|
|
|
+ <!-- <kj-chat></kj-chat> -->
|
|
|
+ <kj-chat :user='user' :to="user_other_no" :list="changyong_list" :user_other='user_other'
|
|
|
+ @success="getdata"></kj-chat>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import vueBus from '@/utils/vueBus.js'
|
|
|
+ import WebIM from '@/newSDK/Easemob-chat-4.1.7.js'
|
|
|
+ import {
|
|
|
+ conn
|
|
|
+ } from '@/utils/WebIM';
|
|
|
+ import {
|
|
|
+ renderTime
|
|
|
+ } from '@/utils/index'
|
|
|
+ const innerAudioContext = uni.createInnerAudioContext()
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ user_other_no: '13523652365',
|
|
|
+ user_no: '',
|
|
|
+ user: {},
|
|
|
+ user_other: {},
|
|
|
+ pageSize: 20,
|
|
|
+ loadText: '',
|
|
|
+ list: [],
|
|
|
+ renderTime,
|
|
|
+ playStatus: 0, //录音播放状态 0:未播放 1:正在播放
|
|
|
+ statusheight: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.user = uni.getStorageSync('user_info')
|
|
|
+ console.log('user', this.user);
|
|
|
+ if (options.user_other) {
|
|
|
+ this.user_other = JSON.parse(decodeURIComponent(options.user_other))
|
|
|
+ }
|
|
|
+ // this.statusheight = uni.getSystemInfoSync().statusBarHeight,
|
|
|
+ // this.user_other = options.user_other, //用户信息
|
|
|
+ if (uni.getStorageSync('user_no')) {
|
|
|
+ this.user_no = uni.getStorageSync('user_no')
|
|
|
+ } else {
|
|
|
+ // index().then((res) => {
|
|
|
+
|
|
|
|
|
|
- };
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ vueBus.$on('message', this.getdata)
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getdata()
|
|
|
},
|
|
|
- methods:{
|
|
|
- retu(){
|
|
|
+ methods: {
|
|
|
+ callphone() {
|
|
|
+ uni.$u.http.get('/api/config', {
|
|
|
+ params: {
|
|
|
+ module: 'basic'
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: res.service_mobile
|
|
|
+ })
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ previewimg(url) {
|
|
|
+ let urls = []
|
|
|
+ urls.push(url)
|
|
|
+ uni.previewImage({
|
|
|
+ urls: urls,
|
|
|
+ longPressActions: {
|
|
|
+ itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
|
+ success: function(data) {
|
|
|
+ console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+ console.log(err.errMsg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ playaudio(url) {
|
|
|
+ let _this = this
|
|
|
+ innerAudioContext.src = url
|
|
|
+ console.log(url);
|
|
|
+ var music = wx.setInnerAudioOption({
|
|
|
+ obeyMuteSwitch: false,
|
|
|
+ success: function(res) {
|
|
|
+ console.log("开启静音模式下播放音乐的功能");
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+ console.log(err);
|
|
|
+ console.log("静音设置失败");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log(this.playStatus);
|
|
|
+ if (this.playStatus == 0) {
|
|
|
+ innerAudioContext.play()
|
|
|
+ innerAudioContext.onPlay(() => {
|
|
|
+ console.log('开始播放');
|
|
|
+ _this.playStatus = 1
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ innerAudioContext.pause()
|
|
|
+ innerAudioContext.onPause(() => {
|
|
|
+ console.log('暂停播放');
|
|
|
+ _this.playStatus = 0
|
|
|
+ });
|
|
|
+ }
|
|
|
+ innerAudioContext.onError((res) => {
|
|
|
+ console.log('onError', res.errMsg);
|
|
|
+ console.log('onError', res.errCode);
|
|
|
+ });
|
|
|
+ innerAudioContext.onEnded((res) => {
|
|
|
+ _this.playStatus = 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ return1() {
|
|
|
uni.navigateBack()
|
|
|
+ },
|
|
|
+ getuser() {
|
|
|
+ let that = this
|
|
|
+ getEmchatUsersData({
|
|
|
+ user_no: this.user_no + ',' + this.user_other_no,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.user = res.data[0]
|
|
|
+ this.user_other = res.data[1]
|
|
|
+ } else {
|
|
|
+ that.$u.toast(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getdata() {
|
|
|
+ let option2 = {
|
|
|
+ chatType: "singleChat", // 会话类型，设置为单聊。
|
|
|
+ type: "channel", // 消息类型。
|
|
|
+ to: this.user_other_no, // 接收消息对象的用户 ID。
|
|
|
+ };
|
|
|
+ let msg2 = new WebIM.message.create(option2);
|
|
|
+ conn.send(msg2);
|
|
|
+ let options = {
|
|
|
+ // 对方的用户 ID 或者群组 ID 或聊天室 ID。
|
|
|
+ targetId: this.user_other_no,
|
|
|
+ // 每页期望获取的消息条数。取值范围为 [1,50]，默认值为 20。
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ // 查询的起始消息 ID。若该参数设置为 `-1`、`null` 或空字符串，从最新消息开始。
|
|
|
+ cursor: -1,
|
|
|
+ // 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
|
|
|
+ chatType: "singleChat",
|
|
|
+ // 消息搜索方向：（默认）`up`：按服务器收到消息的时间的逆序获取；`down`：按服务器收到消息的时间的正序获取。
|
|
|
+ searchDirection: "up",
|
|
|
+ };
|
|
|
+ conn.getHistoryMessages(options).then((res) => {
|
|
|
+ console.log('res', res);
|
|
|
+ // 成功获取历史消息。
|
|
|
+ if (res.isLast) {
|
|
|
+ this.loadText = '已无更多数据';
|
|
|
+ }
|
|
|
+ this.list = res.messages.reverse()
|
|
|
+ console.log(this.list);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 99999
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ // 获取失败。
|
|
|
+ console.log('失败', e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toinfo(item, type) {
|
|
|
+ if (type == 'pos' && item.ext.order.item_url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pagesB/details?id=" + item.ext.order.item_url
|
|
|
+ })
|
|
|
+ } else if (type == 'cand') {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pagesC/rencai-info?id=" + item.ext.order.item_url
|
|
|
+ })
|
|
|
+ } else if (type == 'order') {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pagesD/order-detail?id=" + item.ext.order.item_url
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .box {
|
|
|
- width: 750rpx;
|
|
|
- height: 166rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
+ .title {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jend {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-pages {
|
|
|
+ .chat-header1 {
|
|
|
+ width: 702rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ position: sticky;
|
|
|
+ left: 24rpx;
|
|
|
+ // z-index: 20;
|
|
|
+ margin: 10px auto;
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .goutong-time1 {
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: SFPro-Regular, SFPro;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #777777;
|
|
|
+ border-top: 2rpx solid #F0F0F0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zhiwei-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #555555;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 2rpx solid #F0F0F0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zhiwei-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #555555;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-label1 {
|
|
|
+ padding: 8rpx 0 10rpx 0;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ background: #F3F3F3;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .jingli1-box {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #555555;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header1-top {
|
|
|
+ padding: 24rpx 0 20rpx 0;
|
|
|
+
|
|
|
+ text:frist-child {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: DINAlternate-Bold, DINAlternate;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0C66C2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-item {
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .chat-item-box {
|
|
|
+
|
|
|
+ .chat-text {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ max-width: 100%;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #141414;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-img {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-time {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-header {
|
|
|
+ width: 702rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ position: sticky;
|
|
|
+ left: 24rpx;
|
|
|
+ z-index: 20;
|
|
|
+ margin: 10px auto;
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .goutong-time {
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: SFPro-Regular, SFPro;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #777777;
|
|
|
+ border-top: 2rpx solid #F0F0F0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-label {
|
|
|
+ padding: 8rpx 0 10rpx 0;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ background: #F3F3F3;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .jingli-box {
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #222222;
|
|
|
+ margin: 0 12rpx;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: SFPro-Regular, SFPro;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #888888;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-top {
|
|
|
+ height: 150rpx;
|
|
|
+
|
|
|
+ .header-right {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .sex {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 4rpx;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-img {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-left {
|
|
|
+ .text3 {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: SFPro-Regular, SFPro;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ margin-right: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-navbar {
|
|
|
+ flex: 1;
|
|
|
+ // padding-left: 100rpx;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #141414;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ page {
|
|
|
+ background-color: #F3F3F3;
|
|
|
}
|
|
|
</style>
|
zhaogongxue