chat-app/src/pages/index/index.vue

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar :hideBack="false" hideHome :title="123"> </tm-navbar>
    </div>
    <div class="root">
      <div class="searchRoot">
        <tm-input placeholder="请输入…" color="#F9F9FD" :round="1" prefix="tmicon-search" prefixColor="#46299D" ></tm-input>
      </div>
      <div class="contentRoot">
        <div class="chatItem" >
          <div class="avatarImg">
            <tm-image preview :width="96" :height="96" :src="userInfo.Avatar"></tm-image>
          </div>
          <div class="chatInfo" >
            <div class="chatInfo_1" >
              <div class="flex items-center">
                <div class="text-[#000000] text-[32rpx] font-bold opacity-90" >泰丰国际（600）</div>
                <div>
                  <div class="companyTag" >公司</div>
                </div>
              </div>
              <div class="text-[#000000] text-[28rpx] font-medium opacity-26" >12:00</div>
            </div>
            <div class="chatInfo_2 w-full mr-[6rpx]">
              <div class="w-full chatInfo_2_1 textEllipsis" >欢迎加入欢迎加入欢迎加入欢迎加入欢迎加入欢迎加入欢迎加入欢迎加入</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useChatList } from "@/store/chatList/index.js";
import {useAuth} from "@/store/auth";

const {userInfo}=useAuth()

</script>
<style scoped lang="scss">
.outer-layer {
  overflow-y: auto;
  flex: 1;
  background-image: url("@/static/image/clockIn/z3280@3x.png");
  background-size: cover;
  padding: 0 32rpx 20rpx 32rpx;
  display: flex;
  flex-direction: column;
}
.root {
  flex: 1;
  padding: 20rpx 0;
}
.searchRoot {
  background-color: #fff;
  padding: 22rpx 18rpx;
}
.contentRoot {
  margin-top: 20rpx;
  background-color: #fff;
}
.chatItem{
  width: 100%;
  padding: 30rpx 16rpx;
  display: flex;
  align-items: center;
}
.avatarImg{
  height: 96rpx;
  width: 96rpx;
}
.chatInfo{
  flex:1;
  margin-left: 20rpx;
}
.chatInfo_1{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chatInfo_2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6rpx;
}
.chatInfo_2_1{
  font-size: 28rpx;
  color: #000000;
  opacity: 40%;

}
.companyTag{
  width: 76rpx;
  height: 38rpx;
  border: 1px solid #7A58DE;
  font-size: 24rpx;
  text-align: center;
  border-radius: 6rpx;
  color: #7A58DE;
  font-weight: bold;
}
.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>