| | |
| | | <template> |
| | | <div class=""> |
| | | |
| | | |
| | | <div class="pc-chat_room h-full"> |
| | | <div class="flex h100 w100"> |
| | | <div class="pc-chat_right"> |
| | | <div class="w100 h100 overflow-hidden"> |
| | | <div class="pc-chatRoom w100 h100"> |
| | | <div class="homeBox w100 h-full"> |
| | | <div class="flex items-center flex-column mt-20"> |
| | | <div class="flex items-center flex-column"> |
| | | <waterTop /> |
| | | <div v-if="isLoginStatus"> |
| | | <waterCenter /> |
| | | <waterBottom /> |
| | | </div> |
| | | <div v-else> |
| | | <el-empty></el-empty> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <p class="declare"> |
| | | <span |
| | | >声明:本平台仅提供水务智能化服务,不提供任何形式的法律或法规建议,请用户自行判断使用风险,并自行承担因使用本平台而产生的法律责任。</span |
| | | > |
| | | </p> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"></script> |
| | | <style scoped lang="scss"></style> |
| | | <script setup lang="ts"> |
| | | import { ref } from 'vue'; |
| | | import waterBottom from './component/waterRight/bottom.vue'; |
| | | import waterCenter from './component/waterRight/center.vue'; |
| | | import waterTop from './component/waterRight/top.vue'; |
| | | import { accessSessionKey } from '/@/utils/request'; |
| | | import { Local } from '/@/utils/storage'; |
| | | const isLoginStatus = ref(!!Local.get(accessSessionKey)); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .pc-chat_room { |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | .pc-chat_aside { |
| | | width: 252px !important; |
| | | height: 100%; |
| | | box-sizing: border-box; |
| | | background-color: #1b1d1c; |
| | | overflow: visible; |
| | | -webkit-transition: width 0.1s ease-in; |
| | | -o-transition: width 0.1s ease-in; |
| | | transition: width 0.1s ease-in; |
| | | position: relative; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | .aside_top { |
| | | box-sizing: border-box; |
| | | position: relative; |
| | | width: 100%; |
| | | padding: 18px; |
| | | } |
| | | .layout-logo-medium-img { |
| | | width: 28px; |
| | | margin-right: 7px; |
| | | } |
| | | .aside_center { |
| | | flex: 1; |
| | | min-height: 0; |
| | | -webkit-transition: height 0.3s ease-in; |
| | | -o-transition: height 0.3s ease-in; |
| | | transition: height 0.3s ease-in; |
| | | } |
| | | .aside_bottom { |
| | | position: relative; |
| | | width: 100%; |
| | | padding-bottom: 20px; |
| | | -webkit-transition: height 0.3s ease-in; |
| | | -o-transition: height 0.3s ease-in; |
| | | transition: height 0.3s ease-in; |
| | | display: flex; |
| | | -webkit-box-orient: vertical; |
| | | -webkit-box-direction: normal; |
| | | -ms-flex-direction: column; |
| | | flex-direction: column; |
| | | } |
| | | .pc-chat_right { |
| | | padding: 0; |
| | | background: linear-gradient(180deg, #f5f4f6 0, #f2f2f6 25%, #e9edf7); |
| | | position: relative; |
| | | display: block; |
| | | flex: 1; |
| | | -ms-flex-preferred-size: auto; |
| | | flex-basis: auto; |
| | | overflow: auto; |
| | | -webkit-box-sizing: border-box; |
| | | box-sizing: border-box; |
| | | .pc-chatRoom { |
| | | box-sizing: border-box; |
| | | padding-right: 0px; |
| | | position: relative; |
| | | font-weight: 400; |
| | | background-color: #f2f4f8; |
| | | transition: padding-right 0.25s; |
| | | .homeBox { |
| | | font-size: 14px; |
| | | line-height: 18px; |
| | | overflow-y: auto; |
| | | } |
| | | .declare { |
| | | position: absolute; |
| | | bottom: 0; |
| | | z-index: 9; |
| | | width: 100%; |
| | | height: 34px; |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | color: #999; |
| | | text-align: center; |
| | | } |
| | | } |
| | | } |
| | | </style> |