fix:会话测试
This commit is contained in:
parent
a53c098ecc
commit
650bf99415
|
|
@ -1,14 +1,61 @@
|
|||
<template>
|
||||
<el-card style="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);">
|
||||
<el-container>
|
||||
<el-side style=" max-width: 260px;width: 260px;border-right: 1px solid #ddd;box-sizing: border-box;">
|
||||
<div style="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);">
|
||||
<div style="width: 100%;height: 100%;position: relative; background: #fff;border-radius: 6px;">
|
||||
<div style=" 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;">
|
||||
<main style="display: flex;flex-direction: column;min-height: 0;flex:1 1 0%">
|
||||
<el-button type="line" style="margin: 1rem;">新建聊天</el-button>
|
||||
<div style="padding-bottom: 1rem;overflow: hidden;flex: 1 1 0%;min-height: 0px;">
|
||||
<div style="overflow: hidden; position: relative;z-index: auto;height: 100%;width: 100%;padding: 0 1rem;"></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer style="padding: 1rem;border-top: 1px solid rgb(229, 231, 235);">
|
||||
<div style="align-items: center;display: flex;">
|
||||
<img style="width: 2.5rem;height: 2.5rem;border-radius: 50%;flex-shrink: 0;" src="img/icon_nbyg.png" alt="">
|
||||
<div style="font-weight: 700;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1 1 0%;min-width: 0px;margin-left: 0.5rem;"> {{ userName }}</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div style="padding-left: 260px;height: 100%;box-sizing: border-box;position: relative;z-index: auto;">
|
||||
<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>
|
||||
</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);">
|
||||
<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>
|
||||
|
||||
<!-- <el-container>
|
||||
<el-side style=" max-width: 260px;width: 260px;border-right: 1px solid #ddd;box-sizing: border-box;">
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header style="padding:0 6px 0 0;"></el-header>
|
||||
<el-main style="padding:0 6px 0 0;">
|
||||
<div style="display: flex;flex-direction: column;height: 100%;">
|
||||
<el-button type="line" style="margin: 1rem;">新建聊天</el-button>
|
||||
<div class="new_chat new_chat_text">
|
||||
<div class="false_img" style="border:1px solid rgb(75, 158, 95);border-radius:20% 20% 0 20%;color:rgb(75,158,95);">...</div>
|
||||
<div style="flex:8;color:rgb(75,158,95);">前端有哪些性能优化？</div>
|
||||
<div class="chat_list">
|
||||
<div class="chat_list_item" v-for="(item,index) in 10" :key="index">
|
||||
<div class="chat_list_item_icon" style="border:1px solid rgb(75, 158, 95);border-radius:20% 20% 0 20%;color:rgb(75,158,95);">...</div>
|
||||
<div class="chat_list_item_text" style="flex:8;color:rgb(75,158,95);">前端有哪些性能优化？</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
|
|
@ -19,6 +66,7 @@
|
|||
</div>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</div>
|
||||
</el-side>
|
||||
<el-main>
|
||||
<el-container>
|
||||
|
|
@ -27,7 +75,7 @@
|
|||
<div class="right_layout_myselfChat">
|
||||
<div id="datatime" style="flex:2;font-size:13px;color:lightgray"></div>
|
||||
<div style="flex:1">
|
||||
<div class="flase_img_son" style="width:40px;height:40px;"></div>
|
||||
<div class="user_icons" style="width:40px;height:40px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myself_chat">
|
||||
|
|
@ -44,8 +92,8 @@
|
|||
</el-footer>
|
||||
</el-container>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-card>
|
||||
</el-container> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import xSelects from "@/components/xtSelect/index2.vue";
|
||||
|
|
@ -67,20 +115,12 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.left_layout {
|
||||
flex: 1;
|
||||
border-right: 1px solid lightgray;
|
||||
}
|
||||
|
||||
.right_layout {
|
||||
flex: 6;
|
||||
}
|
||||
|
||||
.father_icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.son_icon {
|
||||
.icons {
|
||||
background-color: white;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
|
|
@ -92,49 +132,22 @@ export default {
|
|||
color: gray;
|
||||
}
|
||||
|
||||
.son_icon_display {
|
||||
.icons_display {
|
||||
top: 48vh;
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.son_icon_hideen {
|
||||
.icons_hideen {
|
||||
top: 48vh;
|
||||
left: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.new_chat {
|
||||
cursor: pointer;
|
||||
border: 1px solid lightgray;
|
||||
padding: 10px 20px;
|
||||
margin: 20px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.new_chat_text {
|
||||
border: 1px solid rgb(75,158,95);
|
||||
border: 1px solid #4b9e5f;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left_person {
|
||||
width: 100%;
|
||||
padding: 1vh 20px;
|
||||
/* margin:20px 10px; */
|
||||
position: absolute;
|
||||
top: 90vh;
|
||||
border-top: 1px solid lightgray;
|
||||
}
|
||||
|
||||
.false_img {
|
||||
/* background:linear-gradient(-135deg,#0c80cc,#009dff); */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.false_img_right {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.flase_img_son {
|
||||
.user_icons {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(-135deg, #0000cc, #009dff);
|
||||
|
|
@ -165,11 +178,10 @@ export default {
|
|||
border-radius: 1px;
|
||||
color:white;
|
||||
}
|
||||
.ipt{
|
||||
width:85vh;
|
||||
margin:10px 20px;
|
||||
padding:10px 20px;
|
||||
border:1px solid lightgray;
|
||||
.search_input{
|
||||
width: 100%;
|
||||
padding:0.5rem 1rem;
|
||||
/* border:1px solid lightgray; */
|
||||
}
|
||||
.right_layout_myselfChat{
|
||||
width:200px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue