swiper

package.json

@@ -62,8 +62,10 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.8.6",
+    "react-slick": "^0.25.2",
     "react-zmage": "^0.8.5",
     "redux": "^4.0.1",
+    "swiper": "^5.3.6",
     "umi": "^2.13.3",
     "umi-plugin-pro-block": "^1.3.2",
     "umi-plugin-react": "^1.9.5",

src/pages/Welcome.jsx

@@ -3,6 +3,7 @@ import { Card, Typography, Alert, Row, Col } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import EchartsTest from '../components/EchartsTest';
 import IndexEcharts from './indexEcharts/index';
+import Swiper from './swiper/index';
 import router from 'umi/router';
 import request from '../utils/request';
 import apis from '../services/apis';
@@ -63,11 +64,12 @@ const welcome = (props) => {
             boxShadow: '0px  0.106rem 14px -15px rgba(107,130,230,1)',
             borderRadius: '12px', width: '32%',
           }}>
-            <span style={{ fontSize: '24px', color: '#fff', borderBottom: '1px solid #fff', margin: '30px 0',cursor: 'pointer' }}>最近7天新增 </span>
+            <span style={{ fontSize: '24px', color: '#fff', borderBottom: '1px solid #fff', margin: '30px 0', cursor: 'pointer' }}>最近7天新增 </span>
             <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy', lineHeight: '100px' }}>{data.selectRecentlyCount || '0'}</span>
           </div>
         }
       </div>
+      <Swiper />
       <IndexEcharts style={{ width: '100%' }} onReData={(e) => redata(e)} checkData={checkData}></IndexEcharts>
     </>
   )

src/pages/swiper/index.jsx

@@ -0,0 +1,147 @@
+import React, { useState, useRef } from "react";
+import Swiper from 'swiper';
+import router from 'umi/router';
+import request from '../../utils/request'
+import apis from '../../services/apis';
+import styles from './style.less'
+import closeImg from '../../assets/close.png';
+import classNames from 'classnames';
+import 'swiper/css/swiper.min.css';
+
+class swiper extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: true,
+        }
+
+        this.slider = null
+    }
+
+    componentDidMount() {
+        this.swiper = new Swiper('.swiper-container', {
+            slidesPerView: 1,
+            loop: true,
+            autoplay: true,
+            touchRatio: 2,
+            pagination: {
+                el: '.swiper-pagination',
+                tyrp: 'custom',
+                clickable: true,
+            },
+            observer: true,//修改swiper自己或子元素时，自动初始化swiper
+            observeParents: true,
+        })
+    }
+    // const [visible, setVisible] = useState(true)
+
+    handleSwiperItem(item) {
+        console.log(item, "item")
+    }
+    closeSwiper() {
+        // setVisible(false)
+        this.setState({
+            visible: false
+        })
+    }
+    render() {
+        const swpierData = [
+            { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592534834&di=2f2329437f205799e8be6abcc8fdb495&imgtype=0&src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-7fece9a613445edb78271216c8c20c6d_hd.jpg', title: '哈哈哈哈哈哈哈哈哈哈或或或' },
+            { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592534903&di=70fbf6793ff7e80ec38eb6204898fa35&imgtype=0&src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-ba9d3691d1438e4fe4fef84faf3e7e33_hd.jpg', title: '哈哈哈哈哈哈哈哈哈哈或或或嘻嘻嘻嘻嘻嘻' },
+            { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592674824&di=ebc27c383e5a402f8d0dfd2457b29c9d&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-03d53b468e27ddc99f1ffcd17eec9700_hd.jpg', title: '哈哈哈哈哈哈哈哈哈哈或或或嘻嘻嘻嘻嘻嘻' },
+            { img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg', title: '啦啦啦啦啦啦啦啦啦啦啦啦啦啦' },
+            { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592745048&di=e30a13762d0823ac5c1e3945a35ed55d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201711%2F09%2F20171109195545_M2Bk3.jpeg', title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
+        ]
+        const { visible } = this.state
+        return (
+            <>
+                {<div className={styles.mask}>
+                    <div className={styles.content}>
+                        <img src={closeImg} alt="" className={styles.close} onClick={() => this.closeSwiper()} />
+                        <div className={classNames(['swiper-container', styles.carousel])}  >
+                            <div className={classNames(['swiper-wrapper', styles.carousel])} >
+                                {swpierData.map((item, index) =>
+                                    <div key={'swiper' + index} className={classNames(['swiper-slide', styles.carouselItem])} onClick={() => this.handleSwiperItem(item)}>
+                                        <img style={{ width: '100%', height: '100%', borderRadius: '10px' }} src={item.img} alt="" />
+                                        <div className={styles.title}>{item.title}</div>
+                                    </div>
+                                )}
+                            </div>
+                            <div class="swiper-pagination"></div>
+                        </div>
+                    </div>
+                </div>}
+            </>
+        )
+    }
+
+}
+
+
+export default swiper
+// import React, { useState, useRef } from "react";
+// import Slider from "react-slick";
+// import router from 'umi/router';
+// import request from '../../utils/request'
+// import apis from '../../services/apis';
+// import styles from './style.less'
+// import closeImg from '../../assets/close.png';
+// import "slick-carousel/slick/slick.css";
+// import "slick-carousel/slick/slick-theme.css";
+// import classNames from 'classnames';
+// import { Carousel } from 'antd';
+
+
+// const swiper = props => {
+//     const [current, setCurrent] = useState(0)
+//     const slider = useRef(null)
+
+//     const settings = {
+//         dots: true,
+//         dotsClass: styles.dots,
+//         infinite: true,
+//         speed: 500,
+//         arrows: false,
+//         slidesToShow: 1,
+//         slidesToScroll: 1,
+//         appendDots: dots => <ul>{dots.map((_, inx) => {
+//             return <li className={classNames({ [`${styles.active}`]: inx == current })} onClick={() => slider.current.slickGoTo(inx)} />
+//         })}</ul>,
+//         afterChange: inx => setCurrent(inx),
+//         autoplay: true,
+//     };
+//     const [visible, setVisible] = useState(true)
+//     const swpierData = [
+//         { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592534834&di=2f2329437f205799e8be6abcc8fdb495&imgtype=0&src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-7fece9a613445edb78271216c8c20c6d_hd.jpg', title: '哈哈哈哈哈哈哈哈哈哈或或或' },
+//         { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592534903&di=70fbf6793ff7e80ec38eb6204898fa35&imgtype=0&src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-ba9d3691d1438e4fe4fef84faf3e7e33_hd.jpg', title: '哈哈哈哈哈哈哈哈哈哈或或或嘻嘻嘻嘻嘻嘻' },
+//         { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592674824&di=ebc27c383e5a402f8d0dfd2457b29c9d&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-03d53b468e27ddc99f1ffcd17eec9700_hd.jpg', title: '哈哈哈哈哈哈哈哈哈哈或或或嘻嘻嘻嘻嘻嘻' },
+//         { img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg', title: '啦啦啦啦啦啦啦啦啦啦啦啦啦啦' },
+//         { img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592745048&di=e30a13762d0823ac5c1e3945a35ed55d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201711%2F09%2F20171109195545_M2Bk3.jpeg', title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
+//     ]
+//     function handleSwiperItem(item) {
+//         console.log(item, "item")
+//     }
+//     function closeSwiper() {
+//         setVisible(false)
+//     }
+//     return (
+//         <>
+//             {visible && <div className={styles.mask}>
+//                 <div className={styles.content}>
+//                     <img src={closeImg} alt="" className={styles.close} onClick={() => closeSwiper()} />
+//                     <Carousel autoplay className={styles.carousel}  >
+//                         {swpierData.map((item, index) =>
+//                             <div key={'swiper' + index} className={styles.carouselItem} onClick={() => handleSwiperItem(item)}>
+//                                 <img style={{ width: '100%', height: '100%', borderRadius: '10px' }} src={item.img} alt="" />
+//                                 <div className={styles.title}>{item.title}</div>
+//                             </div>
+//                         )}
+//                     </Carousel>
+//                 </div>
+//             </div>}
+//         </>
+//     )
+// }
+
+
+// export default swiper

src/pages/swiper/style.less

@@ -0,0 +1,102 @@
+.mask{
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0,0,0,0.32);
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+}
+
+.content{
+    width: 36vw;
+    min-width: 757px;
+    height: 21.3vw;
+    min-height: 435.6px;
+    position: absolute;
+    left: 50%;
+    top: 110px;
+    transform: translateX(-50%);
+    border-radius: 10px;
+    .close{
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: -22px;
+        right: -22px;
+        z-index: 9;
+    }
+}
+
+.dots{
+    position: absolute;
+    bottom: 11px;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+    li {
+        position: relative;
+        display: inline-block;
+        width: 12px;
+        height: 2px;
+        margin: 0 4px;
+        padding: 0;
+        cursor: pointer;
+        background: #fff;
+        opacity: 0.6;
+        &.active{
+            width: 16px;
+            height: 3px;
+            background: #fff;
+            opacity: 1;
+        }
+        button {
+            display: block;
+            width: 14px;
+            height: 2px;
+            padding: 0;
+            font-size: 0;
+            background: #fff;
+            border: 0;
+            border-radius: 1px;
+            outline: none;
+            cursor: pointer;
+            opacity: 0.6;
+            transition: all 0.5s;
+        }
+    }
+}
+.carousel {
+    width: 36vw;
+    min-width: 757px;
+    height: 21.3vw;
+    min-height: 435.6px;
+    border-radius: 10px;
+    // overflow: hidden;
+    
+    .carouselItem{
+        width: 36vw;
+        min-width: 757px;
+        height: 21.3vw;
+        min-height: 435.6px;
+        position: relative;
+        display: inline-block;
+        .title{
+            font-size: 0.12rem;
+            color: #fff;
+            position: absolute;
+            display: block;
+            width: 100%;
+            height: 0.16rem;
+            bottom: 30px ;
+            padding: 0 40px;
+            text-align: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+        }
+    }
+}