fix:chat静态页面
This commit is contained in:
parent
1f5d248e95
commit
6314061da0
|
|
@ -3,28 +3,27 @@
|
|||
<div class="pageContent">
|
||||
<div class="chatSide">
|
||||
<div class="sideContent">
|
||||
<div plain="true" class="addBtn">新建聊天</div>
|
||||
<div plain="true" class="addBtn" @click="createNewChat">新建聊天</div>
|
||||
<div class="chatList">
|
||||
<div class="listItem" v-for="item in listData" :key="item.id">
|
||||
<div>{{ item.title }}</div>
|
||||
<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" style="">
|
||||
<div class="mainChat">
|
||||
<el-container>
|
||||
<el-main>
|
||||
<div>
|
||||
<div class="right_layout_myselfChat">
|
||||
<div id="datatime" style="flex:2;font-size:13px;color:lightgray"></div>
|
||||
<div style="flex:1">
|
||||
<div class="user_icons" style="width:40px;height:40px;"></div>
|
||||
<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 class="myself_chat">
|
||||
前端有哪些性能优化？
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-main>
|
||||
<el-footer style="padding: 1rem;height: 5rem;text-align: left;border-top: 1px solid rgb(229, 231, 235);">
|
||||
|
|
@ -47,16 +46,44 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
userName: "",
|
||||
listData:[{id:1,title:'第一次聊天'}],
|
||||
chatData: [{chat_text:'前端有哪些性能优化？',chat_time:'2022-08-18 10:00:00',chat_type:'myself'}],
|
||||
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>
|
||||
|
|
@ -118,18 +145,30 @@ export default {
|
|||
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;
|
||||
}
|
||||
|
|
@ -201,20 +240,41 @@ export default {
|
|||
padding:0.5rem 1rem;
|
||||
/* border:1px solid lightgray; */
|
||||
}
|
||||
.right_layout_myselfChat{
|
||||
width:200px;
|
||||
position: absolute;
|
||||
top:5px;
|
||||
right:0;
|
||||
display:flex;
|
||||
.chatItemContainer{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.myself_chat{
|
||||
.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;
|
||||
top:30px;
|
||||
right:80px;
|
||||
width: 170px;
|
||||
right: 0;
|
||||
}
|
||||
.layout_right>.chatItem_text>.chat_text{
|
||||
padding:10px 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #7ae1b6;
|
||||
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>
|
||||
Loading…
Reference in New Issue