style: 太湖集成页样式修改

098a8f60 · 周宏民 · d8fe8c82 · 098a8f60 · 098a8f60 · 098a8f60
Commit 098a8f60 authored Jul 31, 2024 by 周宏民
Showing with 91 additions and 75 deletions

背景2.jpg src/assets/images/integration/taihu/背景2.jpg +0 -0

index.js src/pages/bootpage/template/project/taihu/index.js +63 -61

index.less src/pages/bootpage/template/project/taihu/index.less +28 -14

No files found.
--- a/src/assets/images/integration/taihu/背景.jpg
+++ b/src/assets/images/integration/taihu/背景.jpg
--- a/src/pages/bootpage/template/project/taihu/index.js
+++ b/src/pages/bootpage/template/project/taihu/index.js
@@ -16,7 +16,7 @@ import defaultConfig from './data.json';
 import styles from './index.less';
 import Iframe from '../../demonstration/components/Iframe';
 const boxWidth = 1920;
-const boxHeight = 1008;
+const boxHeight = 930;
 const IntegrationTaihu = props => {
  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
  const timer2 = useRef(null);
@@ -33,7 +33,7 @@ const IntegrationTaihu = props => {
  };
  const [boxSize, setBoxSize] = useState({
    scale: 1,
-    boxHeight: 1008,
+    boxHeight: 930,
  });
  const [linkUrl, setLinkUrl] = useState('');
  const [jumpLoading, setJumpLoading] = useState(false);
@@ -259,40 +259,14 @@ const IntegrationTaihu = props => {
            智慧应用
            <img src={icon2} alt="" />
          </div>
-          <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 className={styles.integration_row_right2}>
+            <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 className={styles.integration_row_grid} type="智慧生产调度">
+                {configData['智慧生产调度'] &&
+                  configData['智慧生产调度'].map(item => (
                    <div
                      key={item.name}
                      className={styles.integration_row_col}
@@ -312,35 +286,63 @@ const IntegrationTaihu = props => {
                  ))}
              </div>
            </div>
-            <div className={styles.integration_row_list} type="智慧漏损控制">
-              <div className={styles.integration_row_list_title} type="智慧漏损控制">
-                - 智慧漏损控制 -
+            <div className={styles.integration_row_list_right}>
+              <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_grid} type="智慧漏损控制">
-                {configData['智慧漏损控制'] &&
-                  configData['智慧漏损控制'].map(item => (
-                    <div
-                      key={item.name}
-                      className={styles.integration_row_col}
-                      type={item.name}
-                      onClick={() => onLink(item.url)}
-                    >
+              <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
-                        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>
-                        {item.english ? (
-                          <div className={styles.integration_row_col_sub}>
-                            &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {item.english || ''}
-                          </div>
-                        ) : null}
+                        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>
+                          {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>

--- a/src/pages/bootpage/template/project/taihu/index.less
+++ b/src/pages/bootpage/template/project/taihu/index.less
@@ -7,7 +7,7 @@
  position: relative;
  height: 100%;
  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 {
    position: absolute;
@@ -92,17 +92,17 @@
    position: absolute;
    left: 50%;
    top: 50%;
-    padding: 50px;
+    padding: 0px 20px 10px;
  }

  .integration_row {
    display: flex;
-    width: 1500px;
+    width: 1505px;
    overflow: hidden;

    .integration_row_title {
      flex: none;
-      margin-right: 25px;
+      margin-right: 30px;
      position: relative;
      writing-mode: vertical-rl;
      font-weight: bold;
@@ -119,7 +119,7 @@
        width: 33px;
        height: 42px;
        position: absolute;
-        right: -20px;
+        right: -25px;
        top: 50%;
        transform: translateY(-50%);
      }
@@ -168,21 +168,23 @@
  .integration_row_title[type='综合管控'] {
    width: 46px;
    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='智慧应用'] {
    width: 46px;
    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='支撑平台'] {
    width: 46px;
    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 @@

    .integration_row_list {
      height: 124px;
-      padding: 7px;
      background: linear-gradient(0deg, rgba(171, 136, 0, 0) 0%, rgba(177, 153, 58, 0.5) 100%);
      border-radius: 20px;
+      padding-top: 7px;
+      position: relative;
+      top: 5px;
    }
  }

  .integration_row_grid[type='综合管控'] {
    display: flex;
    justify-content: space-around;
-    padding-left: 15px;
+    padding-left: 13px;
+    padding-top: 8px;
  }

  .integration_row_col[type='综合管控'] {
@@ -271,6 +276,13 @@
    align-items: flex-start;
    margin-bottom: 15px;

+    .integration_row_right2 {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+      padding-top: 12px;
+    }
+
    .integration_row_list_title {
      font-weight: bold;
      font-size: 18px;
@@ -306,6 +318,7 @@
      text-align: center;
      background: url('@{imgSrc}/智慧生产调度.png') center/100% 100% no-repeat;

+
    }

    .integration_row_col_text {
@@ -589,7 +602,7 @@
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
-      padding-top: 10px;
+      padding-top: 15px;
    }

    .integration_row_list_title {
@@ -764,6 +777,7 @@
    // align-items: center;
    justify-content: center;
    padding-top: 10px;
+
    &_left {
      width: 372px;
      height: 75px;
@@ -780,12 +794,12 @@
        color: #fff;
        font-size: 60px;
        letter-spacing: 4px;
-        font-family: 'PangMenZhengDaoBiaoTiTi';
        background: linear-gradient(0deg, #56A1EF 0%, #FFFFFF 59%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
-        top: -8px;
+        // top: -8px;
+        font-weight: bolder;
      }
    }