technique_web2/src/views/chat/parts/chat.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one" v-if="_id"> 聊天记录</el-col>
        <el-col :span="24" class="two" v-else>
          <p>您还未选中或发起聊天，快去跟好友聊一聊吧</p>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const _id = inject('_id')
const list = inject('list')
</script>
<style scoped lang="scss">
.main {
  .one {
    height: 72vh;
    width: 100%;
    border-radius: 0 5px 5px 0;
    color: #a3a7ae;
  }
  .two {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
    width: 100%;
    border-radius: 0 5px 5px 0;
    color: #a3a7ae;
    font-size: 16px;
  }
}
</style>