会话消息的布局界面

src/assets/styles/my-common.scss

@@ -0,0 +1,11 @@
+.spill{
+    display: -webkit-box; /*弹性伸缩盒子模型显示*/
+    -webkit-box-orient: vertical; /*排列方式*/
+    -webkit-line-clamp: 1; /*显示文本行数*/
+    overflow: hidden; /*溢出隐藏*/
+}
+.flex-buju{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/layout/indexCommon.vue

@@ -40,7 +40,7 @@
         </div>
       </el-header>
       <el-container>
-        <el-aside width="120px" class="asides">
+        <el-aside width="92px" class="asides">
           <div class="aside-con">
             <router-link
               :to="item.path"
@@ -48,8 +48,7 @@
               :key="index"
               @click="clickPath(index)"
               ><div
-                :class="
-                  clickId == index ? 'acitve-img-style img-style' : 'img-style'
+                :class="$route.path==item.path ? 'acitve-img-style img-style' : 'img-style'
                 "
               >
                 <img :src="clickId == index ? item.beimgs : item.imgs" />
@@ -69,20 +68,12 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue'
 import { ElMessageBox } from 'element-plus'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
 
-
 import chat from "@/assets/images/chat.png";
 import bechat from "@/assets/images/bechat.png";
 import zuijin from "@/assets/images/zuijin.png";
@@ -108,7 +99,9 @@ const searchText = ref('') //搜索ipt的值
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
-
+onMounted(() => {
+  console.log('router',router)
+})
 function handleCommand(command) {
   switch (command) {
     case "setLayout":
@@ -144,7 +137,7 @@ const emits = defineEmits(['setLayout'])
 function setLayout() {
   emits('setLayout');
 }
-const clickId = ref("0");
+const clickId = ref('');
 const menuList = reactive({
   data: [
     {
@@ -211,14 +204,19 @@ const clickPath = (index) => {
 .el-container {
   height: 100vh;
 }
+:deep .el-main{
+  --el-main-padding:8px !important;
+}
 .nav {
   background: #06286c;
   height: 48px;
   .nav-top {
     width: 98%;
-    margin-left: 1%;
     display: flex;
     justify-content: space-between;
+    &>div:first-child{
+      font-family:"Inter-SemiBold";
+    }
     & > div:first-child,
     & > div:last-child {
       display: flex;
@@ -237,6 +235,7 @@ const clickPath = (index) => {
     margin-right:10px;
   }
   .avatar-wrapper {
+    color: #fff;
     display: flex;
     align-items: center;
   }
@@ -245,15 +244,19 @@ const clickPath = (index) => {
     :deep .el-input {
       width: 400px;
       height: 32px;
+      border-radius: 4px;
       margin-top: 8px;
       background: #6f85b5 !important;
+      --el-input-border-color:#6F85B5
     }
   }
   :deep .el-input__wrapper {
     background: #1f3f7e !important;
   }
 }
+
 .asides {
+  padding: 8px 10px !important;
   font-size: 14px;
   color: #000;
   background: #fff;
@@ -264,6 +267,7 @@ const clickPath = (index) => {
 //侧边栏css
 .acitve-img-style {
   background-color: #f5f7f9;
+  border-radius: 4px;
 }
 .img-style {
   width: 72px;

src/views/liveChat/index.vue

@@ -1,19 +1,221 @@
-<script lang="ts">
+<script>
 export default {
-  name: 'index2',
-}
+  name: "index2",
+};
 </script>
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
+<script setup>
+import { ref, reactive } from "vue";
+import chat from "@/assets/images/profile.jpg";
+import cebian from "@/assets/images/cebian.png";
+import send from "@/assets/images/send.png";
+import sendFile from "@/assets/images/send-file.png";
+const height = ref(document.documentElement.clientHeight - 74 + "px;");
+const searchText = ref(""); //搜
+const SearchChat = () => {}; //搜索的点击事件
+//聊天列表数据模拟
+const personList = reactive({
+  data: [
+    {
+      imgs: chat,
+      name: "Kathry Murl",
+      cont: "comment inside the import() call to suppress this",
+    },
+    {
+      imgs: chat,
+      name: "Mathry Murl",
+      cont: "comment inside o suppress this",
+    },
+  ],
+});
+//点击左侧聊天列表
+const clickPersonIndex = ref("");
+const clickPerson = (index) => {
+  clickPersonIndex.value = index;
+};
 </script>
 
 <template>
-  <div>
-    会话sdfss
+  <div class="main" :style="'height:' + height">
+    <!-- 左侧用户列表 -->
+    <div class="left-main">
+      <div class="left-top search">
+        <el-input
+          v-model="searchText"
+          class="w-50 m-2"
+          size="small"
+          placeholder="搜索聊天"
+          suffix-icon="Search"
+          @change="SearchChat"
+        />
+        <el-icon size="24" color="#505870"><Plus /></el-icon>
+      </div>
+      <div
+        :class="
+          clickPersonIndex == index
+            ? 'activ-left-container left-container'
+            : 'left-container'
+        "
+        v-for="(item, index) in personList.data"
+        :key="index"
+        @click="clickPerson(index)"
+      >
+        <img :src="cebian" class="cebian" v-if="clickPersonIndex == index" />
+        <div><img :src="item.imgs" class="head-sculpture" /></div>
+        <div>
+          <span class="person-name">{{ item.name }}</span
+          ><span class="person-cont spill"> {{ item.cont }}</span>
+        </div>
+      </div>
+    </div>
+    <!-- 右侧聊天 -->
+    <div class="right-main">
+      <div
+        class="common-layout"
+        style="display: flex; flex-direction: column; height: 100vh"
+      >
+        <el-container>
+          <el-header height="64px" class="right-header flex-buju"
+            >Header</el-header
+          >
+          <el-main class="right-container">Main</el-main>
+          <el-footer height="72px" class="right-footer">
+            <img :src="sendFile" class="send-info-file" />
+            <el-input
+              v-model="searchText"
+              class="w-50 m-2"
+              size="small"
+              placeholder="请输入聊天内容"
+              @change="SearchChat"
+            />
+            <img :src="send" class="send-info" />
+          </el-footer>
+        </el-container>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "@/assets/styles/my-common.scss";
+.main {
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  .left-main,
+  .right-main {
+    background: #fff;
+    border-radius: 4px;
+  }
+  //左侧板块
+  .left-main {
+    width: 312px;
+    margin-right: 8px;
+    .left-top {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      height: 48px;
+      background: #ebeff6;
+      border-top-right-radius: 4px;
+      border-top-left-radius: 4px;
+    }
+  }
+  //右侧板块
+  .right-main {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    .right-header {
+      background-color: #ebeff6;
+      border-top-right-radius: 4px;
+      border-top-left-radius: 4px;
+    }
+    .right-container {
+      flex: 1;
+      border-bottom: 1px solid #c1cce3;
+    }
+    .right-footer {
+      display: flex;
+      align-items: center;
+      :deep .el-input__wrapper {
+        background: #F5F7F9 !important;
+        border-radius: 16px;
+      }
+      .w-50{
+        margin: 0 16px;
+        flex:1;
+      }
+      .send-info {
+        width: 40px;
+        height: 40px;
+        border-radius: 16px;
+      }
+      .send-info-file{
+        width: 28px;
+        height: 28px;
+      }
+      :deep .el-input {
+        width: 80%;
+        height: 40px;
+        border-radius: 16px;
+        --el-input-border-color: #c9d2e6;
+      }
+
+    }
+  }
+}
+//搜索
+.search {
+  .w-50,
+  :deep .el-input {
+    width: 80%;
+    height: 32px;
+    border-radius: 4px;
+    --el-input-border-color: #c9d2e6;
+  }
+}
+//左侧聊天列表展示
+.left-container {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #c1cce3;
+  position: relative;
+  .head-sculpture {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    margin: 0 8px 0 12px;
+    vertical-align: middle;
+  }
 
+  & > div:last-child {
+    vertical-align: middle;
+    margin-right: 10px;
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
+    flex-direction: column;
+    .person-name {
+      font-family: "Inter-Medium";
+      color: #000;
+      font-size: 16px;
+    }
+    .person-cont {
+      color: #505870;
+      font-size: 14px;
+    }
+  }
+}
+//点击时列表的背景色
+.activ-left-container {
+  background: #f5f7f9;
+}
+.cebian {
+  height: 100%;
+  width: 4px;
+  position: absolute;
+  left: 0;
+}
 </style>