zbH5/src/views/Circle/components/ChatFrame.vue

1072 lines
34 KiB
Vue
Raw Normal View History

2025-01-31 22:11:22 +08:00
<template>
<div class="date-select">
<p>日期2024-19-22</p>
<van-icon name="arrow" @click="showCalendar = true"/>
</div>
<van-notice-bar
left-icon="volume-o"
mode="closeable"
text="无论我们能活多久,我们能够享受的只有无法分割的此刻,此外别无其他。"
/>
<div class="interact-scroll" ref="container">
<div class="p20">
<div class="pulldown-wrapper">
<div v-if="hasNext">
<span>加载中...</span>
</div>
<div class="top-tip" v-else-if="!hasNext">
<span class="refresh-hook">暂无更多互动消息</span>
</div>
</div>
<!-- isOpen 2: 不公开 1公开 -->
<ul class="interact-msg" ref="msgListRef">
<li
v-for="(item) in informMsgList"
:class="[
`li${item.id}`,
item.phone === store.state.userInfo.account ? 'row-reverse' : '',
]"
:key="item.id"
>
<div>
<div class="chat-time" v-if="(isTg && item.tgChatTime) || (!isTg && item.chatTime)">{{ isTg ? item.tgChatTime : item.chatTime }}</div>
<div
:class="[
'flex',
item.phone === store.state.userInfo.account ? 'row-reverse' : '',
]"
>
<div class="photo">
<img
:src="
item.advisorId
? item.advisorBasic && item.advisorBasic.avatar
? item.advisorBasic.avatar
: defaultPhoto
: item.userId
? item.imgUrl
: tgDefaultPhoto
"
alt=""
/>
</div>
<div class="news-content-wrap">
<div class="user-info">
<h3>
{{
item.userId
? item.phone === store.state.userInfo.account
? "我"
: detail.showNickname === 2 ? maskUserName(item.userName) : item.userName
: item.createUserVO ? item.createUserVO.name : item.advisorBasic?.showName
}}
<span v-if="item.advisorId">讲师</span>
<span v-else-if="item.createUserVO">助教</span>
</h3>
</div>
<div v-if="item.type === 1 && item.replyBasic">
<div>
<div class="reply-content">
<div class="reply">
<span style="color: rgba(154, 164, 182, 1)">回复</span
><label>{{ item.replyBasic.userId === store.state.userInfo.account
? "我" : detail.showNickname === 2 ? maskUserName(item.replyBasic.userName) : item.replyBasic.userName }}</label>
{{ item.content }}
</div>
<div class="reply" style="color: rgba(154, 164, 182, 1)">
{{ item.replyBasic.userId === store.state.userInfo.account
? "我" : detail.showNickname === 2 ? maskUserName(item.replyBasic.userName) : item.replyBasic.userName }}{{
item.replyBasic.content
}}
</div>
</div>
<div class="license">{{ item.advisorBasic?.name }}<i v-if="detail.advisorBasic.license">{{item.advisorBasic?.license}}</i></div>
</div>
</div>
<div v-else-if="item.type === 1 && !item.replyBasic">
<div>
<p class="text" v-if="!item.content.includes('upImg')">
{{ item.content }}
</p>
<img
v-else
class="img"
@click="imagePreview(item.content.split('upImg-')[1])"
:src="item.content.split('upImg-')[1]"
/>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<van-calendar v-model:show="showCalendar" />
<img class="refresh" src="@/assets/images/refresh.png">
</template>
<script setup>
import { ref } from "vue"
import { useStore } from "vuex";
import useChatData from "../hooks/useChatData";
const store = useStore();
const informMsgList = ref([
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "问卷1",
"createTime": "2025-01-24 15:20:52",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700418,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": "",
"questionId": 617,
"replyBasic": null,
"replyId": null,
"status": 1,
"type": 11,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "upImg-https://advisorimg.test.upchina.com/group1/M00/02/F9/rBAIx2eTPjaAFpSuAAH8dF_J2Lc574.png",
"createTime": "2025-01-24 15:16:10",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700415,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": null,
"questionId": null,
"replyBasic": null,
"replyId": null,
"status": 1,
"type": 1,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "阿事实上事实上事实上",
"createTime": "2025-01-24 15:16:02",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700414,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": null,
"questionId": null,
"replyBasic": null,
"replyId": null,
"status": 1,
"type": 1,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "产品1",
"createTime": "2025-01-24 15:15:08",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700413,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": {
"authorityId": null,
"content": "三等奖付款时间打客服介绍上课的见风使舵看风使舵",
"id": 1,
"name": "产品1",
"productType": 111,
"typeLabel": null,
"url": "https://blog.csdn.net/weixin_45911857/article/details/132300931"
},
"questionDesc": null,
"questionId": null,
"replyBasic": null,
"replyId": null,
"status": 1,
"type": 2,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "十点多的点点滴滴滴答滴答",
"createTime": "2025-01-24 15:15:02",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700412,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": null,
"questionId": null,
"replyBasic": null,
"replyId": null,
"status": 1,
"type": 1,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "回复的是iOS发布的查看看安卓的显示是否自动显示",
"createTime": "2025-01-24 15:09:57",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700408,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": null,
"questionId": null,
"replyBasic": {
"content": "哈哈白白净净斤斤计较",
"id": 700407,
"isOpen": 1,
"replyTime": "2025-01-24 15:09:21",
"userId": "up0206900",
"userName": "向日葵🌻"
},
"replyId": 700407,
"status": 1,
"type": 1,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "收到滴答滴答滴答滴答哒哒哒哒哒哒哒哒哒多大,手打付款时间打开福建师大开发机四大分三大发开始的福建省大多数咖啡机",
"createTime": "2025-01-24 15:08:58",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700406,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": null,
"questionId": null,
"replyBasic": {
"content": "把喜不喜欢报道",
"id": 700405,
"isOpen": 1,
"replyTime": "2025-01-24 15:08:43",
"userId": "up0206900",
"userName": "向日葵🌻"
},
"replyId": 700405,
"status": 1,
"type": 1,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "回复三等奖防水防汗水电费还是洞口防护",
"createTime": "2025-01-24 15:08:22",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700403,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": null,
"questionId": null,
"replyBasic": {
"content": "需要公开今生今世你说你睡觉",
"id": 700402,
"isOpen": 1,
"replyTime": "2025-01-24 15:05:51",
"userId": "up0206900",
"userName": "向日葵🌻"
},
"replyId": 700402,
"status": 1,
"type": 1,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "水电费水电费是的防守打法",
"createTime": "2025-01-24 15:01:29",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700395,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": null,
"questionId": null,
"replyBasic": null,
"replyId": null,
"status": 1,
"type": 1,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
},
{
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"content": "水电费水电费水电费手动阀是打发水电费水电费水电费",
"createTime": "2025-01-24 15:01:00",
"createUserId": 116,
"createUserVO": {
"comId": null,
"comName": null,
"createTime": "2024-11-12 15:51:18",
"deptId": "2",
"deptName": null,
"id": 116,
"loginId": 116,
"mobile": null,
"name": "测测1",
"roleList": [],
"staffNo": null,
"status": 1,
"upId": null,
"userType": null
},
"deleteTime": null,
"deleteUserId": null,
"id": 700394,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"isCurrentUser": null,
"isForbid": null,
"isOpen": null,
"messageCount": null,
"online": null,
"phone": null,
"productBasic": null,
"questionDesc": null,
"questionId": null,
"replyBasic": null,
"replyId": null,
"status": 1,
"type": 1,
"userAdminVO": null,
"userId": null,
"userName": null,
"videoId": 21484
}
])
const detail = ref({
"advisorBasic": {
"avatar": "https://advisorimg.test.upchina.com/group1/M00/02/E5/rBAIx2czCRmAPCDfAAHFYtfoEBs588.png",
"deptName": "营业部3",
"id": 66,
"license": "sz232423423",
"name": "测测1",
"profile": "sdfsdfsdfsd",
"showName": "测测一",
"userId": 116
},
"advisorId": 66,
"auditTime": "2025-01-24 14:28:16",
"authIds": [],
"authResultVo": {
"auth": true,
"contractUrl": null,
"riskUrl": null
},
"authorityId": "",
"createTime": "2025-01-24 14:28:02",
"currentTime": "2025-01-31 19:37:20",
"detail": "<p>详情水电费合适的尽快发货受打击发哈,阿是嘉华大厦接电话十九大三打哈,撒记得哈时间的哈时间段撒酒疯哈时间的哈数据库,撒即可哈就是的哈时间段</p>",
"duration": 3467,
"endTime": "2025-01-24 15:47:58",
"exkey": null,
"favorUserCount": 9,
"guestInfo": null,
"id": 21484,
"imgUrl": "https://advisorimg.test.upchina.com/group1/M00/02/F9/rBAIx2eTMkCAC51tAAlK4YqQ09A911.png",
"infoVO": null,
"interactType": 1,
"isCart": 1,
"isDisplay": 1,
"isFavor": 2,
"isFinishRead": null,
"isGenerateRecord": 1,
"isSpeak": 1,
"isSubAdvisor": 2,
"isSubscribe": 2,
"joinUserCount": 0,
"libraryList": [
{
"duration": 3467,
"fileId": "1397757903546390815",
"id": 1208,
"liveIndex": 1,
"name": "测试1月24号横屏1",
"size": 1225081635,
"transStatus": 1
}
],
"limitType": 1,
"listCoverUrl": "https://advisorimg.test.upchina.com/group1/M00/02/F9/rBAIx2eTMoOAXV6EAAPlF6mEQcM893.png",
"liveStatus": 4,
"messageAudit": 2,
"online": 1,
"openQw": 1,
"playStyle": 2,
"playType": 1,
"readCount": 57,
"readDuration": null,
"readUserCount": 0,
"resizeUrl": "http://lczqvideodev.test.upchina.com/s/IuffWKn",
"riskLevel": 2,
"riskLevelLabel": "中低风险",
"showNickname": 1,
"size": null,
"startTime": "2025-01-24 14:50:08",
"status": 3,
"subCount": 0,
"subscribeUserCount": 2,
"teacherId": 66,
"title": "测试1月24号横屏1",
"videoAuthId": null,
"viewPoint": "看点圣诞节发货束带结发",
"weight": 0
})
const showCalendar = ref(false)
const { msgListRef } = useChatData({id: 21484});
</script>
<style scoped lang="scss">
.interact-scroll {
position: relative;
overflow: hidden;
text-align: left;
height: 100%;
box-sizing: border-box;
background: #f5f6fa;
.p20{
padding: 20px;
}
li {
margin-bottom: 20px;
.chat-time {
color: #888;
font-size: 24px;
text-align: center;
}
.img {
max-width: 100%;
height: 200px;
}
.warn {
text-align: center;
color: #999;
flex: 1;
margin-bottom: 0;
}
.flex {
display: flex;
}
.photo {
margin-right: 20px;
img {
display: block;
width: 88px;
height: 88px;
border-radius: 50%;
}
}
.user-info {
display: flex;
align-items: center;
h3 {
display: flex;
align-items: center;
font-size: 28px;
color: #1b2330;
line-height: 28px;
margin-bottom: 20px;
span {
color: #ff6f16;
font-size: 22px;
line-height: 22px;
margin-left: 20px;
border: 1px solid #ff3d36;
padding: 6px 8px;
border-radius: 8px;
}
}
}
.news-content-wrap {
flex: 1;
overflow: hidden;
& > div {
display: flex;
}
.align-center {
align-items: center;
}
}
}
li:last-child{
margin-bottom: 0;
}
.row-reverse {
justify-content: space-between;
flex-flow: row-reverse;
.user-info,
h3 {
justify-content: space-between;
flex-flow: row-reverse;
}
.photo {
margin-right: 0;
margin-left: 20px;
}
h3 {
span {
margin-left: 0;
margin-right: 20px;
}
}
.reply-content,
.text {
background: #2e78fa;
color: #fff;
}
.reply-content,
.text,
& > img,
.share-tip {
border-radius: 20px 4px 20px 20px;
}
.news-content-wrap > div {
flex-flow: row-reverse;
}
}
li > div {
font-size: 24px;
font-weight: 500;
letter-spacing: 0;
text-align: left;
color: #1b2330;
margin-bottom: 12px;
.question-item,
.product-item {
display: block;
p {
background: none;
padding-left: 0;
padding-top: 0;
}
}
label {
color: #2e78fa;
}
}
p,
.reply-content {
padding: 16px 24px;
background: #fff;
border-radius: 4px 20px 20px 20px;
font-size: 26px;
color: #606877;
text-align: justify;
line-height: 30px;
}
.license{
padding:0;
color: #c6c7c9;
line-height: 24px;
font-size: 24px;
border-radius: 0 20px 0 20px;
margin: 12px 0 1px 1px;
}
.reply {
line-height: 40px;
margin-right: 10px;
}
button {
height: 44px;
line-height: 44px;
border: none;
border-radius: 20px;
background-color: rgba(154, 164, 182, 0.1);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 20px auto;
padding-left: 32px;
font-size: 24px;
padding: 0 20px 0 30px;
&.share {
color: #ff3d36;
background-image: url(../../../assets/images/share-icon2.png);
}
&.attention {
color: #ff7d26;
background-image: url(../../../assets/images/attention.png);
}
}
}
.pulldown-wrapper {
position: absolute;
width: 100%;
padding: 20px;
box-sizing: border-box;
transform: translateY(-100%) translateZ(0);
text-align: center;
color: #999;
font-size: 24px;
}
.product-item {
.item-wrap {
width: 600px;
}
}
.question {
width: 600px;
background: #fff;
border-radius: 8px;
color: #000;
padding: 16px;
box-sizing: border-box;
background: url(../../../assets/images/chat/question-bg.png) no-repeat center;
background-size: 100% 100%;
height: 174px;
box-sizing: border-box;
h5 {
font-size: 28px;
margin-bottom: 20px;
color: #1e3566;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span {
color: #8ea4b6;
font-size: 24px;
line-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
}
.hp {
::v-deep .item-wrap,
.question {
height: 140px;
}
.question {
h5 {
margin-bottom: 8px;
}
}
::v-deep .item-wrap {
padding: 16px;
h4 {
margin-bottom: 0;
}
.intro {
line-height: 1.2em;
}
}
}
.product-float {
position: absolute;
left: 0;
bottom: 0;
width: 470px;
height: 180px;
::v-deep .item-wrap {
background: url(../../../assets/images/chat/product-float-bg.png) no-repeat
center;
background-size: 100% 100%;
}
img {
display: block;
position: absolute;
width: 24px;
height: 24px;
right: 20px;
top: 20px;
}
}
@media screen and (min-width: 480px) {
.interact-scroll .question {
height: 230px !important;
padding: 20px 30px;
h5 {
line-height: 50px !important;
}
}
.hp .question {
height: 200px !important;
padding: 20px 20px;
}
.interact-scroll h4 {
line-height: 48px !important;
}
.hp ::v-deep .item-wrap {
height: 170px !important;
h4,
p {
line-height: 50px;
}
}
}
.new-msg-tip{
position: absolute;
left: 0;
bottom: 0px;
color: #2e78fa;
background: #fff;
border: 1px solid rgba(204,204,204,0.2);
font-size: 24px;
padding: 8px 12px;
border-radius: 20px;
}
.refresh{
position: fixed;
right: 24px;
bottom: 180px;
width: 64px;
}
.date-select{
display: flex;
justify-content: space-between;
font-size: 28px;
padding: 20px;
}
.van-notice-bar{
position: absolute;
top: 156px;
left:0;
right:0;
font-size: 24px;
line-height: 48px;
height: 48px;
z-index: 2;
}
</style>