优化代码
This commit is contained in:
pengxiaolong
@@ -1,6 +1,96 @@
|
||||
<template>
|
||||
<!-- 我的PK记录 -->
|
||||
<div>我的PK记录</div>
|
||||
<!-- 我的PK记录 -->
|
||||
<div class="pk-record">
|
||||
<el-splitter>
|
||||
<el-splitter-panel>
|
||||
<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>
|
||||
<!-- list -->
|
||||
<div class="list" style="overflow: auto" v-infinite-scroll="load">
|
||||
<div v-for="(item, index) in list" :key="index" class="list-item">
|
||||
<div class="list-content">
|
||||
<div class="information">
|
||||
<div class="avatar">
|
||||
<!-- 头像 -->
|
||||
</div>
|
||||
<div class="content-left">
|
||||
<div class="name">来自世界上最长名的国家的某个人</div>
|
||||
<div class="time">PK时间：2025-07-31 19:07</div>
|
||||
<div class="gold">
|
||||
实际金币数：
|
||||
<div class="gold-num">10000W</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vs">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="content-right">
|
||||
<div class="name">来自世界上最长名的国家的某个人</div>
|
||||
<div class="time">PK时间：2025-07-31 19:07</div>
|
||||
<div class="gold">
|
||||
实际金币数：
|
||||
<div class="gold-num">10000W</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<!-- 头像 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
</el-splitter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -11,7 +101,24 @@ import {
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
const refname = ref('');
|
||||
import { Promotion, Tickets } from "@element-plus/icons-vue";
|
||||
const refname = ref("");
|
||||
const segmentedvalue = ref(1);
|
||||
const options = [
|
||||
{
|
||||
label: "我发布的PK",
|
||||
value: 1,
|
||||
icon: Tickets,
|
||||
},
|
||||
{
|
||||
label: "我邀请的PK",
|
||||
value: 2,
|
||||
icon: Promotion,
|
||||
},
|
||||
];
|
||||
const list = ref([{}, {}, {}, {}, {}, {}, {}]);
|
||||
const PKbothinfolist = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
|
||||
function load() {}
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
@@ -26,6 +133,214 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
.pk-record {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
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%;
|
||||
}
|
||||
.list {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
.list-item {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.list-content {
|
||||
width: 90%;
|
||||
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);
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.list-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.vs {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.information {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.content-left {
|
||||
width: calc(100% - 150px);
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.content-right {
|
||||
width: calc(100% - 150px);
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.name {
|
||||
color: @font-color;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.time {
|
||||
color: @Prompt-text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
.gold {
|
||||
color: @font-color;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gold-num {
|
||||
color: @font-color;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.PKbothinfo {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
}
|
||||
.PKbothinfo-left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-right: 1px solid @border-color;
|
||||
}
|
||||
.PKbothinfo-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-left: 1px solid @border-color;
|
||||
}
|
||||
.PKbothinfo-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.PKbothinfo-gold-num{
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: @font-color;
|
||||
}
|
||||
.PKbothinfo-center {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* 隐藏滚动条外观 */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
scrollbar-color: transparent; /* Firefox */
|
||||
|
||||
/* Webkit 浏览器（Chrome/Safari） */
|
||||
&::-webkit-scrollbar {
|
||||
display: none; /* 直接隐藏滚动条 */
|
||||
/* 或者透明处理 */
|
||||
/* width: 0; height: 0; */
|
||||
/* background: transparent; */
|
||||
}
|
||||
}
|
||||
.PKbothinfolist-item {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.PKbothinfolist-content {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.PKbothinfolist-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.02);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.gold-left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
color: @font-color;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
border-right: 2px solid @lose-color;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
background-color: @lose-color;
|
||||
}
|
||||
.gold-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
color: @font-color;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
border-left: 2px solid @win-color;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: @win-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user