@imgSrc: '@/assets/images/integration/'; .integration { width: 100%; position: relative; height: 100%; overflow: hidden; background: url('@{imgSrc}/背景.png') 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; } &_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: 50px; } .integration_row { display: flex; width: 1356px; overflow: hidden; .integration_row_title { flex: none; margin-right: 10px; } .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: 24px; 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_title[type='业务中心'] { width: 60px; height: 240px; background: url('@{imgSrc}/业务中心.png') center/100% 100% no-repeat; } .integration_row_title[type='运营中心'] { margin-left: 12px; width: 53px; height: 212px; background: url('@{imgSrc}/运营中心.png') center/100% 100% no-repeat; } .integration_row_title[type='应用系统'] { width: 60px; height: 341px; background: url('@{imgSrc}/应用系统.png') center/100% 100% no-repeat; } .integration_row_title[type='支撑平台'] { width: 60px; height: 171px; background: url('@{imgSrc}/支撑平台.png') center/100% 100% no-repeat; } // 业务中心start .integration_row[type='业务中心'] { .integration_row_list { padding: 7px; background: url('@{imgSrc}/业务中心背景.png') center/100% 100% no-repeat; } } .integration_row_grid[type='业务中心'] { display: grid; grid-template-columns: 294px 294px; grid-template-rows: 114px 114px; } .integration_row_col[type='业务中心'] { width: 294px; height: 114px; padding: 7px; .integration_row_col_text { color: rgba(226, 210, 255, 0.85); } .integration_row_col_text:after { position: absolute; width: 100%; transform: rotateX(180deg) skewX(10deg); bottom: -26px; left: -2px; background: linear-gradient(to bottom, transparent 25%, rgba(235, 224, 255, 0.3)); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; color: transparent; } .integration_row_col_hover { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('@{imgSrc}/业务中心选中.png') center/100% 100% no-repeat; z-index: 10; } .integration_row_col_content { width: 100%; height: 100%; display: flex; align-items: center; padding-left: 154px; } .integration_row_col_content[name='工作台'] { background: url('@{imgSrc}/工作台.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "工作台"; } } .integration_row_col_content[name='应用中心'] { background: url('@{imgSrc}/应用中心.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "应用中心"; } } .integration_row_col_content[name='指标中心'] { background: url('@{imgSrc}/指标中心.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "指标中心"; } } .integration_row_col_content[name='报表中心'] { background: url('@{imgSrc}/报表中心.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "报表中心"; } } } // 业务中心end // 运营中心 .integration_row[type='运营中心'] { .integration_row_list { padding: 10px 14px; background: url('@{imgSrc}/运营中心背景.png') center/100% 100% no-repeat; } } .integration_row_grid[type='运营中心'] { display: grid; grid-template-columns: 294px 294px; grid-template-rows: 96px 96px; background: url('@{imgSrc}/运营中心背景.png') center/100% 100% no-repeat; } .integration_row_col[type='运营中心'] { width: 100%; height: 100%; padding: 8px 7px; .integration_row_col_text { color: rgba(255, 235, 193, 0.7); } .integration_row_col_text:after { position: absolute; width: 100%; transform: rotateX(180deg) skewX(10deg); bottom: -26px; left: -2px; background: linear-gradient(to bottom, transparent 25%, rgba(255, 242, 215, 0.3)); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; color: transparent; } .integration_row_col_hover { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('@{imgSrc}/运营中心选中.png') center/100% 100% no-repeat; z-index: 10; } .integration_row_col_content { width: 100%; height: 100%; display: flex; align-items: center; padding-left: 139px; } .integration_row_col_content[name='综合展示'] { background: url('@{imgSrc}/综合展示.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "综合展示"; } } .integration_row_col_content[name='原水制水监测'] { padding-left: 116px; background: url('@{imgSrc}/原水制水监测.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "原水制水监测"; } } .integration_row_col_content[name='管网输配'] { background: url('@{imgSrc}/管网输配.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "管网输配"; } } .integration_row_col_content[name='营销客服'] { background: url('@{imgSrc}/营销客服.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "营销客服"; } } } // 运营中心end // 应用系统start .integration_row[type='应用系统'] { margin-top: 18px; .integration_row_list { padding: 0 4px 0 13px; background: url('@{imgSrc}/应用系统背景.png') center/100% 100% no-repeat; } } .integration_row_grid[type='应用系统'] { display: grid; grid-template-columns: 242px 242px 242px 242px 242px; grid-template-rows: 154px 154px; gap: 12px 12px; } .integration_row_col[type='应用系统'] { width: 100%; height: 100%; padding: 0; .integration_row_col_text { color: rgba(189, 220, 255, 0.85); } .integration_row_col_text:after { position: absolute; width: 100%; transform: rotateX(180deg) skewX(10deg); bottom: -6px; left: -2px; background: linear-gradient(to bottom, transparent 25%, rgba(216, 234, 255, 0.3)); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; color: transparent; } .integration_row_col_hover { display: none; position: absolute; left: -10px; top: -10px; width: 262px; height: 174px; background: url('@{imgSrc}/应用系统选中.png') center/100% 100% no-repeat; z-index: 10; } .integration_row_col_content { width: 100%; height: 100%; display: flex; justify-content: center; padding-top: 95px; } .integration_row_col_content[name='生产管理'] { background: url('@{imgSrc}/生产管理.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "生产管理"; } } .integration_row_col_content[name='供水管网探测'] { background: url('@{imgSrc}/供水管网探测.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "供水管网探测"; } } .integration_row_col_content[name='管网运营'] { background: url('@{imgSrc}/管网运营.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "管网运营"; } } .integration_row_col_content[name='管网调度'] { background: url('@{imgSrc}/管网调度.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "管网调度"; } } .integration_row_col_content[name='漏损管控'] { background: url('@{imgSrc}/漏损管控.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "漏损管控"; } } .integration_row_col_content[name='二次供水平台'] { background: url('@{imgSrc}/二次供水平台.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "二次供水平台"; } } .integration_row_col_content[name='营收系统'] { background: url('@{imgSrc}/营收系统.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "营收系统"; } } .integration_row_col_content[name='抄表系统'] { background: url('@{imgSrc}/抄表系统.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "抄表系统"; } } .integration_row_col_content[name='报装系统'] { background: url('@{imgSrc}/报装系统.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "报装系统"; } } .integration_row_col_content[name='网上营业厅'] { background: url('@{imgSrc}/网上营业厅.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "网上营业厅"; } } } //应用系统end // 支撑平台start .integration_row[type='支撑平台'] { margin-top: 18px; padding-bottom: 20px; .integration_row_list { padding: 0 4px 0 13px; background: url('@{imgSrc}/支撑平台背景.png') center/100% 100% no-repeat; } } .integration_row_grid[type='支撑平台'] { display: grid; grid-template-columns: 200px 200px 200px 200px 200px 200px; grid-template-rows: 142px; gap: 12px 12px; } .integration_row_col[type='支撑平台'] { width: 100%; height: 100%; padding: 0; .integration_row_col_text { color: rgba(197, 251, 254, 0.75); } .integration_row_col_text:after { position: absolute; width: 100%; transform: rotateX(180deg) skewX(10deg); bottom: -6px; left: -2px; background: linear-gradient(to bottom, transparent 25%, rgba(216, 234, 255, 0.3)); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; color: transparent; } .integration_row_col_hover { display: none; position: absolute; left: -10px; top: -10px; width: 220px; height: 162px; background: url('@{imgSrc}/支撑平台选中.png') center/100% 100% no-repeat; z-index: 10; } .integration_row_col_content { width: 100%; height: 100%; display: flex; justify-content: center; padding-top: 90px; } .integration_row_col_content[name='公共平台'] { background: url('@{imgSrc}/公共平台.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "公共平台"; } } .integration_row_col_content[name='报警平台'] { background: url('@{imgSrc}/报警平台.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "报警平台"; } } .integration_row_col_content[name='组态平台'] { background: url('@{imgSrc}/组态平台.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "组态平台"; } } .integration_row_col_content[name='GIS发布平台'] { background: url('@{imgSrc}/GIS发布平台.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "GIS发布平台"; } } .integration_row_col_content[name='物理网设备管理'] { background: url('@{imgSrc}/物理网设备管理.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "物理网设备管理"; } } .integration_row_col_content[name='行业大数据平台'] { background: url('@{imgSrc}/行业大数据平台.png') center/100% 100% no-repeat; .integration_row_col_text:after { content: "行业大数据平台"; } } } //支撑平台end &_title { display: flex; &_left { width: 372px; height: 75px; background: url('@{imgSrc}/left.png') center/100% 100% no-repeat; } &_text { width: 820px; height: 97px; background: url('@{imgSrc}/标题.png') center/100% 100% no-repeat; } &_right { width: 372px; height: 75px; background: url('@{imgSrc}/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 { .integration { .anticon { vertical-align: 0.125em; } } }