pxl/tk-mini-program-PC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化代码

Browse Source
This commit is contained in:
pengxiaolong
2025-08-12 22:05:06 +08:00
parent b260caa2bd
commit 784a19bdda
39 changed files with 2258 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
src/components/mineSubComponent/PKRecord.vue
View File

@@ -6,16 +6,26 @@
<div class="demo-panel">
<!-- 选项卡 -->
<div class="custom-style">
<el-segmented v-model="segmentedvalue" :options="options" block>
<template #default="scope">
<div class="flex flex-col items-center gap-2 p-2">
<el-icon size="1.5vw">
<component :is="scope.item.icon" />
</el-icon>
<div>{{ scope.item.label }}</div>
</div>
</template>
</el-segmented>
<div
class="Options"
v-for="time in options"
@click="segmentedvalue = time.value"
:style="{
borderBottom: segmentedvalue === time.value ? '5px solid #03ABA8' : '',
}"
>
<img
class="Options-icon"
:src="segmentedvalue === time.value ? time.SelectedIcon : time.icon"
alt=""
/>
<div
class="Options-label"
:style="{ color: segmentedvalue === time.value ? '#03ABA8' : '#636363' }"
>
{{ time.label }}
</div>
</div>
</div>
<!-- list -->
<div class="list" style="overflow: auto" v-infinite-scroll="load">
@@ -29,6 +39,11 @@
<div class="name">来自世界上最长名的国家的某个人</div>
<div class="time">PK时间：2025-07-31 19:07</div>
<div class="gold">
<img
class="goldimg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
alt=""
/>
实际金币数：
<div class="gold-num">10000W</div>
</div>
@@ -46,6 +61,11 @@
<div class="name">来自世界上最长名的国家的某个人</div>
<div class="time">PK时间：2025-07-31 19:07</div>
<div class="gold">
<img
class="goldimg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
alt=""
/>
实际金币数：
<div class="gold-num">10000W</div>
</div>
@@ -61,29 +81,33 @@
</el-splitter-panel>
<el-splitter-panel size="30%" :resizable="false" collapsible>
<div class="demo-panel">
<div class="PKbothinfo">
<div class="PKbothinfo-left">
<div class="PKbothinfo-avatar">
<!-- 头像 -->
</div>
<div class="PKbothinfo-gold-num">总共：10000W</div>
</div>
<div class="PKbothinfo-right">
<div class="PKbothinfo-avatar">
<!-- 头像 -->
</div>
<div class="PKbothinfo-gold-num">总共：10000W</div>
<div class="particularsAvatar">
<img class="particularsAvatar-avatar" src="" alt="" />
<img class="particularsAvatar-avatar" src="" alt="" />
</div>
<!-- -->
<div class="altogether">
<div class="altogethercard">
<div class="altogether-num">总共：9999999K</div>
<img
class="altogether-icon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
alt=""
/>
<div class="altogether-num">总共：9999999K</div>
</div>
</div>
<div class="PKbothinfo-center" style="overflow: auto">
<div
class="PKbothinfolist-item"
v-for="(item, index) in PKbothinfolist"
:key="index"
>
<div class="PKbothinfolist-content">
<div class="gold-left">10000W</div>
<div class="gold-right">10000W</div>
<!-- -->
<div class="goldlist">
<div class="goldlist-card goldlist-card-left">
<div class="goldlist-list">
1000w
</div>
</div>
<div class="goldlist-card goldlist-card-right">
<div class="goldlist-list">
<!-- <div class="goldlist-list" v-for="(item, index) in list" :key="index" :style="{background:?????? '#D1F6F7' : '#F9DFD9' }"> -->
10000000000000000w
</div>
</div>
</div>
@@ -101,30 +125,25 @@ import {
onUpdated, // 组件更新后执行
onUnmounted, // 组件销毁前执行
} from "vue";
import { Promotion, Tickets } from "@element-plus/icons-vue";
const refname = ref("");
const segmentedvalue = ref(1);
const options = [
{
label: "我发布的PK",
value: 1,
icon: Tickets,
icon: require("@/assets/Publish.png"),
SelectedIcon: require("@/assets/PublishSelected.png"),
},
{
label: "我邀请的PK",
value: 2,
icon: Promotion,
icon: require("@/assets/Invitation.png"),
SelectedIcon: require("@/assets/InvitationSelected.png"),
},
];
const list = ref([{}, {}, {}, {}, {}, {}, {}]);
const PKbothinfolist = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
function load() {}
watch(refname, async (newQuestion, oldQuestion) => {
// 变化后执行
});
onMounted(() => {
// 组件挂载完成后执行
});
onUpdated(() => {
// 组件更新后执行
});
@@ -145,22 +164,111 @@ onUnmounted(() => {
flex-direction: column;
align-items: center;
}
.custom-style .el-segmented {
height: 70px;
--el-segmented-item-selected-color: var(--el-text-color-primary);
--el-segmented-item-selected-bg-color: #4fcbcd3f;
// --el-border-radius-base: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.custom-style {
width: 100%;
width: 90%;
height: 150px;
display: flex;
.Options {
&:first-child {
&.active {
animation: slideInFromRight 0.3s ease;
}
}
&:last-child {
&.active {
animation: slideInFromLeft 0.3s ease;
}
}
}
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.Options {
width: 178px;
height: 100px;
margin-right: 120px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #03aba8;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
&.active {
&::after {
transform: translateX(0);
}
}
&.left-to-right {
&::after {
transform: translateX(-100%);
}
&.active::after {
transform: translateX(0);
}
}
&.right-to-left {
&::after {
transform: translateX(100%);
}
&.active::after {
transform: translateX(0);
}
}
display: flex;
}
.Options {
width: 178px;
height: 100px;
margin-right: 120px;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
justify-content: center;
}
.Options-icon {
width: 30px;
height: 30px;
margin-right: 15px;
}
.Options-label {
font-size: 24px;
}
.list {
width: 100%;
height: calc(100% - 70px);
height: calc(100% -150px);
}
.list-item {
width: 100%;
@@ -176,7 +284,8 @@ onUnmounted(() => {
height: 100%;
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
background-image: linear-gradient(45deg, @bg-Sidebar-color-bottom, @bg-color);
background-image: url(../../assets/PKbackground.png);
background-size: 100% 100%;
transition: all 0.4s ease;
display: flex;
align-items: center;
@@ -237,6 +346,11 @@ onUnmounted(() => {
display: flex;
align-items: center;
}
.goldimg {
width: 38px;
height: 38px;
margin-right: 13px;
}
.gold-num {
color: @font-color;
font-size: 18px;
@@ -271,7 +385,7 @@ onUnmounted(() => {
border-radius: 50%;
background-color: #fff;
}
.PKbothinfo-gold-num{
.PKbothinfo-gold-num {
font-size: 12px;
font-weight: bold;
color: @font-color;
@@ -343,4 +457,92 @@ onUnmounted(() => {
border-top-right-radius: 10px;
background-color: @win-color;
}
.particularsAvatar {
width: 100%;
height: 135px;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
.particularsAvatar-avatar {
width: 85px;
height: 85px;
border-radius: 50px;
background-color: #e9e9e9;
}
.altogether {
width: 100%;
height: 55px;
margin-top: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.altogethercard {
width: 90%;
height: 100%;
border-radius: 50px;
background-image: url(@/assets/InTotal.png);
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.altogether-icon {
width: 50px;
height: 40px;
}
.altogether-num {
width: 40%;
text-align: center;
color: #333333;
font-size: 20px;
font-weight: bold;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.goldlist {
width: 90%;
margin-top: 10px;
height: calc(100% - 200px);
display: flex;
justify-content: space-between;
}
.goldlist-card {
width: 48%;
height: 98%;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.goldlist-card-left {
background-color: #dffefc;
border: 1px solid #86e1e3;
}
.goldlist-card-right {
background-color: #fbece9;
border: 1px solid #f4d0c9;
}
.goldlist-list{
width: 85%;
padding-left: 2.5%;
padding-right: 2.5%;
height: 57px;
margin-bottom: 10px;
text-align: center;
line-height: 57px;
font-size: 20px;
font-weight: bold;
color: #333333;
border-radius: 10px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.goldlist-list:first-child {
margin-top: 20px;
}
</style>