142 lines
3.0 KiB
Vue
142 lines
3.0 KiB
Vue
<template>
|
|
<div class="sidebar">
|
|
<div class="logo">
|
|
<img style="margin-right: 10px;" src="@/assets/logo.png">
|
|
<img src="@/assets/logotext.png">
|
|
</div>
|
|
<ul>
|
|
<li @click="updateActiveIndex(1)" v-show="userInfo.userType == 3">
|
|
<div>
|
|
<img v-show="activeIndex == 1" src="@/assets/navAction.png" autoplay loop muted class="background-img">
|
|
<div style="display: flex;">
|
|
<img v-show="activeIndex == 1" src="@/assets/workAction.png" style="margin-right: 10px;">
|
|
<img v-show="activeIndex == 2" src="@/assets/workAction.png" style="margin-right: 10px;">
|
|
<div :style="activeIndex == 1 ? 'color: #000' : 'color: #fff'" class="center-justify">工作台</div>
|
|
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li @click="updateActiveIndex(2)">
|
|
<div>
|
|
<img v-show="activeIndex == 2" src="@/assets/navAction.png" autoplay loop muted class="background-img">
|
|
|
|
<div style="display: flex;">
|
|
<img v-show="activeIndex == 2" src="@/assets/listAction.png" style="margin-right: 10px;">
|
|
<img v-show="activeIndex == 1" src="@/assets/listAction.png" style="margin-right: 10px;">
|
|
<div :style="activeIndex == 2 ? 'color: #000' : 'color: #fff'" class="center-justify">主播列表</div>
|
|
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<a @click="$router.push('/')" href="javascript:void(0);"
|
|
style="position: absolute; bottom: 30px; color: aliceblue; font-size: 20px; font-weight: 500;">
|
|
退出登录
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import { getUser } from '@/utils/storage'
|
|
import { defineEmits } from 'vue';
|
|
|
|
|
|
|
|
const userInfo = ref(getUser())
|
|
|
|
let activeIndex = ref(userInfo.value.userType == 3 ? 1 : 2);
|
|
|
|
const emit = defineEmits(['update:activeIndex']);
|
|
|
|
|
|
const updateActiveIndex = (index) => {
|
|
activeIndex.value = index;
|
|
emit('activeIndex', index);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 900px;
|
|
width: 280px;
|
|
background-color: #338F6A;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
|
|
.logo {
|
|
border-bottom: 1px solid #fff;
|
|
padding-bottom: 29px;
|
|
|
|
img:nth-of-type(1) {
|
|
height: 40px;
|
|
}
|
|
|
|
img:nth-of-type(2) {
|
|
height: 29px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.sidebar li {
|
|
margin-top: 50px;
|
|
padding-top: 30px;
|
|
padding-left: 30px;
|
|
margin-bottom: 50px;
|
|
height: 64px;
|
|
position: relative;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.sidebar a {
|
|
text-decoration: none;
|
|
color: #000000;
|
|
display: block;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 22px;
|
|
|
|
}
|
|
|
|
/* .sidebar a:hover {
|
|
background-color: #e0e0e0;
|
|
} */
|
|
|
|
|
|
.background-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 13px;
|
|
width: 247px;
|
|
height: 126px;
|
|
object-fit: cover;
|
|
z-index: -1;
|
|
/* 确保视频在内容之下 */
|
|
}
|
|
|
|
.center-justify {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
</style> |