Browse Source

add:完整版 消息推送样式 + 模拟数据 缺接口

zhangrenyuan/feature-20251104133449-现金管理二期
lihui 3 weeks ago
parent
commit
4ca48c064f
  1. 29
      src/views/home.vue

29
src/views/home.vue

@ -184,6 +184,8 @@ const closeMessageDialog = () => {
const messageList = ref([ const messageList = ref([
{id: 1, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '2分钟前', group: '今天'}, {id: 1, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '2分钟前', group: '今天'},
{id: 2, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '1小时前', group: '今天'}, {id: 2, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '1小时前', group: '今天'},
{id: 2, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '1小时前', group: '今天'},
{id: 2, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '1小时前', group: '今天'},
{id: 3, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '昨天 09:30', group: '昨天'}, {id: 3, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '昨天 09:30', group: '昨天'},
{id: 4, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '昨天 08:30', group: '昨天'}, {id: 4, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '昨天 08:30', group: '昨天'},
{id: 5, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'}, {id: 5, title: '现金管理—收款明细', desc: 'XXX(用户)的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
@ -263,11 +265,12 @@ const scrollToTop = () => {
scrollContainer.value?.scrollTo({top: 0, behavior: 'smooth'}) scrollContainer.value?.scrollTo({top: 0, behavior: 'smooth'})
} }
import goTop from '@/assets/SvgIcons/go-top.svg'
</script> </script>
<template> <template>
<div class="main-container"> <div class="main-container">
<iframe src="http://192.168.40.8:8081/Money/ceshi" style="display:none"></iframe>
<!-- 背景毛玻璃层作为内容容器 --> <!-- 背景毛玻璃层作为内容容器 -->
<div class="background-glass"> <div class="background-glass">
<!-- 侧边栏 --> <!-- 侧边栏 -->
@ -469,10 +472,13 @@ const scrollToTop = () => {
前往查看 前往查看
</el-button> </el-button>
</div> </div>
<el-divider
style="height: 1px; align-self: stretch;flex: 1;background: #CEE5FE; border: none;"
></el-divider>
</div> </div>
<!-- 控制按钮 --> <!-- 控制按钮 -->
<div class="message-actions">
<div>
<el-button <el-button
type="text" type="text"
class="view-all" class="view-all"
@ -481,8 +487,14 @@ const scrollToTop = () => {
{{ showAll ? '收起' : '查看全部' }} {{ showAll ? '收起' : '查看全部' }}
</el-button> </el-button>
<image src="@" @click="scrollToTop" style="width: 20px; height: 20px;"/>
返回顶部
<div v-if="showAll" @click="scrollToTop" class="go-top">
<el-image
:src="goTop"
style="width: 20px; height: 20px;"
fit="contain"
/>
<span>返回顶部</span>
</div>
</div> </div>
</div> </div>
@ -775,5 +787,14 @@ const scrollToTop = () => {
background-color: #CEE5FE;; background-color: #CEE5FE;;
} }
/* 返回最上*/
.go-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: pointer;
padding: 8px;
}
</style> </style>
Loading…
Cancel
Save