ui设计

src/components/Sidebar.vue

@@ -1,48 +1,120 @@
 <template>
   <div class="sidebar">
-    <h3>导航菜单</h3>
+    <div class="logo">
+      <img style="margin-right: 10px;" src="@/assets/logo.png">
+      <img src="@/assets/logotext.png">
+    </div>
     <ul>
-      <li>
-        <RouterLink to="/workBenches">工作台</RouterLink>
+      <li @click="activeIndex = 1">
+        <RouterLink to="/workBenches">
+          <img v-if="activeIndex == 1" src="@/assets/navAction.png" autoplay loop muted class="background-img">
+          <div style="display: flex;">
+            <img v-if="activeIndex == 1" src="@/assets/workAction.png" style="margin-right: 10px;">
+            <img v-else src="@/assets/workAction.png" style="margin-right: 10px;">
+            <div :style="activeIndex == 1 ? 'color: #000' : 'color: #fff'" class="center-justify">工作台</div>
+
+          </div>
+        </RouterLink>
       </li>
-      <li>
-        <RouterLink to="/hostsList">主播列表</RouterLink>
+      <li @click="activeIndex = 2">
+        <RouterLink to="/hostsList">
+          <img v-if="activeIndex == 2" src="@/assets/navAction.png" autoplay loop muted class="background-img">
+
+          <div style="display: flex;">
+            <img v-if="activeIndex == 2" src="@/assets/listAction.png" style="margin-right: 10px;">
+            <img v-else src="@/assets/listAction.png" style="margin-right: 10px;">
+            <div :style="activeIndex == 2 ? 'color: #000' : 'color: #fff'" class="center-justify">主播列表</div>
+
+          </div>
+        </RouterLink>
       </li>
     </ul>
   </div>
 </template>
 
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+
+let activeIndex = ref(1);
+</script>
+
 <style scoped>
 .sidebar {
   position: fixed;
   left: 0;
   top: 0;
-  height: 100vh;
-  width: 200px;
-  background-color: #f5f5f5;
+  height: 900px;
+  width: 280px;
+  background-color: #338F6A;
   padding: 20px;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
   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-bottom: 10px;
+  margin-top: 50px;
+  padding-top: 30px;
+  padding-left: 30px;
+  margin-bottom: 50px;
+  height: 64px;
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
 }
 
 .sidebar a {
   text-decoration: none;
-  color: #333;
+  color: #000000;
   display: block;
   padding: 8px;
   border-radius: 4px;
+
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  font-size: 22px;
+
 }
 
-.sidebar a:hover {
+/* .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>