<template>
<div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="display:flex;border: 1px solid #d7d7d7;width: 100%;">
         <div class="left_list">
           <div :class="index == msgListIndex ?'cardClick' :'card'" v-for="index in 10" @click="getMsg(index)">
               <div style="display:flex;justify-content: space-between; margin-bottom: 10px;">
                 <div class="name">我我去请问而且</div>
                 <div>2024-10-18 17:50:20</div>
               </div>
               <div class="const">这里是内容内容内容这里是内容内容内容这里是内容内容内容这里是内容内容内容</div>
           </div>
         </div>
         <div class="right_list"  v-if="msgListIndex!=null">
           <div class="title_name">我我去请问而且我我去请问而且我我去请问而且</div>
           <div class="neiBox">
              <div class="kehu">Chat Bubble</div>
              <div class="time">17:50:20</div>
           </div>
             <div class="zijiBox">
                <div class="ziji">Chat Bubble</div>
                <div class="time" style="text-align: right;">17:50:20</div>
             </div>

           <div class="footput">
             <el-input v-model="msg" placeholder="请输入" style="width:90%;margin-right: 15px;" />
             <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">发送
             </el-button>
           </div>
         </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg:'',
        msgListIndex:null,
        tableData:[]
      }
      },
      created() {

      },
      computed: {

      },
      methods: {
        getMsg(index){
           console.log(index)
           this.msgListIndex = index
        }
      }
    }
</script>

<style scoped>
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }

  .zhuti {
    padding: 20px;
    background-color: #fff;
  }

  /deep/ .el-form-item__content {
    width: 80%;
  }
  .left_list{
border-right: 1px solid #d7d7d7;
width: 25%;
height: 80vh;
 overflow-y: auto; /* 允许垂直滚动 */
  }
.right_list{
width: 75%;
height: 80vh;
position: relative;
 overflow-y: auto; /* 允许垂直滚动 */
}
.card{
  padding:20px;
  border-bottom:1px solid #d7d7d7 ;
}
.card:hover{
  background-color: #DEEBE2;
  color: #3F9B6A;
}

.cardClick{
  padding:20px;
  border-bottom:1px solid #d7d7d7 ;
  background-color: #3F9B6A;
  color: #fff;
}
.cardClick:hover{
 background-color: #3F9B6A;
  color: #fff;
}

/* 针对WebKit内核的浏览器（如Chrome和Safari）隐藏滚动条 */
.left_list::-webkit-scrollbar {
  display: none;
}

/* 对于Firefox，使用以下CSS属性隐藏滚动条 */
.left_list {
  scrollbar-width: none; /* Firefox 64 */
}
/* 针对WebKit内核的浏览器（如Chrome和Safari）隐藏滚动条 */
.right_list::-webkit-scrollbar {
  display: none;
}

/* 对于Firefox，使用以下CSS属性隐藏滚动条 */
.right_list {
  scrollbar-width: none; /* Firefox 64 */
}
.const{
  width:80%;
 white-space: nowrap; /* 防止文字换行 */
   overflow: hidden; /* 隐藏溢出的文字 */
   text-overflow: ellipsis; /* 显示省略号 */
}
.title_name{
  border-bottom:1px solid #d7d7d7;
  padding: 20px;
}
.neiBox{
  padding: 20px;
}
.zijiBox{
  padding: 20px;
align-content: flex-end;
    flex-wrap: wrap;
    flex-direction: column;
    display: flex;
}
.footput{
  display: flex;
  position: absolute;
  bottom:0;
  left:0;
  padding: 10px;
      width: 100%;
      align-items: center;
}
    .kehu {
      width: 30%; /* 假设消息框占据了屏幕宽度的80% */
        padding: 16px; /* 消息框内的内边距 */
        background-color: #F7F5F6; /* 蓝色背景 */
        color: #000; /* 白色文字 */
        position: relative; /* 为了定位右上角的表情符号 */
        font-size: 16px; /* 字体大小 */
        text-align: left; /* 文字左对齐 */
        /* 移除圆角 */
        border-radius: 0;
        /* 只给右上角添加圆角（如果需要的话，这里设置为0表示不添加） */
        border-top-right-radius: 22px; /* 可以根据需要调整或删除此行 */
        border-bottom-right-radius: 22px; /* 同上 */
        /* 只保留左下角的直角（实际上不需要特别设置，因为默认就是直角） */
        /* 但为了明确，我们可以设置其他三个角为0（如果之前设置了圆角的话） */
        border-top-left-radius: 40px;
        border-bottom-left-radius: 0; /* 左下角保持直角，这其实是默认值 */
        }
        .ziji{
          width: 30%; /* 假设消息框占据了屏幕宽度的80% */
            padding: 16px; /* 消息框内的内边距 */
            background-color: #3F9B6A; /* 蓝色背景 */
            color: white; /* 白色文字 */
            position: relative; /* 为了定位右上角的表情符号 */
            font-size: 16px; /* 字体大小 */
            text-align: left; /* 文字左对齐 */
            /* 移除圆角 */
            border-radius: 0;
            /* 只给右上角添加圆角（如果需要的话，这里设置为0表示不添加） */
            border-top-right-radius: 40px; /* 可以根据需要调整或删除此行 */
            border-bottom-right-radius: 0px; /* 同上 */
            /* 只保留左下角的直角（实际上不需要特别设置，因为默认就是直角） */
            /* 但为了明确，我们可以设置其他三个角为0（如果之前设置了圆角的话） */
            border-top-left-radius: 22px;
            border-bottom-left-radius:22px; /* 左下角保持直角，这其实是默认值 */
        }
.time{
padding:5px;
}
</style>
