| | |
| | | <template> |
| | | <div class="pc-chat_aside flex-0"> |
| | | <div class="pc-chat_aside flex-0 relative" :style="`width: ${leftBox}px;transition: 0.7s ease-in;`"> |
| | | <div class="aside_top"> |
| | | <div class="logo"> |
| | | <div class="logo flex-items-center justify-between"> |
| | | <div class="flex items-center"> |
| | | <img src="/static/images/logo/logo-mini.svg" alt="logo" class="layout-logo-medium-img" /> |
| | | <span class="font-extrabold text-xl text-white tracking-wide"> WI 水务智能平台</span> |
| | | <img src="/static/images/logo/logoWithNoName.png" alt="logo" class="layout-logo-medium-img" /> |
| | | <span class="font-extrabold text-xl text-white tracking-wide"> WI 水务智能助手</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="hide-sidebar" @click="toggleSidebar" v-if="!isSharePage"> |
| | | <i class="text-[#fff] transition-all ywifont ywicon-zuoyoujiantou"></i> |
| | | </div> |
| | | |
| | | <div class="aside_center"> |
| | | <asideNew /> |
| | | <ChatRecord /> |
| | | </div> |
| | | <div class="aside_bottom"> |
| | | <asideTitle /> |
| | | <MenuList /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { onMounted } from 'vue'; |
| | | import asideNew from './waterLeftAside/asideNew.vue'; |
| | | import asideTitle from './waterLeftAside/asideTitle.vue'; |
| | | import { PostLogin } from '/@/api/ai/user'; |
| | | import { computed } from 'vue'; |
| | | import ChatRecord from './components/ChatRecord.vue'; |
| | | import MenuList from './components/MenuList.vue'; |
| | | import { isSharePage } from '/@/stores/chatRoom'; |
| | | const emit = defineEmits(['toggleSidebar']); |
| | | |
| | | const prop = defineProps(['isShow']); |
| | | const leftBox = computed(() => (prop.isShow ? 252 : 198)); |
| | | const toggleSidebar = () => { |
| | | emit('toggleSidebar', false); |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
| | | } |
| | | .pc-chat_aside { |
| | | width: 252px !important; |
| | | // width: 252px !important; |
| | | height: 100%; |
| | | box-sizing: border-box; |
| | | background-color: #1b1d1c; |
| | | background-color: var(--color-bg-side); |
| | | overflow: visible; |
| | | -webkit-transition: width 0.1s ease-in; |
| | | -o-transition: width 0.1s ease-in; |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | .hide-sidebar { |
| | | width: 20px; |
| | | height: 48px; |
| | | background: rgba(0, 0, 0, 0.2); |
| | | position: absolute; |
| | | top: 50%; |
| | | right: 0px; |
| | | transform: translate(100%, -50%); |
| | | z-index: 9; |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 0 3px; |
| | | border-radius: 0px 5px 5px; |
| | | } |
| | | .aside_top { |
| | | box-sizing: border-box; |
| | | position: relative; |