test/HuLa
1
0
Fork 0
mirror of https://gitee.com/HuLaSpark/HuLa.git synced 2024-11-30 02:38:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🌻 update(custom): 更新主页消息列表样式

Browse Source
This commit is contained in:
nongyehong 2024-01-22 06:31:41 +08:00
parent bf94200394
commit 910a6c49d9
2 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/center/index.vue
View File

@ -5,7 +5,7 @@
<div class="resize-handle" @mousedown="initDrag"></div> <div class="resize-handle" @mousedown="initDrag"></div>
<!-- 顶部搜索栏 --> <!-- 顶部搜索栏 -->
<div class="mt-30px w-full h-50px flex flex-col items-center"> <div class="mt-30px w-full h-40px flex flex-col items-center">
<div class="flex-center gap-5px w-full pr-16px pl-16px box-border"> <div class="flex-center gap-5px w-full pr-16px pl-16px box-border">
<n-input <n-input
:on-focus="() => router.push('/searchDetails')" :on-focus="() => router.push('/searchDetails')"
@ -27,7 +27,7 @@
</div> </div>
<!-- 消息列表 --> <!-- 消息列表 -->
<div class="wh-full"> <div class="h-full flex-1 pr-8px pl-6px">
<router-view /> <router-view />
</div> </div>
</div> </div>

29
src/views/page/home-window/Message.vue
View File

@ -1,6 +1,31 @@
<template> <template>
<div>消息页面</div> <div class="w-full h-75px bg-#d8eee2 rounded-8px">
<div class="flex items-center h-full pl-6px pr-8px gap-10px">
<img class="w-44px h-44px rounded-50% bg-#fff" style="border: 1px solid #f1f1f1" src="/logo.png" alt="" />
<div class="w-full h-38px flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-size-14px">宝贝🍓</span>
<span class="font-size-10px color-#808080">昨天</span>
</div>
<div class="flex items-center justify-between">
<p
class="w-135px font-size-12px color-#808080"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
说的很经典哈萨克的哈萨克看到贺卡上
</p>
<div class="w-16px max-w-30px h-16px bg-#ccc rounded-40px font-size-10px flex-center font-bold color-#f1f1f1">
{{ msgTotal }}
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"></script> <script setup lang="ts">
const msgTotal = ref('99+')
</script>
<style scoped></style> <style scoped></style>