zcb_APP/pages/myMessage/chat.vue

<template>
  <view class="content">
    <view class="w h-88 flex ai_center jc_center mgt-88 p-rel">
      <image
        @click="$navBack()"
        class="w-48 h-48 abs_left"
        style="left: 32rpx"
         src="/static/image/common/left_arrow_icon.png"
        mode="scaleToFill"
      />
      <view class="text-36 text-500 text-070202">用户昵称123</view>
    </view>

    <view class="message-box pdx-32">
      <view class="w flex fd_c ai_center" v-for="item in 5" :key="item">
        <view class="text-20 text-500 text-B9B9B9 mgt-32 mgb-32">
          2025/08/8 16：00
        </view>

        <view class="ims_item w flex ai_center mgb-24">
          <view class="ims_head">
            <image
              class="w-80 h-80 radio-circle"
              src="/static/image/my/my_default_avatar.png"
              mode="scaleToFill"
            />
          </view>
          <view class="ims_conten ims_conten_left mgl-16"
            >这是一条消息内容</view
          >
        </view>

        <view class="ims_item w flex ai_center jc_end mgb-24">
          <view class="ims_conten ims_conten_right mgl-16"
            >这是一条消息内容</view
          >

          <view class="ims_head">
            <image
              class="w-80 h-80 radio-circle"
              src="/static/image/my/user_avatar_80.png"
              mode="scaleToFill"
            />
          </view>
        </view>

        <view class="text-20 text-500 text-B9B9B9 mgt-32 mgb-32"> 16：00 </view>

        <view class="ims_item w flex ai_center mgb-24">
          <view class="ims_head">
            <image
              class="w-80 h-80 radio-circle"
              src="/static/image/my/my_default_avatar.png"
              mode="scaleToFill"
            />
          </view>
          <view class="ims_conten ims_conten_left mgl-16"
            >这是最新一条消息内容</view
          >
        </view>
      </view>
    </view>

    <view class="input_box">
      <u--input class="input" placeholder="请输入消息内容">
        <template slot="suffix">
          <image
            class="w-48 h-48 radio-circle"
            src="/static/image/my/emoji_icon.png"
            mode="scaleToFill"
          />
        </template>
      </u--input>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .message-box {
    flex: 1;
    // background-color: #d2d1d1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding-bottom: 800rpx;
  }
}

.ims_conten {
  display: inline-flex;
  height: 80rpx;
  padding: 20rpx 24rpx;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  flex-shrink: 0;
  border-radius: 0 24rpx 24rpx 24rpx;

  text-align: center;
  font-family: "MiSans VF";
  font-size: 32rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.66rpx;
}

.ims_conten_left {
  color: #070202;
  background: #f3f4f4;
}

.ims_conten_right {
  color: #ffffff;
  background: #fe6505;
}

.input_box {
  width: 100vw;
  padding: 0 32rpx;
  padding-top: 16rpx;
  padding-bottom: 84rpx;
  background-color: #fff;
  box-shadow: 0 -12rpx 24rpx 0 #0000000a;

  .input {
    width: 100%;
    height: 80rpx;
    flex-shrink: 0;
    border-radius: 64rpx;
    background: #f6f6f6;
    font-family: "MiSans VF";
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 40rpx;
    letter-spacing: 0.66rpx;
  }
}
</style>