优化代码
This commit is contained in:
pengxiaolong
@@ -11,10 +11,104 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="Avatar">
|
||||
<img class="Avatar-img" src="@/assets/logo.png" alt="logo"></img>
|
||||
<div class="Avatar" >
|
||||
<el-popover placement="right-end" :width="200" trigger="click">
|
||||
<template #reference>
|
||||
<img class="Avatar-img" src="@/assets/logo.png" alt="logo"></img>
|
||||
</template>
|
||||
<div class="Avatar-content">
|
||||
<!-- 点击头像弹出框内容 -->
|
||||
<div class="Avatar-content-name">
|
||||
来自世界上最长名的国家的某个人
|
||||
</div>
|
||||
<div class="Avatar-content-btn" style="overflow:auto;">
|
||||
<div class="Avatar-list" v-for="(item, index) in Avatarlist" :key="index" @click="popoverClick(item.id)">
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加新PK弹窗 -->
|
||||
<el-drawer v-model="drawer">
|
||||
<!-- 添加或修改主播 -->
|
||||
<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-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -29,7 +123,31 @@ import {
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
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 Avatarlist = [
|
||||
{
|
||||
name: '设置',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: '联系客服',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: '退出登录',
|
||||
id: 3,
|
||||
}
|
||||
]
|
||||
const NavigationModule = [
|
||||
{
|
||||
name: 'PK',
|
||||
@@ -61,28 +179,30 @@ const NavigationModule = [
|
||||
}
|
||||
|
||||
]
|
||||
const activeId = ref(1);
|
||||
const drawer = ref(false)
|
||||
const activeId = ref(null);
|
||||
function handleClick(path, id) {
|
||||
|
||||
if (id === 5) {
|
||||
|
||||
drawer.value = true;
|
||||
}else{
|
||||
activeId.value = id;
|
||||
setStorage('activeId', id);
|
||||
router.push(path);
|
||||
}
|
||||
}
|
||||
|
||||
function popoverClick(id) {
|
||||
|
||||
}
|
||||
|
||||
const refname = ref('');
|
||||
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
try{
|
||||
activeId.value = getStorage('activeId');
|
||||
0 }catch(e){
|
||||
activeId.value = 1
|
||||
}
|
||||
activeId.value = Number(getStorage('activeId')) || 1;
|
||||
});
|
||||
onBeforeMount(()=>{
|
||||
// 组件挂载前执行
|
||||
@@ -122,6 +242,49 @@ onUnmounted(() => {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Avatar:hover{
|
||||
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Avatar-content{
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
.Avatar-content-name{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
color: @font-color;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid @border-color;
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.Avatar-content-btn{
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
.Avatar-list{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
.Avatar-list:hover{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.Avatar-img{
|
||||
width: 60px;
|
||||
@@ -131,7 +294,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.Avatar-img:hover{
|
||||
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Navigation{
|
||||
@@ -170,4 +333,135 @@ onUnmounted(() => {
|
||||
opacity: 0.8;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.demo-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user