优化代码
This commit is contained in:
pengxiaolong
@@ -12,28 +12,35 @@
|
||||
>
|
||||
<div class="anchor-library-card" v-for="(item, index) in list" :key="index">
|
||||
<div class="card-content">
|
||||
<div class="card-avatar"></div>
|
||||
<div class="card-avatar">
|
||||
<img
|
||||
style="width: 100%; height: 100%; border-radius: 100px"
|
||||
:src="item.headerIcon"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="personalInformation">
|
||||
<div class="name">来自世界上最长名的国家的某个人</div>
|
||||
<div class="name">{{ item.anchorId }}</div>
|
||||
<div class="GenderAndCountry">
|
||||
<div class="Gender">女</div>
|
||||
<div class="Country">来自世界上最长名的国家的名称很长很长哦</div>
|
||||
<div
|
||||
class="Gender"
|
||||
:style="{
|
||||
background: item.gender == 1 ? '#59D8DB' : '#F3876F',
|
||||
}"
|
||||
>
|
||||
{{ item.gender == 1 ? "男" : "女" }}
|
||||
</div>
|
||||
<div class="Country">{{ item.country }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-Operation">
|
||||
<div class="modify">
|
||||
<img
|
||||
class="modify-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
|
||||
alt=""
|
||||
/>
|
||||
<!-- 编辑 -->
|
||||
<div class="modify" @click="anchormodify(item)">
|
||||
<img class="modify-icon" src="@/assets/Editor.png" alt="" />
|
||||
</div>
|
||||
<div class="delete">
|
||||
<img
|
||||
class="delete-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
|
||||
alt=""
|
||||
/>
|
||||
<!-- 删除 -->
|
||||
<div class="delete" @click="anchordelete(item.id)">
|
||||
<img class="delete-icon" src="@/assets/Delete.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,14 +52,21 @@
|
||||
<!-- 添加或修改主播 -->
|
||||
<div class="demo-panel">
|
||||
<div class="add-anchor-library">
|
||||
<div class="title">添加我的主播</div>
|
||||
<!-- <div class="title">
|
||||
修改主播信息
|
||||
</div> -->
|
||||
<div class="title">
|
||||
<img class="titleimg" src="@/assets/embellish.png" alt="" />
|
||||
<div v-if="!anchormodifystate">添加我的主播</div>
|
||||
<div v-if="anchormodifystate">修改我的主播</div>
|
||||
<img class="titleimg" src="@/assets/embellish.png" alt="" />
|
||||
</div>
|
||||
<div class="add-anchor-library-content">
|
||||
<div class="input-name">
|
||||
<!-- 主播名称 -->
|
||||
<el-input v-model="anchorName" size="large" placeholder="请输入主播名称" />
|
||||
<el-input
|
||||
@blur="blur()"
|
||||
v-model="anchorName"
|
||||
size="large"
|
||||
placeholder="请输入主播名称"
|
||||
/>
|
||||
</div>
|
||||
<div class="country">
|
||||
<!-- 国家 -->
|
||||
@@ -78,14 +92,31 @@
|
||||
class="select"
|
||||
/>
|
||||
</div>
|
||||
<div class="Confirm">确认</div>
|
||||
<div class="Reset">重置</div>
|
||||
<div class="Confirm" @click="Confirm()">确认</div>
|
||||
<div class="Reset" @click="Reset()">重置</div>
|
||||
<div class="Reset" v-if="anchormodifystate" @click="cancel()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
</el-splitter>
|
||||
</div>
|
||||
<!-- 确认删除弹窗 -->
|
||||
<el-dialog
|
||||
class="center-dialog"
|
||||
v-model="centerDialogVisible"
|
||||
title="提示"
|
||||
width="200"
|
||||
align-center
|
||||
>
|
||||
<span>确认删除该主播？</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="deleteAnchor()"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -96,8 +127,17 @@ import {
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
import {
|
||||
getAnchorList,
|
||||
getAnchorAvatar,
|
||||
addAnchor,
|
||||
delAnchor,
|
||||
editAnchor,
|
||||
} from "@/api/account";
|
||||
import { getCountryNamesArray } from "../../utils/countryUtil";
|
||||
|
||||
import { ElLoading } from "element-plus";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
|
||||
const country = ref([]);
|
||||
country.value = getCountryNamesArray(); //国家条目
|
||||
const genderOptions = [
|
||||
@@ -105,20 +145,157 @@ const genderOptions = [
|
||||
{ value: 2, label: "女" },
|
||||
]; // 性别选项
|
||||
const gendervalue = ref(null); // 性别值
|
||||
const countryvalue = ref(null);//国家
|
||||
const anchorName = ref(null);// 主播名称
|
||||
const countryvalue = ref(null); //国家
|
||||
const anchorName = ref(null); // 主播名称
|
||||
const list = ref([{}, {}, {}, {}, {}, {}]);
|
||||
const user = ref(null); // 用户信息
|
||||
const AnchorProfilePicture = ref(null); // 主播头像
|
||||
const centerDialogVisible = ref(false); // 确认删除弹窗
|
||||
const anchormodifystate = ref(false); // 编辑
|
||||
const anchormodifystateId = ref(null); // 主播头像
|
||||
|
||||
function load() {
|
||||
|
||||
// 获取主播列表
|
||||
function AnchorList() {
|
||||
getAnchorList({ id: user.value.id })
|
||||
.then((res) => {
|
||||
list.value = res;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
const refname = ref('');
|
||||
//编辑主播
|
||||
function anchormodify(item) {
|
||||
if (anchormodifystate.value == true) {
|
||||
cancel();
|
||||
return;
|
||||
}
|
||||
anchormodifystateId.value = item.id;
|
||||
anchorName.value = item.anchorId;
|
||||
gendervalue.value = item.gender;
|
||||
countryvalue.value = item.country;
|
||||
AnchorProfilePicture.value = item.headerIcon.split("/").pop();
|
||||
anchormodifystate.value = true;
|
||||
}
|
||||
// 取消编辑
|
||||
function cancel() {
|
||||
anchormodifystateId.value = null;
|
||||
anchorName.value = null;
|
||||
gendervalue.value = null;
|
||||
countryvalue.value = null;
|
||||
AnchorProfilePicture.value = null;
|
||||
anchormodifystate.value = false;
|
||||
}
|
||||
// 删除主播
|
||||
const deleteAnchorID = ref(null);
|
||||
const deleteAnchor = () => {
|
||||
delAnchor({ id: deleteAnchorID.value }).then((res) => {
|
||||
centerDialogVisible.value = false;
|
||||
ElMessage.success("删除成功");
|
||||
AnchorList();
|
||||
});
|
||||
};
|
||||
function anchordelete(id) {
|
||||
deleteAnchorID.value = id;
|
||||
centerDialogVisible.value = true;
|
||||
}
|
||||
// 加载更多
|
||||
function load() {}
|
||||
// 确认添加或修改主播
|
||||
function Confirm() {
|
||||
if (anchorName.value == null || anchorName.value == "") {
|
||||
ElMessage.error("请输入主播名称");
|
||||
return;
|
||||
}
|
||||
if (gendervalue.value == null) {
|
||||
ElMessage.error("请选择性别");
|
||||
return;
|
||||
}
|
||||
if (countryvalue.value == null) {
|
||||
ElMessage.error("请选择国家");
|
||||
return;
|
||||
}
|
||||
//修改主播还是添加
|
||||
if (anchormodifystate.value) {
|
||||
//修改主播
|
||||
editAnchor({
|
||||
id: anchormodifystateId.value,
|
||||
anchorId: anchorName.value,
|
||||
headerIcon: AnchorProfilePicture.value,
|
||||
gender: gendervalue.value,
|
||||
country: countryvalue.value,
|
||||
createUserId: user.value.id,
|
||||
})
|
||||
.then((res) => {
|
||||
ElMessage.success("修改成功");
|
||||
cancel();
|
||||
AnchorList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
} else {
|
||||
//添加主播
|
||||
addAnchor({
|
||||
anchorId: anchorName.value,
|
||||
headerIcon: AnchorProfilePicture.value,
|
||||
gender: gendervalue.value,
|
||||
country: countryvalue.value,
|
||||
createUserId: user.value.id,
|
||||
})
|
||||
.then((res) => {
|
||||
ElMessage.success("添加成功");
|
||||
AnchorList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
// 重置
|
||||
function Reset() {
|
||||
anchorName.value = null;
|
||||
gendervalue.value = null;
|
||||
countryvalue.value = null;
|
||||
}
|
||||
//输入框失去焦点
|
||||
function blur() {
|
||||
if (anchorName.value == null || anchorName.value == "") {
|
||||
ElMessage.error("请输入主播名称");
|
||||
return;
|
||||
}
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: "查询主播中....",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
getAnchorAvatar({ name: anchorName.value })
|
||||
.then((res) => {
|
||||
loading.close();
|
||||
AnchorProfilePicture.value = res;
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.close();
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
getPromiseStorage("user")
|
||||
.then((res) => {
|
||||
user.value = res;
|
||||
AnchorList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
|
||||
const refname = ref("");
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
});
|
||||
onUpdated(() => {
|
||||
// 组件更新后执行
|
||||
});
|
||||
@@ -153,14 +330,15 @@ 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;
|
||||
}
|
||||
.card-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.08);
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.card-avatar {
|
||||
@@ -190,9 +368,8 @@ onUnmounted(() => {
|
||||
}
|
||||
.Gender {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
color: #ffffff;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
padding: 2px 20px 2px 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
@@ -215,10 +392,18 @@ onUnmounted(() => {
|
||||
.modify-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.modify-icon:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.delete-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.delete-icon:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.demo-panel {
|
||||
width: 100%;
|
||||
@@ -232,13 +417,20 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
height: 70px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.titleimg {
|
||||
width: 44px;
|
||||
height: 30px;
|
||||
}
|
||||
.add-anchor-library-content {
|
||||
width: 100%;
|
||||
@@ -266,39 +458,41 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
}
|
||||
.Confirm {
|
||||
width: 80%;
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
margin-top: 200px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
background-image: linear-gradient(to top, #4fcacd, #5fdbde);
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 25px;
|
||||
}
|
||||
.Confirm:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Reset {
|
||||
width: 80%;
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
background-image: linear-gradient(to top, #e4ffff, #ffffff);
|
||||
border: 1px solid #4fcacd;
|
||||
color: #03aba8;
|
||||
font-size: 22px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 25px;
|
||||
}
|
||||
.Reset:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.center-dialog {
|
||||
background-color: #03aba8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -11,52 +11,75 @@
|
||||
>
|
||||
<div class="anchor-library-card" v-for="(item, index) in list" :key="index">
|
||||
<div class="card-content">
|
||||
<div class="card-avatar"></div>
|
||||
<div class="card-avatar">
|
||||
<img
|
||||
:src="item.anchorIcon"
|
||||
style="width: 100%; height: 100%; border-radius: 100px"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="personalInformation">
|
||||
<div class="name">来自世界上最长名的国家的某个人</div>
|
||||
<div class="name">{{ item.anchorId }}</div>
|
||||
<div class="GenderAndCountry">
|
||||
<div class="Gender">女</div>
|
||||
<div class="Country">来自世界上最长名的国家的名称很长很长哦</div>
|
||||
<div
|
||||
class="Gender"
|
||||
:style="{
|
||||
background: item.sex == 1 ? '#59D8DB' : '#F3876F',
|
||||
}"
|
||||
>
|
||||
{{ item.sex == 1 ? "男" : "女" }}
|
||||
</div>
|
||||
<div class="Country">{{ item.country }}</div>
|
||||
<div class="goldbox">
|
||||
<img
|
||||
class="gold-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="gold">
|
||||
金币：
|
||||
<div class="gold-num">999999k</div>
|
||||
<div class="gold-num">{{ item.coin }}K</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goldbox">
|
||||
<img
|
||||
class="gold-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="gold">
|
||||
场次：
|
||||
<div class="gold-num">{{ item.pkNumber }}场</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">PK时间:2025-08-31 14:06</div>
|
||||
<div class="time">
|
||||
PK时间:{{ TimestamptolocalTime(item.pkTime * 1000) }}
|
||||
</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">
|
||||
<div class="modify" @click="topPosition(item)">
|
||||
<!-- 置顶 -->
|
||||
<img
|
||||
v-if="item.isPin == false"
|
||||
class="delete-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
|
||||
src="@/assets/topPosition.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-if="item.isPin == true"
|
||||
class="delete-icon"
|
||||
src="@/assets/unpinned.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- 修改 -->
|
||||
<div class="modify" @click="modify(item)">
|
||||
<img class="modify-icon" src="@/assets/Editor.png" alt="" />
|
||||
</div>
|
||||
<!-- 删除 -->
|
||||
<div class="delete" @click="deletePKInfo(item)">
|
||||
<img class="modify-icon" src="@/assets/Delete.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,10 +91,12 @@
|
||||
<!-- 添加或修改主播 -->
|
||||
<div class="demo-panel">
|
||||
<div class="add-anchor-library">
|
||||
<div class="title">发布新PK</div>
|
||||
<!-- <div class="title">
|
||||
修改PK信息
|
||||
</div> -->
|
||||
<div class="title">
|
||||
<img class="titleimg" src="@/assets/embellish.png" alt="" />
|
||||
<div v-if="!modifyDialogstate">发布新PK</div>
|
||||
<div v-if="modifyDialogstate">修改PK信息</div>
|
||||
<img class="titleimg" src="@/assets/embellish.png" alt="" />
|
||||
</div>
|
||||
<div class="add-anchor-library-content">
|
||||
<div class="input-name">
|
||||
<!-- 主播名称 -->
|
||||
@@ -80,9 +105,10 @@
|
||||
v-model="anchorName"
|
||||
size="large"
|
||||
placeholder="请输入主播名称"
|
||||
@blur="handleChange()"
|
||||
/>
|
||||
<div class="myanchor">
|
||||
<div class="myanchor-btn">选择我的主播</div>
|
||||
<div class="myanchor-btn" @click="myAnchorDialogVisible = true">选择我的主播</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="country">
|
||||
@@ -111,39 +137,96 @@
|
||||
</div>
|
||||
<div class="timeselect">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
v-model="timevalue"
|
||||
type="datetime"
|
||||
placeholder="选择PK时间"
|
||||
size="large"
|
||||
style="width: 100%; height: 100%"
|
||||
format="YYYY/MM/DD hh:mm"
|
||||
value-format="x"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
<el-input-number v-model="goldvalue" controls-position="right" />
|
||||
</div>
|
||||
<div class="Goldcoinbox-right">
|
||||
<div class="Goldcoinbox-text">场次</div>
|
||||
<el-input-number
|
||||
v-model="maxnum"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<el-input-number v-model="sessionnum" controls-position="right" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="Confirm">确认</div>
|
||||
<div class="Reset">重置</div>
|
||||
<div class="remark">
|
||||
<!-- 备注 -->
|
||||
<textarea
|
||||
v-model="remark"
|
||||
class="textarea"
|
||||
style="width: 100%; height: 100%"
|
||||
maxlength="50"
|
||||
placeholder="请输入备注（选填）"
|
||||
/>
|
||||
</div>
|
||||
<div class="Confirm" @click="Confirm()">确认</div>
|
||||
<div class="Reset" @click="Reset()">重置</div>
|
||||
<div class="Reset" v-if="modifyDialogstate" @click="cancel()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
</el-splitter>
|
||||
</div>
|
||||
<!-- 确认删除弹窗 -->
|
||||
<el-dialog
|
||||
class="center-dialog"
|
||||
v-model="centerDialogVisible"
|
||||
title="提示"
|
||||
width="200"
|
||||
align-center
|
||||
>
|
||||
<span>确认删除该条主播PK信息？</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="deleteAnchor()"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 选择我的主播弹窗 -->
|
||||
<el-dialog v-model="myAnchorDialogVisible" title="选择我的主播库主播" width="800">
|
||||
<div class="myanchor-content">
|
||||
<div class="myanchor-list">
|
||||
<div class="anchor-library-card" v-for="(item, index) in anchorLibrary" :key="index" @click="selectStreamerLibrary(item)" :style="{transform: item == selectAnchor? 'scale(1.05)':'scale(1)'}">
|
||||
<div class="card-content">
|
||||
<div class="card-avatar">
|
||||
<img
|
||||
style="width: 100%; height: 100%; border-radius: 100px"
|
||||
:src="item.headerIcon"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="personalInformation">
|
||||
<div class="name">{{ item.anchorId }}</div>
|
||||
<div class="GenderAndCountry">
|
||||
<div
|
||||
class="Gender"
|
||||
:style="{
|
||||
background: item.gender == 1 ? '#59D8DB' : '#F3876F',
|
||||
}"
|
||||
>
|
||||
{{ item.gender == 1 ? "男" : "女" }}
|
||||
</div>
|
||||
<div class="Country">{{ item.country }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myanchor-dialog-btn">
|
||||
<div class="Reset" @click="myAnchorDialogVisible = false">取消</div>
|
||||
<div class="Confirm" @click="handleSelect">确认</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -154,7 +237,21 @@ import {
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
import {
|
||||
getPkInfo,
|
||||
getAnchorAvatar,
|
||||
releasePkInfo,
|
||||
editPkInfo,
|
||||
delPkInfo,
|
||||
topPkInfo,
|
||||
cancelTopPkInfo,
|
||||
getAnchorList
|
||||
} from "@/api/account";
|
||||
import { TimestamptolocalTime } from "@/utils/timeConversion.js";
|
||||
import { getCountryNamesArray } from "../../utils/countryUtil";
|
||||
import { ElLoading } from "element-plus";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
|
||||
|
||||
const country = ref([]);
|
||||
country.value = getCountryNamesArray(); //国家条目
|
||||
@@ -162,20 +259,237 @@ const genderOptions = [
|
||||
{ value: 1, label: "男" },
|
||||
{ value: 2, label: "女" },
|
||||
]; // 性别选项
|
||||
const user = ref(null); // 用户信息
|
||||
const gendervalue = ref(null); // 性别值
|
||||
const countryvalue = ref(null); //国家
|
||||
const anchorName = ref(null); // 主播名称
|
||||
const refname = ref("");
|
||||
const list = ref([{}, {}, {}, {}, {}]);
|
||||
|
||||
function load() {
|
||||
// 加载更多数据
|
||||
const AnchorProfilePicture = ref(""); // 主播头像
|
||||
const timevalue = ref(null); // PK时间
|
||||
const goldvalue = ref(null); // 金币数
|
||||
const sessionnum = ref(null); // 场次
|
||||
const remark = ref(null); // 备注
|
||||
const list = ref([]); // PK信息列表
|
||||
const page = ref(0); // 页码
|
||||
const centerDialogVisible = ref(false); // 确认删除弹窗
|
||||
const modifyDialogstate = ref(false); // 修改弹窗
|
||||
const modifyDialogstateID = ref(null); // 修改弹窗ID
|
||||
const myAnchorDialogVisible = ref(false); // 选择我的主播弹窗
|
||||
const anchorLibrary = ref([]); // 我的主播库
|
||||
const selectAnchor = ref(null); //选中的主播信息
|
||||
// 选择我的主播
|
||||
function selectStreamerLibrary(item) {
|
||||
selectAnchor.value = item
|
||||
}
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
|
||||
|
||||
//获取我的主播库数据
|
||||
function getMyAnchorLibrary() {
|
||||
getAnchorList({id: user.value.id}).then((res) => {
|
||||
console.log("anchorLibrary", res);
|
||||
anchorLibrary.value = res
|
||||
})
|
||||
}
|
||||
// 置顶or取消置顶
|
||||
function topPosition(item) {
|
||||
|
||||
|
||||
}
|
||||
// 修改
|
||||
function modify(item) {
|
||||
if (modifyDialogstate.value) {
|
||||
cancel();
|
||||
return;
|
||||
}
|
||||
modifyDialogstateID.value = item.id;
|
||||
modifyDialogstate.value = true;
|
||||
countryvalue.value = item.country;
|
||||
gendervalue.value = item.sex;
|
||||
anchorName.value = item.anchorId;
|
||||
AnchorProfilePicture.value = item.anchorIcon.split("/").pop();
|
||||
timevalue.value = item.pkTime * 1000;
|
||||
goldvalue.value = item.coin;
|
||||
sessionnum.value = item.pkNumber;
|
||||
remark.value = item.remark;
|
||||
}
|
||||
// 取消
|
||||
function cancel() {
|
||||
modifyDialogstateID.value = null;
|
||||
modifyDialogstate.value = false;
|
||||
countryvalue.value = null;
|
||||
gendervalue.value = null;
|
||||
anchorName.value = null;
|
||||
AnchorProfilePicture.value = null;
|
||||
timevalue.value = null;
|
||||
goldvalue.value = null;
|
||||
sessionnum.value = null;
|
||||
remark.value = null;
|
||||
}
|
||||
// 删除
|
||||
const deletePKInfodata = ref(null);
|
||||
function deletePKInfo(item) {
|
||||
deletePKInfodata.value = item;
|
||||
centerDialogVisible.value = true;
|
||||
}
|
||||
// 确认删除
|
||||
function deleteAnchor() {
|
||||
centerDialogVisible.value = false;
|
||||
delPkInfo({
|
||||
id: deletePKInfodata.value.id,
|
||||
}).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
list.value = [];
|
||||
page.value = 0;
|
||||
PKInfo();
|
||||
});
|
||||
}
|
||||
|
||||
// 确认发布
|
||||
function Confirm() {
|
||||
const currentTime = Date.now();
|
||||
if (anchorName.value == null || anchorName.value == "") {
|
||||
ElMessage.error("请输入主播名称");
|
||||
return;
|
||||
}
|
||||
if (gendervalue.value == null || gendervalue.value == "") {
|
||||
ElMessage.error("请选择性别");
|
||||
return;
|
||||
}
|
||||
if (timevalue.value == null || timevalue.value == "") {
|
||||
ElMessage.error("请选择PK时间");
|
||||
return;
|
||||
}
|
||||
if (currentTime > timevalue.value) {
|
||||
ElMessage.error("PK时间不能早于当前时间");
|
||||
return;
|
||||
}
|
||||
if (countryvalue.value == null || countryvalue.value == "") {
|
||||
ElMessage.error("请选择国家");
|
||||
return;
|
||||
}
|
||||
if (goldvalue.value == null || goldvalue.value == "") {
|
||||
ElMessage.error("请输入金币数");
|
||||
return;
|
||||
}
|
||||
if (sessionnum.value == null || sessionnum.value == "") {
|
||||
ElMessage.error("请输入场次");
|
||||
return;
|
||||
}
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: "发布中....",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
if (modifyDialogstate.value) {
|
||||
editPkInfo({
|
||||
id: modifyDialogstateID.value,
|
||||
anchorId: anchorName.value,
|
||||
pkTime: timevalue.value / 1000,
|
||||
sex: gendervalue.value,
|
||||
country: countryvalue.value,
|
||||
coin: goldvalue.value,
|
||||
remark: remark.value,
|
||||
status: 0,
|
||||
senderId: user.value.id,
|
||||
anchorIcon: AnchorProfilePicture.value,
|
||||
pkNumber: sessionnum.value,
|
||||
}).then((res) => {
|
||||
loading.close();
|
||||
ElMessage.success("修改成功");
|
||||
list.value = [];
|
||||
page.value = 0;
|
||||
PKInfo();
|
||||
cancel();
|
||||
});
|
||||
} else {
|
||||
releasePkInfo({
|
||||
anchorId: anchorName.value,
|
||||
pkTime: timevalue.value / 1000,
|
||||
sex: gendervalue.value,
|
||||
country: countryvalue.value,
|
||||
coin: goldvalue.value,
|
||||
remark: remark.value,
|
||||
status: 0,
|
||||
senderId: user.value.id,
|
||||
anchorIcon: AnchorProfilePicture.value,
|
||||
pkNumber: sessionnum.value,
|
||||
})
|
||||
.then((res) => {
|
||||
loading.close();
|
||||
ElMessage.success("发布成功");
|
||||
list.value = [];
|
||||
page.value = 0;
|
||||
PKInfo();
|
||||
Reset();
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.close();
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 重置
|
||||
function Reset() {
|
||||
anchorName.value = null;
|
||||
gendervalue.value = null;
|
||||
timevalue.value = null;
|
||||
goldvalue.value = null;
|
||||
sessionnum.value = null;
|
||||
remark.value = null;
|
||||
countryvalue.value = null
|
||||
}
|
||||
|
||||
//输入框失去焦点
|
||||
function handleChange() {
|
||||
if (anchorName.value == null || anchorName.value == "") {
|
||||
ElMessage.error("请输入主播名称");
|
||||
return;
|
||||
}
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: "查询主播中....",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
getAnchorAvatar({ name: anchorName.value })
|
||||
.then((res) => {
|
||||
loading.close();
|
||||
AnchorProfilePicture.value = res;
|
||||
ElMessage.success("查询成功");
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.close();
|
||||
});
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
function load() {
|
||||
page.value++;
|
||||
PKInfo();
|
||||
}
|
||||
|
||||
//PK信息列表
|
||||
function PKInfo() {
|
||||
getPkInfo({
|
||||
userId: user.value.id,
|
||||
page: page.value,
|
||||
size: 10,
|
||||
}).then((res) => {
|
||||
console.log("list", res);
|
||||
list.value.push(...res);
|
||||
});
|
||||
}
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
getPromiseStorage("user")
|
||||
.then((res) => {
|
||||
user.value = res;
|
||||
PKInfo();
|
||||
getMyAnchorLibrary();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
onUpdated(() => {
|
||||
// 组件更新后执行
|
||||
@@ -183,6 +497,10 @@ onUpdated(() => {
|
||||
onUnmounted(() => {
|
||||
// 组件销毁前执行
|
||||
});
|
||||
const refname = ref(""); //
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@@ -211,15 +529,15 @@ onUnmounted(() => {
|
||||
.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);
|
||||
border-radius: 10px;
|
||||
background-image: url(../../assets/PKbackground.png);
|
||||
background-size: 100% 100%;
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.card-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
@@ -250,17 +568,17 @@ onUnmounted(() => {
|
||||
}
|
||||
.Gender {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
color: #ffffff;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
padding: 2px 20px 2px 20px;
|
||||
padding: 5px 20px 5px 20px;
|
||||
margin-right: 20px;
|
||||
line-height: 100%;
|
||||
}
|
||||
.Country {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
color: #03aba8;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
background-color: #e4f9f9;
|
||||
padding: 2px 20px 2px 20px;
|
||||
}
|
||||
.goldbox {
|
||||
@@ -300,10 +618,18 @@ onUnmounted(() => {
|
||||
.modify-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.modify-icon:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.delete-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
height: 28px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.delete-icon:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.add-anchor-library {
|
||||
width: 100%;
|
||||
@@ -313,13 +639,20 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
height: 70px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.titleimg {
|
||||
width: 44px;
|
||||
height: 30px;
|
||||
}
|
||||
.add-anchor-library-content {
|
||||
width: 100%;
|
||||
@@ -335,11 +668,11 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
}
|
||||
.input-name-input {
|
||||
width: 50%;
|
||||
width: 70%;
|
||||
height: 40px;
|
||||
}
|
||||
.myanchor {
|
||||
width: 50%;
|
||||
width: 30%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -347,19 +680,17 @@ onUnmounted(() => {
|
||||
}
|
||||
.myanchor-btn {
|
||||
width: 90%;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
background-image: linear-gradient(to top, #4fcacd, #5fdbde);
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
line-height: 40px;
|
||||
transition: all 0.4s ease;
|
||||
color: @Prompt-text-color;
|
||||
color: #ffffff;
|
||||
}
|
||||
.myanchor-btn:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
.country {
|
||||
width: 90%;
|
||||
@@ -387,7 +718,7 @@ onUnmounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.Goldcoinbox-right{
|
||||
.Goldcoinbox-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -395,40 +726,86 @@ onUnmounted(() => {
|
||||
font-size: 12px;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.Confirm {
|
||||
.remark {
|
||||
margin-top: 30px;
|
||||
width: 98%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// margin-top: 10px;
|
||||
}
|
||||
.textarea {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
max-height: 90%;
|
||||
border: 1px solid #4fcacd;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
background-color: #ff000000;
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
color: #000000;
|
||||
letter-spacing: 1px;
|
||||
resize: none;
|
||||
}
|
||||
.Confirm {
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
margin-top: 100px;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
background-image: linear-gradient(to top, #4fcacd, #5fdbde);
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 25px;
|
||||
}
|
||||
.Confirm:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Reset {
|
||||
width: 90%;
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
background-image: linear-gradient(to top, #e4ffff, #ffffff);
|
||||
border: 1px solid #4fcacd;
|
||||
color: #03aba8;
|
||||
font-size: 22px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 25px;
|
||||
}
|
||||
.Reset:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.myanchor-content{
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
.myanchor-list{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background-color: #E0F4F1;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #4fcacd;
|
||||
overflow: auto;
|
||||
}
|
||||
.myanchor-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.myanchor-dialog-btn{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content:space-around;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,17 @@
|
||||
<!-- 积分列表 -->
|
||||
<div class="points-list-container">
|
||||
<div class="points-list-title">
|
||||
我的积分:9999999999999999999999999999999
|
||||
<img
|
||||
class="points-icon"
|
||||
src="@/assets/Points.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<div class="points-text">
|
||||
我的积分:
|
||||
<div class="points-alwaysnum">
|
||||
9999999999999999999999999999999
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="points-list" style="overflow: auto;">
|
||||
<div class="points-list-item" v-for="(item, index) in pointsList" :key="index">
|
||||
@@ -59,10 +69,26 @@ onUnmounted(() => {
|
||||
.points-list-title{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
color: @font-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.points-text{
|
||||
margin-top: 10px;
|
||||
color: #666666;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.points-alwaysnum{
|
||||
color: #333333;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.points-icon{
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
.points-list-item{
|
||||
width: 100%;
|
||||
@@ -80,7 +106,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color:@win-color;
|
||||
background-color:#E0F4F1;
|
||||
}
|
||||
.Event{
|
||||
color: @Supplementary-text-color;
|
||||
|
||||
Reference in New Issue
Block a user