2025-03-19 15:35:09 +08:00
|
|
|
|
<template>
|
2025-04-12 17:11:06 +08:00
|
|
|
|
<div style="height: 100%">
|
|
|
|
|
<div class="jolkp">
|
|
|
|
|
<div
|
|
|
|
|
class="fan"
|
|
|
|
|
:style="{ marginRight: statue == 0 ? '50%' : '50%' }"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
@click="hui(0)"
|
|
|
|
|
:style="{ marginTop: '35px', color: '#fff' }"
|
|
|
|
|
v-if="statue == 1 || 6"
|
|
|
|
|
>
|
|
|
|
|
<
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <TUIContact v-else-if="statue==1" :stu="2" /> -->
|
|
|
|
|
<div
|
|
|
|
|
@click="hui(6)"
|
|
|
|
|
class="jolkp_z"
|
|
|
|
|
v-if="statue == 0 || 6"
|
|
|
|
|
:style="{ marginTop: '40px' }"
|
|
|
|
|
>
|
|
|
|
|
<div class="tiole">{{ tole }}</div>
|
|
|
|
|
</div>
|
2025-04-09 17:36:48 +08:00
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
@click="hui(1)"
|
|
|
|
|
class="jolkp_h"
|
|
|
|
|
v-if="statue == 0 || 6"
|
|
|
|
|
:style="{ marginTop: '35px' }"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
@click="fnkiopl"
|
|
|
|
|
class="jolkp_l"
|
|
|
|
|
:style="{ marginTop: '35px' }"
|
|
|
|
|
></div>
|
2025-03-19 15:35:09 +08:00
|
|
|
|
<!-- 弹出框 -->
|
2025-04-09 17:36:48 +08:00
|
|
|
|
<div v-if="isPopupVisible" class="popup" ref="popup">
|
2025-03-19 15:35:09 +08:00
|
|
|
|
<ul>
|
|
|
|
|
<li @click="handleAddFriend">添加好友/群聊</li>
|
|
|
|
|
<li @click="handleMenu()">发起群聊</li>
|
2025-04-09 17:36:48 +08:00
|
|
|
|
<li @click="handleScan">扫一扫</li>
|
2025-03-19 15:35:09 +08:00
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 搜索添加 -->
|
2025-04-09 17:36:48 +08:00
|
|
|
|
<TUIContactsea v-if="statue == 2" @switchConversation="hui" />
|
2025-03-19 15:35:09 +08:00
|
|
|
|
<!-- 联系人 -->
|
2025-04-09 17:36:48 +08:00
|
|
|
|
<TUIContact v-else-if="statue == 1" style="height: 100%" />
|
2025-04-21 17:39:41 +08:00
|
|
|
|
<!-- 群选择的 -->
|
|
|
|
|
<SelectFriend
|
|
|
|
|
v-else-if="statue == 3"
|
|
|
|
|
@con="hui"
|
|
|
|
|
:style="{ marginTop: '20px', heigth: '80%' }"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 群类型 -->
|
|
|
|
|
<CreateGroup v-else-if="statue == 10" @con="confn" />
|
2025-03-19 15:35:09 +08:00
|
|
|
|
<SelectFriendqlioa v-else-if="statue == 4" @concen="concen" />
|
2025-04-09 17:36:48 +08:00
|
|
|
|
<!-- 站内信数据 -->
|
|
|
|
|
<!-- <div > -->
|
|
|
|
|
<scroll-view
|
|
|
|
|
@scrolltolower="lowerBottom"
|
|
|
|
|
scroll-y="true"
|
|
|
|
|
v-else-if="statue == 6"
|
|
|
|
|
class="znx"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
@touchstart="startLongPress(item, index)"
|
|
|
|
|
@touchend="endLongPress(item, index)"
|
|
|
|
|
@click="torut(item)"
|
|
|
|
|
v-for="(item, index) in meList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
class="tui-conversation-item"
|
|
|
|
|
>
|
|
|
|
|
<div :style="{ transform: 'translateX(' + swipeStates[index] + 'px)' }">
|
|
|
|
|
{{ item.title }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">{{ item.createTime }}</div>
|
|
|
|
|
<div
|
|
|
|
|
class="delete-button"
|
|
|
|
|
@click="deleteMessage(index)"
|
|
|
|
|
v-if="swipeStates[index] <= -50"
|
|
|
|
|
>
|
|
|
|
|
删除
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
2025-04-12 17:11:06 +08:00
|
|
|
|
<!-- </div> -->
|
|
|
|
|
<!-- 会话 -->
|
|
|
|
|
<TUIConversation
|
|
|
|
|
style="height: 100%"
|
|
|
|
|
v-else
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
2025-03-19 15:35:09 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 导入组件
|
|
|
|
|
import TUIConversation from "@/TUIKit/components/TUIConversation/index";
|
|
|
|
|
import TUIContact from "@/TUIKit/components/TUIContact/index";
|
|
|
|
|
import TUIContactsea from "@/TUIKit/components/TUIContact/indexsea";
|
|
|
|
|
import { TUILogin } from "@tencentcloud/tui-core";
|
|
|
|
|
import ContactSearch from "@/TUIKit/components/TUIContact/contact-search/index.vue";
|
2025-04-21 17:39:41 +08:00
|
|
|
|
import CreateGroup from "@/TUIKit/components/TUIGroup/create-group/index.vue";
|
2025-03-19 15:35:09 +08:00
|
|
|
|
import { TUIChatKit } from "@/TUIKit";
|
|
|
|
|
import SelectFriend from "@/TUIKit/components/TUIContact/select-friend/index.vue";
|
|
|
|
|
import SelectFriendqlioa from "@/TUIKit/components/TUIGroup/index.vue";
|
2025-04-21 17:39:41 +08:00
|
|
|
|
|
2025-03-19 15:35:09 +08:00
|
|
|
|
import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
|
|
|
|
|
import storage from "@/utils/storage.js";
|
2025-04-22 10:01:19 +08:00
|
|
|
|
// push
|
|
|
|
|
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
|
|
|
|
|
import * as Push from '@/uni_modules/TencentCloud-Push';
|
|
|
|
|
|
2025-04-09 17:36:48 +08:00
|
|
|
|
import {
|
|
|
|
|
getUserimInfo,
|
|
|
|
|
getMember,
|
|
|
|
|
getMemberstate,
|
|
|
|
|
getMemberdelete,
|
2025-04-21 17:39:41 +08:00
|
|
|
|
geterweijki,
|
2025-04-09 17:36:48 +08:00
|
|
|
|
} from "@/api/members";
|
2025-03-19 15:35:09 +08:00
|
|
|
|
TUIChatKit.init();
|
|
|
|
|
let vueVersion = 2;
|
|
|
|
|
// vueVersion = 3;
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
// 注册组件
|
|
|
|
|
components: {
|
|
|
|
|
TUIConversation,
|
|
|
|
|
TUIContact,
|
|
|
|
|
TUIContactsea,
|
|
|
|
|
ContactSearch,
|
|
|
|
|
SelectFriend,
|
|
|
|
|
SelectFriendqlioa,
|
|
|
|
|
TUIChatKit,
|
2025-04-21 17:39:41 +08:00
|
|
|
|
CreateGroup,
|
2025-03-19 15:35:09 +08:00
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
2025-04-09 17:36:48 +08:00
|
|
|
|
statue: 0, // 0对话记录 1联系人 2添加好友/群聊 3建群 4群名称 6站内信
|
2025-03-19 15:35:09 +08:00
|
|
|
|
isPopupVisible: false, // 控制弹出框的显示与隐藏
|
|
|
|
|
isq: false,
|
2025-04-09 17:36:48 +08:00
|
|
|
|
popupRef: null, // 新增,用于保存弹窗的引用
|
|
|
|
|
meList: [],
|
|
|
|
|
swipeStates: [],
|
|
|
|
|
startX: 0,
|
|
|
|
|
tole: 0, //已读未读
|
|
|
|
|
cleartime: null,
|
|
|
|
|
pageSize: 20,
|
|
|
|
|
pageNumber: 1,
|
|
|
|
|
total: 0,
|
|
|
|
|
loadMoreStatus: "more", // 加载更多状态
|
2025-03-19 15:35:09 +08:00
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
onShow() {
|
|
|
|
|
// 每次进入页面时调用的方法
|
|
|
|
|
//获取用户信息
|
|
|
|
|
getUserimInfo()
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
if (data.code == 200) {
|
|
|
|
|
const par = data.result;
|
|
|
|
|
TUILogin.login({
|
2025-03-28 16:05:11 +08:00
|
|
|
|
SDKAppID: par.sdkAppId,
|
|
|
|
|
userID: par.userID,
|
|
|
|
|
userSig: par.userSig,
|
2025-03-19 15:35:09 +08:00
|
|
|
|
useUploadPlugin: true, // If you need to send rich media messages, please set to true.
|
|
|
|
|
framework: `vue${vueVersion}`, // framework used vue2 / vue3
|
2025-04-21 18:04:01 +08:00
|
|
|
|
}).then(()=>{
|
|
|
|
|
Push.setRegistrationID(par.userID, () => {
|
|
|
|
|
console.log('设置id设置id设置id设置id设置id设置id设置id设置id设置id设置id', par.userID);
|
2025-04-12 17:11:06 +08:00
|
|
|
|
|
2025-04-21 18:04:01 +08:00
|
|
|
|
Push.registerPush(
|
|
|
|
|
par.sdkAppId,
|
|
|
|
|
'vkFpe55aYqfV7Sk5uGaoxhEstJ3tcI9dquk7JwG1GloDSLD2HeMWeQweWWXgNlhC',
|
|
|
|
|
(data) => {
|
|
|
|
|
console.log('registerPush ok', data);
|
|
|
|
|
Push.getRegistrationID((registrationID) => {
|
|
|
|
|
console.log('getRegistrationID ok', registrationID);
|
2025-04-12 17:11:06 +08:00
|
|
|
|
});
|
2025-04-21 18:04:01 +08:00
|
|
|
|
},
|
|
|
|
|
(errCode, errMsg) => {
|
|
|
|
|
console.error('registerPush failed', errCode, errMsg);
|
2025-04-12 17:11:06 +08:00
|
|
|
|
}
|
2025-04-21 18:04:01 +08:00
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
// 监听通知栏点击事件,获取推送扩展信息
|
|
|
|
|
Push.addPushListener(Push.EVENT.NOTIFICATION_CLICKED, (res) => {
|
|
|
|
|
console.log('notification clicked', res);
|
|
|
|
|
// 解析扩展信息,跳转到相应的会话(代码仅供参考,发布前需要完善)
|
|
|
|
|
try {
|
|
|
|
|
const data = JSON.parse(res.data);
|
|
|
|
|
const conv_type = data?.entity?.chatType === 1 ? 'C2C' : 'GROUP';
|
|
|
|
|
// 根据推送信息拼的 conversationID
|
|
|
|
|
const conversationID = `${conv_type}${data.entity.sender}`;
|
|
|
|
|
// 切换会话
|
|
|
|
|
TUIConversationService.switchConversation(conversationID);
|
|
|
|
|
const chatPath = '/TUIKit/components/TUIChat/index';
|
|
|
|
|
uni.navigateTo({ url: chatPath });
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log('error', error);
|
2025-04-12 17:11:06 +08:00
|
|
|
|
}
|
|
|
|
|
});
|
2025-04-21 18:04:01 +08:00
|
|
|
|
// 监听在线推送
|
|
|
|
|
Push.addPushListener(Push.EVENT.MESSAGE_RECEIVED, (res) => {
|
|
|
|
|
// res 为消息内容
|
|
|
|
|
console.log('message received', res);
|
|
|
|
|
});
|
|
|
|
|
// 监听在线推送被撤回
|
|
|
|
|
Push.addPushListener(Push.EVENT.MESSAGE_REVOKED, (res) => {
|
|
|
|
|
// res 为被撤回的消息 ID
|
|
|
|
|
console.log('message revoked', res);
|
|
|
|
|
});
|
|
|
|
|
})
|
2025-03-19 15:35:09 +08:00
|
|
|
|
} else {
|
|
|
|
|
// 接口返回非 200 状态码,跳转登录页面
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: "/pages/passport/login",
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
// 请求失败,跳转登录页面
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: "/pages/passport/login",
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
2025-04-09 17:36:48 +08:00
|
|
|
|
mounted() {
|
|
|
|
|
this.getMembermethod();
|
|
|
|
|
this.setTime();
|
|
|
|
|
// 监听全局点击事件
|
|
|
|
|
document.addEventListener("click", (event) =>
|
|
|
|
|
this.handleGlobalClick(event)
|
|
|
|
|
);
|
|
|
|
|
// 监听滚动事件
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
// 移除全局点击事件
|
|
|
|
|
document.removeEventListener("click", this.handleGlobalClick);
|
|
|
|
|
// 清除定时器
|
|
|
|
|
clearTimeout(this.cleartime);
|
|
|
|
|
// 移除滚动事件监听
|
|
|
|
|
},
|
2025-03-19 15:35:09 +08:00
|
|
|
|
methods: {
|
2025-04-09 17:36:48 +08:00
|
|
|
|
lowerBottom() {
|
2025-04-21 17:39:41 +08:00
|
|
|
|
if (this.total >= this.meList.length) {
|
|
|
|
|
this.pageSize += 10;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
this.getMembermethod();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
setTime() {
|
|
|
|
|
const th = this;
|
|
|
|
|
this.cleartime = setTimeout(() => {
|
|
|
|
|
this.getMembermethod();
|
|
|
|
|
th.setTime(); //递归调用setTime函数,实现每10秒执行一次getMembermethod函数的效果
|
|
|
|
|
}, 10000);
|
|
|
|
|
},
|
|
|
|
|
torut(item) {
|
|
|
|
|
// 将 item 对象转换为 JSON 字符串,以便在 URL 中传递
|
|
|
|
|
const itemJson = encodeURIComponent(JSON.stringify(item));
|
|
|
|
|
// 使用 uni.navigateTo 方法跳转到详情页,并传递信息
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: `/pages/tabbar/im/details/index?item=${itemJson}`,
|
|
|
|
|
});
|
|
|
|
|
getMemberstate({ messageId: item.messageId }).then((res) => {
|
|
|
|
|
this.getMembermethod();
|
|
|
|
|
});
|
|
|
|
|
},
|
2025-03-19 15:35:09 +08:00
|
|
|
|
//完成跳转群名
|
|
|
|
|
confn() {
|
2025-04-21 17:39:41 +08:00
|
|
|
|
this.statue = 0;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
this.isPopupVisible = false;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
},
|
|
|
|
|
concen() {
|
|
|
|
|
this.statue = 0;
|
|
|
|
|
},
|
|
|
|
|
hui(index) {
|
|
|
|
|
this.statue = index;
|
|
|
|
|
},
|
|
|
|
|
fnkiopl() {
|
|
|
|
|
this.isPopupVisible = !this.isPopupVisible;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
this.popupRef = this.$refs.popup;
|
|
|
|
|
},
|
|
|
|
|
handleGlobalClick(event) {
|
|
|
|
|
if (this.isPopupVisible && event.target._prevClass != "jolkp_l") {
|
|
|
|
|
this.isPopupVisible = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
2025-04-21 17:39:41 +08:00
|
|
|
|
|
2025-04-09 17:36:48 +08:00
|
|
|
|
getMembermethod() {
|
|
|
|
|
const param = {
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
pageNumber: this.pageNumber,
|
|
|
|
|
};
|
|
|
|
|
getMember(param).then((res) => {
|
|
|
|
|
this.total = res.data.result.total;
|
|
|
|
|
if (this.pageNumber === 1) {
|
|
|
|
|
this.meList = res.data.result.records;
|
|
|
|
|
} else {
|
|
|
|
|
this.meList = this.meList.concat(res.data.result.records);
|
|
|
|
|
}
|
|
|
|
|
this.swipeStates = new Array(this.meList.length).fill(0);
|
|
|
|
|
this.tole = this.meList.filter(
|
|
|
|
|
(item) => item.status === "UN_READY"
|
|
|
|
|
).length;
|
|
|
|
|
});
|
2025-03-19 15:35:09 +08:00
|
|
|
|
},
|
|
|
|
|
handleMenu() {
|
|
|
|
|
const fn = [
|
|
|
|
|
...TUICore.getExtensionList(
|
|
|
|
|
TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID
|
|
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
const item = fn[1];
|
|
|
|
|
const {
|
|
|
|
|
listener = {
|
|
|
|
|
onClicked: () => {},
|
|
|
|
|
},
|
|
|
|
|
} = item;
|
|
|
|
|
listener?.onClicked?.(item);
|
|
|
|
|
this.statue = 3;
|
|
|
|
|
},
|
|
|
|
|
// 处理添加好友/群聊点击事件
|
|
|
|
|
handleAddFriend() {
|
|
|
|
|
this.statue = 2;
|
|
|
|
|
this.isPopupVisible = false;
|
|
|
|
|
},
|
2025-04-09 17:36:48 +08:00
|
|
|
|
handleScan() {
|
|
|
|
|
this.isPopupVisible = false;
|
|
|
|
|
uni.scanCode({
|
|
|
|
|
success: (res) => {
|
2025-04-21 17:39:41 +08:00
|
|
|
|
console.log("扫码结果:---", res);
|
|
|
|
|
geterweijki(res.result).then((resfn) => {
|
|
|
|
|
console.log(resfn, "====");
|
|
|
|
|
this.getUserimInfo();
|
|
|
|
|
this.statue = 0;
|
|
|
|
|
});
|
|
|
|
|
this.statue = 0;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
// 可以在这里添加处理扫码结果的逻辑
|
|
|
|
|
},
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
console.error("扫码失败:", err);
|
2025-04-21 17:39:41 +08:00
|
|
|
|
this.statue = 0;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
startLongPress(item, index) {
|
|
|
|
|
this.longPressTimer = setTimeout(() => {
|
|
|
|
|
uni.showModal({
|
|
|
|
|
title: "确认删除",
|
|
|
|
|
content: "确定要删除这条消息吗?",
|
|
|
|
|
success: (res) => {
|
|
|
|
|
if (res.confirm) {
|
|
|
|
|
getMemberdelete({ messageId: item.messageId }).then((res) => {
|
|
|
|
|
this.getMembermethod();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}, 2000);
|
|
|
|
|
},
|
|
|
|
|
endLongPress() {
|
|
|
|
|
clearTimeout(this.longPressTimer);
|
|
|
|
|
},
|
2025-03-19 15:35:09 +08:00
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
2025-03-28 16:05:11 +08:00
|
|
|
|
<style scoped>
|
|
|
|
|
uni-page-body,
|
|
|
|
|
html,
|
|
|
|
|
body,
|
|
|
|
|
page {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
width: 100% !important;
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
overflow: hidden;
|
2025-03-28 16:05:11 +08:00
|
|
|
|
}
|
2025-03-19 15:35:09 +08:00
|
|
|
|
.jolkp {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
height: 66px;
|
|
|
|
|
display: flex;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
justify-content: end;
|
|
|
|
|
/* 设置背景图 */
|
|
|
|
|
background-image: url('@/static/im/Rectangle.png');
|
|
|
|
|
/* 让背景图覆盖整个元素 */
|
|
|
|
|
background-size: cover;
|
|
|
|
|
/* 背景图不重复 */
|
|
|
|
|
background-repeat: no-repeat;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.jolkp_l {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
width: 2rem;
|
|
|
|
|
height: 2rem;
|
|
|
|
|
background-image: url('@/static/im/Frame.png');
|
|
|
|
|
/* 让背景图覆盖整个元素 */
|
|
|
|
|
background-size: cover;
|
|
|
|
|
/* 背景图不重复 */
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
margin-top: 35px;
|
|
|
|
|
margin-right: 10px;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.jolkp_h {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
width: 2rem;
|
|
|
|
|
height: 2rem;
|
|
|
|
|
background-image: url('@/static/im/user.png');
|
|
|
|
|
/* 让背景图覆盖整个元素 */
|
|
|
|
|
background-size: cover;
|
|
|
|
|
/* 背景图不重复 */
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
margin-top: 35px;
|
|
|
|
|
margin-right: 20px;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
2025-04-09 17:36:48 +08:00
|
|
|
|
.jolkp_z {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
width: 2rem;
|
|
|
|
|
height: 1.5rem;
|
|
|
|
|
background-image: url('@/static/im/znx.png');
|
|
|
|
|
/* 让背景图覆盖整个元素 */
|
|
|
|
|
background-size: cover;
|
|
|
|
|
/* 背景图不重复 */
|
|
|
|
|
background-size: 100% 100%;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
|
2025-04-12 17:11:06 +08:00
|
|
|
|
margin-top: 35px;
|
|
|
|
|
margin-right: 20px;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
}
|
|
|
|
|
.tiole {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
margin-top: -10px;
|
|
|
|
|
margin-left: 105%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 14px;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
}
|
2025-03-19 15:35:09 +08:00
|
|
|
|
.popup {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
position: absolute;
|
|
|
|
|
top: 65px;
|
|
|
|
|
/* 调整弹出框的位置 */
|
|
|
|
|
right: 5px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
z-index: 3;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup ul {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
list-style-type: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup li {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
cursor: pointer;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup li:hover {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
background-color: #f0f0f0;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fan {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
width: 10%;
|
|
|
|
|
height: '100%';
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
display: flex;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
|
2025-04-12 17:11:06 +08:00
|
|
|
|
padding: 5px;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
2025-04-09 17:36:48 +08:00
|
|
|
|
@media screen and (device-width: 393px) and (device-height: 851px) and (-webkit-device-pixel-ratio: 3) {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
.fan {
|
|
|
|
|
margin-right: 56% !important;
|
|
|
|
|
width: 10%;
|
|
|
|
|
height: '100%';
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 85%;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
2025-04-09 17:36:48 +08:00
|
|
|
|
}
|
2025-03-19 15:35:09 +08:00
|
|
|
|
.three {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
width: 100%;
|
|
|
|
|
height: 10%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: rgb(255, 255, 255);
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
2025-04-09 17:36:48 +08:00
|
|
|
|
.con {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
.three_div1 {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
height: 3rem;
|
|
|
|
|
width: 40%;
|
|
|
|
|
background-image: url('@/static/im/kf.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: end;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.three_div2 {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
width: 40%;
|
|
|
|
|
height: 3rem;
|
|
|
|
|
background-image: url('@/static/im/hy.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
width: 40%;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.three_div3 {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
height: 3rem;
|
|
|
|
|
background-image: url('@/static/im/da.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
width: 40%;
|
2025-03-19 15:35:09 +08:00
|
|
|
|
}
|
2025-04-09 17:36:48 +08:00
|
|
|
|
.tui-conversation-item {
|
|
|
|
|
/* height: 10%; */
|
|
|
|
|
padding: 12px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border: 1px solid #d9d9d9;
|
|
|
|
|
width: 98%;
|
2025-04-21 17:39:41 +08:00
|
|
|
|
margin: 10px 10px 10px 5px;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.content {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
justify-content: end;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
}
|
|
|
|
|
.left {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
position: relative;
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 36px;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
}
|
2025-03-28 16:05:11 +08:00
|
|
|
|
|
2025-04-09 17:36:48 +08:00
|
|
|
|
.znx {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
max-height: 100vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
overflow-y: auto;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
}
|
|
|
|
|
.delete-button {
|
2025-04-12 17:11:06 +08:00
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100px;
|
|
|
|
|
background-color: red;
|
|
|
|
|
color: white;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
cursor: pointer;
|
2025-04-09 17:36:48 +08:00
|
|
|
|
}
|
2025-04-21 17:39:41 +08:00
|
|
|
|
|
2025-03-19 15:35:09 +08:00
|
|
|
|
</style>
|