.integrationYixing { 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; } .integrationYixing_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: 152px; background: url('@/assets/images/integration/yixing2/业务中心_bg.png') center center no-repeat; background-size: 100% 100%; } .integration_row_title[type='应用系统'] { width: 46px; height: 332px; background: url('@/assets/images/integration/yixing2/应用系统_bg.png') center center no-repeat; background-size: 100% 100%; } .integration_row_title[type='基础平台'] { width: 46px; height: 208px; background: url('@/assets/images/integration/yixing2/基础平台_bg.png') center center no-repeat; background-size: 100% 100%; } // 综合管控start .integration_row[type='业务中心'] { height: 153px; display: flex; align-items: center; margin-bottom: 15px; .integration_row_list { height: 138px; 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: 2px; } .integration_row_item { flex: none; width: 338px; height: 138px; margin-right: 18px; background: linear-gradient(0deg, rgba(171, 136, 0, 0) 0%, rgba(177, 153, 58, 0.5) 100%); border-radius: 20px; padding-top: 10px; position: relative; top: 2px; display: flex; justify-content: center; } } .integration_row_col[type='水务业务门户'] { width: 304px; height: 126px; .integration_row_col_text { font-weight: bold; font-size: 20px; color: #FFED9A; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); margin-bottom: 2px; } .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: 28px 20px 45px 130px; } .integration_row_col_content[name='水务业务门户'] { background: url('@/assets/images/integration/yixing2/水务业务门户.png') 43px 39px no-repeat, url('@/assets/images/integration/yixing2/水务业务门户bg.png') center center no-repeat; background-size: 40px 40px, 100% 100%; } } .integration_row_grid[type='业务中心'] { display: flex; justify-content: space-around; padding-left: 13px; padding-top: 6px; .integration_row_grid_title { flex: none; font-family: Microsoft YaHei; font-weight: bold; font-size: 20px; writing-mode: vertical-rl; color: #FFFFFF; line-height: 24px; text-shadow: 0 0 18px rgba(255, 132, 0, 0.5); font-style: italic; letter-spacing: 5px; padding-top: 8px; padding-right: 8px; } } .integration_row_col[type='业务中心'] { width: 252px; height: 126px; .integration_row_col_text { font-weight: bold; font-size: 20px; color: #FFED9A; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); margin-bottom: 2px; } .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; align-items: center; padding: 45px 20px 0 20px; } .integration_row_col_content[name='综合展示'] { background: url('@/assets/images/integration/yixing2/综合展示.png') 105px 26px no-repeat, url('@/assets/images/integration/yixing2/综合大屏.png') center center no-repeat; background-size: 40px 40px, 100% 100%; } .integration_row_col_content[name='制水管控'] { background: url('@/assets/images/integration/yixing2/制水管控.png') 105px 26px no-repeat, url('@/assets/images/integration/yixing2/综合大屏.png') center center no-repeat; background-size: 40px 40px, 100% 100%; } .integration_row_col_content[name='管网输配'] { background: url('@/assets/images/integration/yixing2/管网输配.png') 105px 26px no-repeat, url('@/assets/images/integration/yixing2/综合大屏.png') center center no-repeat; background-size: 40px 40px, 100% 100%; } .integration_row_col_content[name='营销客服'] { background: url('@/assets/images/integration/yixing2/营销客服.png') 105px 26px no-repeat, url('@/assets/images/integration/yixing2/综合大屏.png') center center no-repeat; background-size: 40px 40px, 100% 100%; } } // 综合管控end // 应用系统 .integration_row[type='应用系统'] { height: 331px; display: flex; align-items: flex-start; margin-bottom: 15px; .integration_row_right2 { flex: 1; display: flex; overflow: hidden; padding-top: 12px; justify-content: space-between; } .integration_row_list_title { font-weight: bold; font-size: 18px; color: #FFFFFF; font-style: italic; letter-spacing: 2px; padding-right: 14px; } .integration_row_list[type='智慧生产建设'] { width: 249px; height: 324px; overflow: hidden; } .integration_row_list[type='智慧生产调度'] { width: 574px; height: 324px; overflow: hidden; } .integration_row_list[type='智慧营收服务'] { width: 574px; height: 324px; overflow: hidden; } } .integration_row[type='应用系统'] { .integration_row_list[type='智慧生产建设'] { 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[type='智慧生产调度'] { 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[type='智慧营收服务'] { 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: 52px; position: relative; top: -8px; padding-top: 24px; line-height: 1; text-align: center; } .integration_row_list_title[type='智慧生产建设'] { background: url('@/assets/images/integration/yixing2/智慧生产建设.png') center center no-repeat; background-size: 100% 52px; padding-right: 0; } .integration_row_list_title[type='智慧生产调度'] { background: url('@/assets/images/integration/yixing2/智慧生产调度.png') center center no-repeat; background-size: 100% 52px; padding-right: 0; // top: -6px; } .integration_row_list_title[type='智慧营收服务'] { background: url('@/assets/images/integration/yixing2/智慧生产调度.png') center center no-repeat; background-size: 100% 52px; padding-right: 0; // top: -6px; } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #AEEFFF; // padding-top: 50px; padding-bottom: 4px; 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; padding-top: 65px; padding-bottom: 13px; align-items: center; } .integration_row_col_sub { font-weight: 400; font-size: 13px; color: rgba(174, 239, 255, 0.6); } } .integration_row_grid[type='智慧生产建设'] { display: flex; flex-direction: column; } .integration_row_grid[type='智慧生产调度'] { display: flex; flex-wrap: wrap; justify-content: center; } .integration_row_grid[type='智慧营收服务'] { display: flex; flex-wrap: wrap; justify-content: center; } .integration_row_col[type='智慧水厂'] { width: 214px; height: 130px; } .integration_row_col[type='实验室管理'] { width: 214px; height: 130px; } .integration_row_col[name='智慧生产调度'] { width: 178px; height: 130px; } .integration_row_col[type='营业收费'] { width: 178px; height: 130px; } .integration_row_col[type='表务系统'] { width: 178px; height: 130px; } .integration_row_col[type='客服热线'] { width: 178px; height: 130px; } .integration_row_col[type='业扩报装'] { width: 270px; height: 130px; } .integration_row_col[type='大用户水表管理'] { width: 270px; height: 130px; } .integration_row_col_content[name='智慧水厂'] { background: url('@/assets/images/integration/yixing2/智慧水厂.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/智慧水厂bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='实验室管理'] { background: url('@/assets/images/integration/yixing2/实验室管理.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/智慧水厂bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='二次供水'] { background: url('@/assets/images/integration/yixing2/二次供水.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='GIS服务'] { background: url('@/assets/images/integration/yixing2/GIS服务.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='管网GIS'] { background: url('@/assets/images/integration/yixing2/管网GIS.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='管网运维'] { background: url('@/assets/images/integration/yixing2/管网运维.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='DMA控漏'] { background: url('@/assets/images/integration/yixing2/DMA控漏.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='供水调度'] { background: url('@/assets/images/integration/yixing2/供水调度.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='营业收费'] { background: url('@/assets/images/integration/yixing2/营业收费.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='表务系统'] { background: url('@/assets/images/integration/yixing2/表务系统.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='客服热线'] { background: url('@/assets/images/integration/yixing2/客服热线.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/二次供水bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='业扩报装'] { background: url('@/assets/images/integration/yixing2/业扩报装.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/业扩报装bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='大用户水表管理'] { background: url('@/assets/images/integration/yixing2/大用户水表管理.png') center 23px no-repeat, url('@/assets/images/integration/yixing2/业扩报装bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } // 智慧生产调度end // 基础平台start .integration_row[type='基础平台'] { display: flex; align-items: center; .integration_row_list { height: 212px; background: linear-gradient(0deg, rgba(0, 131, 120, 0) 0%, rgba(0, 131, 120, 0.5) 100%); border-radius: 20px; padding-top: 7px; position: relative; top: 5px; } } .integration_row_grid[type='基础平台'] { display: flex; justify-content: center; width: 100%; flex-wrap: wrap; padding: 5px 15px 0 12px; } .integration_row_col[type='基础平台'] { width: 350px; height: 98px; .integration_row_col_text { font-weight: bold; font-size: 20px; color: #89FFDC; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); margin-bottom: 2px; } .integration_row_col_sub { font-weight: 400; font-size: 13px; color: rgba(137, 255, 220, 0.6); } .integration_row_col_content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 28px 20px 45px 144px; } .integration_row_col_content[name='数据中台'] { background: url('@/assets/images/integration/yixing2/数据中台.png') 47px 20px no-repeat, url('@/assets/images/integration/yixing2/基础平台.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='物联网管理'] { background: url('@/assets/images/integration/yixing2/物联网管理.png') 47px 20px no-repeat, url('@/assets/images/integration/yixing2/基础平台.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='外业管理'] { background: url('@/assets/images/integration/yixing2/外业管理.png') 47px 19px no-repeat, url('@/assets/images/integration/yixing2/基础平台.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='公共服务'] { background: url('@/assets/images/integration/yixing2/公共服务.png') 46px 20px no-repeat, url('@/assets/images/integration/yixing2/基础平台.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='统一报警'] { background: url('@/assets/images/integration/yixing2/统一报警.png') 47px 19px no-repeat, url('@/assets/images/integration/yixing2/基础平台.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='WEB组态'] { background: url('@/assets/images/integration/yixing2/WEB组态.png') 47px 19px no-repeat, url('@/assets/images/integration/yixing2/基础平台.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='排班管理'] { background: url('@/assets/images/integration/yixing2/排班管理.png') 47px 19px no-repeat, url('@/assets/images/integration/yixing2/基础平台.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='运维监控'] { background: url('@/assets/images/integration/yixing2/运维监控.png') 47px 20px no-repeat, url('@/assets/images/integration/yixing2/基础平台.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } } //基础平台end .integrationYixing_title { display: flex; // align-items: center; justify-content: center; padding-top: 10px; padding-bottom: 20px; &_text { flex: none; color: #fff; span { line-height: 97px; color: #fff; font-size: 56px; 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; } } } } .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 { .integrationYixing { .anticon { vertical-align: 0.125em; } } }