185 lines
4.4 KiB
Vue
185 lines
4.4 KiB
Vue
<template>
|
|
<div class="userPanel-container">
|
|
<img
|
|
src="@/assets/images/head/anchorUserListTitle2.png"
|
|
alt=""
|
|
class="headerImage"
|
|
style="margin-top: -7px"
|
|
/>
|
|
<div class="tabs">
|
|
<div class="tabs-switch">
|
|
<div
|
|
class="switch-item"
|
|
v-for="item in tabsSwitch"
|
|
:key="item"
|
|
@click="swichToTabs(item)"
|
|
:class="{ 'tabsSwich-active': KeyNodeOneStore.currentTabType == item }"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div class="tabs-list">
|
|
<div
|
|
class="tabs-list-item"
|
|
v-for="(item, index) in tabsList"
|
|
:key="item.id"
|
|
@click="highLightNodeHandle(item)"
|
|
>
|
|
<div class="order">{{ index + 1 }}</div>
|
|
<img :src="item.avatar" alt="" class="avatar" />
|
|
<div class="user-info">
|
|
<div class="username">{{ item.name }}</div>
|
|
<div class="userState">
|
|
<div class="userState-fancy">
|
|
粉丝数:
|
|
<p>{{ item.number }}</p>
|
|
</div>
|
|
<div class="userState-monitor-count">
|
|
推荐频率:
|
|
<p>{{ item.transmit }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineEmits, defineProps } from "vue";
|
|
import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index";
|
|
const KeyNodeOneStore = useKeyNodeRecognitionStore();
|
|
const props = defineProps({
|
|
tabsSwitch: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
tabsList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
const emit = defineEmits(["click:switchTab"]);
|
|
|
|
const swichToTabs = (item) => {
|
|
emit("click:switchTab", item);
|
|
};
|
|
|
|
const highLightNodeHandle = (item) => {
|
|
KeyNodeOneStore.currentUser = item;
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.userPanel-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tabs {
|
|
flex: 1;
|
|
padding: 10px 20px;
|
|
|
|
.tabs-switch {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.switch-item {
|
|
flex: 1;
|
|
padding: 4px 0px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #20406e;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
color: #cccccc9d;
|
|
&:first-child {
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
&:last-child {
|
|
border-radius: 0px 5px 5px 0px;
|
|
}
|
|
}
|
|
}
|
|
.tabs-list {
|
|
width: 100%;
|
|
height: 430px;
|
|
margin-top: 10px;
|
|
padding-right: 5px;
|
|
overflow: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 3px; /* 垂直滚动条宽度 */
|
|
height: 5px; /* 水平滚动条高度 */
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
|
|
border-radius: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(147, 210, 255, 0.3); /* 更明显的蓝色 */
|
|
}
|
|
.tabs-list-item {
|
|
width: 100%;
|
|
height: 80px;
|
|
padding: 10px 0px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
|
|
.order {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-right: 15px;
|
|
}
|
|
.avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 5px;
|
|
}
|
|
.user-info {
|
|
flex: 1;
|
|
padding-left: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.username {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-family: "微软雅黑";
|
|
}
|
|
.userState {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
color: #cccccc9d;
|
|
div {
|
|
display: flex;
|
|
p {
|
|
color: #fff;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabsSwich-active {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #fff;
|
|
opacity: 1;
|
|
background-color: #236291;
|
|
border: 1px solid #3fa9f5;
|
|
}
|
|
</style>
|