优化代码
This commit is contained in:
pengxiaolong
@@ -2,7 +2,7 @@
|
||||
<!-- 主播库 -->
|
||||
<div class="anchor-library">
|
||||
<el-splitter>
|
||||
<el-splitter-panel size="70%">
|
||||
<el-splitter-panel size="75%">
|
||||
<!-- 主播列表 -->
|
||||
<div class="demo-panel">
|
||||
<div
|
||||
@@ -52,7 +52,7 @@
|
||||
<div class="add-anchor-library-content">
|
||||
<div class="input-name">
|
||||
<!-- 主播名称 -->
|
||||
<el-input v-model="refname" size="large" placeholder="请输入主播名称" />
|
||||
<el-input v-model="anchorName" size="large" placeholder="请输入主播名称" />
|
||||
</div>
|
||||
<div class="country">
|
||||
<!-- 国家 -->
|
||||
@@ -97,16 +97,22 @@ import {
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
import { getCountryNamesArray } from "../../utils/countryUtil";
|
||||
const refname = ref("");
|
||||
|
||||
const country = ref([]);
|
||||
country.value = getCountryNamesArray(); //国家条目
|
||||
const genderOptions = [
|
||||
{ value: 1, label: "男" },
|
||||
{ value: 2, label: "女" },
|
||||
]; // 性别选项
|
||||
const gendervalue = ref(null); // 性别值
|
||||
const countryvalue = ref(null);//国家
|
||||
const anchorName = ref(null);// 主播名称
|
||||
const list = ref([{}, {}, {}, {}, {}, {}]);
|
||||
|
||||
function load() {}
|
||||
function load() {
|
||||
|
||||
}
|
||||
const refname = ref('');
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
@@ -154,7 +160,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.card-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.card-avatar {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,6 +1,149 @@
|
||||
<template>
|
||||
<!-- PK信息 -->
|
||||
<div>PK信息</div>
|
||||
<!-- PK信息 -->
|
||||
<div class="pk-message">
|
||||
<el-splitter>
|
||||
<el-splitter-panel>
|
||||
<div class="demo-panel">
|
||||
<div
|
||||
class="anchor-library-list"
|
||||
style="overflow: auto"
|
||||
v-infinite-scroll="load"
|
||||
>
|
||||
<div class="anchor-library-card" v-for="(item, index) in list" :key="index">
|
||||
<div class="card-content">
|
||||
<div class="card-avatar"></div>
|
||||
<div class="personalInformation">
|
||||
<div class="name">来自世界上最长名的国家的某个人</div>
|
||||
<div class="GenderAndCountry">
|
||||
<div class="Gender">女</div>
|
||||
<div class="Country">来自世界上最长名的国家的名称很长很长哦</div>
|
||||
<div class="goldbox">
|
||||
<img
|
||||
class="gold-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="gold">
|
||||
金币：
|
||||
<div class="gold-num">999999k</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">PK时间:2025-08-31 14:06</div>
|
||||
</div>
|
||||
<div class="card-Operation">
|
||||
<div class="modify">
|
||||
<img
|
||||
class="modify-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pin.png"
|
||||
alt=""
|
||||
/>
|
||||
<!-- <img
|
||||
class="modify-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/cancelPin.png"
|
||||
alt=""
|
||||
/> -->
|
||||
</div>
|
||||
<div class="modify">
|
||||
<img
|
||||
class="modify-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="delete">
|
||||
<img
|
||||
class="delete-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
<el-splitter-panel size="25%" :resizable="false" collapsible>
|
||||
<!-- 添加或修改主播 -->
|
||||
<div class="demo-panel">
|
||||
<div class="add-anchor-library">
|
||||
<div class="title">发布新PK</div>
|
||||
<!-- <div class="title">
|
||||
修改PK信息
|
||||
</div> -->
|
||||
<div class="add-anchor-library-content">
|
||||
<div class="input-name">
|
||||
<!-- 主播名称 -->
|
||||
<el-input
|
||||
class="input-name-input"
|
||||
v-model="anchorName"
|
||||
size="large"
|
||||
placeholder="请输入主播名称"
|
||||
/>
|
||||
<div class="myanchor">
|
||||
<div class="myanchor-btn">选择我的主播</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="country">
|
||||
<!-- 国家 -->
|
||||
<el-select-v2
|
||||
v-model="countryvalue"
|
||||
filterable
|
||||
:options="country"
|
||||
placeholder="请选择国家"
|
||||
size="large"
|
||||
style="vertical-align: middle"
|
||||
class="select"
|
||||
/>
|
||||
</div>
|
||||
<div class="gender">
|
||||
<!-- 性别 -->
|
||||
<el-select-v2
|
||||
v-model="gendervalue"
|
||||
filterable
|
||||
:options="genderOptions"
|
||||
size="large"
|
||||
placeholder="请选择性别"
|
||||
style="vertical-align: middle"
|
||||
class="select"
|
||||
/>
|
||||
</div>
|
||||
<div class="timeselect">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="选择PK时间"
|
||||
size="large"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="Gold-sessions">
|
||||
<div class="Goldcoinbox-right">
|
||||
<div class="Goldcoinbox-text">金币数（单位为K）</div>
|
||||
<el-input-number
|
||||
v-model="maxnum"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="Goldcoinbox-right">
|
||||
<div class="Goldcoinbox-text">场次</div>
|
||||
<el-input-number
|
||||
v-model="maxnum"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Confirm">确认</div>
|
||||
<div class="Reset">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
</el-splitter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -11,7 +154,23 @@ import {
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
const refname = ref('');
|
||||
import { getCountryNamesArray } from "../../utils/countryUtil";
|
||||
|
||||
const country = ref([]);
|
||||
country.value = getCountryNamesArray(); //国家条目
|
||||
const genderOptions = [
|
||||
{ value: 1, label: "男" },
|
||||
{ value: 2, label: "女" },
|
||||
]; // 性别选项
|
||||
const gendervalue = ref(null); // 性别值
|
||||
const countryvalue = ref(null); //国家
|
||||
const anchorName = ref(null); // 主播名称
|
||||
const refname = ref("");
|
||||
const list = ref([{}, {}, {}, {}, {}]);
|
||||
|
||||
function load() {
|
||||
// 加载更多数据
|
||||
}
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
@@ -26,6 +185,250 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
.pk-message {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.anchor-library-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.anchor-library-card {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-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;
|
||||
}
|
||||
.card-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.card-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.personalInformation {
|
||||
width: calc(100% - 340px);
|
||||
height: 100px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.GenderAndCountry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Gender {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
padding: 2px 20px 2px 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.Country {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
padding: 2px 20px 2px 20px;
|
||||
}
|
||||
.goldbox {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gold-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.gold {
|
||||
color: @Prompt-text-color;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gold-num {
|
||||
font-size: 16px;
|
||||
color: @font-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time {
|
||||
font-size: 14px;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.card-Operation {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.modify-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.delete-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.add-anchor-library {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
}
|
||||
.add-anchor-library-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.input-name {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.input-name-input {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
}
|
||||
.myanchor {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.myanchor-btn {
|
||||
width: 90%;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
transition: all 0.4s ease;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.myanchor-btn:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.country {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.gender {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
.timeselect {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.Gold-sessions {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.Goldcoinbox-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.Goldcoinbox-text {
|
||||
font-size: 12px;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.Confirm {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.Confirm:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Reset {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.Reset:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,26 @@
|
||||
<template>
|
||||
<!-- 积分列表 -->
|
||||
<div>积分列表</div>
|
||||
<div class="points-list-container">
|
||||
<div class="points-list-title">
|
||||
我的积分:9999999999999999999999999999999
|
||||
</div>
|
||||
<div class="points-list" style="overflow: auto;">
|
||||
<div class="points-list-item" v-for="(item, index) in pointsList" :key="index">
|
||||
<div class="points-list-content">
|
||||
<div class="Event">
|
||||
签到增加积分
|
||||
</div>
|
||||
<div class="points-num">
|
||||
+200
|
||||
</div>
|
||||
<div class="time">
|
||||
2025-08-01 14:27
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -12,6 +32,7 @@ import {
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
const refname = ref('');
|
||||
const pointsList = ref([{},{},{},{},{},{},{},{},{},{},{},{},{},{}]);
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
@@ -26,6 +47,52 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
<style scoped lang="less">
|
||||
.points-list-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.points-list{
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
.points-list-title{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
color: @font-color;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
}
|
||||
.points-list-item{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
}
|
||||
.points-list-content{
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color:@win-color;
|
||||
}
|
||||
.Event{
|
||||
color: @Supplementary-text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
.points-num{
|
||||
color: @font-color;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time{
|
||||
color:@Prompt-text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user