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}>
                    <SearchBar
                        placeholder="输入事项名称或者关键字"
                        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 (
                            <div
                                key={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;
        }
    }

}