|
@@ -0,0 +1,71 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="chat-aside-menu">
|
|
|
|
|
+ <img class="aside-menu-img-bg" src="../../assets/aside-menu-bg.png" />
|
|
|
|
|
+
|
|
|
|
|
+ <div class="menu-container">
|
|
|
|
|
+ <div class="menu-content">
|
|
|
|
|
+ <div class="menu-logo">
|
|
|
|
|
+ <img class="header-logo-img" src="../../assets/logo.png" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="menu-actions"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="menu-recent"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { ref, computed } from 'vue';
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="css" scoped>
|
|
|
|
|
+.chat-aside-menu {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+
|
|
|
|
|
+ width: 80px;
|
|
|
|
|
+ height: 570px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ margin-top: -250px;
|
|
|
|
|
+
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.aside-menu-img-bg {
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: -16px;
|
|
|
|
|
+ z-index: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.menu-container {
|
|
|
|
|
+ width: 68px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.menu-content {
|
|
|
|
|
+ width: 30px;
|
|
|
|
|
+ height: 400px;
|
|
|
|
|
+
|
|
|
|
|
+ background-color: #ccc;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.menu-content .menu-logo .header-logo-img {
|
|
|
|
|
+ width: 30px;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|