feat: 演示功能入口

.gitignore

@@ -12,7 +12,8 @@ npm-debug.log
 src/umi
 .vscode
 civbase
-
+.env
+.env.local
 # dependencies
 node_modules
 npm-debug.log*

config/proxy.js

 /* eslint-disable */
 // const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
 // const proxyURL = 'https://work.panda-water.cn';
- const proxyURL = 'http://120.194.86.66:8096/';
+ const proxyURL = process.env.PANDA_ENV_PROXY || 'http://120.194.86.66:8096/';
 // const proxyURL = 'https://panda-water.cn'
 //const proxyURL = 'http://192.168.12.189:8816/'
 module.exports = {

src/pages/system/demonstration/components/Bottom/index.js

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React, { useMemo, useEffect } from 'react';
+
+import styles from './index.less';
+const BottomItem = props => {
+  const { title = '' } = props;
+
+  const renderNum = (num, type) => {
+    const numStr = num ? num.toString() : '0';
+    const arr = numStr.split('');
+    console.log('🚀 ~ arr:', arr);
+    return arr.map(a => (
+      <div className={styles.l_item_num_item} type={type}>
+        {a}
+      </div>
+    ));
+  };
+  useEffect(() => {}, []);
+  return (
+    <div className={styles.bottom_item}>
+      <div className={styles.left}>
+        <div className={styles.l_title_wrap}>
+          <div className={styles.l_title_sub}>熊猫智慧水务</div>
+          <div className={styles.l_title}>项目落地保障：</div>
+        </div>
+        <div className={styles.l_list}>
+          <div className={styles.l_item}>
+            <div className={styles.l_item_title} type="项目数量">
+              项目数量：
+            </div>
+            <div className={styles.l_item_num_list}>{renderNum(198, '项目数量')}</div>
+            <div className={styles.l_item_num_unit}>个</div>
+          </div>
+          <div className={styles.l_item}>
+            <div className={styles.l_item_title} type="服务客户">
+              服务客户：
+            </div>
+            <div className={styles.l_item_num_list}>{renderNum(255, '服务客户')}</div>
+            <div className={styles.l_item_num_unit} type="add">
+              +
+            </div>
+          </div>
+          <div className={styles.l_item}>
+            <div className={styles.l_item_title} type="覆盖省份">
+              覆盖省份：
+            </div>
+            <div className={styles.l_item_num_list}>{renderNum(30, '覆盖省份')}</div>
+            <div className={styles.l_item_num_unit} type="add">
+              +
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.center}>
+        <div />
+      </div>
+      <div className={styles.right}>查看全部</div>
+    </div>
+  );
+};
+export default BottomItem;

src/pages/system/demonstration/components/Bottom/index.less

+@imgSrc: '@/assets/demonstration';
+
+.bottom_item {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0 28px 10px;
+
+    .left {
+        flex: none;
+        width: 288px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: url('@{imgSrc}/项目落地保障.png') no-repeat center center;
+        background-size: 100% 100%;
+        padding: 25px 15px 20px 25px;
+
+        .l_title_wrap {
+            flex: none;
+            width: 100%;
+
+            .l_title_sub {
+                background: url('@{imgSrc}/tip.png') no-repeat left center;
+                background-size: 35px 36px;
+                padding-left: 35px;
+                font-size: 16px;
+                height: 36px;
+                line-height: 36px;
+
+            }
+
+            .l_title {
+                font-size: 22px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FBD84D;
+                line-height: 32px;
+
+                background: linear-gradient(0deg, #FFD270 0%, #FFFFFF 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+
+        .l_list {
+            height: 100%;
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .l_item {
+                display: flex;
+                align-items: center;
+            }
+
+            .l_item_title {
+                padding-left: 20px;
+            }
+
+
+            .l_item_num_list {
+                display: flex;
+            }
+
+            .l_item_num_item {
+                width: 32px;
+                height: 36px;
+                line-height: 36px;
+                text-align: center;
+                margin-right: 5px;
+                font-size: 24px;
+                font-weight: bold;
+            }
+
+            .l_item_num_unit {
+                font-size: 14px;
+                font-weight: 400;
+                align-self: flex-end;
+            }
+
+            .l_item_num_unit[type='add'] {
+                font-size: 24px;
+                font-weight: bold;
+                align-self: center;
+            }
+
+            .l_item_title[type='项目数量'] {
+                background: url('@{imgSrc}/项目数量.png') no-repeat left center;
+                background-size: 14px 14px;
+            }
+
+            .l_item_num_item[type='项目数量'] {
+                background: url('@{imgSrc}/项目数量num.png') no-repeat center/100% 100%;
+
+            }
+
+            .l_item_title[type='服务客户'] {
+                background: url('@{imgSrc}/服务客户.png') no-repeat left center;
+                background-size: 14px 14px;
+            }
+
+            .l_item_num_item[type='服务客户'] {
+                background: url('@{imgSrc}/服务客户num.png') no-repeat center/100% 100%;
+
+            }
+
+            .l_item_title[type='覆盖省份'] {
+                background: url('@{imgSrc}/覆盖省份.png') no-repeat left center;
+                background-size: 14px 14px;
+            }
+
+            .l_item_num_item[type='覆盖省份'] {
+                background: url('@{imgSrc}/覆盖省份num.png') no-repeat center/100% 100%;
+
+            }
+        }
+
+    }
+
+    .center {
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .right {
+        flex: none;
+        height: 100%;
+        overflow: hidden;
+        width: 44px;
+        height: 100%;
+        background: url('@{imgSrc}/查看全部.png') no-repeat center/100% 100%;
+        writing-mode: vertical-rl;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        letter-spacing: 2px;
+        cursor: pointer;
+    }
+}
\ No newline at end of file

src/pages/system/demonstration/components/Left/index.js

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React, { useMemo, useEffect, useState, memo } from 'react';
+import { schemeData } from '../configData';
+import styles from './index.less';
+const LeftItem = props => {
+  const { title = '', setSelectKey, selectKey } = props;
+
+  const onSelect = row => {
+    if (row.title && row.title !== selectKey) {
+      setSelectKey(row.title);
+    }
+  };
+  useEffect(() => {}, []);
+  return (
+    <div className={styles.left_item}>
+      <div className={styles.l_title_wrap}>
+        <div className={styles.l_title_sub}>熊猫智慧水务</div>
+        <div className={styles.l_title}>全行业软硬件系统解决方案：</div>
+      </div>
+      <div className={styles.l_list}>
+        {schemeData.map((item, index) => (
+          <div
+            className={styles.l_list_item}
+            key={item.title}
+            type={item.title}
+            selectType={selectKey === item.title ? 'select' : ''}
+            onClick={() => onSelect(item)}
+          >
+            <div className={styles.l_list_item_title}>- {item.title} -</div>
+            <div className={styles.l_list_item_tip} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+export default memo(LeftItem);

src/pages/system/demonstration/components/Left/index.less

+@imgSrc: '@/assets/demonstration';
+
+.left_item {
+    .l_title_wrap {
+        width: 100%;
+        height: 123px;
+        background: url('@{imgSrc}/全行业软硬件系统解决方案.png') no-repeat center center;
+        background-size: 100% 100%;
+        padding: 30px 0 0 25px;
+
+        .l_title_sub {
+            background: url('@{imgSrc}/tip.png') no-repeat left center;
+            background-size: 35px 36px;
+            padding-left: 35px;
+            font-size: 16px;
+            height: 36px;
+            line-height: 36px;
+
+        }
+
+        .l_title {
+            font-size: 22px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #FFFFFF;
+            padding-left: 5px;
+            line-height: 32px;
+            letter-spacing: 1px;
+            // text-shadow: 0px 8px 8px rgba(8, 34, 78, 0.75);
+            background: linear-gradient(0deg, #92D2FF 0%, #FFFFFF 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
+
+    .l_list {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    // .l_list_item:hover {
+    //     opacity: 1;
+    //     top: -8px;
+
+
+    // }
+
+    // .l_list_item:hover .l_list_item_tip {
+    //     opacity: 1;
+    // }
+
+    .l_list_item[selectType='select'] {
+        opacity: 1;
+        top: -8px;
+
+        .l_list_item_tip {
+            opacity: 1;
+        }
+    }
+
+    .l_list_item {
+        width: 178px;
+        height: 162px;
+        opacity: 0.7;
+        top: 0;
+        position: relative;
+        text-align: center;
+        margin-bottom: 15px;
+        cursor: pointer;
+        transition: all 0.5s;
+
+        .l_list_item_title {
+            padding-top: 115px;
+            font-size: 18px;
+        }
+
+    }
+
+    .l_list_item_tip {
+        width: 71px;
+        height: 37px;
+        background: url('@{imgSrc}/选中产品.png') no-repeat center center;
+        background-size: 100% 100%;
+        position: absolute;
+        transition: all 0.3s;
+        bottom: -12px;
+        left: calc(50% - 35.5px);
+        opacity: 0;
+
+    }
+
+
+    .l_list_item[type='供水产品'] {
+        background: url('@{imgSrc}/供水产品.png') no-repeat center center;
+        background-size: 100% 100%;
+    }
+
+    .l_list_item[type='水利产品'] {
+        background: url('@{imgSrc}/水利产品.png') no-repeat center center;
+        background-size: 100% 100%;
+    }
+
+    .l_list_item[type='排水产品'] {
+        background: url('@{imgSrc}/排水产品.png') no-repeat center center;
+        background-size: 100% 100%;
+    }
+
+    .l_list_item[type='节水产品'] {
+        background: url('@{imgSrc}/节水产品.png') no-repeat center center;
+        background-size: 100% 100%;
+    }
+}
\ No newline at end of file

src/pages/system/demonstration/components/Right/index.js

+/*
+ * @Title:新产品动态
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import { Button } from 'antd';
+import React, { useMemo, useEffect, useState, memo } from 'react';
+import { productData } from '../configData';
+import styles from './index.less';
+const RightItem = props => {
+  const { title = '' } = props;
+  const [selectKey, setSelectKey] = useState('');
+  const renderRow = (row, index) => {
+    const rIndex = `r_${index % 7}`;
+
+    return (
+      <div className={styles.r_list_item} key={row.title} rIndex={rIndex}>
+        <div className={styles.r_list_item_title}>{row.title}</div>
+        <div className={styles.r_list_item_tip} />
+      </div>
+    );
+  };
+  useEffect(() => {}, []);
+  return (
+    <div className={styles.right_item}>
+      <div className={styles.r_title_wrap}>
+        <div className={styles.r_title_sub}>熊猫智慧水务</div>
+        <div className={styles.r_title}>新产品动态：</div>
+      </div>
+      <div className={styles.r_list}>{productData.map((row, index) => renderRow(row, index))}</div>
+    </div>
+  );
+};
+export default memo(RightItem);

src/pages/system/demonstration/components/Right/index.less

+@imgSrc: '@/assets/demonstration';
+
+.right_item {
+    .r_title_wrap {
+        width: 100%;
+        height: 123px;
+        background: url('@{imgSrc}/全行业软硬件系统解决方案.png') no-repeat center center;
+        background-size: 100% 100%;
+        padding: 30px 0 0 25px;
+
+        .r_title_sub {
+            background: url('@{imgSrc}/tip.png') no-repeat left center;
+            background-size: 35px 36px;
+            padding-left: 35px;
+            font-size: 16px;
+            height: 36px;
+            line-height: 36px;
+        }
+
+        .r_title {
+            font-size: 22px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #FFFFFF;
+            padding-left: 5px;
+            line-height: 32px;
+            letter-spacing: 1px;
+            background: linear-gradient(0deg, #92D2FF 0%, #FFFFFF 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
+
+    .r_list {
+        .r_list_item:hover {
+            left: -8px;
+            filter: brightness(160%)
+        }
+
+        .r_list_item:hover .r_list_item_tip {
+            opacity: 1;
+        }
+
+        .r_list_item:not(:last-child) {
+            margin-bottom: 8px;
+        }
+
+        .r_list_item {
+            width: 369px;
+            height: 42px;
+            font-size: 16px;
+            text-align: center;
+            font-weight: bold;
+            line-height: 40px;
+            position: relative;
+            cursor: pointer;
+            left: 0;
+            transition: all 0.3s;
+        }
+
+        .r_list_item:active {
+            opacity: 0.8;
+        }
+
+        .r_list_item_tip {
+            width: 37px;
+            height: 40px;
+            background: url('@{imgSrc}/新产品动态_选中.png') no-repeat center center;
+            background-size: 100% 100%;
+            position: absolute;
+            transition: all 0.3s;
+            top: 0;
+            left: -30px;
+            opacity: 0;
+
+        }
+
+
+        .r_list_item[rIndex='r_0'] {
+            background: url('@{imgSrc}/bg1.png') no-repeat left center;
+            background-size: 100% 100%;
+        }
+
+        .r_list_item[rIndex='r_0']:hover {}
+
+        .r_list_item[rIndex='r_1'] {
+            background: url('@{imgSrc}/bg2.png') no-repeat left center;
+            background-size: 100% 100%;
+        }
+
+
+        .r_list_item[rIndex='r_2'] {
+            background: url('@{imgSrc}/bg3.png') no-repeat left center;
+            background-size: 100% 100%;
+        }
+
+
+        .r_list_item[rIndex='r_3'] {
+            background: url('@{imgSrc}/bg4.png') no-repeat left center;
+            background-size: 100% 100%;
+        }
+
+        .r_list_item[rIndex='r_4'] {
+            background: url('@{imgSrc}/bg5.png') no-repeat left center;
+            background-size: 100% 100%;
+        }
+
+
+        .r_list_item[rIndex='r_5'] {
+            background: url('@{imgSrc}/bg6.png') no-repeat left center;
+            background-size: 100% 100%;
+        }
+
+        .r_list_item[rIndex='r_6'] {
+            background: url('@{imgSrc}/bg7.png') no-repeat left center;
+            background-size: 100% 100%;
+        }
+
+    }
+
+
+
+}
\ No newline at end of file

src/pages/system/demonstration/components/VideoItem/index.js

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React, { useMemo, useEffect, useRef } from 'react';
+import { cloneDeep, debounce } from 'lodash';
+
+import styles from './index.less';
+const boxWidth = 982;
+const boxHeight = 455;
+
+const VideoItem = props => {
+  const { selectKey = '', info = {} } = props;
+  const contentRef = useRef(null);
+  const onResize = () => {
+    if (contentRef?.current) {
+      const { clientWidth, clientHeight } = contentRef.current;
+
+      if (!boxWidth || !boxHeight) return;
+      const xScale = clientWidth / boxWidth;
+      const yScale = clientHeight / boxHeight;
+      const scale = Math.min(xScale, yScale);
+      const n = scale.toFixed(4);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', debounce(onResize, 300));
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+  return (
+    <div className={styles.video_item}>
+      <div className={styles.video_box} ref={contentRef}>
+        <div className={styles.video_tip} type={selectKey}>
+          <span />
+          {selectKey}
+        </div>
+        <div className={styles.video_wrap}>{selectKey}</div>
+      </div>
+    </div>
+  );
+};
+export default VideoItem;

src/pages/system/demonstration/components/VideoItem/index.less

+@imgSrc: '@/assets/demonstration';
+
+.video_item {
+    width: 100%;
+    padding: 0 30px;
+    height: calc(100% - 25px);
+    margin-top: 25px;
+    background: url('@{imgSrc}/视频bg2.png') no-repeat center center;
+    background-size: calc(100% - 30px) auto;
+
+    .video_box {
+        width: 100%;
+        height: 100%;
+        padding: 0 28px 20px;
+        background: url('@{imgSrc}/视频bg.png') no-repeat center center;
+        background-size: calc(100% - 56px) 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .video_wrap {
+        position: relative;
+        width: 100%;
+    }
+
+    .video_tip {
+        width: 123px;
+        height: 32px;
+        background: url('@{imgSrc}/供水产品标题.png') no-repeat center center;
+        background-size: 100% 100%;
+        padding: 5px 0 0 15px;
+        font-weight: bold;
+        position: absolute;
+        left: 28px;
+        top: 0;
+
+
+        span {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border: 3px solid #FFFFFF;
+            box-shadow: 0px 2px 3px 0px rgba(9, 23, 55, 0.3);
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+    }
+
+    .video_tip[type='水利产品'] {
+        background: url('@{imgSrc}/水利产品标题.png') no-repeat center center;
+        background-size: 100% 100%;
+    }
+
+    .video_tip[type='排水产品'] {
+        background: url('@{imgSrc}/排水产品标题.png') no-repeat center center;
+        background-size: 100% 100%;
+    }
+
+    .video_tip[type='节水产品'] {
+        background: url('@{imgSrc}/节水产品标题.png') no-repeat center center;
+        background-size: 100% 100%;
+    }
+
+}
\ No newline at end of file

src/pages/system/demonstration/components/configData.js

+/* eslint-disable prettier/prettier */
+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2024-01-30 15:29:09
+ */
+const schemeData = [
+  {
+    title: '供水产品',
+    background: '',
+    url: '',
+  },
+  {
+    title: '水利产品',
+    background: '',
+    url: '',
+  },
+  {
+    title: '排水产品',
+    background: '',
+    url: '',
+  },
+  {
+    title: '节水产品',
+    background: '',
+    url: '',
+  },
+];
+const productData = [
+  {
+    title: '智慧生产调度管控平台',
+    url: '',
+    blank: true,
+  },
+  {
+    title: '智慧水厂数字孪生平台',
+    url: '',
+    blank: true,
+  },
+  {
+    title: '智慧设备资产管理平台',
+    url: '',
+    blank: true,
+  },
+  {
+    title: '智慧工程物资管理平台',
+    url: '',
+    blank: true,
+  },
+  {
+    title: '智慧应急调度指挥中心',
+    url: '',
+    blank: true,
+  },
+  {
+    title: '智慧水厂养殖监控平台',
+    url: '',
+    blank: true,
+  },
+  {
+    title: '智慧水务大数据可视化平台',
+    url: '',
+    blank: true,
+  },
+];
+const platformData = [
+  {
+    title: '水务统一接入平台',
+    icon: '水务统一接入平台icon.png',
+    flex: 248,
+    url: '',
+    blank: true,
+  },
+  {
+    title: '水务web组态平台',
+    icon: '水务web组态平台icon.png',
+    flex: 253,
+    url: '',
+    blank: true,
+  },
+  {
+    title: '水务数据中台',
+    icon: '水务数据中台icon.png',
+    flex: 216,
+    url: '',
+    blank: true,
+  },
+  {
+    title: '熊猫智慧水务系列支撑能力平台',
+    icon: '',
+    isCenter: true,
+    flex: 464,
+    url: '',
+  },
+  {
+    title: '水务门户网站',
+    icon: '水务门户网站icon.png',
+    flex: 226,
+    url: '',
+    blank: true,
+  },
+  {
+    title: '水务全场景低代码平台',
+    icon: '水务全场景低代码平台icon.png',
+    flex: 283,
+    url: '',
+    blank: true,
+  },
+  {
+    title: '水务AI平台',
+    icon: '水务AI平台icon.png',
+    flex: 210,
+    url: '',
+    blank: true,
+  },
+];
+export { schemeData, productData, platformData };

src/pages/system/demonstration/components/useFullScreen/index.js

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-01-10 11:18:55
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const useFullScreen = needFullscreen => {
+  const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
+  const ref = useRef();
+
+  useEffect(() => {
+    const handleToggleFullScreen = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleToggleFullScreen);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleToggleFullScreen);
+    };
+  }, []);
+
+  const handleFullScreen = useCallback(() => {
+    ref.current?.requestFullscreen && ref.current?.requestFullscreen();
+  }, []);
+
+  const handleExitFullScreen = useCallback(() => {
+    document.exitFullscreen();
+  }, []);
+
+  useEffect(() => {
+    needFullscreen && handleFullScreen();
+  }, [handleFullScreen, needFullscreen]);
+
+  return [ref, isFullscreen, handleFullScreen, handleExitFullScreen];
+};
+
+export default useFullScreen;

src/pages/system/demonstration/index.js

+/* eslint-disable global-require */
+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import { FullscreenExitOutlined, FullscreenOutlined, RightOutlined } from '@ant-design/icons';
+import exitImg from '@/assets/demonstration/退出.png';
+import enterImg from '@/assets/demonstration/进入.png';
+import { Button } from 'antd';
+import React, { useMemo, useState, useEffect } from 'react';
+import useFullScreen from './components/useFullScreen';
+import styles from './index.less';
+import LeftItem from './components/Left';
+import VideoItem from './components/VideoItem';
+import RightItem from './components/Right';
+import BottomItem from './components/Bottom';
+import { platformData } from './components/configData';
+const Demonstration = props => {
+  const showFullScreen = false;
+  const [selectKey, setSelectKey] = useState('供水产品');
+  const [pattern, setPattern] = useState(false);
+  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
+  // 退出
+  const exit = () => {
+    if (isFullscreen) {
+      handleExitFullScreen && handleExitFullScreen();
+    } else {
+      handleFullScreen && handleFullScreen();
+    }
+  };
+  const renderCenter = useMemo(
+    () =>
+      platformData.map(col => {
+        if (col.isCenter) {
+          return (
+            <div className={styles.center_title} style={{ flex: col.flex }} type={col.title}>
+              <div>{col.title}</div>
+            </div>
+          );
+        }
+        return (
+          <div className={styles.center_col} style={{ flex: col.flex }} type={col.title}>
+            <img src={require(`@/assets/demonstration/${col.icon}`)} alt="" />
+            {col.title}
+            <RightOutlined />
+          </div>
+        );
+      }),
+    [],
+  );
+  useEffect(() => {}, []);
+  return (
+    <div className={styles.demonstration} ref={ref}>
+      {showFullScreen ? (
+        <div className={styles.CV_exit} onClick={exit}>
+          <Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
+            {isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+          </Button>
+        </div>
+      ) : null}
+      <div className={styles.top}>
+        <div className={styles.top_l}>
+          {pattern ? (
+            <div className={styles.top_l_btn}>
+              <img src={exitImg} alt="" /> 退出演示模式 <RightOutlined />
+            </div>
+          ) : (
+            <div className={styles.top_l_btn}>
+              <img src={enterImg} alt="" /> 进入演示模式 <RightOutlined />
+            </div>
+          )}
+        </div>
+        <div className={styles.top_c}>
+          <div className={styles.top_c_title}>熊猫智慧水务一体化解决方案</div>
+        </div>
+        <div className={styles.top_r}>
+          <div className={styles.top_r_text}>- 引领中国智慧水务 -</div>
+        </div>
+      </div>
+
+      <div className={styles.row}>
+        <div className={styles.row_l}>
+          <LeftItem setSelectKey={setSelectKey} selectKey={selectKey} />
+        </div>
+        <div className={styles.row_c}>
+          <VideoItem selectKey={selectKey} setSelectKey={setSelectKey} />
+        </div>
+        <div className={styles.row_r}>
+          <RightItem />
+        </div>
+      </div>
+      <div className={styles.center_wrap}>
+        <div className={styles.center_tip} />
+        <div className={styles.center}>{renderCenter}</div>
+      </div>
+      <div className={styles.bottom}>
+        <BottomItem />
+      </div>
+    </div>
+  );
+};
+export default Demonstration;

src/pages/system/demonstration/index.less

+@imgSrc: '@/assets/demonstration';
+
+.demonstration {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: url('@{imgSrc}/背景.png') no-repeat center center;
+  background-size: 100% 100%;
+  position: relative;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+
+  .CV_exit {
+    cursor: pointer;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    z-index: 10;
+  }
+
+  .top {
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    flex: none;
+
+    .top_l {
+      width: 281px;
+      padding-left: 33px;
+
+      .top_l_btn {
+        width: 160px;
+        height: 32px;
+        background: rgba(110, 146, 188, 0.25);
+        border-radius: 16px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        img {
+          width: 16px;
+          height: 16px;
+          margin-right: 5px;
+        }
+      }
+    }
+
+    .top_r {
+      width: 281px;
+      height: 35px;
+
+      .top_r_text {
+        width: 100%;
+        height: 35px;
+        line-height: 35px;
+        padding-left: 60px;
+        background: url('@{imgSrc}/引领中国智慧水务.png') no-repeat center center;
+        background-size: 100% 100%;
+        font-size: 15px;
+        letter-spacing: 3px;
+      }
+    }
+
+    .top_c {
+      padding-top: 15px;
+
+      .top_c_title {
+        font-size: 34px;
+        font-weight: bold;
+        padding-left: 80px;
+        color: #FFFFFF;
+        letter-spacing: 1px;
+        text-shadow: 0 8px 8px rgba(30, 64, 121, 0.35);
+        background: url('@{imgSrc}/熊猫图标.png') no-repeat left center;
+        background-size: 65px;
+        position: relative;
+        top: 10px;
+        line-height: 1;
+      }
+    }
+  }
+
+  .row {
+    padding: 0 33px;
+    display: flex;
+    overflow: hidden;
+    z-index: 10;
+    flex: none;
+
+    .row_l {
+      width: 372px;
+      flex: none;
+    }
+
+    .row_r {
+      width: 372px;
+      flex: none;
+    }
+
+    .row_c {
+      flex: 1;
+    }
+  }
+
+  .center_wrap {
+    position: relative;
+    flex: none;
+  }
+
+  .center_tip {
+    position: absolute;
+    left: 50%;
+    top: -38px;
+    transform: translateX(-50%);
+    width: 130px;
+    height: 82px;
+    z-index: 0;
+    background: url('@{imgSrc}/箭头.png') no-repeat center/100% 100%;
+
+  }
+
+  .center {
+    z-index: 10;
+    display: flex;
+    padding: 0 28px 5px;
+    width: 100%;
+    overflow: hidden;
+    line-height: 1;
+    align-items: flex-end;
+
+    .center_title {
+      height: 89px;
+      padding-top: 43px;
+      text-align: center;
+      background: url('@{imgSrc}/熊猫智慧水务系列支撑能力平台.png') no-repeat center/100% 100%;
+      z-index: 10;
+
+      div {
+
+        font-size: 22px;
+        font-weight: bold;
+        color: #FFFFFF;
+        background: linear-gradient(0deg, #92D2FF 0%, #FFFFFF 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+    .center_col {
+      height: 61px;
+      font-size: 15px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      position: relative;
+      top: 0;
+      transition: all 0.3s;
+      margin-bottom: 5px;
+
+      img {
+        width: 36px;
+        height: 36px;
+      }
+    }
+
+    .center_col:hover {
+      top: -8px;
+      filter: brightness(130%)
+    }
+
+    .center_col:active {
+      opacity: 0.8;
+    }
+
+    .center_col[type='水务统一接入平台'] {
+      background: url('@{imgSrc}/水务统一接入平台.png') no-repeat center/100% 100%;
+    }
+
+    .center_col[type='水务web组态平台'] {
+      background: url('@{imgSrc}/水务web组态平台.png') no-repeat center/100% 100%;
+    }
+
+    .center_col[type='水务数据中台'] {
+      background: url('@{imgSrc}/水务数据中台.png') no-repeat center/100% 100%;
+    }
+
+    .center_col[type='水务门户网站'] {
+      background: url('@{imgSrc}/水务门户网站.png') no-repeat center/100% 100%;
+    }
+
+    .center_col[type='水务全场景低代码平台'] {
+      background: url('@{imgSrc}/水务全场景低代码平台.png') no-repeat center/100% 100%;
+    }
+
+    .center_col[type='水务AI平台'] {
+      background: url('@{imgSrc}/水务AI平台.png') no-repeat center/100% 100%;
+    }
+  }
+  .bottom{
+    flex: 1;
+    overflow: hidden;
+  }
+}
\ No newline at end of file