mfx/web-fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pk优化版

Browse Source
This commit is contained in:
没复习
2026-02-26 13:15:19 +08:00
parent d4c0dcf6b1
commit 5c1911314f
22 changed files with 742 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/components/pk-mini/chat/MiniPKMessage.vue
View File

@@ -1,76 +1,71 @@
<template>
<div class="chat-message-mini-pk">
<!-- 用户A -->
<div class="userA">
<div class="Avatar">
<img class="AvatarImg" :src="ArticleDetailsA.anchorIcon" alt="" />
<div class="name">{{ ArticleDetailsA.anchorId }}</div>
</div>
<div class="genderAndCountry">
<div class="gender" :style="{ background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F' }">
{{ ArticleDetailsA.sex == 1 ? $t('pkMini.man') : $t('pkMini.woman') }}
<div class="chat-message-mini-pk" :class="{ compact: compact }">
<!-- 卡片区域（相对定位容器，VS 绝对叠在中间） -->
<div class="pk-cards">
<!-- 用户A -->
<div class="userA">
<div class="genderAndCountry">
<div class="gender" :style="{ background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F' }">
{{ ArticleDetailsA.sex == 1 ? $t('pkMini.man') : $t('pkMini.woman') }}
</div>
<div class="Country">{{ ArticleDetailsA.country }}</div>
</div>
<div class="Country">{{ ArticleDetailsA.country }}</div>
</div>
<div class="time">
{{ $t('pkMini.PKTime') + TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
</div>
<div class="PKinformation">
<div class="gold">
<img class="gold-img" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png" alt="" />
<div class="sessions-content">
{{ $t('pkMini.GoldCoin') }}
<div class="gold-num">{{ ArticleDetailsA.coin }}K</div>
</div>
</div>
<div class="sessions">
<img class="sessions-img" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png" alt="" />
<div class="sessions-content">
{{ $t('pkMini.session') }}
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
<div class="time">
{{ $t('pkMini.PKTime') + TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
</div>
<div class="PKinformation">
<div class="gold">
<img class="gold-img" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png" alt="" />
<div class="sessions-content">
{{ $t('pkMini.GoldCoin') }}
<div class="gold-num">{{ ArticleDetailsA.coin }}K</div>
</div>
</div>
<div class="sessions">
<img class="sessions-img" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png" alt="" />
<div class="sessions-content">
{{ $t('pkMini.session') }}
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
</div>
</div>
</div>
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsA.remark }}</div>
</div>
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsA.remark }}</div>
</div>
<!-- VS -->
<div class="messageVS">
<img class="messageVS-img" src="@/assets/pk-mini/messageVS.png" alt="" />
</div>
<!-- VS 叠在两卡片中间缝 -->
<div class="messageVS">
<img class="messageVS-img" src="@/assets/pk-mini/messageVS.png" alt="" />
</div>
<!-- 用户B -->
<div class="userB">
<div class="Avatar">
<img class="AvatarImg" :src="ArticleDetailsB.anchorIcon" alt="" />
<div class="name">{{ ArticleDetailsB.anchorId }}</div>
</div>
<div class="genderAndCountry">
<div class="gender" :style="{ background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F' }">
{{ ArticleDetailsB.sex == 1 ? $t('pkMini.man') : $t('pkMini.woman') }}
<!-- 用户B -->
<div class="userB">
<div class="genderAndCountry">
<div class="gender" :style="{ background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F' }">
{{ ArticleDetailsB.sex == 1 ? $t('pkMini.man') : $t('pkMini.woman') }}
</div>
<div class="Country">{{ ArticleDetailsB.country }}</div>
</div>
<div class="Country">{{ ArticleDetailsB.country }}</div>
</div>
<div class="time">
{{ $t('pkMini.PKTime') + TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
</div>
<div class="PKinformation">
<div class="gold">
<img class="gold-img" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png" alt="" />
<div class="sessions-content">
{{ $t('pkMini.GoldCoin') }}
<div class="gold-num">{{ ArticleDetailsB.coin }}K</div>
</div>
</div>
<div class="sessions">
<img class="sessions-img" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png" alt="" />
<div class="sessions-content">
{{ $t('pkMini.session') }}
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
<div class="time">
{{ $t('pkMini.PKTime') + TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
</div>
<div class="PKinformation">
<div class="gold">
<img class="gold-img" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png" alt="" />
<div class="sessions-content">
{{ $t('pkMini.GoldCoin') }}
<div class="gold-num">{{ ArticleDetailsB.coin }}K</div>
</div>
</div>
<div class="sessions">
<img class="sessions-img" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png" alt="" />
<div class="sessions-content">
{{ $t('pkMini.session') }}
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
</div>
</div>
</div>
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsB.remark }}</div>
</div>
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsB.remark }}</div>
</div>
<!-- 按钮 -->
@@ -123,6 +118,10 @@ const props = defineProps({
item: {
type: Object,
required: true
},
compact: {
type: Boolean,
default: false
}
})
@@ -196,58 +195,43 @@ onMounted(() => {
<style scoped>
.chat-message-mini-pk {
width: 325px;
height: 820px;
width: 560px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 15px 0;
}
.pk-cards {
position: relative;
width: 90%;
display: flex;
flex-direction: column;
}
.messageVS {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 67px;
height: 67px;
margin-top: -33.5px;
margin-bottom: -33.5px;
z-index: 2;
pointer-events: none;
}
.messageVS-img {
width: 67px;
height: 67px;
}
.userA {
width: 90%;
height: 335px;
width: 100%;
background-color: #c0e8e8;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: 20px;
border-radius: 20px 20px 0 0;
display: flex;
flex-direction: column;
align-items: center;
}
.Avatar {
width: 90%;
height: 50px;
margin-top: 15px;
display: flex;
align-items: center;
}
.AvatarImg {
width: 50px;
height: 50px;
border-radius: 50%;
}
.name {
width: calc(100% - 60px);
margin-left: 10px;
font-size: 18px;
font-weight: bold;
color: #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 15px;
}
.genderAndCountry {
width: 90%;
@@ -314,15 +298,13 @@ onMounted(() => {
margin-top: 10px;
}
.userB {
width: 90%;
height: 315px;
width: 100%;
background-color: #f8e4e0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding-top: 20px;
border-radius: 0 0 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 15px;
}
.btn {
margin-top: 20px;
@@ -424,4 +406,29 @@ onMounted(() => {
border-radius: 100px;
cursor: pointer;
}
/* 紧凑模式：适配 PK 大厅 350px 窄聊天框 */
.compact.chat-message-mini-pk {
width: 300px;
padding: 10px 0;
}
.compact .pk-cards {
width: 92%;
}
.compact .userA {
border-radius: 12px 12px 0 0;
padding-bottom: 10px;
}
.compact .userB {
border-radius: 0 0 12px 12px;
padding-bottom: 10px;
}
.compact .messageVS {
width: 44px;
height: 44px;
}
.compact .messageVS-img {
width: 44px;
height: 44px;
}
</style>