|
|
@@ -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>
|
“yueshang”
