@imgSrc: '@/assets/images/integration/taihu2/'; .integrationTaihu { width: 100%; position: relative; height: 100%; overflow: hidden; background: url('@/assets/images/integration/taihu2/背景2.jpg') center/100% 100% no-repeat; .iframeExitIcon { position: absolute; top: 0; left: -45px; display: flex; height: 44px; width: 44px; background: rgba(28, 94, 180, 0.95); border-radius: 0 7px 7px 0; flex-direction: column; justify-content: space-around; align-items: center; font-size: 12px; transition: all 0.2s; padding: 3px 0; img { width: 17px; height: 12px; } } .iframeExit:hover { .iframeExitIcon { left: 0; } .iframeBackLeft { left: -15px; } } .iframeBackLeft { position: absolute; top: 0; left: 0; width: 14px; height: 44px; background: rgba(28, 94, 180, 0.95); border-radius: 0 7px 7px 0; display: flex; align-items: center; justify-content: center; transition: all 0.3s; img { width: 6px; height: 11px; } } .iframeExit { width: 44px; height: 44px; position: absolute; top: 4px; left: 0; color: #FFF; cursor: pointer; user-select: none; position: absolute; z-index: 110; } .integrationTaihu_exit { position: absolute; right: 10px; top: 10px; z-index: 100; } .integration_content { display: flex; flex-direction: column; align-items: center; transform-origin: left top; position: absolute; left: 50%; top: 50%; padding: 0px 20px 10px; } .integration_row { display: flex; width: 1505px; overflow: hidden; .integration_row_title { flex: none; margin-right: 30px; position: relative; writing-mode: vertical-rl; font-weight: bold; font-size: 22px; color: #fff; line-height: 33px; text-shadow: 0 0 18px rgba(0, 144, 255, 0.5); display: flex; align-items: flex-start; justify-content: center; letter-spacing: 3px; img { width: 33px; height: 42px; position: absolute; right: -25px; top: 50%; transform: translateY(-50%); } } .integration_row_list { flex: 1; display: flex; align-items: center; } } .integration_row_col { position: relative; cursor: pointer; } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #FFFFFF; transition: all 0.1s; position: relative; white-space: nowrap; } .integration_row_col:hover { filter: brightness(120%); .integration_row_col_hover { display: block !important; } .integration_row_col_text { color: #fff !important; } .integration_row_col_sub { color: #fff !important; } } .integration_row_title[type='综合管控'] { width: 46px; height: 144px; 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 center no-repeat; background-size: 100% 100%; } .integration_row_title[type='支撑平台'] { width: 46px; height: 228px; background: url('@{imgSrc}/支撑平台_left.png') center center no-repeat; background-size: 100% 100%; } // 综合管控start .integration_row[type='综合管控'] { height: 144px; display: flex; align-items: center; margin-bottom: 15px; .integration_row_list { height: 124px; 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: 13px; padding-top: 8px; } .integration_row_col[type='综合管控'] { width: 350px; height: 94px; .integration_row_col_text { font-weight: bold; font-size: 20px; color: #FFED9A; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); } .integration_row_col_sub { font-weight: 400; font-size: 13px; color: rgba(231, 215, 138, 0.6); } .integration_row_col_content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 25px 20px 45px 144px; } .integration_row_col_content[name='统一平台'] { background: url('@{imgSrc}/统一平台.png') 45px 12px no-repeat, url('@{imgSrc}/综合管控_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='OA办公'] { background: url('@{imgSrc}/OA办公.png') 45px 12px no-repeat, url('@{imgSrc}/综合管控_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='仓储系统'] { background: url('@{imgSrc}/仓储系统.png') 45px 12px no-repeat, url('@{imgSrc}/综合管控_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='可视化大屏幕'] { background: url('@{imgSrc}/可视化大屏幕.png') 45px 12px no-repeat, url('@{imgSrc}/综合管控_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } } // 综合管控end // 智慧生产调度 .integration_row[type='智慧应用'] { height: 372px; display: flex; 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; color: #FFFFFF; font-style: italic; letter-spacing: 2px; } .integration_row_list_right { flex: 1; height: 100%; overflow: hidden; } } .integration_row_list[type='智慧生产调度'] { margin-right: 20px; width: 804px; height: 362px; overflow: hidden; flex-direction: column; background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%); border-radius: 20px; flex: none; .integration_row_list_title { width: 804px; height: 54px; line-height: 54px; text-align: center; background: url('@{imgSrc}/智慧生产调度.png') center/100% 100% no-repeat; } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #AEEFFF; text-align: center; padding-top: 50px; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); } .integration_row_col_content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } } .integration_row_grid[type='智慧生产调度'] { display: flex; flex-wrap: wrap; justify-content: center; } .integration_row_col[type='生产调度'] { width: 256px; height: 152px; } .integration_row_col[type='科学调度'] { width: 256px; height: 152px; } .integration_row_col[type='二次供水'] { width: 256px; height: 152px; } .integration_row_col[type='应急指挥'] { width: 192px; height: 152px; } .integration_row_col[type='农饮水监测'] { width: 192px; height: 152px; } .integration_row_col[type='水力模型'] { width: 192px; height: 152px; } .integration_row_col[type='设备管理'] { width: 192px; height: 152px; } .integration_row_list[type='智慧生产调度'] { .integration_row_col_content[name='生产调度'] { background: url('@{imgSrc}/生产调度.png') center 18px no-repeat, url('@{imgSrc}/生产调度_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='科学调度'] { background: url('@{imgSrc}/科学调度.png') center 18px no-repeat, url('@{imgSrc}/生产调度_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='二次供水'] { background: url('@{imgSrc}/二次供水.png') center 18px no-repeat, url('@{imgSrc}/生产调度_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='应急指挥'] { background: url('@{imgSrc}/应急指挥.png') center 18px no-repeat, url('@{imgSrc}/应急指挥bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='农饮水监测'] { background: url('@{imgSrc}/农饮水监测.png') center 18px no-repeat, url('@{imgSrc}/应急指挥bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='水力模型'] { background: url('@{imgSrc}/水力模型.png') center 18px no-repeat, url('@{imgSrc}/应急指挥bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='设备管理'] { background: url('@{imgSrc}/设备管理.png') center 18px no-repeat, url('@{imgSrc}/应急指挥bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } } // 智慧生产调度end // 智慧管网管理start .integration_row_list[type='智慧管网管理'] { width: 100%; height: 210px; overflow: hidden; flex-direction: column; background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%); border-radius: 20px; flex: none; margin-bottom: 10px; .integration_row_list_title { width: 100%; height: 54px; line-height: 54px; text-align: center; background: url('@{imgSrc}/智慧管网管理.png') center/100% 100% no-repeat; } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #AEEFFF; text-align: center; padding-top: 50px; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); } .integration_row_col_content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .integration_row_col { width: 192px; height: 152px; } .integration_row_col_content[name='管网GIS'] { background: url('@{imgSrc}/管网GIS.png') center 18px no-repeat, url('@{imgSrc}/应急指挥bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='GIS数据维护'] { background: url('@{imgSrc}/GIS数据维护.png') center 18px no-repeat, url('@{imgSrc}/应急指挥bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='管网巡检'] { background: url('@{imgSrc}/管网巡检.png') center 18px no-repeat, url('@{imgSrc}/应急指挥bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } } .integration_row_grid[type='智慧管网管理'] { display: flex; flex-wrap: wrap; justify-content: center; } //智慧管网管理end // 智慧漏损控制start .integration_row_list[type='智慧漏损控制'] { width: 100%; height: 136px; overflow: hidden; flex-direction: column; background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%); border-radius: 20px; flex: none; .integration_row_list_title { width: 100%; height: 54px; line-height: 54px; text-align: center; background: url('@{imgSrc}/智慧管网管理.png') center/100% 100% no-repeat; } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #AEEFFF; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); } .integration_row_col_content { width: 577px; height: 77px; display: flex; padding-left: 178px; padding-bottom: 15px; align-items: center; } .integration_row_col_sub { font-weight: 400; font-size: 13px; color: rgba(174, 239, 255, 0.6); line-height: 48px; } .integration_row_col_content[name='漏损控制'] { background: url('@{imgSrc}/漏损控制.png') 65px 5px no-repeat, url('@{imgSrc}/智慧漏损控制_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } } .integration_row_grid[type='漏损控制'] { display: flex; flex-wrap: wrap; justify-content: center; } //智慧漏损控制end // 数据支撑start .integration_row[type='支撑平台'] { height: 228px; display: flex; align-items: flex-start; margin-bottom: 10px; justify-content: space-between; overflow: hidden; .integration_row_right { flex: 1; display: flex; align-items: flex-start; justify-content: space-between; padding-top: 15px; } .integration_row_list_title { flex: none; font-weight: bold; font-size: 18px; color: #FFFFFF; font-style: italic; letter-spacing: 2px; } } .integration_row_list[type='数据支撑'] { width: 600px; height: 210px; overflow: hidden; flex-direction: column; background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%); border-radius: 20px; flex: none; .integration_row_list_title { width: 100%; height: 54px; line-height: 54px; text-align: center; background: url('@{imgSrc}/数据支撑.png') center/100% 100% no-repeat; } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #AEEFFF; text-align: center; padding-top: 50px; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); } .integration_row_col_content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .integration_row_col { width: 192px; height: 152px; } .integration_row_col_content[name='物联网平台'] { background: url('@{imgSrc}/物联网平台.png') center 18px no-repeat, url('@{imgSrc}/支撑平台_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='数据统一管理'] { background: url('@{imgSrc}/数据统一管理.png') center 18px no-repeat, url('@{imgSrc}/支撑平台_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='GIS发布平台'] { background: url('@{imgSrc}/GIS发布平台.png') center 18px no-repeat, url('@{imgSrc}/支撑平台_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } } .integration_row_grid[type='数据支撑'] { display: flex; } //数据支撑end // 业务支撑start .integration_row_list[type='业务支撑'] { width: 805px; height: 210px; overflow: hidden; flex-direction: column; background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%); border-radius: 20px; flex: none; margin-bottom: 10px; .integration_row_list_title { width: 100%; height: 54px; line-height: 54px; text-align: center; background: url('@{imgSrc}/业务支撑.png') center/100% 100% no-repeat; } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #AEEFFF; text-align: center; padding-top: 50px; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); } .integration_row_col_content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .integration_row_col { width: 192px; height: 152px; } .integration_row_col_content[name='BMP流程引擎'] { background: url('@{imgSrc}/BMP流程引擎.png') center 18px no-repeat, url('@{imgSrc}/支撑平台_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='可视化工具'] { background: url('@{imgSrc}/可视化工具.png') center 18px no-repeat, url('@{imgSrc}/支撑平台_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='低代码工具'] { background: url('@{imgSrc}/低代码工具.png') center 18px no-repeat, url('@{imgSrc}/支撑平台_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } .integration_row_col_content[name='报表工具'] { background: url('@{imgSrc}/报表工具.png') center 18px no-repeat, url('@{imgSrc}/支撑平台_bg.png') center center no-repeat; background-size: 54px 54px, 100% 100%; } } .integration_row_grid[type='业务支撑'] { display: flex; } //业务支撑end .integrationTaihu_title { display: flex; // align-items: center; justify-content: center; padding-top: 10px; &_left { width: 372px; height: 75px; background: url('@/assets/images/integration2/left.png') center/100% 100% no-repeat; } &_text { flex: none; color: #fff; span { line-height: 97px; color: #fff; font-size: 60px; letter-spacing: 4px; background: linear-gradient(0deg, #56A1EF 0%, #FFFFFF 59%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; // top: -8px; font-weight: bolder; } } &_right { width: 372px; height: 75px; background: url('@/assets/images/integration2/right.png') center/100% 100% no-repeat; } } } .integrationJumpLoad { width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; z-index: 1080; padding-bottom: 50px; background-color: rgba(0, 0, 0, 0.6); } .hide { visibility: hidden; } @-webkit-keyframes scale-in-center { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 1; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1; } } @keyframes scale-in-center { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 1; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1; } } .scaleInCenter { visibility: visible; -webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } & :global { .integrationTaihu { .anticon { vertical-align: 0.125em; } } }