Skip to content

C
CivWeb
Commit 098a8f60 authored by 周宏民's avatar 周宏民
Browse files
Options

style: 太湖集成页样式修改

parent d8fe8c82
Pipeline #91282 passed with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 91 additions and 75 deletions
          src/pages/bootpage/template/project/taihu/index.js
          View file @ 098a8f60
          ...@@ -16,7 +16,7 @@ import defaultConfig from './data.json'; ...@@ -16,7 +16,7 @@ import defaultConfig from './data.json';
          import styles from './index.less'; import styles from './index.less';
          import Iframe from '../../demonstration/components/Iframe'; import Iframe from '../../demonstration/components/Iframe';
          const boxWidth = 1920; const boxWidth = 1920;
          const boxHeight = 1008; const boxHeight = 930;
          const IntegrationTaihu = props => { const IntegrationTaihu = props => {
          const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false); const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
          const timer2 = useRef(null); const timer2 = useRef(null);
          ...@@ -33,7 +33,7 @@ const IntegrationTaihu = props => { ...@@ -33,7 +33,7 @@ const IntegrationTaihu = props => {
          }; };
          const [boxSize, setBoxSize] = useState({ const [boxSize, setBoxSize] = useState({
          scale: 1, scale: 1,
          boxHeight: 1008, boxHeight: 930,
          }); });
          const [linkUrl, setLinkUrl] = useState(''); const [linkUrl, setLinkUrl] = useState('');
          const [jumpLoading, setJumpLoading] = useState(false); const [jumpLoading, setJumpLoading] = useState(false);
          ...@@ -259,40 +259,14 @@ const IntegrationTaihu = props => { ...@@ -259,40 +259,14 @@ const IntegrationTaihu = props => {
          智慧应用 智慧应用
          <img src={icon2} alt="" /> <img src={icon2} alt="" />
          </div> </div>
          <div className={styles.integration_row_list} type="智慧生产调度"> <div className={styles.integration_row_right2}>
          <div className={styles.integration_row_list_title} type="智慧生产调度"> <div className={styles.integration_row_list} type="智慧生产调度">
          - 智慧生产调度 - <div className={styles.integration_row_list_title} type="智慧生产调度">
          </div> - 智慧生产调度 -
          <div className={styles.integration_row_grid} type="智慧生产调度">
          {configData['智慧生产调度'] &&
          configData['智慧生产调度'].map(item => (
          <div
          key={item.name}
          className={styles.integration_row_col}
          type={item.name}
          onClick={() => onLink(item.url)}
          >
          <div
          className={classNames(
          styles.integration_row_col_hover,
          'animate__fadeIn animate__animated duration-100ms',
          )}
          />
          <div className={styles.integration_row_col_content} name={item.name}>
          <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
          </div>
          </div>
          ))}
          </div>
          </div>
          <div className={styles.integration_row_list_right}>
          <div className={styles.integration_row_list} type="智慧管网管理">
          <div className={styles.integration_row_list_title} type="智慧管网管理">
          - 智慧管网管理 -
          </div> </div>
          <div className={styles.integration_row_grid} type="智慧管网管理"> <div className={styles.integration_row_grid} type="智慧生产调度">
          {configData['智慧管网管理'] && {configData['智慧生产调度'] &&
          configData['智慧管网管理'].map(item => ( configData['智慧生产调度'].map(item => (
          <div <div
          key={item.name} key={item.name}
          className={styles.integration_row_col} className={styles.integration_row_col}
          ...@@ -312,35 +286,63 @@ const IntegrationTaihu = props => { ...@@ -312,35 +286,63 @@ const IntegrationTaihu = props => {
          ))} ))}
          </div> </div>
          </div> </div>
          <div className={styles.integration_row_list} type="智慧漏损控制"> <div className={styles.integration_row_list_right}>
          <div className={styles.integration_row_list_title} type="智慧漏损控制"> <div className={styles.integration_row_list} type="智慧管网管理">
          - 智慧漏损控制 - <div className={styles.integration_row_list_title} type="智慧管网管理">
          - 智慧管网管理 -
          </div>
          <div className={styles.integration_row_grid} type="智慧管网管理">
          {configData['智慧管网管理'] &&
          configData['智慧管网管理'].map(item => (
          <div
          key={item.name}
          className={styles.integration_row_col}
          type={item.name}
          onClick={() => onLink(item.url)}
          >
          <div
          className={classNames(
          styles.integration_row_col_hover,
          'animate__fadeIn animate__animated duration-100ms',
          )}
          />
          <div className={styles.integration_row_col_content} name={item.name}>
          <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
          </div>
          </div>
          ))}
          </div>
          </div> </div>
          <div className={styles.integration_row_grid} type="智慧漏损控制"> <div className={styles.integration_row_list} type="智慧漏损控制">
          {configData['智慧漏损控制'] && <div className={styles.integration_row_list_title} type="智慧漏损控制">
          configData['智慧漏损控制'].map(item => ( - 智慧漏损控制 -
          <div </div>
          key={item.name} <div className={styles.integration_row_grid} type="智慧漏损控制">
          className={styles.integration_row_col} {configData['智慧漏损控制'] &&
          type={item.name} configData['智慧漏损控制'].map(item => (
          onClick={() => onLink(item.url)}
          >
          <div <div
          className={classNames( key={item.name}
          styles.integration_row_col_hover, className={styles.integration_row_col}
          'animate__fadeIn animate__animated duration-100ms', type={item.name}
          )} onClick={() => onLink(item.url)}
          /> >
          <div className={styles.integration_row_col_content} name={item.name}> <div
          <div className={styles.integration_row_col_text}>{item.label || item.name}</div> className={classNames(
          {item.english ? ( styles.integration_row_col_hover,
          <div className={styles.integration_row_col_sub}> 'animate__fadeIn animate__animated duration-100ms',
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {item.english || ''} )}
          </div> />
          ) : null} <div className={styles.integration_row_col_content} name={item.name}>
          <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
          {item.english ? (
          <div className={styles.integration_row_col_sub}>
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {item.english || ''}
          </div>
          ) : null}
          </div>
          </div> </div>
          </div> ))}
          ))} </div>
          </div> </div>
          </div> </div>
          </div> </div>
          ......
          src/pages/bootpage/template/project/taihu/index.less
          View file @ 098a8f60
          ...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
          position: relative; position: relative;
          height: 100%; height: 100%;
          overflow: hidden; overflow: hidden;
          background: url('@/assets/images/integration/taihu/背景.jpg') center/100% 100% no-repeat; background: url('@/assets/images/integration/taihu/背景2.jpg') center/100% 100% no-repeat;
          .iframeExitIcon { .iframeExitIcon {
          position: absolute; position: absolute;
          ...@@ -92,17 +92,17 @@ ...@@ -92,17 +92,17 @@
          position: absolute; position: absolute;
          left: 50%; left: 50%;
          top: 50%; top: 50%;
          padding: 50px; padding: 0px 20px 10px;
          } }
          .integration_row { .integration_row {
          display: flex; display: flex;
          width: 1500px; width: 1505px;
          overflow: hidden; overflow: hidden;
          .integration_row_title { .integration_row_title {
          flex: none; flex: none;
          margin-right: 25px; margin-right: 30px;
          position: relative; position: relative;
          writing-mode: vertical-rl; writing-mode: vertical-rl;
          font-weight: bold; font-weight: bold;
          ...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
          width: 33px; width: 33px;
          height: 42px; height: 42px;
          position: absolute; position: absolute;
          right: -20px; right: -25px;
          top: 50%; top: 50%;
          transform: translateY(-50%); transform: translateY(-50%);
          } }
          ...@@ -168,21 +168,23 @@ ...@@ -168,21 +168,23 @@
          .integration_row_title[type='综合管控'] { .integration_row_title[type='综合管控'] {
          width: 46px; width: 46px;
          height: 144px; height: 144px;
          background: url('@{imgSrc}/综合管控_left.png') center/100% 100% no-repeat; background: url('@{imgSrc}/综合管控_left.png') center center no-repeat;
          background-size: 100% 100%;
          } }
          .integration_row_title[type='智慧应用'] { .integration_row_title[type='智慧应用'] {
          width: 46px; width: 46px;
          height: 372px; height: 372px;
          background: url('@{imgSrc}/智慧应用_left.png') center/100% 100% no-repeat; background: url('@{imgSrc}/智慧应用_left.png') center center no-repeat;
          background-size: 100% 100%;
          } }
          .integration_row_title[type='支撑平台'] { .integration_row_title[type='支撑平台'] {
          width: 46px; width: 46px;
          height: 228px; height: 228px;
          background: url('@{imgSrc}/支撑平台_left.png') center/100% 100% no-repeat; background: url('@{imgSrc}/支撑平台_left.png') center center no-repeat;
          background-size: 100% 100%;
          } }
          ...@@ -195,16 +197,19 @@ ...@@ -195,16 +197,19 @@
          .integration_row_list { .integration_row_list {
          height: 124px; height: 124px;
          padding: 7px;
          background: linear-gradient(0deg, rgba(171, 136, 0, 0) 0%, rgba(177, 153, 58, 0.5) 100%); background: linear-gradient(0deg, rgba(171, 136, 0, 0) 0%, rgba(177, 153, 58, 0.5) 100%);
          border-radius: 20px; border-radius: 20px;
          padding-top: 7px;
          position: relative;
          top: 5px;
          } }
          } }
          .integration_row_grid[type='综合管控'] { .integration_row_grid[type='综合管控'] {
          display: flex; display: flex;
          justify-content: space-around; justify-content: space-around;
          padding-left: 15px; padding-left: 13px;
          padding-top: 8px;
          } }
          .integration_row_col[type='综合管控'] { .integration_row_col[type='综合管控'] {
          ...@@ -271,6 +276,13 @@ ...@@ -271,6 +276,13 @@
          align-items: flex-start; align-items: flex-start;
          margin-bottom: 15px; margin-bottom: 15px;
          .integration_row_right2 {
          flex: 1;
          display: flex;
          overflow: hidden;
          padding-top: 12px;
          }
          .integration_row_list_title { .integration_row_list_title {
          font-weight: bold; font-weight: bold;
          font-size: 18px; font-size: 18px;
          ...@@ -306,6 +318,7 @@ ...@@ -306,6 +318,7 @@
          text-align: center; text-align: center;
          background: url('@{imgSrc}/智慧生产调度.png') center/100% 100% no-repeat; background: url('@{imgSrc}/智慧生产调度.png') center/100% 100% no-repeat;
          } }
          .integration_row_col_text { .integration_row_col_text {
          ...@@ -589,7 +602,7 @@ ...@@ -589,7 +602,7 @@
          display: flex; display: flex;
          align-items: flex-start; align-items: flex-start;
          justify-content: space-between; justify-content: space-between;
          padding-top: 10px; padding-top: 15px;
          } }
          .integration_row_list_title { .integration_row_list_title {
          ...@@ -764,6 +777,7 @@ ...@@ -764,6 +777,7 @@
          // align-items: center; // align-items: center;
          justify-content: center; justify-content: center;
          padding-top: 10px; padding-top: 10px;
          &_left { &_left {
          width: 372px; width: 372px;
          height: 75px; height: 75px;
          ...@@ -780,12 +794,12 @@ ...@@ -780,12 +794,12 @@
          color: #fff; color: #fff;
          font-size: 60px; font-size: 60px;
          letter-spacing: 4px; letter-spacing: 4px;
          font-family: 'PangMenZhengDaoBiaoTiTi';
          background: linear-gradient(0deg, #56A1EF 0%, #FFFFFF 59%); background: linear-gradient(0deg, #56A1EF 0%, #FFFFFF 59%);
          -webkit-background-clip: text; -webkit-background-clip: text;
          -webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
          position: relative; position: relative;
          top: -8px; // top: -8px;
          font-weight: bolder;
          } }
          } }
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment