react+antdMobie实现消息通知页面样式

一、实现效果

二、代码

import React, { useEffect, useState } from 'react';
import style from './style/index.less';
import { CapsuleTabs, Ellipsis, Empty, SearchBar, Tag } from 'antd-mobile';
//消息通知页面
export default function Notification(props) {const [options, setOptions] = useState([{label: '最近',value: 'zj',checked: true,},{label: '评审通知',value: 'pstz',checked: false,},{label: '政策制度',value: 'zczd',checked: false,},{label: '知识库',value: 'zsk',checked: false,},{label: '常见问题',value: 'cjwt',checked: false,},]);const [list, setList] = useState([{title: '通知公告名称1111',ywlx: 'pstz',content: '公告简介:公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介介公告简介公告简介公告简介公告简介',},{title: '通知公告名称1111',ywlx: 'zczd',content: '公告简介:公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介介公告简介公告简介公告简介公告简介',},{title: '通知公告名称1111',ywlx: 'zsk',content: '公告简介:公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介介公告简介公告简介公告简介公告简介',},{title: '通知公告名称1111',ywlx: 'cjwt',content: '公告简介:公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介介公告简介公告简介公告简介公告简介',},{title: '通知公告名称1111',ywlx: 'pstz',content: '公告简介:公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介公告简介介公告简介公告简介公告简介公告简介简介公告简介公告简简介公告简介公告简简介公告简介公告简',},]);const [checkedList, setCheckedList] = useState([]);useEffect(() => {setCheckedList(list);}, [props]);//切换条件const toggle = (item, index) => {const element = document.getElementById('option');if (element) {element.scroll({top: 0,left: 50 * Number(index), // 计算目标位置behavior: 'smooth',});}const newoptions = options.map((res) => {return {...res,checked: res == item,};});setOptions(newoptions);toggleList(item);};const toggleList = (item) => {if (item.value == 'zj') {setCheckedList(list);} else {const newList = list.filter((res) => {return res.ywlx == item.value;});setCheckedList(newList);}};return (<><div className={style.container}><div className={style.top}><SearchBarplaceholder="输入事项名称或者关键字"className={style.search}style={{'--background': 'rgba(255, 255, 255, 0.35)','--height': '32px','--placeholder-color': 'rgba(255, 255, 255, 0.65)',}}/></div><div className={style.option} id="option">{options.map((item, index) => {return (<divkey={index}className={`${item.checked ? style.checked : style.block}`}onClick={() => {toggle(item, index);}}>{item.label}</div>);})}</div><div className={style.content}>{checkedList.map((item, index) => {return (<div key={index} className={style.card}><div style={{ display: 'flex', alignItems: 'center', borderBottom: '1px solid #979797' }}>{item.ywlx == 'pstz' && <Tag color="#2db7f5">评审通知</Tag>}{item.ywlx == 'zczd' && <Tag color="#1ac4c4">政策制度</Tag>}{item.ywlx == 'zsk' && <Tag color="#87d068">知识库</Tag>}{item.ywlx == 'cjwt' && <Tag color="#cf1322">常见问题</Tag>}<span className={style.title}>{item.title}</span></div><div className={style.desc}><Ellipsis direction="end" content={item.content} rows={2} /></div></div>);})}{checkedList.length == 0 && <Empty style={{ padding: '64px 0' }} imageStyle={{ width: 128 }} description="暂无数据" />}</div></div></>);
}

三、css样式

::-webkit-scrollbar {width: 0px;
}.container {height: 100vh;width: 100%;overflow-y: auto;overflow-x: hidden;position: fixed;font-size: 14px;.top {background-color: #BF120D;height: 90px;display: flex;align-items: center;.search {width: 95%;margin: auto;padding-top: 20px;}}.option {display: flex;align-items: center;overflow-x: auto;min-height: 70px;.block {color: #979797;font-weight: 400;border-radius: 6px;border: 1px solid #979797;margin: 0px 10px;padding: 5px 10px;min-width: 100px;text-align: center;}.checked {color: #fff;background-color: #BF120D;font-weight: 400;border-radius: 6px;border: 1px solid #BF120D;margin: 0px 10px;padding: 5px 10px;min-width: 100px;text-align: center;position: relative;}.checked::after {content: '';position: absolute;left: 50%;bottom: -10px;/* 小箭头的位置调整 */width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #BF120D;/* 小箭头的颜色 */transform: translateX(-50%);}}.content {position: relative;margin-bottom: 10%;.card {padding: 10px;border-radius: 8px;margin: 10px auto;width: 96%;background-color: #fff;display: flex;align-items: center;.title {font-weight: 600;display: flex;align-items: center;line-height: 0.3rem;font-size: 0.18rem;}.sj {text-align: end;color: #999;}}}// 消息明细.detail_content {padding: 10px;background-color: #fff;.title {font-size: 0.16rem;font-weight: 700;line-height: 0.4rem;text-align: center;}.qt {display: flex;align-items: center;justify-content: space-between;color: #999;line-height: 0.4rem;}}}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/55312.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python办公自动化案例:批量修改Word文件中的段落格式

案例:Python实现批量修改Word文件中的段落格式。 在处理大量Word文档时,经常需要批量修改这些文档的格式,比如统一段落格式,以提升文档的一致性和专业性。使用Python来实现这一任务可以极大地提高工作效率,特别是当涉及到数百或数千个文档时。Python通过第三方库如python…

vue3 antdv3/4 Modal显示一个提示,内容换行显示。

1、官网地址&#xff1a; Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 2、显示个信息&#xff1a; Modal.info({title: This is a notification message,content: h(div, {}, [h(p, some messages...some messages...),h(p, some …

PHP语言发展历程

PHP是一种开源的服务器端脚本语言&#xff0c;主要用于Web开发&#xff0c;最初由Rasmus Lerdorf在1994年创建。PHP的发展历程如下&#xff1a; PHP的起源&#xff1a;1994年&#xff0c;Rasmus Lerdorf创建了PHP的第一个版本&#xff0c;最初是一套用于跟踪他个人简历访问的C…

利用 Local Data 导入文件到 OceanBase 的方法

背景 在很多传统方法中&#xff0c;数据的传输常依赖于csv格式。为了提高传输效率&#xff0c;属于同一张表的多个csv文件往往会被打包成gz文件进行传输。 当gz文件从上游传递到下游后&#xff0c;为了将其中的csv数据导入数据库&#xff0c;一种直接的做法是&#xff1a; 1…

828华为云征文|部署音乐流媒体服务器 mStream

828华为云征文&#xff5c;部署音乐流媒体服务器 mStream 一、Flexus云服务器X实例介绍二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置2.4 Docker 环境搭建 三、Flexus云服务器X实例部署 mStream3.1 mStream 介绍3.2 mStream 部署3.3 mStream 使用 四、…

centos一些常用命令

文章目录 查看磁盘信息使用 df 命令使用 du 命令 查看磁盘信息 使用 df 命令 df&#xff08;disk free&#xff09;命令用于显示文件系统的磁盘空间占用情况。 查看所有挂载点的磁盘使用情况&#xff1a; df -h选项说明&#xff1a; -h 参数表示以人类可读的格式&#xff0…

Ubuntu VSCode Docker 权限

文章目录 报错 permission denied处理 报错 permission denied ERROR: permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head "http://%2Fvar%2Frun%2Fdocker.sock/_ping": dial unix /var/run/docker.soc…

CSV数据行(取值)的列数多于表头字段数-Pandas无法正常读取

CSV数据行(取值)的列数多于表头字段数-Pandas无法正常读取 问题描述&#xff1a;在使用Pandas正常读取csv文件时&#xff0c;报错提示“ ParserError: Error tokenizing data. C error: Expected 460 fields in line 3363, saw 472”。也就是数据行的值个数多于表头字段个数。…

【学习笔记】手写 Tomcat 七

目录 一、优化 Dao 1. 设置 UserDaoImpl 为单例模式 2. 创建 Dao 工厂 3. 在 Service 层获取 UserDao 的实例 二、优化 Service 1. 设置 UserServiceImpl 为单例模式 2. 创建 Service 工厂 3. 在 Servlet 层获取 Service 实现类的对象 三、优化 Servlet 1. 使用配置…

NAND Flash虚拟层坏块管理机制

NAND Flash虚拟层坏块管理机制包括再判断坏块、坏块有效数据恢复、写入坏块标志等操作; 坏块管理(LML_BadBlkManage())LML_BadBlkManage()函数首先获取新的空闲块用来代替坏块,再将坏块中的有效数据拷贝到空闲块中(恢复坏块中的有效数据),最后往坏块中写入坏块标志,再写入…

Leetcode面试经典150题-322.零钱兑换

给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额&#xff0c;返回 -1 。 你可以认为每种硬币的数量是无限的。 示…

cas5.3统一登录前后端分离改造方案(源码)

cas5.3 为什么选择cas5.3 版本 5.3 版本是最新的支持jdk8 的版本&#xff0c;并且项目架构基于maven &#xff0c;商业项目中jdk8 仍是主流&#xff0c;在考虑商业收益的情况下&#xff0c;如果客户不要求&#xff0c;不会升级jdk, 基于Maven的项目比gradle 简单&#xff0c;…

【无人机设计与控制】Multi-UAV|多无人机多场景路径规划算法MATLAB

摘要 本研究探讨了多无人机路径规划问题&#xff0c;提出了三种不同算法的对比分析&#xff0c;包括粒子群优化&#xff08;PSO&#xff09;、灰狼优化&#xff08;GWO&#xff09;和鲸鱼优化算法&#xff08;WOA&#xff09;。利用MATLAB实现了多场景仿真实验&#xff0c;验证…

【WSL——Windows 上使用 Linux 环境】

引入 以前在windows上使用linux工具链&#xff0c;一般都要安装虚拟机&#xff08;VMware/virtualBox)。虚拟机的缺点是&#xff0c;因为是完整的虚拟环境&#xff0c;消耗系统资源比较多。 windows自己开发了WSL功能&#xff0c;实现了虚拟机的功能&#xff0c;但是比虚拟机性…

深度学习技术在流体力学中的应用与实操培训【1/3理论课程2/3实操课程】

智能流体力学及其仿真技术应用实战 前沿背景 在当今科学技术快速发展的背景下,流体力学和计算流体力学(CFD)正经历着深刻的变革。传统的流体仿真技术已无法满足日益复杂和高精度的工程需求,而深度学习和人工智能技术的飞速进步,为流体力学的研究和应用提供了新的解决方案…

使用Python实现深度学习模型:智能数据隐私保护

随着数据隐私问题的日益严重,如何在深度学习模型中保护用户数据成为了一个重要的研究方向。本文将介绍如何使用Python实现一个深度学习模型,同时采用差分隐私技术来保护数据隐私。 一、数据隐私保护的背景 在深度学习中,模型通常需要大量的数据进行训练,这些数据可能包含…

BSS是什么

终端能够连上该BSS&#xff0c;主要取决于几个关键因素&#xff0c;包括无线网络的设置、终端设备的配置以及环境条件等。以下是一些详细的步骤和要点&#xff1a; 1. 确保无线网络&#xff08;BSS&#xff09;已正确设置 SSID&#xff08;服务集标识符&#xff09;&#xff…

C++那些事之内存优化

C那些事之内存优化 通常程序运行时内存是一个比较大的问题&#xff0c;如何减少内存占用和提升访问速度是至关重要。为了解决这些问题&#xff0c;C20 引入了 no_unique_address 特性&#xff0c;并结合空基类优化&#xff08;EBO, Empty Base Optimization&#xff09;&#x…

安全运营 -- GPO审计

0x00 背景 审计GPO&#xff0c;目的是审计哪些GPO权限分配不合理&#xff0c;包括但不限于审计预期以外的用户具有对GPO的写权限。 0x01 开启审核 在一台windows服务器上 开始 -- 运行 -- 输入 server manager 依次点击Manage -- Add Roles and Features Wizard 角色和功能…

组合优化与凸优化 学习笔记5 对偶拉格朗日函数

有的时候约束条件有点难搞&#xff0c;我们可以把它放到目标函数里面。 记得之前凸函数的时候的结论吗&#xff1f;一大堆函数&#xff0c;每一段都取最大的&#xff0c;最后会得到一个凸函数。同理&#xff0c;每一段都取最小的&#xff0c;得到的是一个凹函数。就这样&#x…