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

97
src/components/Appaside.vue
View File

@@ -5,16 +5,22 @@
</div>
<div class="Navigation">
<div class="Navigation-card" v-for="(item, index) in NavigationModule" :key="index" @click="handleClick(item.path, item.id)" :style="{backgroundColor: item.id === activeId|| item.id === 5? '#ffffff' : '' ,boxShadow: item.id === activeId|| item.id === 5? '5px 5px 15px rgba(0, 0, 0, 0.3)' : ''}">
<img class="Navigation-card-icon-img" :src="item.icon" alt="">
<div class="Navigation-card-name">{{ item.name }}</div>
<div class="Navigation-card" v-for="(item, index) in NavigationModule" :key="index"
@click="handleClick(item.path, item.id)"
:style="{backgroundColor: item.id === activeId|| item.id === 5? '#ffffff' : '' ,
boxShadow: item.id === activeId|| item.id === 5? '5px 5px 5px rgba(0, 0, 0, 0.2)' : '',
backgroundImage: item.id === activeId? `url(${require('@/assets/selectSidebar.png')})` : ''}">
<img class="Navigation-card-icon-img" :src="item.id === activeId&& item.id !== 5? item.Selectedicon : item.icon" alt=""/>
<div class="Navigation-card-name" :style="{color: item.id === activeId? '#03ABA8' : '' ,}">{{ item.name }}</div>
</div>
</div>
<div class="Avatar" >
<el-popover placement="right-end" :width="200" trigger="click">
<el-popover placement="right-end" :width="200" trigger="click">-
<template #reference>
<img class="Avatar-img" src="@/assets/logo.png" alt="logo"></img>
<img class="Avatar-img" :src="avatar" alt="logo"></img>
</template>
<div class="Avatar-content">
<!-- 点击头像弹出框内容 -->
@@ -31,7 +37,7 @@
</div>
</div>
<!-- 添加新PK弹窗 -->
<el-drawer v-model="drawer">
<el-drawer size="25%" :with-header="false" v-model="drawer">
<!-- 添加或修改主播 -->
<div class="demo-panel">
<div class="add-anchor-library">
@@ -114,6 +120,7 @@
<script setup>
import { useRouter } from 'vue-router';
import { setStorage , getStorage } from '@/utils/storage.js';
import { UserStore } from '@/stores/notice'
const router = useRouter();
import {
ref, // 响应式基础
@@ -122,9 +129,12 @@ import {
onBeforeMount, // 组件挂载前执行
onUpdated, // 组件更新后执行
onUnmounted, // 组件销毁前执行
reactive
} from "vue";
import { getCountryNamesArray } from "../utils/countryUtil";
const info = ref(null); // 用户信息
const avatar = ref(null); //头像
const country = ref([]);
country.value = getCountryNamesArray(); //国家条目
const genderOptions = [
@@ -153,29 +163,34 @@ const NavigationModule = [
name: 'PK',
id: 1,
path: '/nav/PK',
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png'
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png',
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/SelectPKpage.png'
},
{
name: '站内信',
id: 2,
path: '/nav/Forum',
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forum.png'
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forum.png',
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Selectinsitemessagepage.png'
},
{
name: '消息',
id: 3,
path: '/nav/Message',
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Message.png'
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Message.png',
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Selectmessagepage.png'
},
{
name: '我的',
id: 4,
path: '/nav/Mine',
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mine.png'
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mine.png',
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mypagehasbeenselected.png'
},
{
id: 5,
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/push.png'
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/push.png',
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png',
}
]
@@ -202,7 +217,9 @@ watch(refname, async (newQuestion, oldQuestion) => {
// 变化后执行
});
onMounted(() => {
activeId.value = Number(getStorage('activeId')) || 1;
activeId.value = getStorage('activeId') || 1;
info.value = getStorage('user')
avatar.value = info.value.headerIcon;
});
onBeforeMount(()=>{
// 组件挂载前执行
@@ -314,6 +331,7 @@ onUnmounted(() => {
align-items: center;
margin-top: 30px;
transition: all 0.3s ease;
background-size: 100% 100%;
}
.Navigation-card-icon{
width: 20px;
@@ -362,45 +380,44 @@ onUnmounted(() => {
align-items: center;
}
.input-name {
width: 90%;
width: 85%;
height: 50px;
margin-top: 20px;
display: flex;
}
.input-name-input {
width: 50%;
width: 60%;
height: 40px;
}
.myanchor {
width: 50%;
width: 40%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.myanchor-btn {
width: 90%;
height: 35px;
width: 85%;
height: 40px;
border-radius: 5px;
font-size: 16px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
font-size: 14px;
background: linear-gradient(to right, #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;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
transform: scale(1.05);
}
.country {
width: 90%;
width: 85%;
height: 50px;
margin-top: 20px;
}
.gender {
width: 90%;
width: 85%;
height: 50px;
margin-top: 20px;
}
@@ -408,12 +425,12 @@ onUnmounted(() => {
width: 100%;
}
.timeselect {
width: 90%;
width: 85%;
height: 40px;
margin-top: 20px;
}
.Gold-sessions {
width: 90%;
width: 85%;
height: 50px;
margin-top: 20px;
display: flex;
@@ -429,38 +446,38 @@ onUnmounted(() => {
color: @Prompt-text-color;
}
.Confirm {
width: 90%;
width: 85%;
height: 50px;
margin-top: 100px;
text-align: center;
line-height: 50px;
background-color: #ffffff;
color: @Prompt-text-color;
background: linear-gradient(0deg, #4FCACD, #5FDBDE);
color: #ffffff;
font-size: 20px;
transition: all 0.4s ease;
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
border-radius: 100px;
}
.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: 90%;
width: 85%;
height: 50px;
margin-top: 30px;
text-align: center;
line-height: 50px;
background-color: #ffffff;
color: @Prompt-text-color;
background: linear-gradient(0deg, #E4FFFF, #ffffff);
color:#03ABA8;
font-size: 20px;
transition: all 0.4s ease;
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
border-radius: 100px;
border: 1px solid #4FCACD;
}
.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;
}