登录页

src/pages/user/login/template/project/jiangxiNew/index.js

@@ -3,6 +3,9 @@ import Zoom from 'react-reveal/Zoom';
 import Fade from 'react-reveal/Fade';
 import Slide from 'react-reveal/Slide';
 import Roll from 'react-reveal/Roll';
+import Pulse from 'react-reveal/Pulse';
+
+import QueueAnim from 'rc-queue-anim';
 import { Modal, Popover, Form, Tooltip } from 'antd';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { connect } from 'react-redux';
@@ -13,6 +16,7 @@ import classnames from 'classnames';
 import QRCode from 'qrcode.react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperCore, { Autoplay } from 'swiper/core';
+import $ from 'jquery';
 import defaultSetting from '../../../../../../../config/defaultSetting';
 import LoginAction from '../../../login';
 import styles from './index.less';
@@ -22,7 +26,6 @@ import logoPng from './images/8.png';
 import qrcodePng from './images/1.png';
 import welcomePng from './images/4.png';
 // import SwiperCore, { Autoplay, Navigation } from 'swiper/core';
-
 // SwiperCore.use([Autoplay, Navigation]);
 import 湖口润泉水源地 from './images/江西水投子公司图片/湖口润泉水源地.png';
 import 会昌润泉石壁坑水库 from './images/江西水投子公司图片/会昌润泉石壁坑水库.png';
@@ -41,6 +44,7 @@ import 上高润泉水务公司2 from './images/江西水投子公司图片/上
 import 寻乌润泉大路水厂 from './images/江西水投子公司图片/寻乌润泉大路水厂.png';
 import 永修润泉湖东水厂 from './images/江西水投子公司图片/永修润泉湖东水厂.png';
 import 'swiper/swiper-bundle.css';
+const Cripples = require('@/assets/js/ripples/jquery.ripples');
 SwiperCore.use([Autoplay]);
 const PopOvercontent = () => {
   const qrcodes = window.globalConfig && window.globalConfig.qrcode;
@@ -77,12 +81,12 @@ const Login = forwardRef((props, _ref) => {
     '南城润泉麻源水库3',
     '南康润泉龙华水厂',
     '南康润泉龙华水厂2',
-    '上高润泉第二水厂',
+    // '上高润泉第二水厂',
     '上高润泉第二水厂平流沉淀池',
     '上高润泉水务公司',
-    '上高润泉水务公司2',
+    // '上高润泉水务公司2',
     '寻乌润泉大路水厂',
-    '永修润泉湖东水厂',
+    // '永修润泉湖东水厂',
   ]);
   const [imgObj, setimgObj] = useState({
     湖口润泉水源地,
@@ -95,12 +99,12 @@ const Login = forwardRef((props, _ref) => {
     南城润泉麻源水库3,
     南康润泉龙华水厂,
     南康润泉龙华水厂2,
-    上高润泉第二水厂,
+    //  上高润泉第二水厂,
     上高润泉第二水厂平流沉淀池,
     上高润泉水务公司,
-    上高润泉水务公司2,
+    //   上高润泉水务公司2,
     寻乌润泉大路水厂,
-    永修润泉湖东水厂,
+    //   永修润泉湖东水厂,
   });
 
   const handleSubmit = values => {
@@ -117,7 +121,18 @@ const Login = forwardRef((props, _ref) => {
     setSubmitting(true);
     props.updateCurrentIndex && props.updateCurrentIndex(-1);
   };
-
+  useEffect(() => {
+  //  setTimeout(() => {
+  //    onShow();
+  //  }, 300);
+    setTimeout(() => {
+      $('.CarouselRipples').ripples({
+        resolution: 800,
+        dropRadius: 20, //px
+        perturbance: 2,
+      });
+    }, 1000);
+  }, []);
   useEffect(() => {
     action &&
       action.events.on('loginSuccess', event => {
@@ -218,7 +233,7 @@ const Login = forwardRef((props, _ref) => {
   useEffect(() => {
     if (timeRef.current) clearTimeout(timeRef.current);
     timeRef.current = setTimeout(() => {
-      if (num < 15) {
+      if (num < 12) {
         setNum(num + 1);
       } else {
         setNum(0);
@@ -234,12 +249,11 @@ const Login = forwardRef((props, _ref) => {
   };
   const getBJ = (url) => {
     return (
-      <Slide>
       <div
         style={{ background: `url(${url}) no-repeat` }}
         className={classnames(styles.lvchenglogin, 'lvcheng')}
       >
-          <Slide>
+         
         <div className={styles['inner-wrapper']}>
           <div className={styles['title-image-box']}>
             <img
@@ -253,8 +267,8 @@ const Login = forwardRef((props, _ref) => {
             />
             <span className={styles['title-name']}>{props.global.title}</span>
           </div>
-          <Roll>
-            <div className={styles['inner-center']}>
+          <QueueAnim type="scale" duration={1000}>
+            <div key={'innerwrapper'} style={{position: 'relative',zIndex:2,backdropFilter: 'blur(6px)'}} className={styles['inner-center']}>
               <Tooltip title="打开网站下载">
                 <div className={styles.linkBox} onClick={toLink}>
                   <img style={{ width: '14px', marginRight: '4px' }} src={require('./images/下载.png')} alt="" />
@@ -283,8 +297,8 @@ const Login = forwardRef((props, _ref) => {
           <img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
         </Popover> */}
             </div>
-          </Roll>
-        </div></Slide>
+            </QueueAnim>
+        </div>
         <div className={styles['login-header']}>
           {/* <div className={styles['left-title']}>
                     <img src={logoPng} alt='logo' className={styles['logo-png']}/>
@@ -298,7 +312,7 @@ const Login = forwardRef((props, _ref) => {
             </div>
           </div>
         </div>
-
+        <div className={classnames(styles.CarouselRipples, 'CarouselRipples')} data-ripple="ripple" />
         <Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}>
           <div ref={sliVerify} />
         </Modal>
@@ -308,7 +322,7 @@ const Login = forwardRef((props, _ref) => {
               if (num > 0) {
                 setNum(num - 1);
               } else {
-                setNum(15);
+                setNum(12);
               }
             }}
           >
@@ -319,11 +333,11 @@ const Login = forwardRef((props, _ref) => {
             <Swiper
               autoplay={{ delay: 5000 }}
               loop
-              spaceBetween={0}
-              slidesPerView={13}
+              spaceBetween={1}
+              slidesPerView={12}
               onSlideChange={() => console.log('slide change')}
               onSwiper={swiper => console.log(swiper)}
-              style={{ width: 'calc(100% - 320px)', height: '100%' }}
+              style={{ width: 'calc(100% - 340px)', height: '100%' }}
             >
               {img.map((v, i) => {
                 return (
@@ -339,8 +353,8 @@ const Login = forwardRef((props, _ref) => {
                         title={v}
                         style={{
                           border: i == num ? '2px solid #FFDFA0' : '0px',
-                          width: i == num ? '60px' : '60px',
-                          height: i == num ? '60px' : '60px',
+                          width: i == num ? '82px' : '82px',
+                          height: i == num ? '82px' : '82px',
                         }}
                         src={require(`./images/江西水投子公司图片/${v}.png`)}
                         alt=""
@@ -353,8 +367,8 @@ const Login = forwardRef((props, _ref) => {
                           whiteSpace: 'nowrap',
                           color: 'white',
                           textOverflow: 'ellipsis',
-                          top: '41px',
-                          width: '60px',
+                          top: '61px',
+                          width: '82px',
                           fontSize: '12px',
                           textAlign: 'center',
                           background: 'rgba(0,0,0,0.4)',
@@ -371,7 +385,7 @@ const Login = forwardRef((props, _ref) => {
           </div>
           <div
             onClick={() => {
-              if (num < 15) {
+              if (num < 12) {
                 setNum(num + 1);
               } else {
                 setNum(0);
@@ -383,7 +397,7 @@ const Login = forwardRef((props, _ref) => {
           </div>
         </div>
       </div>
-      </Slide>
+    
     );
   };
   return (
@@ -421,4 +435,4 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(withRouter(Login));
+)(withRouter(Login));
\ No newline at end of file

src/pages/user/login/template/project/jiangxiNew/index.less

@@ -17,13 +17,13 @@
     align-items: center;
 .lbt{
     width: 100vw;
-    height: 82px;
+    height:108px;
   background-color: rgba(0,0,0,0.4);
   // border: 1px solid #000000;
    /// opacity: 0.6;
     position: absolute;
     /* top: 10px; */
-    bottom: 125px;
+    bottom: 89px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -225,11 +225,16 @@
             height: 60px;
 
             .curr-time {
-                width: 140px;
+                width: 154px;
                 font-size: 36px;
-                font-family: Microsoft YaHei;
+               // font-family: Microsoft YaHei;
                 font-weight: 300;
-                color: black;
+                color:white;
+                font-family: Alibaba PuHuiTi;
+                font-weight: 500;
+                color: #FFFFFF;
+           //     line-height: 91px;
+                text-shadow: 0px 1px 5px rgba(6,27,54,0.8);
             }
 
             .curr-week-date {
@@ -237,16 +242,28 @@
 
                 .curr-week {
                     font-size: 16px;
-                    font-family: Microsoft YaHei;
+                 //   font-family: Microsoft YaHei;
                     font-weight: 400;
-                    color: black;
+                    color:white;
+                    color:white;
+                    font-family: Alibaba PuHuiTi;
+                    font-weight: 500;
+                    color: #FFFFFF;
+               //     line-height: 91px;
+                    text-shadow: 0px 1px 5px rgba(6,27,54,0.8);
                 }
 
                 .curr-date {
                     font-size: 14px;
-                    font-family: Microsoft YaHei;
+                //    font-family: Microsoft YaHei;
                     font-weight: 400;
-                    color: black;
+                    color:white;
+                    color:white;
+                    font-family: Alibaba PuHuiTi;
+                    font-weight: 500;
+                    color: #FFFFFF;
+               //     line-height: 91px;
+                    text-shadow: 0px 1px 5px rgba(6,27,54,0.8);
                 }
             }
         }
@@ -331,4 +348,22 @@
     to {
         left: -9999px;
     }
+}
+
+.CarouselRipples {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+& :global {
+    .CarouselRipples:before {
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+    }
 }
\ No newline at end of file