From 1d564e785eb67c5b389e6dc4293e5100587251dd Mon Sep 17 00:00:00 2001 From: yangyin <1850366751@qq.com> Date: 星期三, 26 六月 2024 09:13:56 +0800 Subject: [PATCH] feat: 构建水务平台页面 --- src/views/project/ch/home/Home.vue | 121 ++++++++++++++++++++++++++++++++++++++- 1 files changed, 116 insertions(+), 5 deletions(-) diff --git a/src/views/project/ch/home/Home.vue b/src/views/project/ch/home/Home.vue index d808b2a..dfc939e 100644 --- a/src/views/project/ch/home/Home.vue +++ b/src/views/project/ch/home/Home.vue @@ -1,9 +1,120 @@ <template> - <div class=""> - - + <div class="pc-chat_room"> + <div class="flex h100 w100"> + <div class="pc-chat_aside"> + <div class="aside_top"> + <div class="logo"> + <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">姘村姟 AI骞冲彴</span> + </div> + </div> + </div> + <div class="aside_center"></div> + <div class="aside_bottom"> + <asideTitle /> + </div> + </div> + <div class="pc-chat_right"> + <waterHeader /> + <div class="w100 h100 overflow-auto"> + <div class="pc-chatRoom w100 h100"> + <div class="homeBox w100 h100"> + <waterTop /> + </div> + </div> + </div> + </div> + </div> </div> </template> -<script setup lang="ts"></script> -<style scoped lang="scss"></style> +<script setup lang="ts"> +import asideTitle from './component/waterLeftAside/asideTitle.vue'; +import waterHeader from './component/waterRight/header.vue'; +import waterTop from './component/waterRight/top.vue'; +</script> +<style scoped lang="scss"> +.pc-chat_room { + width: 100vw; + height: 100vh; + margin: 0; + padding: 0; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background-color: #1c1e1d; + font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} +.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; + margin: 6px; + border-radius: 10px; + 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 { + padding: 42px 40px 0; + font-size: 14px; + line-height: 18px; + box-sizing: border-box; + } + } +} +</style> -- Gitblit v1.9.3