feat: 演示功能引导页

src/api/service/base.js

@@ -45,6 +45,8 @@ export const API = {
   IS_OPEN_YANSHI: '/PandaCore/GCK/Demonstrate/IsOpenYanshi', // 获取是否开启演示模式服务
   GET_WEB_CONFIG: '/PandaOMS/OMS/GetIntegratedLoginbyName',
   GET_WEB_TICKET: '/PandaOMS/OMS/GetTicketByToken',
+
+  GET_ACCOUNT_PAGE_LIST: '/PandaWorkFlow/WorkFlow/AccountManage/GetAccountPageList',
 };
 
 const services = {
@@ -232,6 +234,11 @@ const services = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  getAccountPageList: {
+    url: API.GET_ACCOUNT_PAGE_LIST,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
 };
 
 export const searchAutoCity = keywords => {

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

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import { Image, Tooltip, message } from 'antd';
+import React, { useMemo, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import DataCarousel from '../DataCarousel';
+import styles from './index.less';
+const BottomItem = props => {
+  const { listData = [], configData = [], onLineUrl, handToPage, handlePage, industries = [] } = props;
+  const isJump = industries.includes('项目案例');
+  const [list, setList] = useState([]);
+  const [infoData, setInfoData] = useState({});
+  const renderNum = (num, type) => {
+    const numStr = num ? num.toString() : '0';
+    const arr = numStr.split('');
+
+    return arr.map(a => (
+      <div className={styles.l_item_num_item} type={type}>
+        {a}
+      </div>
+    ));
+  };
+  const toPage = url => {
+    if (!isJump) return message.warning('该用户没有权限！');
+    handToPage(url);
+  };
+  const toMore = (e, url) => {
+    if (!isJump) return message.warning('该用户没有权限！');
+    handlePage(e, '项目案例');
+  };
+  const renderCol = (row, rindex) => {
+    if (!Array.isArray(row)) return null;
+    return (
+      <div className={styles.list_item_col}>
+        {row.map((col, cIndex) => (
+          <Tooltip title={col['项目环境'] && isJump ? '点击体验' : ''} color="#1685FF">
+            <div
+              key={`${rindex}-${cIndex}`}
+              type={col['项目环境'] && isJump ? 'jump' : 'none'}
+              onClick={() => toPage(col['项目环境'])}
+              alt="点击体验"
+              className={styles.list_item}
+            >
+              <div className={styles.list_item_img_wrap}>
+                <div className={classNames(styles.list_item_img, 'list_item_img')}>
+                  <Image
+                    src={`${onLineUrl}CityInterface/rest/services/filedownload.svc/download/${col['项目图片']}`}
+                    style={{ height: '100px', width: '100%', overflow: 'hidden' }}
+                    preview={false}
+                  />
+                </div>
+
+                {col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null}
+              </div>
+              <div className={styles.list_item_info_wrap}>
+                <div className={styles.list_item_info_tip} type={col['所属行业']}>
+                  {col['所属行业'] === '能源' ? '节水' : col['所属行业']}
+                </div>
+                <div className={styles.list_item_info_name}>
+                  <Tooltip title={col['客户名称']} color="#1685FF">
+                    {col['客户名称']}
+                  </Tooltip>
+                </div>
+                <div className={styles.list_item_info_address}>{col['城市']}</div>
+              </div>
+            </div>
+          </Tooltip>
+        ))}
+      </div>
+    );
+  };
+  const spliceArr = (arr, num) => {
+    const reArr = [];
+    arr.map(item => {
+      if (!reArr[reArr.length - 1] || reArr[reArr.length - 1].length === num) {
+        // 新行添加
+        reArr.push([]);
+      }
+      if (reArr[reArr.length - 1].length !== num) {
+        // 长度不够则直接添加
+        reArr[reArr.length - 1].push(item);
+      }
+      return null;
+    });
+    return reArr;
+  };
+  useEffect(() => {
+    const arr = [];
+    listData.forEach(i => {
+      let str = i['所属城市'];
+      if (i['所属城市']) {
+        const temp = i['所属城市'].split('/');
+        // eslint-disable-next-line prefer-destructuring
+        str = temp[1];
+        if (str[str.length - 1] === '市') {
+          str = str.slice(0, str.length - 1);
+        } else {
+          // eslint-disable-next-line prefer-destructuring
+          str = temp[0];
+        }
+      }
+      if (str[str.length - 1] === '市') {
+        str = str.slice(0, str.length - 1);
+      }
+      i['城市'] = str;
+      arr.push(i);
+    });
+    setList(spliceArr(arr, 2));
+  }, [listData]);
+  useEffect(() => {
+    const obj = {
+      项目数量: '',
+      服务客户: '',
+      覆盖省份: '',
+    };
+    configData.forEach(c => {
+      if (obj[c['名称']] === '') {
+        obj[c['名称']] = c['数值'];
+      }
+    });
+
+    setInfoData(obj);
+  }, [configData]);
+  return (
+    <div className={classNames(styles.bottom_item, 'demo_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(infoData['项目数量'], '项目数量')}</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(infoData['服务客户'], '服务客户')}</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(infoData['覆盖省份'], '覆盖省份')}</div>
+            <div className={styles.l_item_num_unit} type="add">
+              +
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.center}>
+        <DataCarousel
+          gap={1}
+          autoplay={5000}
+          itemHeight={270}
+          list={list}
+          renderItem={renderCol}
+          config={{
+            direction: 'horizontal',
+            width: 1520,
+            loop: false,
+            slidesPerView: 7,
+          }}
+        />
+      </div>
+      <div className={styles.right} onClick={e => toMore(e)}>
+        查看全部
+      </div>
+    </div>
+  );
+};
+export default BottomItem;

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

+@imgSrc: '@/assets/images/demonstration';
+
+.bottom_item {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0 28px 10px;
+    background: url('@{imgSrc}/bottom_bg.png') no-repeat left top;
+    background-size: calc(100% - 62px) 42px;
+
+    .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;
+        padding: 12px 0 0 13px;
+    }
+
+    .list_item[type='jump'] {
+        cursor: pointer;
+    }
+
+    .list_item[type='jump']:active {
+        opacity: 0.8;
+    }
+
+    .list_item {
+        width: 204px;
+        height: 130px;
+        border: 1px solid rgba(71, 88, 114, 0.8);
+        border-radius: 10px;
+        overflow: hidden;
+        margin-right: 8px;
+        margin-bottom: 8px;
+
+        .list_item_img_wrap {
+            width: 100%;
+            height: 100px;
+            overflow: hidden;
+            position: relative;
+
+            .list_item_img_tip {
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 57px;
+                height: 19px;
+                background: url('@{imgSrc}/案例.png') no-repeat center/100% 100%;
+            }
+        }
+
+        .list_item_info_wrap {
+            display: flex;
+            width: 100%;
+            overflow: hidden;
+            align-items: center;
+            padding: 3px 8px 0;
+            font-size: 12px;
+            font-weight: 400;
+
+            .list_item_info_tip {
+                flex: none;
+                width: 38px;
+                height: 20px;
+                text-align: center;
+                line-height: 18px;
+                margin-right: 5px;
+                background: url('@{imgSrc}/供水.png') no-repeat center/100% 100%;
+            }
+
+            .list_item_info_tip[type='水利'] {
+                background: url('@{imgSrc}/农水.png') no-repeat center/100% 100%;
+            }
+
+            .list_item_info_tip[type='能源'] {
+                background: url('@{imgSrc}/节水.png') no-repeat center/100% 100%;
+            }
+
+            .list_item_info_tip[type='排水'] {
+                background: url('@{imgSrc}/排水.png') no-repeat center/100% 100%;
+            }
+
+
+            .list_item_info_name {
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+
+            }
+
+            .list_item_info_address {
+                flex: none;
+                font-size: 12px;
+                font-weight: 400;
+                color: #ACCDF0;
+                line-height: 1;
+                padding-left: 4px;
+                border-left: 1px solid rgba(216, 234, 253, 0.4);
+
+            }
+        }
+    }
+
+    .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;
+    }
+}
+
+:global {
+    .demo_bottom_item {
+        .swiper-wrapper {
+            display: flex;
+
+            .swiper-slide {
+                width: 212px;
+            }
+        }
+
+        .list_item_img {
+            .panda-console-base-image {
+                width: 100%;
+            }
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+
+        }
+    }
+
+}
\ No newline at end of file

src/pages/bootpage/demonstration/components/DataCarousel/index.js

+/*
+ * @Title:数据列表轮播组件
+ * @Author: hongmye
+ * @Date: 2023-02-08 16:03:42
+ */
+import PandaEmpty from '@wisdom-components/empty';
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+import 'swiper/components/navigation/navigation.min.css';
+import 'swiper/components/pagination/pagination.min.css';
+import SwiperCore, { Autoplay, Mousewheel, Navigation, Pagination } from 'swiper/core';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/swiper.min.css';
+import styles from './index.less';
+
+SwiperCore.use([Autoplay, Pagination, Navigation, Mousewheel]);
+
+const DataCarousel = ({ list, itemHeight, renderItem, config, autoplay, onSwiper, showEmpty = true }) => {
+  const autoplayConfig = {
+    delay: autoplay,
+    disableOnInteraction: false,
+  };
+  const contentRef = useRef(null);
+  const swiperRef = useRef(null);
+  const [listData, setListData] = useState([]);
+
+  useEffect(() => {
+    setListData(list);
+  }, [list]);
+  return (
+    <div
+      className={classNames(styles.dataCarousel, 'dataCarousel')}
+      style={{ width: '100%', height: '100%' }}
+      ref={contentRef}
+    >
+      <div className={classNames(styles.dataCarouselSwiper)} style={{ width: '100%', height: '100%' }}>
+        {listData && listData.length ? (
+          <Swiper
+            slidesPerView="auto"
+            autoplay={autoplay * 1 && listData.length > 1 ? autoplayConfig : false}
+            loop
+            height={itemHeight}
+            direction="vertical"
+            onSlideChange={e => {}}
+            mousewheel
+            onSwiper={swiper => {
+              swiperRef.current = swiper;
+              onSwiper && onSwiper(swiper);
+              // 鼠标悬浮暂停效果
+              swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop());
+              // 鼠标移开后继续自动滚屏效果
+              swiper.$el[0].addEventListener('mouseleave', () => {
+                listData.length > 1 && autoplay * 1 ? swiper.autoplay.start() : '';
+              });
+            }}
+            {...config}
+          >
+            {listData.map((item, index) => (
+              <SwiperSlide key={index} virtualIndex={index} onClick={() => {}}>
+                {renderItem(item, index + 1)}
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        ) : showEmpty ? (
+          <div style={{ paddingTop: 10 }}>
+            <PandaEmpty />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default DataCarousel;

src/pages/bootpage/demonstration/components/DataCarousel/index.less

+@root-entry-name: 'default';
+@import '~antd/es/style/themes/index.less';
+
+.dataCarousel {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  .dataCarouselSwiper {
+    overflow-y: auto;
+  }
+}
+
+.dataCarousel {
+  :global {
+    .swiper-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

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

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import React, { useMemo, useEffect, useState, memo } from 'react';
+
+import { Tooltip } from 'antd';
+import { schemeData } from '../configData';
+
+import styles from './index.less';
+let timer;
+const LeftItem = props => {
+  const { selectKey, onChangeScheme, handlePage, industries } = props;
+
+  const onMouseEnter = (item, index) => {
+    if (timer) {
+      timer && clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      onChangeScheme && onChangeScheme(item, index);
+    }, 500);
+  };
+  const onMouseLeave = (item, index) => {
+    timer && clearTimeout(timer);
+  };
+  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) => (
+          <Tooltip title={industries.includes(item.type) ? '点击体验' : ''} color="#1685FF">
+            <div
+              className={styles.l_list_item}
+              key={item.title}
+              type={item.title}
+              selectType={selectKey === item.title ? 'select' : ''}
+              onClick={event => handlePage(event, item.type, item)}
+              onMouseEnter={() => onMouseEnter(item, index)}
+              onMouseLeave={() => onMouseLeave(item, index)}
+            >
+              <div className={styles.l_list_item_title}>- {item.title} -</div>
+              <div className={styles.l_list_item_tip} />
+            </div>
+          </Tooltip>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default memo(LeftItem);

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

+@imgSrc: '@/assets/images/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/bootpage/demonstration/components/Right/index.js

+/*
+ * @Title:新产品动态
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import React, { useMemo, useEffect, useState, memo } from 'react';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import DataCarousel from '../DataCarousel';
+import styles from './index.less';
+const RightItem = props => {
+  const { listData, handToPage, handToProduct } = props;
+  const toPage = row => {
+    if (row.site) {
+      handToProduct(row);
+    } else if (row['产品地址']) {
+      handToPage(row['产品地址']);
+    }
+  };
+  const renderRow = (row, index) => {
+    const rIndex = `r_${index % 7}`;
+    return (
+      <Tooltip
+        placement="left"
+        title={row['产品地址'] || row.site ? '点击体验' : ''}
+        mouseEnterDelay={0.5}
+        color="#1685FF"
+      >
+        <div
+          className={styles.r_list_item}
+          key={row['产品名称']}
+          rIndex={rIndex}
+          type={row['产品地址'] || row.site ? 'jump' : 'none'}
+          onClick={() => toPage(row)}
+        >
+          <div className={styles.r_list_item_title}>{row['产品名称']}</div>
+          <div className={styles.r_list_item_tip} />
+        </div>
+      </Tooltip>
+    );
+  };
+
+  return (
+    <div className={classNames(styles.right_item, '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}>
+        <DataCarousel
+          gap={1}
+          autoplay={5000}
+          itemHeight={350}
+          list={listData}
+          renderItem={renderRow}
+          config={{
+            loop: false,
+            slidesPerView: 7,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+export default memo(RightItem);

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

+@imgSrc: '@/assets/images/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 {
+        height: 350px;
+        overflow: hidden;
+
+        .r_list_item[type='jump']:hover {
+            // bottom: -8px;
+            filter: brightness(160%)
+        }
+
+        .r_list_item[type='jump']: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;
+            left: 0;
+            transition: all 0.3s;
+        }
+
+        .r_list_item[type='jump'] {
+            cursor: pointer;
+        }
+
+        .r_list_item[type='jump']: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%;
+        }
+
+    }
+
+
+
+}
+
+:global {
+    .right_item {
+        .swiper-wrapper {
+            .swiper-slide {
+                width: 100%;
+                height: 50px;
+            }
+        }
+    }
+
+}
\ No newline at end of file

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

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-12-26 18:34:42
+ */
+import { Button } from 'antd';
+import React, { useMemo, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+
+import classNames from 'classnames';
+import SwiperCore, { Autoplay, Mousewheel, Navigation, Pagination, EffectCoverflow } from 'swiper/core';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import leftIcon from '@/assets/images/demonstration/arrow_left.png';
+import rightIcon from '@/assets/images/demonstration/arrow_right.png';
+import { schemeData } from '../configData';
+import 'swiper/components/navigation/navigation.min.css';
+import 'swiper/components/pagination/pagination.min.css';
+import 'swiper/components/effect-coverflow/effect-coverflow.min.css';
+import 'swiper/swiper.min.css';
+import styles from './index.less';
+const autoplay = 15000;
+SwiperCore.use([Autoplay, Pagination, Navigation, Mousewheel, EffectCoverflow]);
+const VideoItem = (props, ref) => {
+  const { selectKey = '', setSelectKey } = props;
+  const swiperRef = useRef(null);
+  const onSlideToLoop = index => {
+    if (swiperRef.current) {
+      swiperRef.current.slideToLoop(index);
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    onSlideToLoop,
+  }));
+
+  const listData = schemeData.filter(i => !!i.video);
+
+  const renderItem = (row, index) => (
+    <div className={styles.video_box} key={row.title}>
+      <div className={styles.video_tip} type={row.title}>
+        <span />
+        {row.title}
+      </div>
+      <div className={styles.video_wrap}>
+        <video autoPlay="autoPlay" muted controls src={row.video} loop />
+      </div>
+    </div>
+  );
+  const onSwiper = type => {
+    if (swiperRef.current) {
+      if (type === 'left') {
+        swiperRef.current.slidePrev();
+      }
+      if (type === 'right') {
+        swiperRef.current.slideNext();
+      }
+    }
+  };
+  const onSlideChange = e => {
+    const title = listData[e.realIndex]?.title;
+    if (title && title !== selectKey) {
+      setSelectKey(title);
+    }
+    if (e.$el[0]) {
+      const videoDom = e.$el[0].querySelector('video');
+      videoDom.play && videoDom.play();
+    }
+  };
+  useEffect(() => {}, []);
+  return (
+    <div className={classNames(styles.video_list, 'dt_video_list')}>
+      <Swiper
+        slidesPerView="auto"
+        autoplay={{
+          delay: autoplay,
+          disableOnInteraction: false,
+        }}
+        loop
+        height={450}
+        direction="horizontal"
+        onSlideChange={onSlideChange}
+        effect="coverflow"
+        coverflowEffect={{
+          rotate: 50,
+          stretch: 10,
+          depth: 60,
+          modifier: 2,
+          slideShadows: false,
+        }}
+        mousewheel
+        onSwiper={swiper => {
+          swiperRef.current = swiper;
+
+          // 鼠标悬浮暂停效果
+          swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop());
+          // 鼠标移开后继续自动滚屏效果
+          swiper.$el[0].addEventListener('mouseleave', () => {
+            listData.length > 1 && autoplay * 1 ? swiper.autoplay.start() : '';
+          });
+        }}
+      >
+        {listData.map((item, index) => (
+          <SwiperSlide key={index} virtualIndex={index} onClick={() => {}}>
+            {renderItem(item, index + 1)}
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <div className={classNames(styles.swiper_btn, styles.swiper_left)} onClick={() => onSwiper('left')}>
+        <img src={leftIcon} alt="" />
+      </div>
+      <div className={classNames(styles.swiper_btn, styles.swiper_right)} onClick={() => onSwiper('right')}>
+        <img src={rightIcon} alt="" />
+      </div>
+    </div>
+  );
+};
+export default forwardRef(VideoItem);

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

+@imgSrc: '@/assets/images/demonstration';
+
+.video_list {
+    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;
+    position: relative;
+
+    .swiper_btn {
+        position: absolute;
+        width: 36px;
+        height: 40px;
+        cursor: pointer;
+        z-index: 100;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    .swiper_btn:active {
+        opacity: 0.8;
+    }
+
+    .swiper_left {
+        left: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+
+    }
+
+    .swiper_right {
+        right: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+
+    }
+
+    .video_box {
+        width: 100%;
+        height: 450px;
+        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;
+        overflow: hidden;
+    }
+
+    .video_wrap {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        border-radius: 10px;
+        padding: 10px;
+
+        video {
+            object-fit: fill;
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+        }
+    }
+
+    .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;
+        z-index: 12;
+
+
+        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%;
+    }
+
+}
+
+:global {
+    .dt_video_list {
+        .swiper-slide {
+            width: 100%;
+
+        }
+
+        .swiper-container {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
\ No newline at end of file

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

+/* eslint-disable prettier/prettier */
+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2024-01-30 15:29:09
+ */
+import gongshuiVideo from '@/assets/videos/供水.mp4';
+import shuiliVideo from '@/assets/videos/水利.mp4';
+import paishuiVideo from '@/assets/videos/排水.mp4';
+import jieshuiVideo from '@/assets/videos/节水.mp4';
+const schemeData = [
+  {
+    title: '供水产品',
+    background: '',
+    url: '',
+    video: gongshuiVideo,
+    type: '供水',
+  },
+  {
+    title: '水利产品',
+    background: '',
+    url: '',
+    video: shuiliVideo,
+    type: '水利',
+  },
+  {
+    title: '排水产品',
+    background: '',
+    url: '',
+    video: paishuiVideo,
+    type: '排水',
+  },
+  {
+    title: '节水产品',
+    background: '',
+    url: '',
+    video: jieshuiVideo,
+    type: '能源',
+  },
+];
+
+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, platformData };

src/pages/bootpage/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/bootpage/demonstration/index.less

+@imgSrc: '@/assets/images/demonstration';
+
+.demonstration {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  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;
+  align-items: center;
+  justify-content: center;
+
+  .demonstrationLoad {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    z-index: 110;
+    background-color: rgba(255, 255, 255, 0.8);
+
+  }
+
+  .demonstrationWrap {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    transform-origin: left top;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .CV_exit {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+    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:active {
+        opacity: 0.8;
+      }
+
+      .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;
+      position: relative;
+      top: 0;
+      transition: all 0.3s;
+      margin-bottom: 5px;
+
+      img {
+        width: 36px;
+        height: 36px;
+      }
+    }
+
+    .center_col[isJump='yes'] {
+      cursor: pointer;
+
+    }
+
+    .center_col[isJump='yes']:hover {
+      top: -8px;
+      filter: brightness(130%)
+    }
+
+    .center_col[isJump='yes']: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: none;
+    height: 290px;
+    overflow: hidden;
+  }
+}
+
+.loadingWrap {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -38px);
+}
+
+.loader {
+  animation: rotate 2s infinite;
+  height: 50px;
+  width: 50px;
+}
+
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: 20px;
+  width: 20px;
+}
+
+.loader:before {
+  animation: ball1 2s infinite;
+  background-color: #fff;
+  box-shadow: 30px 0 0 #1685FF;
+  margin-bottom: 10px;
+}
+
+.loader:after {
+  animation: ball2 2s infinite;
+  background-color: #1685FF;
+  box-shadow: 30px 0 0 #fff;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg) scale(0.8)
+  }
+
+  50% {
+    transform: rotate(360deg) scale(1.2)
+  }
+
+  100% {
+    transform: rotate(720deg) scale(0.8)
+  }
+}
+
+@keyframes ball1 {
+  0% {
+    box-shadow: 30px 0 0 #1685FF;
+  }
+
+  50% {
+    box-shadow: 0 0 0 #1685FF;
+    margin-bottom: 0;
+    transform: translate(15px, 15px);
+  }
+
+  100% {
+    box-shadow: 30px 0 0 #1685FF;
+    margin-bottom: 10px;
+  }
+}
+
+@keyframes ball2 {
+  0% {
+    box-shadow: 30px 0 0 #fff;
+  }
+
+  50% {
+    box-shadow: 0 0 0 #fff;
+    margin-top: -20px;
+    transform: translate(15px, 15px);
+  }
+
+  100% {
+    box-shadow: 30px 0 0 #fff;
+    margin-top: 0;
+  }
+}
\ No newline at end of file

src/pages/bootpage/index.js

@@ -5,15 +5,14 @@ import { appService } from '@/api';
 import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants';
 import PandaBootPage from './panda';
 import IntegrationPage from './integration';
-
+import Demonstration from './demonstration';
 const systemItemName = '引导页模板'; // 系统配置项名称
 
 const BootPageTemplate = {
   default: PandaBootPage,
-  integration: IntegrationPage
-
+  integration: IntegrationPage,
+  demonstration: Demonstration,
 };
-
 const BootPage = props => {
   const [info, setInfo] = useState({
     first: true,
@@ -21,17 +20,18 @@ const BootPage = props => {
     error: false,
   });
   const [template, setTemplate] = useState('default');
-
+  const [pattern, setPattern] = useState(true); // 是否进入演示模式
   const RenderComponent = useMemo(() => {
-
     if (window?.globalConfig?.isIntegration >= 1) {
-      //集成登录
-      return BootPageTemplate.integration
-    } else {
-      //云平台
-      return BootPageTemplate[template] || BootPageTemplate.default
+      // 集成登录
+      return BootPageTemplate.integration;
+    }
+    if (pattern && template !== 'integration') {
+      return BootPageTemplate.demonstration;
     }
-  }, [template]);
+    // 云平台
+    return BootPageTemplate[template] || BootPageTemplate.default;
+  }, [template, pattern]);
 
   useEffect(() => {
     if (window?.globalConfig?.isIntegration >= 1) {
@@ -61,7 +61,9 @@ const BootPage = props => {
   }, []);
 
   return (
-    <SecurityLayout>{info.loading ? <Spin /> : info.error ? <Empty /> : <RenderComponent {...props} />}</SecurityLayout>
+    <SecurityLayout>
+      {info.loading ? <Spin /> : info.error ? <Empty /> : <RenderComponent setPattern={setPattern} {...props} />}
+    </SecurityLayout>
   );
 };
 

src/pages/bootpage/panda/index.js

 /* eslint-disable global-require */
 // 云平台引导页
 import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import enterImg from '@/assets/images/demonstration/进入.png';
+import { RightOutlined } from '@ant-design/icons';
 
 import { Space, Spin, Progress } from 'antd';
 import classNames from 'classnames';
@@ -15,7 +17,6 @@ import { defaultApp } from '@/micro';
 import usingIcon from '@/assets/bootPage/using-icon.png';
 import { appService } from '@/api';
 import styles from './index.less';
-
 const industries = [
   { name: '供水', type: '供水', subTitle: 'WATER SUPPLY', color: 'rgb(16,104,239)' },
   { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER', color: 'rgb(4,142,101)' },
@@ -34,6 +35,7 @@ const industries = [
 const BootPage = props => {
   const dataRef = useRef();
   const process = useRef();
+  const { setPattern } = props;
   const [Industries] = useState(props.global.userInfo.Industries);
   const [percentBottom, setPercentBottom] = useState(-40);
   const [percentNum, setPercentNum] = useState(0);
@@ -80,7 +82,6 @@ const BootPage = props => {
       setTimeout(() => {
         setPercentBottom(40);
         setPercentNum(100);
-        setLoadding(false);
         clearInterval(process.current);
         setTimeout(() => {
           props.history.push('/cloud/introduction/newproducts');
@@ -180,6 +181,11 @@ const BootPage = props => {
 
   return (
     <div className={styles.bootPage}>
+      <div className={styles.b_top_l}>
+        <div className={styles.b_top_l_btn} onClick={() => setPattern(true)}>
+          <img src={enterImg} alt="" /> 进入演示模式 <RightOutlined />
+        </div>
+      </div>
       <div className={styles.bootPageMain}>
         <header className={styles.bootPageHead}>
           {/* eslint-disable-next-line jsx-a11y/alt-text */}

src/pages/bootpage/panda/index.less

@@ -2,23 +2,25 @@
 
 @-webkit-keyframes move {
   0% {
-    -webkit-transform: translate(-90px,0%);
-    transform: translate(-90px,0%);
+    -webkit-transform: translate(-90px, 0%);
+    transform: translate(-90px, 0%);
   }
+
   100% {
-    -webkit-transform: translate(85px,0%);
-    transform: translate(85px,0%);
+    -webkit-transform: translate(85px, 0%);
+    transform: translate(85px, 0%);
   }
 }
 
 @keyframes move {
   0% {
-    -webkit-transform: translate(-90px,0%);
-    transform: translate(-90px,0%);
+    -webkit-transform: translate(-90px, 0%);
+    transform: translate(-90px, 0%);
   }
+
   100% {
-    -webkit-transform: translate(85px,0%);
-    transform: translate(85px,0%);
+    -webkit-transform: translate(85px, 0%);
+    transform: translate(85px, 0%);
   }
 }
 
@@ -27,15 +29,46 @@
   height: 100%;
   position: relative;
   overflow: hidden;
-  background: url('https://panda-water.cn/web4/assets/images/bootPage/背景.jpg')
-    no-repeat top center;
+  background: url('https://panda-water.cn/web4/assets/images/bootPage/背景.jpg') no-repeat top center;
   background-size: cover;
+
+  .b_top_l {
+    width: 281px;
+    padding-left: 33px;
+    margin-top: 17px;
+
+    .b_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;
+      font-weight: 400;
+      color: #FFFFFF;
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
+      }
+    }
+
+    .b_top_l_btn:active {
+      opacity: 0.8;
+    }
+  }
+
   .bootPageMain {
     display: flex;
     align-items: center;
     flex-direction: column;
     height: 100%;
     width: 100%;
+
     .bootPageHead {
       height: 150px;
       display: flex;
@@ -44,18 +77,22 @@
       color: #ffffff;
       flex: none;
       padding-top: 50px;
+
       .bootPageTitle {
         display: flex;
         flex-direction: column;
         margin-left: 20px;
+
         .bootPageZh,
         .bootPageEn {
           font-weight: 500;
         }
+
         .bootPageZh {
           font-size: 34px;
           letter-spacing: 5px;
         }
+
         .bootPageEn {
           font-size: 16px;
           font-family: -webkit-body;
@@ -63,6 +100,7 @@
         }
       }
     }
+
     .bootPageSection {
       display: flex;
       align-items: center;
@@ -70,10 +108,12 @@
       flex: 1;
       height: calc(100% - 160px);
       margin: 20px 0;
+
       &::-webkit-scrollbar {
         width: 0px;
         height: 0px;
       }
+
       .bootPageUl {
         display: flex;
         width: 1280px;
@@ -82,20 +122,24 @@
         list-style: none;
         transition: all .5s ease-out;
         padding-top: 10px;
+
         .bootPageLi {
           position: relative;
           width: 298px;
           height: 268.8px;
           margin: 10px;
+
           &:hover {
             .listMain {
               transform: scale(1.1);
             }
+
             .bootProgress {
               transform: scale(1.1);
               bottom: -10px;
             }
           }
+
           .bootPageList {
             width: 100%;
             height: 100%;
@@ -108,31 +152,37 @@
             font-size: 24px;
             cursor: pointer;
             position: relative;
+
             span {
               margin-top: 20px;
               font-weight: 500;
               color: #fff;
             }
+
             .listMain {
               transition: all 0.2s ease-out;
               display: flex;
               align-items: center;
               flex-direction: column;
+
               img {
                 width: 298px;
                 height: 269px;
                 border-radius: 20px;
                 vertical-align: middle;
               }
+
               span {
                 font-weight: 500;
                 color: #fff;
               }
+
               .bootPageName {
                 position: absolute;
                 bottom: 31px;
                 font-weight: 500;
               }
+
               .bootPageNameEng {
                 font-size: 14px;
                 position: absolute;
@@ -141,9 +191,11 @@
             }
           }
         }
+
         &.bootPageUl_5 {
           width: 960px;
         }
+
         &.bootPageUl_9,
         &.bootPageUl_10 {
           width: 1600px;
@@ -167,6 +219,7 @@
     padding: 0 20px;
     display: flex;
     justify-content: end;
+
     :global {
       .cloud-using-anaylysis-btn {
         cursor: pointer;
@@ -174,11 +227,13 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        & > img {
+
+        &>img {
           width: 50px;
           margin: 0 25px;
         }
-        & > span {
+
+        &>span {
           color: #fff;
           font-size: 14px;
           width: 100%;
@@ -189,6 +244,7 @@
   }
 
   :global {
+
     .@{ant-prefix}-spin-nested-loading,
     .@{ant-prefix}-spin-container {
       height: 100%;
@@ -206,7 +262,7 @@
     bottom: 0px;
   }
 
-  .bootProgress .inner{
+  .bootProgress .inner {
     transition: all .2s ease-out;
     position: absolute;
     height: 100%;
@@ -237,6 +293,7 @@
       .bootPageZh {
         font-size: 26px;
       }
+
       .bootPageEn {
         font-size: 12px;
       }
@@ -250,6 +307,7 @@
       .bootPageZh {
         font-size: 30px;
       }
+
       .bootPageEn {
         font-size: 14px;
       }