- 调整新产品导航页界面

src/containers/App/index.js

-import React from 'react';
+import React , {useEffect} from 'react';
 
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
+
 import { Router, Switch } from '@wisdom-utils/runtime';
 import { helpers, event } from '@wisdom-utils/utils';
 
@@ -13,8 +14,10 @@ const pkg = require('../../../package.json');
 const { renderRoutes } = helpers;
 const config = require('../../../config/config');
 
-function App(props) {
-  event.emit('loading' ,  props.loading);
+const App = props => {
+  useEffect(() => {
+    event.emit('loading' ,  props.loading);
+  }, [props.loading])
 
   const metaSecurity = /https/.test(window.location.protocol) ? (
     <meta httpEquiv='Content-Security-Policy' content='upgrade-insecure-requests' />

src/pages/bootpage/panda/index.js

@@ -38,78 +38,45 @@ const BootPage = props => {
   const [hasRole, setHasRole] = useState(false);
   const [scale, setScale] = useState(1);
   const [loginAction, setAction] = useState(() => new LoginAction(props));
+  const [num] = useState(Industries.filter(item => !!industries.find(d => d.type === item)).length);
+
   // const history = useHistory();
   useDocumentTitle(
     { title: defaultSetting.title, id: '', pageName: '行业切换' },
     props.global.title || defaultSetting.title,
   );
 
-  const handlePage = useCallback(
-    (event, type) => {
-      setPercentNum(Math.ceil(Math.random() * 50));
-      setCurrentType(type);
+  const handlePage = (event, type, loginAction) => {
+    setPercentNum(Math.ceil(Math.random() * 50));
+    setCurrentType(type);
+    //
+    // event.persist();
+    // event.preventDefault();
 
-      event.persist();
-      event.preventDefault();
+    // 新增熊猫新产品引导页
+    if (type === '熊猫新产品') {
 
-      // 新增熊猫新产品引导页
-      if (type === '熊猫新产品') {
-        setTimeout(() => {
-          setPercentNum(100);
+      setTimeout(() => {
+        setPercentNum(100);
 
-          setTimeout(() => {
-            window.history.pushState('', null, `/cloud/introduction/newproducts`);
-          }, 500);
-        });
+        setTimeout(() => {
+          window.history.pushState('', null, `/cloud/introduction/newproducts`);
+        }, 500);
+      });
 
-        return;
-      }
+      return;
+    }
 
-      // setLoadding(true);
-      const config = props.global;
-      // const loginAction = new LoginAction(props);
-      config.uiwidgets = [];
-      config.widgets = [];
-      config.allWidgets = [];
-      props.instance && props.instance.updateConfig(config);
-      // props.instance && props.instance.getUserInfoAndConfig('', true, type);
-      loginAction && loginAction.getUserInfoAndConfig('', true, type);
-    },
-    [loginAction, props.global, props.instance],
-  );
-
-  const renderIndustries = (config, callback) =>
-    industries.map(item => {
-      if (
-        config &&
-        config.userInfo &&
-        config.userInfo.Industries &&
-        config.userInfo.Industries instanceof Array &&
-        config.userInfo.Industries.indexOf(item.type) > -1
-      ) {
-        return (
-          <li className={styles.bootPageLi} key={item.type} onClick={event => callback(event, item.type)}>
-            <div className={styles.bootPageList}>
-              <div className={styles.listMain}>
-                <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />
-                <span className={styles.bootPageName}>{item.name}</span>
-                <span className={styles.bootPageNameEng}>{item.subTitle}</span>
-              </div>
-            </div>
-            {currentType === item.type && (
-              <Progress
-                style={{ width: '98%' }}
-                strokeColor={item.color}
-                percent={percentNum}
-                status="active"
-                format={percent => <span style={{ color: '#fff' }}>{percent}%</span>}
-                className={styles.bootProgress}
-              />
-            )}
-          </li>
-        );
-      }
-    });
+    // setLoadding(true);
+    const config = props.global;
+    // const loginAction = new LoginAction(props);
+    config.uiwidgets = [];
+    config.widgets = [];
+    config.allWidgets = [];
+    props.instance && props.instance.updateConfig(config);
+    // props.instance && props.instance.getUserInfoAndConfig('', true, type);
+    loginAction && loginAction.getUserInfoAndConfig('', true, type);
+  }
 
   useEffect(() => {
     // eslint-disable-next-line no-use-before-define
@@ -145,6 +112,8 @@ const BootPage = props => {
     };
   }, [loginAction.events, props, currentType]);
 
+
+
   useEffect(() => {
     window.share.event.on('visible', ret => {
       setTimeout(() => {
@@ -157,21 +126,17 @@ const BootPage = props => {
     });
   }, []);
 
-  const [IndustryNum, setIndustryNum] = useState(0);
-  // const renderIndustr = useMemo(() => renderIndustries(props.global, handlePage), [handlePage, props.global.token, percentNum, currentType]);
-  useEffect(() => {
-    const NewIndustryNum =
-      props.global && props.global.userInfo && props.global.userInfo.Industries
-        ? props.global.userInfo.Industries.filter(item => !!industries.find(d => d.type === item)).length
-        : 0;
-    setIndustryNum(NewIndustryNum);
-  }, [handlePage, props.global, props.global.token]);
   const intl = useIntl();
   const toOMSUsingAnalysis = e => {
     e && e.stopPropagation();
     props.history.push(`/cloud/analysis/using`);
   };
 
+  // const test = `bootPageUl_${props.global && props.global.userInfo && props.global.userInfo.Industries
+  //   ? props.global.userInfo.Industries.filter(item => !!industries.find(d => d.type === item)).length
+  //   : 0`
+
+
   useEffect(() => {
     appService
       .getUserInfo({
@@ -187,6 +152,7 @@ const BootPage = props => {
       });
   }, [props.global.token]);
 
+
   return (
     <div className={styles.bootPage}>
       <div className={styles.bootPageMain}>
@@ -205,22 +171,23 @@ const BootPage = props => {
           // }}
         >
           <ul
-            className={classNames(styles.bootPageUl, 'animate__animated', styles[`bootPageUl_${IndustryNum}`])}
+            className={classNames(styles.bootPageUl, 'animate__animated')}
             style={{
               transform: `scale(${scale})`,
               left: '300px',
               bottom: '105px',
               opacity: 1,
+              width: num === 5 ? 960 : num === 9 ||  num === 10 ? 1600 : 1280,
             }}
           >
             {industries.map(
               item =>
               props.global &&
-              Industries.indexOf(item.type) > -1 &&
+                Industries.indexOf(item.type) > -1 &&
                 <li
                     className={styles.bootPageLi}
                     key={item.type}
-                    onClick={event => handlePage(event, item.type)}>
+                    onClick={event => handlePage(event, item.type, loginAction)}>
                     <div className={styles.bootPageList}>
                       <div className={styles.listMain}>
                         <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />

src/pages/cloud/introduction/newproducts/Card.js

@@ -5,30 +5,48 @@ import cover from './images/default.png';
 import tagHot from './images/hot.png';
 import tagNew from './images/new.png';
 
+import desc from './images/副标题.png';
+import descActive from './images/副标题_active.png';
+
 const assetPath = `${window.location.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles`;
 const tags = {
   'New': tagNew,
   'Hot': tagHot,
 }
 const Card = ({onCardClick, ...props}) => {
-  const { promoteTip, config } = props;
+  const {  config } = props;
+
   return (
     <div className={styles.card} onClick={e => onCardClick(e, props)}>
-      { promoteTip ? <img className={styles.tag} src={tags[promoteTip]}/> : null }
-      <div className={styles.face}>
-        <img src={config && config['封面图'] ? `${assetPath}?filePath=${config['封面图']}` : cover} />
-        <div className={styles['card-footer']}>
-          <p className={classnames(styles['card-title'], styles['nowrap-text'])}>{config && config['标题']}</p>
-          <p className={classnames(styles['card-desc'], styles['nowrap-text'])}>{config && config['副标题']}</p>
-        </div>
+      <div className={classnames(styles['card-title'], styles['nowrap-text'])}>
+        {config && config['标题']}
       </div>
-      {
-        config && config['介绍图'] ? (
-          <div className={styles.back}>
-            <img src={`${assetPath}?filePath=${config['介绍图']}`}/>
+      <div className={classnames(styles['card-content'])}>
+        <div className={classnames(styles['card-img'])}>
+          <img src={config && config['封面图'] ? `${assetPath}?filePath=${config['封面图']}` : cover} />
+
+          {
+            config && config['系统描述'] ? (
+              <div className={styles.back}>
+                {config && config['系统描述']}
+              </div>
+            ) : null
+          }
+        </div>
+        <div className={classnames(styles['card-info'])}>
+          <div className={classnames(styles['card-desc'], styles.default)}><span>{config && config['副标题']}</span></div>
+          <div className={classnames(styles['card-tags'])}>
+            {
+               config && config['系统特点'] && config['系统特点'].split(',').map((item, index) => {
+                 return <div className={classnames(styles['card-tag'])} key={index}>
+                   <i className={classnames(styles['card-tag-icon'])} />
+                   {item}
+                 </div>
+               })
+            }
           </div>
-        ) : null
-      }
+        </div>
+      </div>
     </div>
   );
 };

src/pages/cloud/introduction/newproducts/index.js

@@ -14,19 +14,28 @@ import { defaultApp } from '@/micro';
 import LoginAction from '../../../user/login/login';
 import Cookies from 'js-cookie';
 import { decode, encode } from 'js-base64';
-import title from './images/title.png';
+
+import moment from 'moment';
+
+import icon from './images/退出.png';
 
 /**
  *  熊猫新产品引导页
  */
 
-const pageSize = 6; 
+const pageSize = 6;
 
 const NewProducts = props => {
   const [products, setProducts] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [time, setTime] = useState(moment().format('YYYY-MM-DD HH:mm:ss'))
   const ref = useRef();
 
+  useEffect(() => {
+    setInterval(() => {
+      setTime(moment().format('YYYY-MM-DD HH:mm:ss'))
+    }, 1000)
+  }, [time])
 
   // 获取卡片数据
   useEffect(() => {
@@ -139,9 +148,14 @@ const NewProducts = props => {
       <div className={styles.newproducts}>
         <Spin spinning={loading}>
           <div className={styles.page}>
-            <h1>
-              <img className={styles['title-img']} src={title} alt="熊猫智慧水务新产品"/>
-            </h1>
+            <div className={styles.pageTitle}>熊猫智慧水务新产品</div>
+            <div className={classnames(styles['page-time'])}>
+              <span>{time}</span>
+              <img src={icon} onClick={() => {
+                window.history.pushState('', null, `/industry`);
+              }} className={classnames(styles.pageIcon)} alt='退出' />
+            </div>
+
             <div className={styles.container}>
               <Carousel ref={ref}>
                 { products.map((item, index) => <Panel key={index} products={item} pageIndex={index} pageSize={pageSize} onCardClick={handleClick}/>) }
@@ -149,8 +163,8 @@ const NewProducts = props => {
               {
                 products && products.length > 1 && (
                   <>
-                    <div className={classnames(styles['cus-arrow'], styles['cus-arrow-prev'])} title="上一页" onClick={onPrev}></div>
-                    <div className={classnames(styles['cus-arrow'], styles['cus-arrow-next'])} title="下一页" onClick={onNext}></div>
+                    <div className={classnames(styles['cus-arrow'], styles['cus-arrow-prev'])} title="上一页" onClick={onPrev} />
+                    <div className={classnames(styles['cus-arrow'], styles['cus-arrow-next'])} title="下一页" onClick={onNext} />
                   </>
                 )
               }
@@ -172,4 +186,4 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(actionCreators.updateCurrentIndex(index));
   },
 });
-export default connect(mapStateToProps, mapDispatchToProps)(NewProducts);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(NewProducts);

src/pages/cloud/introduction/newproducts/index.less

 @import '~antd/es/style/themes/default.less';
+
+@font-face {
+  font-family: zihun;
+  src: url('./images/字魂143号-正酷超级黑(1).ttf')
+}
+@font-face {
+  font-family: pingfang;
+  src: url('./images/PingFang Bold_0.ttf')
+}
+
+
 @wh-scale: 1080/1920;
 .nowrap-text {
   white-space: nowrap;
@@ -16,13 +27,49 @@
   background-repeat: no-repeat;
   background-image: url('./images/bg.png');
   font-size: 20px;
+
   .page {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-evenly;
+    position: relative;
+    //display: flex;
+    //flex-direction: column;
+    //align-items: center;
+    //justify-content: space-evenly;
     height: 100%;
+
+    .pageTitle {
+      margin-bottom: 18px;
+      height: 5rem;
+      font-size: 2.63rem;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 4rem;
+      text-shadow: 0 11px 15px rgba(0, 18, 44, 0.48);
+      text-align: center;
+      background-image: url('./images/标题.png');
+      background-size: cover;
+      background-repeat: no-repeat;
+      font-family: "zihun";
+    }
+
+    .page-time {
+      position: absolute;
+      top: 6px;
+      right: 20px;
+      font-size: .5rem;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #FFFFFF;
+
+      .pageIcon{
+        display: inline-block;
+        margin-left: 10px;
+        width: 12px;
+        height: 12px;
+        cursor: pointer;
+      }
+    }
   }
+
   :global {
     .@{ant-prefix}-spin-nested-loading,
     .@{ant-prefix}-spin-container {
@@ -30,6 +77,7 @@
       height: 100%;
       overflow: hidden;
     }
+
     .@{ant-prefix}-spin {
       max-height: unset !important;
     }
@@ -41,21 +89,25 @@
         }
       }
     }
-    
+
   }
+
   p,
   h1 {
     font-size: 20px;
     margin-bottom: 0;
   }
+
   .title-img {
     width: 35.6em;
   }
+
   .container {
     min-height: 396px;
     width: 100%;
     position: relative;
   }
+
   .cus-arrow {
     width: 2em;
     height: 2em;
@@ -66,10 +118,12 @@
     background-size: 100% 100%;
     background-repeat: no-repeat;
     cursor: pointer;
+
     &.cus-arrow-prev {
       left: 2em;
       background-image: url('./images/arrow_left.png');
     }
+
     &.cus-arrow-next {
       right: 2em;
       background-image: url('./images/arrow_right.png');
@@ -79,7 +133,6 @@
 
 .panel {
   font-size: 20px;
-  width: 100%;
   height: 100%;
   // padding: 0 200px;
   display: flex;
@@ -88,16 +141,19 @@
   flex-wrap: wrap;
   gap: 1em;
   margin: 0 auto;
-  width: 24em;
+  width: 40em;
+
   &[num="2"],
   &[num="4"] {
-    width: (24em * 2 + 1em);
+    width: (40em * 2 + 1em);
   }
+
   &[num="3"],
   &[num="5"],
   &[num="6"] {
-    width: (24em * 3 + 2em);
+    width: (40em * 3 + 2em);
   }
+
   &[num="1"],
   &[num="2"],
   &[num="3"] {
@@ -110,72 +166,121 @@
   transition: all 0.2s;
   overflow: hidden;
   cursor: pointer;
-  .tag {
-    width: 3em;
-    position: absolute;
-    left: 8px;
-    top: 6px;
-  }
-  .face {
-    img {
-      user-select: none;
-      width: 24em;
-      height: (24em * @wh-scale);
-    }
-    .card-footer {
-      background-color: #FFF;
-      font-family: PingFang SC;
-      color: #000000;
-      text-align: center;
-      height: 3.2em;
-      .card-title {
-        font-size: 0.9em;
-        font-weight: bold;
-        line-height: 1.9em;
-        position: relative;
-        &::after {
-          content: '';
-          width: 1.2em;
-          height: 2px;
-          position: absolute;
-          left: 50%;
-          transform: translateX(-50%);
-          bottom: 0;
-          background: @primary-color;
-          opacity: 0.75;
-          border-radius: 1px;
-        }
-      }
-      .card-desc {
-        font-size: 0.7em;
-        line-height: 2em;
-      }
-    }
+  width: 49%;
+  height: 24rem;
+  background-image: url('./images/框.png');
+  background-size: contain;
+  background-position: center;
+
+  .card-title {
+    position: relative;
+    margin-top: 0.75rem;
+    left: 5%;
+    font-size: 1.5rem;
+    font-weight: 400;
+    color: #000000;
+    font-family: "zihun";
   }
   .back {
     pointer-events: none;
     position: absolute;
     left: 0;
-    top: 0;
-    background-color: lightblue;
+    bottom: 0;
+    padding: 0.5rem;
+    background: linear-gradient(#fff, rgb(147,219,246));
     width: 100%;
-    height: 100%;
     overflow: hidden;
     opacity: 0;
     transform: translateY(100%);
     transition: all 0.5s;
     transition-delay: 0.2s;
-    & > img {
-      width: 100%;
-      height: 100%;
-    }
+    font-size: 8px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #000000;
+  }
+
+  .card-desc{
+    display: flex;
+    font-size: 1rem;
+    background-position-x: -.5rem;
+    align-items: center;
+    justify-content: center;
+    height: 5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    background-image: url(./images/副标题.png);
+    font-family: pingfang;
+    font-weight: bold;
+    color: #FFFFFF;
+    background-size: cover;
   }
+
   &:hover {
+    background-image: url('./images/框_active.png');
     // transform: scale(1.05);
     .back {
       opacity: 1;
       transform: translateY(0);
     }
+
+    .card-desc {
+      background-image: url(./images/副标题_active.png);
+      color: #000000;
+    }
+  }
+
+  .card-content{
+    position: relative;
+    left: 1rem;
+    padding: 1rem;
+
+    &::after{
+      content: "";
+      display: block;
+      clear: both;
+    }
+
+    .card-img {
+      position: relative;
+      float: left;
+      width: 60%;
+      height: 17.5rem;
+
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .card-info {
+      float: left;
+      width: 36%;
+    }
+
+    .card-tags {
+      padding: 0.5rem 1rem;
+
+      .card-tag{
+        float: left;
+        width: 50%;
+        height: 35px;
+        line-height: 35px;
+        font-size: 0.88rem;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+
+        .card-tag-icon {
+          display: inline-block;
+          margin-right: .5rem;
+          width: 5px;
+          height: 5px;
+          background: #E1F4FD;
+          opacity: 0.53
+        }
+      }
+    }
   }
 }
 
@@ -184,34 +289,46 @@
     p, h1 {
       font-size: 14px;
     }
+
     .cus-arrow {
       &.cus-arrow-prev {
         left: 15px;
       }
+
       &.cus-arrow-next {
         right: 15px;
       }
     }
   }
+
+  .card {
+    background-size: 100% 100%;
+    height: 21rem;
+  }
+
   .panel {
     font-size: 14px;
   }
 }
+
 @media screen and (min-width: 1440px) and (max-width: 1600px) {
   .newproducts {
     p, h1 {
       font-size: 16px;
     }
+
     .cus-arrow {
       &.cus-arrow-prev {
         left: 15px;
       }
+
       &.cus-arrow-next {
         right: 15px;
       }
     }
   }
+
   .panel {
     font-size: 16px;
   }
-}
\ No newline at end of file
+}