antd 走马灯案例

import React from 'react'
import styles from './style.less'
import { AntCloudOutlined, AccountBookOutlined } from '@ant-design/icons';
import { Carousel } from 'antd'
const data = [{ name: '羽神', money: -20000, wage: 6000, consume: 7000 },{ name: '陈笑豪', money: 800, wage: 1000, consume: 1200 },{ name: '赵老威', money: 1300, wage: 14000, consume: 12800 },{ name: '铜锣湾扛把子', money: 8700, wage: 7200, consume: 7000 },{ name: '少主', money: 7000, wage: 4500, consume: 3200 },{ name: '街口', money: -10000, wage: 4000, consume: 4800 },{ name: '老羊', money: 320, wage: 0, consume: 2400 },{ name: '孙浩', money: 10000, wage: 8000, consume: 4000 },{ name: '郭帅', money: 100000, wage: 12000, consume: 8000 },
]
const split_array = (arr, length) =>
{  // arr 是需要拆分的数组 length 是要拆分小数组的数量let a_length = arr.lengthlet result = []  // 结果数组for (let i = 0; i < a_length; i += length)  {result.push(arr.slice(i, i + length))  // 循环遍历原数组的 N 个元素 每次取从上次取的下一个开始取}return result  // 把结果数组 return
}const itemDom = () =>
{let newData = split_array(data, 4)  // 每四个数组截取一个大数组return (// autoplay 自动播放  autoplaySpeed 播放间隔 5S<Carousel autoplay autoplaySpeed={5000} >{newData.map((item, index) =>{return <div key={index} className={styles.coreItemContainer}>{item.map((data, i) =>{return (<div key={i} className={styles.coreItem}><div className={styles.itemNav}><span className={styles.navTitle}>{data.name}</span><span className={styles.NavRound}></span></div><div className={styles.coreDetails}><div className={styles.detection}><span className={styles.detectionTitle}>金钱</span><span style={{ color: 'rgba(255, 255, 255, 1)' }} className={styles.detectionNumber}>{data.money}</span><span className={styles.detectionUnit}><AccountBookOutlined /></span></div><div className={styles.detection}><span className={styles.detectionTitle}>工资</span><span className={styles.detectionNumber}>{data.wage}</span><span className={styles.detectionUnit}><AccountBookOutlined /></span></div><div className={styles.detection}><span className={styles.detectionTitle}>消费</span><span style={{ color: 'rgba(255, 185, 128, 1)' }} className={styles.detectionNumber}>{data.consume}</span><span className={styles.detectionUnit}><AccountBookOutlined /></span></div></div></div>)})}</div>})}</Carousel>)
}
const index = () =>
{return (<div className={styles.container}><div className={styles.overall}><div className={styles.navBar}><div className={styles.navBarImg}><AntCloudOutlined className={styles.AntCloudOutlined} /></div><span className={styles.navBarSpan}>后陈荣耀</span></div><div className={styles.core}>{itemDom()}</div></div></div>)
}export default index

CSS

.container {position: relative;width: 100%;height: 100%;line-height: 1;text-align: center;.overall {margin: 200px auto;position: relative;width: 1000px;height: 276px;border-radius: 4px;box-sizing: border-box;background-color: hsl(214, 46%, 34%);line-height: 1.45;}img {width: 100%;height: 100%;}
}.navBar {display: flex;align-items: center;width: 100%;height: 60px;background: linear-gradient(0deg, #1B478F 0%, #151F2D 100%);.navBarImg {margin-left: 22px;width: 34px;height: 34px;.AntCloudOutlined {font-size: 34px;color: #fff;}}.navBarSpan {margin-left: 9px;font-size: 30px;font-weight: 600;color: #FFFFFF;text-shadow: 0px 2px 2px #1A86FF;background: linear-gradient(0deg, rgba(90, 203, 255, 1) 0%, rgba(26, 134, 255, 1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
}.core {padding-top: 20px;width: 100%;height: calc(~'100% - 60px');text-align: left;.coreItemContainer {position: relative;.coreItem {display: inline-block;margin-left: 20px;padding: 13px 20px 0 20px;width: 226px;height: 155px;border: 1px solid #002E55;background: linear-gradient(0deg, #00437D 0%, #005192 100%);border-radius: 6px;.itemNav {display: flex;align-items: center;justify-content: space-between;font-size: 22px;font-weight: 500;color: #FFFFFF;width: 100%;height: 22px;.navTitle {font-size: 22px;font-weight: 500;color: #FFFFFF;}.NavRound {width: 14px;height: 14px;background: #00FF00;border-radius: 50%;}}}}.coreDetails {display: flex;flex-direction: column;margin-top: 16px;width: 100%;height: 96px;overflow: hidden;line-height: 32px;.detection {display: flex;justify-content: space-between;.detectionTitle {font-size: 18px;color: rgba(195, 240, 255, 1);}.detectionNumber {font-family: DINPro !important;flex: 1;text-align: right;font-size: 24px;color: rgba(0, 192, 255, 1);}.detectionUnit {width: 17px;margin-left: 10px;color: rgba(195, 240, 255, 1);}}}
}:global {.ant-carousel .slick-dots li.slick-active button {// 选中状态width: 12px;height: 12px;background: #00CCFF;border-radius: 50%;}.ant-carousel .slick-dots li.slick-active {// 选中向上1像素margin-top: -1px;}//   .ant-carousel .slick-dots li {//     margin-left: 3px !important;//     margin-right: 3px !important;//   }.ant-carousel .slick-dots li button {// 未选中的width: 12px;height: 12px;background: rgb(0, 204, 255, .4);border-radius: 50%;}.ant-carousel .slick-dots-bottom {// 切换位置bottom: -33px;}.ant-carousel .slick-dots li {position: relative;display: inline-block;-ms-flex: 0 1 auto;flex: 0 1 auto;box-sizing: content-box;width: 12px;height: 3px;margin: 0 2px;margin-right: 3px;margin-left: 3px;padding: 0;text-align: center;text-indent: -999px;vertical-align: top;// transition: all 0.5s;}.ant-carousel .slick-dots li.slick-active {width: 12px;}
}

antd 走马灯案例相关推荐

antd走马灯组件自定义前进后退按钮
antd走马灯组件自定义前进后退按钮[ts + react] antd的Carousel没有提供前进后退按钮需要自己根据文档实现此功能官方提供了next 和prev两个方法 next() 切换到下 ...
antd 轮播图样式_React - AntD 走马灯组件前后切换面板
1.先用AntD的图标来当做轮播图点击的两个按钮,并将Carousel与按钮放在一个父级下. 轮播图切换按钮 (this.slider = el)}> 1 2 3 4 2.轮播图的配置lunbo ...
antd走马灯切换到相应图片
1.先绑定这个方法到ref: 2.然后this.slider && this.slider.innerSlider.slickGoTo(pIndex);就可以跳转到相应页面,文档理的g ...
3小时快速入门html5+css(2022)
字体图标-iconfont 1.引入样式表 2.引入内容 <link rel="stylesheet" href="./iconfont/iconfont.css& ...
React_cli路由
官方脚手架安装 npm方式 npm install -g create-react-app create-react-app my-app npx方式 npx create-react-app my ...
react+antd实现图片上传并且剪裁（请参照最新文章，此案例有bug）
代码详情 (存在的bug:只有第一次上传剪裁是正确的,在不刷新页面的情况下再次进行剪裁会出现错误,目前没有找到解决办法.) 解决办法:点击上传按钮完成上传之后,按钮变为不能点击的状态,阻止bug的发生 ...
vue框架根据antd封装的走马灯组件
文章目录 CheckPhotos.vue PhotosBoard.vue 引用 CheckPhotos.vue <template><div class="check-ph ...
Ant Design 3.0 使用案例
代码地址如下: http://www.demodashi.com/demo/12309.html 本文适合对象有过React使用经验. 有过webpack使用经验. 了解node. DEMO使用方式 ...
《大型网站技术架构：核心原理与案例分析》笔记05
<大型网站技术架构:核心原理与案例分析>笔记05 网站的课扩展性架构: 扩展性:指对现有系统影响最小的情况下,系统功能可持续扩展或提升的能力.表现在系统基础设施稳定不需要经常变更,应用之间 ...

antd 走马灯案例

antd 走马灯案例相关推荐

最新文章

热门文章