heshanApp/pages_im/pages/conversation/chating/components/MessageItem/CardMessageRender.vue

<template>
  <view @click="toUserInfo" class="card_message_container">
    <view class="card_info">
      <my-avatar
        :src="message.cardElem.faceURL"
        :desc="message.cardElem.nickname"
        size="42"/>
      <text class="card_name">{{ message.cardElem.nickname }}</text>
    </view>
    <view class="card_desc">
      <text>名片</text>
    </view>
	
  </view>
</template>

<script>
import MyAvatar from "../../../../../components/MyAvatar/index.vue";
export default {
  name: "CardMessageRender",
  components: {
    MyAvatar,
  },
  props: {
    message: Object,
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    toUserInfo() {
      this.$emit('enterSubPage');
      uni.navigateTo({
        url: `/pages_im/pages/common/userCard/index?sourceID=${this.message.cardElem.userID}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card_message_container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12rpx;
  width: 444rpx;
  border-width: 1px;
  border-style: solid;
  border-color: #ececec;
}

.card_info {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e9e9e9;
}

.card_name {
  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 24rpx;
  font-size: 16px; /* 补充可能的默认字体大小 */
}

.card_desc {
  padding: 8rpx 0 8rpx 42rpx;
  color: #999;
}
</style>