<template>
  <div style="height: calc(100vh - 50px)" class="w-full bg-[#F7F8FA]">
    <div v-for="(item, index) in [1, 2, 3, 5]" @click="onChatPage('0')" :key="index" class="w-full">
      <p class="w-full pt-16 mb-12 text-center text-black-9 text-sm">{{ '2001/09/24 20:22' }}</p>
      <div class="w-[91.2%] box-border h-103 mx-16 bg-white p-16">
        <h1 class="text-black w-full line-clamp-1 text-2xl font-semibold mb-8">
          {{ item?.title ? item?.title : '标题标题' }}
        </h1>
        <p class="line-clamp-2 w-full leading-3xl text-black-9 text-sm">
          {{ 'ssss' }}
          大苏打实打实科技大厦十八号大家开始电话卡设计的哈克阿坎德哈吉斯等哈考试大纲啊大噶说的话噶是售价高达九十
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
useSeoMeta({
  title: '系统消息'
})
// 跳转聊天页面
const onChatPage = (query) => {
  navigateTo({
    path: `/profile/system-message/details?id=${query}`
  })
}
</script>

<style lang="scss" scoped></style>
