280 lines
6.8 KiB
Vue
280 lines
6.8 KiB
Vue
<template>
|
||
<div class="pageCantainer">
|
||
<div class="pageContent">
|
||
<div class="chatSide">
|
||
<div class="sideContent">
|
||
<div plain="true" class="addBtn" @click="createNewChat">新建聊天</div>
|
||
<div class="chatList">
|
||
<div class="listItem" v-for="item in listData" :key="item.id" @click="listItemClick(item.id)">
|
||
<div class="listItemTitle">{{ item.title }}</div>
|
||
<el-icon :size="20"><el-icon-edit/><Edit/></el-icon>
|
||
<el-icon :size="20"><el-icon-delete/></el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mainChat">
|
||
<el-container>
|
||
<el-main class="chatItemContainer">
|
||
<div v-for="item in chatData" :key="item.id">
|
||
<div class="chatItem" :class="[item.chat_type=='myself'?'layout_right':'layout_left']">
|
||
<div class="chatItem_text">
|
||
<span class="datatime">{{ item.chat_time }}</span>
|
||
<div class="chat_text">{{ item.chat_text }}</div>
|
||
</div>
|
||
<div class="user_icons"></div>
|
||
</div>
|
||
</div>
|
||
</el-main>
|
||
<el-footer style="padding: 1rem;height: 5rem;text-align: left;border-top: 1px solid rgb(229, 231, 235);">
|
||
<div style="display: flex;align-items: center;justify-content: space-between;">
|
||
<div style="width: 100%;height:100%;padding: 0 0.5rem;">
|
||
<el-input class="search_input" placeholder="来说点什么吧..."></el-input>
|
||
</div>
|
||
<el-button icon="el-icon-promotion" size="success"></el-button>
|
||
</div>
|
||
</el-footer>
|
||
</el-container>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: "testx",
|
||
components: {},
|
||
data() {
|
||
return {
|
||
userName: "",
|
||
listData:[{id:1,title:'前端有哪些性能优化？',}],
|
||
chatData: [
|
||
{chat_text:'前端有哪些性能优化？',chat_time:'2022-08-18 10:00:00',chat_type:'myself'},
|
||
{chat_text:'1. 图片优化使用适当格式（例如：JPEG, PNG, WebP）。压缩图片文件，减少文件大小。使用响应式图片（srcset）来适配不同分辨率的设备。2. 懒加载（Lazy Loading）对图片、视频和其他资源进行懒加载，仅在需要时才加载。使用 IntersectionObserver 或 loading="lazy" 属性来实现。3. 代码拆分（Code Splitting）将 JavaScript 拆分成更小的模块，按需加载，提高初始加载速度。使用 Webpack 或其他打包工具的代码分割功能。4. 资源缓存使用浏览器缓存（Cache-Control）来减少重复请求。使用 Service Workers 提供离线支持和缓存管理5. 减少 HTTP 请求合并 CSS 和 JavaScript 文件，减少请求次数。使用字体图标代替多个图片图标。',chat_time:'2022-08-18 10:00:00',chat_type:'serve'}
|
||
],
|
||
};
|
||
},
|
||
mounted() {
|
||
var userInfo = this.$TOOL.data.get("USER_INFO");
|
||
this.userName = userInfo.username;
|
||
let items = document.querySelectorAll('.listItem');
|
||
items.forEach(function(item) {
|
||
item.addEventListener('click', function() {
|
||
items.forEach(function(el) {
|
||
el.classList.remove('active');
|
||
});
|
||
item.classList.add('active');
|
||
});
|
||
})
|
||
},
|
||
methods: {
|
||
createNewChat(){
|
||
this.listData.unshift({title:'New Chat'});
|
||
this.$nextTick(()=>{
|
||
let items = document.querySelectorAll('.listItem');
|
||
items.forEach(function(el) {
|
||
el.classList.remove('active');
|
||
});
|
||
items[0].classList.add('active')
|
||
})
|
||
},
|
||
listItemClick(id){
|
||
this.listData.forEach((item)=>{
|
||
if(item.id == id){
|
||
this.chatData = item.data
|
||
}
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.pageCantainer{
|
||
padding:0;
|
||
width: 99%;
|
||
height: 99%;
|
||
border-radius: 0.375rem;
|
||
margin: 0.5vh auto 0;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0 ,.1), 0 2px 4px -2px rgba(0, 0, 0 ,.1);
|
||
}
|
||
.pageContent{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
}
|
||
.chatSide{
|
||
max-width: 260px;
|
||
width: 260px;
|
||
border-right: 1px solid rgb(229, 231, 235);
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
.sideContent{
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
flex:1 1 0%;
|
||
}
|
||
.addBtn{
|
||
margin: 1rem;
|
||
border: 1px dotted #dddddd;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
.addBtn:hover{
|
||
color: #18a058;
|
||
border: 1px dotted #18a058;
|
||
}
|
||
.chatList{
|
||
padding: 1rem;
|
||
overflow: hidden;
|
||
flex: 1 1 0%;
|
||
min-height: 0px;
|
||
box-sizing: border-box;
|
||
}
|
||
.listItem{
|
||
overflow: hidden;
|
||
position: relative;
|
||
z-index: auto;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
width: 100%;
|
||
display :flex;
|
||
padding: 0 1rem;
|
||
border-radius: 6px;
|
||
box-sizing: border-box;
|
||
color :rgb(51, 54, 57);
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
border :1px solid rgb(229, 231, 235);
|
||
}
|
||
.listItem.active{
|
||
color: rgb(75, 158, 95);
|
||
border-color: rgb(75, 158, 95);
|
||
background-color :rgb(245, 245, 245)
|
||
}
|
||
.listItemTitle{
|
||
width: 160px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.mainChat{
|
||
padding-left: 260px;height: 100%;box-sizing: border-box;position: relative;z-index: auto;
|
||
}
|
||
|
||
.right_layout {
|
||
flex: 6;
|
||
}
|
||
|
||
.icons {
|
||
background-color: white;
|
||
z-index: 99;
|
||
position: absolute;
|
||
font-size: 20px;
|
||
border-radius: 50%;
|
||
border: 1px solid lightgray;
|
||
padding: 0px 5px;
|
||
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
||
color: gray;
|
||
}
|
||
|
||
.icons_display {
|
||
top: 48vh;
|
||
right: -15px;
|
||
}
|
||
|
||
.icons_hideen {
|
||
top: 48vh;
|
||
left: 10px;
|
||
display: none;
|
||
}
|
||
.new_chat_text {
|
||
border: 1px solid #4b9e5f;
|
||
display: flex;
|
||
}
|
||
|
||
.user_icons {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: linear-gradient(-135deg, #0000cc, #009dff);
|
||
border: 1px solid lightblue;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.right_layout_flex{
|
||
display:flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.right_layout_son{
|
||
margin:0 auto 0 auto;
|
||
width:100vh;
|
||
height:98vh;
|
||
/* border:1px solid gray; */
|
||
position: relative;
|
||
}
|
||
.right_layout_son_ipt{
|
||
position: absolute;
|
||
bottom:0;
|
||
}
|
||
.btn{
|
||
border:none;
|
||
padding:10px 15px;
|
||
background-color: #18a058;
|
||
border-radius: 1px;
|
||
color:white;
|
||
}
|
||
.search_input{
|
||
width: 100%;
|
||
padding:0.5rem 1rem;
|
||
/* border:1px solid lightgray; */
|
||
}
|
||
.chatItemContainer{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.chatItem{
|
||
display: flex;
|
||
justify-content: flex-end; /* 对齐到容器的右侧 */
|
||
}
|
||
.chatItem.layout_left{
|
||
flex-direction: row-reverse; /* 从右到左排列 */
|
||
}
|
||
|
||
.chatItem_text{
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-width: 80%;
|
||
}
|
||
.layout_right>.chat_img>.datatime{
|
||
position: absolute;
|
||
width: 170px;
|
||
right: 0;
|
||
}
|
||
.layout_right>.chatItem_text>.chat_text{
|
||
padding:10px 20px;
|
||
border-radius: 10px;
|
||
background-color: rgb(210, 249, 209);
|
||
opacity: 0.8;
|
||
}
|
||
.layout_left>.chatItem_text>.chat_text{
|
||
padding:10px 20px;
|
||
border-radius: 10px;
|
||
background-color: rgb(244, 246, 248);
|
||
opacity: 0.8;
|
||
}
|
||
.user_icons{
|
||
width:40px;height:40px;
|
||
}
|
||
</style> |