diff --git a/src/App.vue b/src/App.vue index a7ff752..909d0ca 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,7 +25,6 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver { } } - \ No newline at end of file diff --git a/src/api/account.js b/src/api/account.js index 773a63d..09813e5 100644 --- a/src/api/account.js +++ b/src/api/account.js @@ -121,4 +121,32 @@ export function editEmail(data) { //获取OTP export function getOtp() { return getAxios({ url: 'otp/getotp' }) +} +//根据用户id查询该用户已发布的未被邀请的主播列表 +export function getAnchorListById(data) { + return postAxios({ url: 'pk/listUninvitedPublishedAnchorsByUserId', data }) +} +//创建pk记录 +export function createPkRecord(data) { + return postAxios({ url: 'pk/createPkRecord', data }) +} +//查询pk记录信息 +export function queryPkRecord(data) { + return postAxios({ url: 'pk/singleRecord', data }) +} +//pk文章详情 +export function pkArticleDetail(data) { + return postAxios({ url: 'pk/pkInfoDetail', data }) +} +//更新pk记录状态(同意/拒绝) +export function updatePkRecordStatus(data) { + return postAxios({ url: 'pk/updatePkStatus', data }) +} +//查询pk中每个场次的详细数据 +export function queryPkDetail(data) { + return postAxios({ url: 'pk/fetchDetailPkDataWithId', data }) +} +//退出登录 +export function logout(data) { + return postAxios({ url: 'user/logout',data}) } \ No newline at end of file diff --git a/src/assets/messageVS.png b/src/assets/messageVS.png new file mode 100644 index 0000000..fb2f86f Binary files /dev/null and b/src/assets/messageVS.png differ diff --git a/src/assets/pkMessageleft.png b/src/assets/pkMessageleft.png new file mode 100644 index 0000000..776c014 Binary files /dev/null and b/src/assets/pkMessageleft.png differ diff --git a/src/assets/pkMessageright.png b/src/assets/pkMessageright.png new file mode 100644 index 0000000..c36d0dd Binary files /dev/null and b/src/assets/pkMessageright.png differ diff --git a/src/components/Appaside.vue b/src/components/Appaside.vue index f5b1943..fc0f03b 100644 --- a/src/components/Appaside.vue +++ b/src/components/Appaside.vue @@ -10,10 +10,12 @@ :style="{backgroundColor: item.id === activeId|| item.id === 5? '#ffffff' : '' , boxShadow: item.id === activeId|| item.id === 5? '5px 5px 5px rgba(0, 0, 0, 0.2)' : '', backgroundImage: item.id === activeId? `url(${require('@/assets/selectSidebar.png')})` : ''}"> - +
+ {{ chatList.unreadTotal }} +
@@ -281,7 +283,8 @@ import { editUserInfo, resendEmail, editEmail, - getUserInfo + getUserInfo, + logout } from "@/api/account"; import { ref, // 响应式基础 @@ -293,6 +296,13 @@ import { reactive } from "vue"; import { getCountryNamesArray } from "../utils/countryUtil"; +import { + goEasyGetConversations, + goEasyDisConnect, +} from "@/utils/goeasy.js"; +import { goeasy } from "../main"; +import GoEasy from "goeasy"; +var im = goeasy.im; const info = ref({}); // 用户信息 const avatar = ref(null); //头像 const country = ref([]); @@ -364,7 +374,7 @@ const NavigationModule = [ ] const drawer = ref(false)// 添加新PK弹窗 -const activeId = ref(null);//选中的导航id +const activeId = ref(1);//选中的导航id const router = useRouter(); const myAnchorDialogVisible = ref(false); // 选择我的主播弹窗 const selectAnchor = ref(null); // 选择的主播 @@ -380,6 +390,21 @@ const isSendEmail = ref(0); // 是否发送邮箱验证码 const isResendEmail = ref(0); // 是否重发邮箱验证 const timeLeft = ref(60); // 倒计时 const newEmail = ref(''); // 新邮箱 +const chatList = ref({ + unreadTotal: 0, +}); // 会话列表 + +//监听会话消息 +function onConversationsUpdated(conversations) { + chatList.value = conversations; + console.log(chatList.value); +} +//获取会话列表 +function getChatList() { + goEasyGetConversations().then((res) => { + chatList.value = res.content; + }); +} //重发邮箱验证 function ResendEmail() { @@ -590,11 +615,6 @@ function Confirm() { ElMessage.error("请输入场次"); return; } - const loading = ElLoading.service({ - lock: true, - text: "发布中....", - background: "rgba(0, 0, 0, 0.7)", - }); releasePkInfo({ anchorId: anchorName.value, pkTime: timevalue.value / 1000, @@ -608,13 +628,11 @@ function Confirm() { pkNumber: sessionnum.value, }) .then((res) => { - loading.close(); ElMessage.success("发布成功"); Reset(); drawer.value = false; }) .catch((err) => { - loading.close(); console.log(err); }); } @@ -632,6 +650,10 @@ function Reset() { // 选择我的主播弹窗确认 function myAnchorDialogConfirm() { + if (selectAnchor.value == null) { + ElMessage.error("请选择主播"); + return; + } AnchorProfilePicture.value = selectAnchor.value.headerIcon.split("/").pop(); anchorName.value = selectAnchor.value.anchorId; gendervalue.value = selectAnchor.value.gender; @@ -687,9 +709,17 @@ function popoverClick(id) { copyToClipboard('PK@TikTok0.xyz') }else if (id === 4) { // 退出登录 - clearStorage("user") - clearStorage("token") router.push('/') + logout({ + id: info.value.id, + }).then(res => { + goEasyDisConnect().then(() => { + ElMessage.success("退出登录成功"); + clearStorage("user") + clearStorage("token") + clearStorage("activeId") + }) + }); } } @@ -725,7 +755,7 @@ watch(refname, async (newQuestion, oldQuestion) => { }); onMounted(() => { getPromiseStorage('activeId').then(res => { - activeId.value = res + activeId.value = res || 1; }); getPromiseStorage('user').then(res => { info.value = res; @@ -734,6 +764,11 @@ onMounted(() => { getAnchorLibrary() UserInfo(); }); + + setTimeout(() => { + getChatList(); + im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, onConversationsUpdated); + }, 1000); }); onBeforeMount(()=>{ // 组件挂载前执行 @@ -836,6 +871,7 @@ onUnmounted(() => { align-items: center; } .Navigation-card{ + position: relative; width: 60px; height: 60px; border-radius: 10px; @@ -860,6 +896,20 @@ onUnmounted(() => { color:@Prompt-text-color; margin-top: 5px; } + +.redDot{ + padding: 3px 6px 3px 6px; + border-radius: 50px; + background-color: #ff0000; + color: #ffffff; + font-size: 10px; + position: absolute; + top: -10px; + right: -10px; + text-align: center; + line-height: 10px; +} + .Navigation-card:hover{ transform: scale(1.1); opacity: 0.8; @@ -1014,7 +1064,7 @@ onUnmounted(() => { transform: scale(0.95) !important; } .myAnchorDialogConfirm{ - width: 400px; + width: 300px; height: 50px; margin-top: 30px; text-align: center; @@ -1031,6 +1081,10 @@ onUnmounted(() => { transform: scale(1.1); opacity: 0.8; } +.myAnchorDialogConfirm:active { + transition: all 0.1s ease; + transform: scale(0.95) !important; +} .Reset { width: 85%; height: 50px; @@ -1054,7 +1108,7 @@ onUnmounted(() => { transform: scale(0.95) !important; } .myAnchorDialogReset{ - width: 400px; + width: 300px; height: 50px; margin-top: 30px; text-align: center; @@ -1071,6 +1125,10 @@ onUnmounted(() => { transform: scale(1.1); opacity: 0.8; } +.myAnchorDialogReset:active { + transition: all 0.1s ease; + transform: scale(0.95) !important; +} .myanchor-content { width: 100%; height: 600px; @@ -1366,13 +1424,13 @@ onUnmounted(() => { background-color: #ffffff00; border-bottom: 1px solid #4fcacd; } -:deep(.el-input__wrapper) { - box-shadow: none !important; - background-color: transparent !important; -} -:deep(.el-input__wrapper.is-focus) { - box-shadow: none !important; -} +// :deep(.el-input__wrapper) { +// box-shadow: none !important; +// background-color: transparent !important; +// } +// :deep(.el-input__wrapper.is-focus) { +// box-shadow: none !important; +// } .email-Verification-btn-text{ font-size: 14px; color: #999; diff --git a/src/components/chatMessage/PKMessage.vue b/src/components/chatMessage/PKMessage.vue new file mode 100644 index 0000000..b2757d7 --- /dev/null +++ b/src/components/chatMessage/PKMessage.vue @@ -0,0 +1,588 @@ + + + + + diff --git a/src/components/chatMessage/miniPKMessage.vue b/src/components/chatMessage/miniPKMessage.vue new file mode 100644 index 0000000..4e9b054 --- /dev/null +++ b/src/components/chatMessage/miniPKMessage.vue @@ -0,0 +1,533 @@ + + + + + diff --git a/src/components/mineSubComponent/AnchorLibrary.vue b/src/components/mineSubComponent/AnchorLibrary.vue index b296714..20535ee 100644 --- a/src/components/mineSubComponent/AnchorLibrary.vue +++ b/src/components/mineSubComponent/AnchorLibrary.vue @@ -311,6 +311,10 @@ onUnmounted(() => { display: flex; justify-content: center; align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .anchor-library-list { width: 100%; diff --git a/src/components/mineSubComponent/PKRecord.vue b/src/components/mineSubComponent/PKRecord.vue index 4813de5..e587b41 100644 --- a/src/components/mineSubComponent/PKRecord.vue +++ b/src/components/mineSubComponent/PKRecord.vue @@ -9,7 +9,7 @@
-
+
- +
-
来自世界上最长名的国家的某个人
-
PK时间:2025-07-31 19:07
-
+
{{ item.anchorIdA }}
+
PK时间:{{ TimestamptolocalTime(item.pkTime*1000) }}
+
实际金币数: -
10000W
+
{{ goldCoinCalculation(item.userACoins) }}
@@ -58,20 +58,20 @@
-
来自世界上最长名的国家的某个人
-
PK时间:2025-07-31 19:07
-
+
{{ item.anchorIdB }}
+
PK时间:{{ TimestamptolocalTime(item.pkTime*1000) }}
+
实际金币数: -
10000W
+
{{ goldCoinCalculation(item.userBCoins) }}
- +
@@ -79,38 +79,41 @@
+ -
+
- - + +
-
总共:9999999K
+
总共:{{ goldCoinCalculation(selectedData.userACoins) }}
-
总共:9999999K
+
总共:{{ goldCoinCalculation(selectedData.userBCoins) }}
-
- 1000w +
+ 第{{index+1}}局: + {{ goldCoinCalculation(item.anchorCoinA) }}
-
- - 10000000000000000w +
+ 第{{index+1}}局: + {{ goldCoinCalculation(item.anchorCoinB) }}
+
@@ -125,9 +128,11 @@ import { onUpdated, // 组件更新后执行 onUnmounted, // 组件销毁前执行 } from "vue"; -import {getPkRecord} from "@/api/account"; +import {getPkRecord,queryPkDetail} from "@/api/account"; import { ElMessage } from "element-plus"; import {getPromiseStorage } from "@/utils/storage.js"; +import { TimestamptolocalTime } from "@/utils/timeConversion.js"; +import { goldCoinCalculation } from "@/utils/goldCoinCalculation.js"; const user = ref(null); // 用户信息 const refname = ref(""); @@ -146,26 +151,54 @@ const options = [ SelectedIcon: require("@/assets/InvitationSelected.png"), }, ]; -const list = ref([]); -const page = ref(0); -const IPKPostedData = ref([]); -const InvitationData = ref([]); +const list = ref([]);// PK记录列表 +const page = ref(0);// 页数 +const IPKPostedData = ref([]);//我发布的PK +const InvitationData = ref([]);//我邀请的PK +const selectedData = ref(null); //被选中的PK数据 +const fetchDetailPkDataWithId = ref([]); // PK详情数据 + + +//选中PK数据 +function detail(item) { + selectedData.value = item; + queryPkDetail({ + id: item.id, + }).then((res) => { + fetchDetailPkDataWithId.value = res; + }); +} +//切换选项卡 +function optionsclick(value) { + segmentedvalue.value = value; + if (value === 1) { + list.value = IPKPostedData.value; + console.log("我发布的PK",list.value); + } else { + list.value = InvitationData.value; + console.log("我邀请的PK",list.value); + } +} //获取PK记录列表 -function PkRecord() { +function PkRecord(type) { getPkRecord({ - type: segmentedvalue.value, + type: type, userId: user.value.id, page: page.value, size: 10, }).then((res) => { console.log(res); - if (segmentedvalue.value === 1) { + if (type === 1) { IPKPostedData.value.push(...res); - list.value = IPKPostedData.value; + if(segmentedvalue.value === type){ + list.value = IPKPostedData.value; + } }else{ InvitationData.value.push(...res); - list.value = InvitationData.value; + if(segmentedvalue.value === type){ + list.value = InvitationData.value; + } } }) } @@ -178,7 +211,8 @@ onMounted(() => { getPromiseStorage("user") .then((res) => { user.value = res; - PkRecord(); + PkRecord(1); + PkRecord(2); }) .catch((err) => { console.log(err); @@ -196,6 +230,10 @@ onUnmounted(() => { .pk-record { width: 100%; height: 100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .demo-panel { width: 100%; @@ -336,6 +374,11 @@ onUnmounted(() => { transform: scale(1.08); opacity: 0.8; } +.list-content:active { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); + transform: scale(1.05); + opacity: 0.9; +} .vs { width: 50px; height: 50px; @@ -353,6 +396,11 @@ onUnmounted(() => { border-radius: 50%; background-color: #fff; } +.avatar-img{ + width: 100%; + height: 100%; + border-radius: 50%; +} .content-left { width: calc(100% - 150px); height: 80%; @@ -556,6 +604,8 @@ onUnmounted(() => { display: flex; flex-direction: column; align-items: center; + overflow: auto; + scrollbar-width: none; /* Firefox */ } .goldlist-card-left { background-color: #dffefc; @@ -575,10 +625,10 @@ onUnmounted(() => { line-height: 57px; font-size: 20px; font-weight: bold; - color: #333333; + color: #03aba8; border-radius: 10px; white-space: nowrap; - overflow-x: hidden; + // overflow-y: hidden; text-overflow: ellipsis; } diff --git a/src/components/mineSubComponent/PKmessage.vue b/src/components/mineSubComponent/PKmessage.vue index 0d00484..4c00aa6 100644 --- a/src/components/mineSubComponent/PKmessage.vue +++ b/src/components/mineSubComponent/PKmessage.vue @@ -616,6 +616,10 @@ watch(refname, async (newQuestion, oldQuestion) => { .pk-message { width: 100%; height: 100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .demo-panel { width: 100%; diff --git a/src/components/mineSubComponent/PointsList.vue b/src/components/mineSubComponent/PointsList.vue index 240cd92..4109e03 100644 --- a/src/components/mineSubComponent/PointsList.vue +++ b/src/components/mineSubComponent/PointsList.vue @@ -89,6 +89,10 @@ watch(refname, async (newQuestion, oldQuestion) => { .points-list-container{ width: 100%; height: 100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .points-list{ width: 100%; diff --git a/src/utils/goeasy.js b/src/utils/goeasy.js index a550389..8afd20b 100644 --- a/src/utils/goeasy.js +++ b/src/utils/goeasy.js @@ -24,6 +24,19 @@ export function goEasyLink(data) { }); }) } +//断开IM +export function goEasyDisConnect() { + return new Promise((resolve, reject) => { + goeasy.disconnect({ + onSuccess: function(){ + resolve(true) + }, + onFailed: function(error){ + console.log("断开失败, code:"+error.code+ ",error:"+error.content); + } + }); + }); +} //获取会话列表 export function goEasyGetConversations() { @@ -57,4 +70,106 @@ export function goEasyGetMessages(data) { } }); }) +} + +//发送文本消息 +export function goEasySendMessage(data) { + var im = goeasy.im; + let textMessage = im.createTextMessage({ + text: data.text, //消息内容 + to: { + type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊,群聊为GoEasy.IM_SCENE.GROUP + id: data.id, //接收方用户id + data: {"avatar": data.avatar, "nickname": data.nickname} //接收方用户扩展数据, 任意格式的字符串或者对象,用于更新会话列表conversation.data + } + }); + return new Promise((resolve, reject) => { + im.sendMessage({ + message: textMessage, + onSuccess: function () { //发送成功 + resolve(textMessage); + }, + onFailed: function (error) { //发送失败 + console.log('Failed to send private message,code:' + error.code + ' ,error ' + error.content); + } + }); + }) +} + +//发送图片消息 +export function goEasySendImageMessage(data) { + var im = goeasy.im; + var message = im.createImageMessage({ + file: data.imagefile, //H5获得的图片file对象,Uniapp和小程序调用chooseImage,success时得到的res.tempFiles数组中的元素,比如res.tempFiles[0]即为选择的第一张图片 + to: { + type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊,群聊为GoEasy.IM_SCENE.GROUP + id: data.id, //接收方用户id + data: {"avatar": data.avatar, "nickname": data.nickname} //好友扩展数据, 任意格式的字符串或者对象,用于更新会话列表conversation.data + }, + }); + return new Promise((resolve, reject) => { + im.sendMessage({ + message: message, + onSuccess: function () { //发送成功 + resolve(message); + }, + onFailed: function (error) { //发送失败 + console.log('Failed to send message,code:' + error.code + ',error' + error.content); + } + }) + }) +} +//发送PK消息 +export function goEasySendPKMessage(data) { + var im = goeasy.im; + const customData = { + id: data.msgid, + pkIdA: data.pkIdA, + pkIdB: data.pkIdB, + }; + + let order = { + customData: customData, + link: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pk.png", + text: "PK邀请消息", + }; + + var customMessage = im.createCustomMessage({ + type: 'pk', //字符串,可以任意自定义类型,比如红包'hongbao', 订单'order,处方'chufang' + payload: order, + to: { + type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊,群聊为GoEasy.IM_SCENE.GROUP + id: data.id, //接收方用户id + data: {"avatar": data.avatar, "nickname": data.nickname} //好友扩展数据, 任意格式的字符串或者对象,用于更新会话列表conversation.data + } + }); + + return new Promise((resolve, reject) => { + im.sendMessage({ + message: customMessage, + onSuccess: function () { //发送成功 + resolve(customMessage); + }, + onFailed: function (error) { //发送失败 + console.log('Failed to send message,code:' + error.code + ',error' + error.content); + } + }); + }) + +} +//消息已读 +export function goEasyMessageRead(data) { + var im = goeasy.im; + return new Promise((resolve, reject) => { + im.markMessageAsRead({ + id: data.id, + type: GoEasy.IM_SCENE.PRIVATE, + onSuccess: function () { + resolve(true); + }, + onFailed: function (error) { + console.log('标记私聊已读失败', error); + }, + }); + }) } \ No newline at end of file diff --git a/src/utils/goldCoinCalculation.js b/src/utils/goldCoinCalculation.js new file mode 100644 index 0000000..753e4e4 --- /dev/null +++ b/src/utils/goldCoinCalculation.js @@ -0,0 +1,19 @@ +export function goldCoinCalculation(goldCoins) { + if (goldCoins === null || goldCoins === undefined) { + return ""; + } + if (goldCoins < 1000) { + return String(goldCoins); + } + if (goldCoins >= 1000000) { + return "1M+"; + } + const kValue = goldCoins / 1000; + const formattedString = kValue.toFixed(2); // 确保至少保留两位小数 + const matchResult = formattedString.match(/^\d+\.\d{0,2}/); + if (matchResult === null) { + return kValue.toFixed(2) + "k"; // 确保至少保留两位小数 + } + const formatted = matchResult[0]; + return `${formatted}k`; +} \ No newline at end of file diff --git a/src/utils/timeDisplay.js b/src/utils/timeDisplay.js new file mode 100644 index 0000000..3b81726 --- /dev/null +++ b/src/utils/timeDisplay.js @@ -0,0 +1,22 @@ +// 记录上次调用时间 +let lastTimestamp = null; + +/** + * 比较时间戳是否超过5分钟 + * @param {number} timestamp - 要比较的时间戳(毫秒) + * @returns {boolean} - 是否超过5分钟或第一次调用 + */ +export function timeDisplay(timestamp) { + // 第一次调用直接返回true + if (lastTimestamp === null) { + lastTimestamp = timestamp; + return true; + } + + // 计算时间差(毫秒) + const timeDiff = Math.abs(timestamp - lastTimestamp); + lastTimestamp = timestamp; + + // 5分钟 = 300,000毫秒 + return timeDiff > 300000; +} diff --git a/src/views/ActivateEmail.vue b/src/views/ActivateEmail.vue index d0bc861..4a9bdb0 100644 --- a/src/views/ActivateEmail.vue +++ b/src/views/ActivateEmail.vue @@ -68,6 +68,10 @@ onUnmounted(() => { flex-direction: column; justify-content: center; align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .activate-email-content{ font-size: 30px; diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 58cce23..ea6813a 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -26,6 +26,7 @@ class="input-text" v-model="refEmail" placeholder="请输入邮箱或用户名" + @keydown.enter.native="EmailLogin" />
@@ -38,6 +39,7 @@ v-model="refpassword" show-password placeholder="请输入密码" + @keydown.enter.native="EmailLogin" />
@@ -200,6 +202,10 @@ onUnmounted(() => { flex-direction: column; justify-content: center; align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .login { width: 627px; diff --git a/src/views/emailRegistration.vue b/src/views/emailRegistration.vue index b87a4bc..462d8b6 100644 --- a/src/views/emailRegistration.vue +++ b/src/views/emailRegistration.vue @@ -178,6 +178,10 @@ onUnmounted(() => { flex-direction: column; justify-content: center; align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .stepBar { width: 900px; diff --git a/src/views/hosts/Forum.vue b/src/views/hosts/Forum.vue index 4a33ada..352ab86 100644 --- a/src/views/hosts/Forum.vue +++ b/src/views/hosts/Forum.vue @@ -61,6 +61,10 @@ onUnmounted(() => { display: flex; justify-content: center; align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .infinite-list { width: 90%; diff --git a/src/views/hosts/Message.vue b/src/views/hosts/Message.vue index 2091971..5e97aa1 100644 --- a/src/views/hosts/Message.vue +++ b/src/views/hosts/Message.vue @@ -41,12 +41,22 @@
-
+
+ +
+ {{ TimestamptolocalTime(item.timestamp) }} +
-
- +
+
{{ item.payload.text }}
- + +
+ +
+
-
- +
+
{{ item.payload.text }}
- - +
+ +
+ +
+
@@ -97,26 +132,32 @@
-
+
- +
- -
- -
- -
- -
- -
- -
- - -
发送
+ +
+ +
+ +
+ +
+ +
+
+ +
发送
@@ -124,6 +165,7 @@ v-model="textarea" class="textarea" style="width: 100%; height: 100%" + @keydown.enter.native="sendMsg" />
@@ -134,6 +176,323 @@
+ + +
+
+
+ +
+ +
+
+ +
+
+ {{ hostOtherSide.anchorId }} +
+
+ {{ hostOtherSide.sex == 1 ? "男" : "女" }} +
+
+ {{ hostOtherSide.country }} +
+
+ +
+ PK时间(本地时间):{{ TimestamptolocalTime(hostOtherSide.pkTime * 1000) }} +
+ +
+ +
金币:{{ hostOtherSide.coin }}K
+ +
场次:{{ hostOtherSide.pkNumber }}场
+
+ +
+ {{ hostOtherSide.remark }} +
+
+
+
+ 选择对方的PK主播 +
+
+ +
+
+ +
+ +
+
+ +
+
+ {{ hostmySide.anchorId }} +
+
+ {{ hostmySide.sex == 1 ? "男" : "女" }} +
+
+ {{ hostmySide.country }} +
+
+ +
+ PK时间(本地时间):{{ TimestamptolocalTime(hostmySide.pkTime * 1000) }} +
+ +
+ +
金币:{{ hostmySide.coin }}K
+ +
场次:{{ hostmySide.pkNumber }}场
+
+ +
+ {{ hostmySide.remark }} +
+
+
+
+ 选择自己的PK主播 +
+
+ +
+
取消
+
确认
+
+
+
+ + + +
+
+
+
+ +
+ +
+
+ +
+
+ {{ item.anchorId }} +
+
+ {{ item.sex == 1 ? "男" : "女" }} +
+
+ {{ item.country }} +
+
+ +
+ PK时间(本地时间):{{ TimestamptolocalTime(item.pkTime * 1000) }} +
+ +
+ +
金币:{{ item.coin }}K
+ +
场次:{{ item.pkNumber }}场
+
+ +
+ {{ item.remark }} +
+
+
+
+
+
+
取消
+
+ 确认 +
+
+
+
+ + + +
+
+
+
+ +
+ +
+
+ +
+
+ {{ item.anchorId }} +
+
+ {{ item.sex == 1 ? "男" : "女" }} +
+
+ {{ item.country }} +
+
+ +
+ PK时间(本地时间):{{ TimestamptolocalTime(item.pkTime * 1000) }} +
+ +
+ +
金币:{{ item.coin }}K
+ +
场次:{{ item.pkNumber }}场
+
+ +
+ {{ item.remark }} +
+
+
+
+
+
+
取消
+
+ 确认 +
+
+
+
+ + +
+
+
+ 您确定要发送PK邀请消息吗?邀请成功后的pk不可修改,不可删除,请谨慎操作! +
+
+
+
取消
+
+ 确认 +
+
+
+
@@ -326,10 +931,6 @@ onUnmounted(() => { overflow: hidden; text-overflow: ellipsis; /* 显示省略号 */ } -.time { - font-size: 12px; - color: @Prompt-text-color; -} .chatText { font-size: 10px; color: @font-color; @@ -349,6 +950,19 @@ onUnmounted(() => { height: auto; margin-top: 20px; } +.chatTime { + margin-top: 20px; + margin-bottom: 20px; + width: 100%; + height: 20px; + font-size: 16px; + color: #999999; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} .messageOtherSide { width: 100%; height: auto; @@ -397,6 +1011,19 @@ onUnmounted(() => { overflow-wrap: break-word; /* 长单词换行(适合英文) */ white-space: normal; /* 允许自动换行 */ } +.PKmessageMyContent { + max-width: 100%; + height: auto; + min-height: 20px; + background-color: #f5f5f5; + border-radius: 10px; + font-size: 20px; + word-break: break-all; /* 强制换行(适合中文) */ + overflow-wrap: break-word; /* 长单词换行(适合英文) */ + white-space: normal; /* 允许自动换行 */ + margin-bottom: 20px; + margin-top: 20px; +} .messageMyContent { max-width: 30%; height: auto; @@ -423,31 +1050,42 @@ onUnmounted(() => { justify-content: center; } .Console-content { - width: 98%; + width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #e4f9f9; } -.chat-input-other{ +.chat-input-other { display: flex; align-items: center; } -.chat-input-img{ - width: 40px; - height: 40px; +.chat-input-img { + width: 50px; + height: 50px; border-radius: 10px; display: flex; margin-left: 10px; justify-content: center; align-items: center; transition: all 0.4s ease; + border: 1px solid #03aba800; } -.chat-input-img:hover{ - background-color: #d4d4d4; +.chat-input-img:hover { + background-color: #ffffff; + border: 1px solid #03aba82f; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); } - -.chat-input-img-img{ +.chat-input-img:active{ + transition: all 0.1s ease; + transform: scale(0.95) !important; +} +.chat-input-img-img { width: 30px; height: 30px; } @@ -467,7 +1105,7 @@ onUnmounted(() => { background-color: #03aba82d; // color: #ffffff; } -.chat-input-Send:active{ +.chat-input-Send:active { transition: all 0.1s ease; transform: scale(0.95) !important; } @@ -484,4 +1122,299 @@ onUnmounted(() => { background-color: #ffffff00; resize: none; } +.PKcontent { + width: 100%; + height: 600px; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 16px; + background-image: linear-gradient(180deg, #e4ffff, #ffffff); + border: 1px solid #03aba8; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.PKcontentbtn { + margin-top: 50px; + width: 80%; + display: flex; + justify-content: space-between; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.myAnchorDialogReset { + width: 300px; + height: 50px; + margin-top: 30px; + text-align: center; + line-height: 50px; + background: linear-gradient(0deg, #e4ffff, #ffffff); + color: #03aba8; + font-size: 20px; + transition: all 0.4s ease; + border-radius: 100px; + border: 1px solid #4fcacd; +} +.myAnchorDialogReset:hover { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + transform: scale(1.1); + opacity: 0.8; +} +.myAnchorDialogReset:active { + transition: all 0.1s ease; + transform: scale(0.95) !important; +} +.remindermyAnchorDialogReset { + width: 150px; + height: 30px; + margin-top: 30px; + text-align: center; + line-height: 30px; + background: linear-gradient(0deg, #e4ffff, #ffffff); + color: #03aba8; + font-size: 18px; + transition: all 0.4s ease; + border-radius: 100px; + border: 1px solid #4fcacd; +} +.remindermyAnchorDialogReset:hover { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + transform: scale(1.1); + opacity: 0.8; +} +.remindermyAnchorDialogReset:active { + transition: all 0.1s ease; + transform: scale(0.95) !important; +} +.myAnchorDialogConfirm { + width: 300px; + height: 50px; + margin-top: 30px; + text-align: center; + line-height: 50px; + background: linear-gradient(0deg, #4fcacd, #5fdbde); + color: #ffffff; + font-size: 20px; + transition: all 0.4s ease; + border-radius: 100px; +} + +.myAnchorDialogConfirm:hover { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + transform: scale(1.1); + opacity: 0.8; +} +.myAnchorDialogConfirm:active { + transition: all 0.1s ease; + transform: scale(0.95) !important; +} +.remindermyAnchorDialogConfirm { + width: 150px; + height: 30px; + margin-top: 30px; + text-align: center; + line-height: 30px; + background: linear-gradient(0deg, #4fcacd, #5fdbde); + color: #ffffff; + font-size: 18px; + transition: all 0.4s ease; + border-radius: 100px; +} +.remindermyAnchorDialogConfirm:hover { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + transform: scale(1.1); + opacity: 0.8; +} +.remindermyAnchorDialogConfirm:active { + transition: all 0.1s ease; + transform: scale(0.95) !important; +} +// ·················· +.infinite-list-item { + width: 100%; + height: 170px; + margin-bottom: 20px; + margin-top: 20px; + display: flex; + align-items: center; + justify-content: center; +} +.infinite-card { + width: 90%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + background-image: linear-gradient(0deg, @bg-Sidebar-color-top, @bg-color); + border-radius: 11px; + background-image: url(../../assets/PKbackground.png); + background-size: 100% 100%; + transition: all 0.4s ease; + border-radius: 10px; +} +.infinite-card:hover { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + transform: scale(1.05); + opacity: 0.8; +} +.infinite-card:active { + transition: all 0.1s ease; + transform: scale(0.95) !important; +} +.Avatars { + width: 100px; + height: 100px; + border-radius: 50%; + background-color: #ececec; + margin-left: 30px; +} +.Information { + width: calc(100% - 160px); + height: 80%; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.Information-Personal { + display: flex; + align-items: center; +} +.Information-name { + width: auto; + font-size: 20px; + font-weight: bold; + color: @font-color; +} +.Information-gender { + width: 50px; + height: 20px; + background-color: #e9e7e7; + border-radius: 10px; + color: #ffffff; + font-size: 12px; + font-weight: bold; + text-align: center; + line-height: 20px; + letter-spacing: 2px; + margin-left: 20px; +} +.Information-Country { + width: auto; + height: 20px; + background-color: #e4f9f9; + border-radius: 10px; + color: #03aba8; + font-size: 12px; + font-weight: bold; + text-align: center; + line-height: 20px; + letter-spacing: 2px; + padding-left: 5px; + padding-right: 5px; + margin-left: 20px; +} +.time { + font-size: 12px; + color: @Prompt-text-color; +} +.Information-PK { + display: flex; + align-items: center; +} +.goldimg { + width: 20px; + height: 20px; + margin-right: 10px; +} +.gold { + font-size: 16px; + color: @font-color; +} +.sessionimg { + width: 20px; + height: 20px; + margin-left: 50px; + margin-right: 10px; +} +.Session { + font-size: 16px; + color: @font-color; +} +.Information-Remarks { + font-size: 14px; + color: @Prompt-text-color; +} +.nodata { + width: 90%; + height: 170px; + text-align: center; + font-size: 20px; + color: #999999; + line-height: 170px; + background-image: url(../../assets/PKbackground.png); + border-radius: 10px; + background-size: 100% 100%; + transition: all 0.4s ease; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.nodata:hover { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + transform: scale(1.05); + opacity: 0.8; +} +.nodata:active { + transition: all 0.05s ease; + transform: scale(0.95) !important; +} +.myanchor-content { + width: 100%; + height: 600px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.myanchor-list { + width: 100%; + height: 500px; + background-color: #e0f4f1; + border-radius: 16px; + border: 1px solid #4fcacd; + overflow: auto; +} +.myanchor-dialog-btn { + width: 100%; + display: flex; + justify-content: space-around; + margin-top: 20px; +} +.reminder-content { + width: 100%; + height: 300px; + display: flex; + flex-direction: column; + align-items: center; +} +.reminder-text { + width: 90%; + height: 200px; + font-size: 18px; + color: #03aba8; + display: flex; + align-items: center; + justify-content: center; +} + + \ No newline at end of file diff --git a/src/views/hosts/Mine.vue b/src/views/hosts/Mine.vue index e016304..acea245 100644 --- a/src/views/hosts/Mine.vue +++ b/src/views/hosts/Mine.vue @@ -99,6 +99,10 @@ onUnmounted(() => { display: flex; align-items: center; justify-content:space-between; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .Selector{ width: 420px; diff --git a/src/views/hosts/pk.vue b/src/views/hosts/pk.vue index c0eb9cc..2be37d3 100644 --- a/src/views/hosts/pk.vue +++ b/src/views/hosts/pk.vue @@ -5,7 +5,7 @@ - +
@@ -123,7 +123,15 @@ v-for="(item, index) in list" :key="index" > -
+
-
来自世界上最长名的国家的某个人
+
{{ info.nickName }}
-
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ {{ item.payload.text }} +
+ + + + +
+
+ +
+
+ +
+ {{ item.payload.text }} +
+ + + + + +
+
+ +
+
+ +
+
+
+
+
-
+
-
+ +
+ +
+ +
+ +
-
发送
+
发送
@@ -211,6 +309,7 @@ v-model="textarea" class="textarea" style="width: 100%; height: 100%" + @keydown.enter.native="sendMsg" />
@@ -219,6 +318,7 @@
+ @@ -228,6 +328,325 @@
+ + + +
+
+
+ +
+ +
+
+ +
+
+ {{ hostOtherSide.anchorId }} +
+
+ {{ hostOtherSide.sex == 1 ? "男" : "女" }} +
+
+ {{ hostOtherSide.country }} +
+
+ +
+ PK时间(本地时间):{{ TimestamptolocalTime(hostOtherSide.pkTime * 1000) }} +
+ +
+ +
金币:{{ hostOtherSide.coin }}K
+ +
场次:{{ hostOtherSide.pkNumber }}场
+
+ +
+ {{ hostOtherSide.remark }} +
+
+
+
+ 选择对方的PK主播 +
+
+ +
+
+ +
+ +
+
+ +
+
+ {{ hostmySide.anchorId }} +
+
+ {{ hostmySide.sex == 1 ? "男" : "女" }} +
+
+ {{ hostmySide.country }} +
+
+ +
+ PK时间(本地时间):{{ TimestamptolocalTime(hostmySide.pkTime * 1000) }} +
+ +
+ +
金币:{{ hostmySide.coin }}K
+ +
场次:{{ hostmySide.pkNumber }}场
+
+ +
+ {{ hostmySide.remark }} +
+
+
+
+ 选择自己的PK主播 +
+
+ +
+
取消
+
确认
+
+
+
+ + + +
+
+
+
+ +
+ +
+
+ +
+
+ {{ item.anchorId }} +
+
+ {{ item.sex == 1 ? "男" : "女" }} +
+
+ {{ item.country }} +
+
+ +
+ PK时间(本地时间):{{ TimestamptolocalTime(item.pkTime * 1000) }} +
+ +
+ +
金币:{{ item.coin }}K
+ +
场次:{{ item.pkNumber }}场
+
+ +
+ {{ item.remark }} +
+
+
+
+
+
+
取消
+
+ 确认 +
+
+
+
+ + + +
+
+
+
+ +
+ +
+
+ +
+
+ {{ item.anchorId }} +
+
+ {{ item.sex == 1 ? "男" : "女" }} +
+
+ {{ item.country }} +
+
+ +
+ PK时间(本地时间):{{ TimestamptolocalTime(item.pkTime * 1000) }} +
+ +
+ +
金币:{{ item.coin }}K
+ +
场次:{{ item.pkNumber }}场
+
+ +
+ {{ item.remark }} +
+
+
+
+
+
+
取消
+
+ 确认 +
+
+
+
+ + +
+
+
+ 您确定要发送PK邀请消息吗?邀请成功后的pk不可修改,不可删除,请谨慎操作! +
+
+
+
取消
+
+ 确认 +
+
+
+
+