@taihuImg: '@/assets/images/integration/taihu2/'; @imgSrc: '@/assets/images/integration/dongying/'; .integrationDongying { 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; } .integrationDongying_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: 1525px; overflow: hidden; .integration_row_title { flex: none; margin-right: 8px; position: relative; writing-mode: vertical-rl; font-weight: bold; font-size: 20px; 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; padding-right: 30px; } .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_tip { display: none; } .integration_row_col_text { color: #fff !important; } .integration_row_col_sub { color: #fff !important; } } .integration_row_title[type='业务应用'] { width: 80px; height: 204px; background: url('@{imgSrc}/业务应用.png') center center no-repeat; background-size: 100% 100%; } .integration_row_title[type='数据管理'] { width: 80px; height: 332px; background: url('@{imgSrc}/数据管理.png') center center no-repeat; background-size: 100% 100%; } .integration_row_title[type='支撑保障'] { width: 80px; height: 152px; background: url('@{imgSrc}/支撑保障.png') center center no-repeat; background-size: 100% 100%; } // 综合管控start .integration_row[type='业务应用'] { overflow: hidden; height: 204px; display: flex; align-items: center; margin-bottom: 4px; .integration_row_right { flex: 1; display: flex; align-items: flex-start; justify-content: space-between; height: 100%; } .integration_row_list { height: 100%; background: linear-gradient(0deg, rgba(171, 136, 0, 0) 0%, rgba(177, 153, 58, 0.5) 100%); border-radius: 20px; padding-top: 15px; } .integration_row_list[type="管网一张图"] { display: flex; width: 383px; flex: none; } .integration_row_list[type="管网一张图2"] { display: flex; width: 344px; flex: none; } .integration_row_list_title { font-weight: bold; font-size: 22px; color: #FFFFFF; line-height: 33px; writing-mode: vertical-rl; text-shadow: 0px 0px 18px rgba(255, 132, 0, 0.5); padding-left: 18px; padding-right: 2px; letter-spacing: 1px; } } .integration_row_grid[type='业务应用'] { width: 660px; display: flex; justify-content: space-around; padding: 0 12px; flex-wrap: wrap; } .integration_row_grid[type='管网一张图'] { display: flex; flex-direction: column; padding-left: 13px; flex-wrap: wrap; } .integration_row_grid[type='管网一张图2'] { display: flex; flex-direction: column; padding-left: 22px; } .integration_row_col[type='业务应用'] { width: 296px; height: 96px; position: relative; .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: 82px; display: flex; flex-direction: column; justify-content: center; padding: 0px 20px 0px 136px; line-height: 1; } .integration_row_col_tip { position: absolute; transform: rotateX(180deg) skewX(10deg); font-weight: bold; font-size: 20px; 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; top: 48px; left: 136px; } .integration_row_col_content[name='综合调度'] { background: url('@{imgSrc}/综合调度.png') 36px 20px no-repeat, url('@{imgSrc}/综合调度bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; margin-bottom: 13px; .integration_row_col_text:after { // content: "综合调度"; } } .integration_row_col_content[name='生产运营'] { background: url('@{imgSrc}/生产运营.png') 36px 20px no-repeat, url('@{imgSrc}/综合调度bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; margin-bottom: 13px; .integration_row_col_text:after { // content: "生产运营"; } } .integration_row_col_content[name='供水服务'] { background: url('@{imgSrc}/供水服务.png') 36px 20px no-repeat, url('@{imgSrc}/综合调度bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; .integration_row_col_text:after { // content: "供水服务"; } } .integration_row_col_content[name='巡查管护'] { background: url('@{imgSrc}/巡查管护.png') 36px 20px no-repeat, url('@{imgSrc}/综合调度bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; .integration_row_col_text:after { // content: "巡查管护"; } } .integration_row_col_content[name='管网专题图'] { background: url('@{imgSrc}/管网专题图.png') 36px 20px no-repeat, url('@{imgSrc}/综合调度bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; margin-bottom: 13px; .integration_row_col_text:after { // content: "管网专题图"; } } .integration_row_col_content[name='监测一张图'] { background: url('@{imgSrc}/监测一张图.png') 36px 20px no-repeat, url('@{imgSrc}/综合调度bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; margin-bottom: 13px; .integration_row_col_text:after { // content: "监测一张图"; } } .integration_row_col_content[name='二维一张图'] { background: url('@{imgSrc}/二维一张图.png') 36px 20px no-repeat, url('@{imgSrc}/综合调度bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; .integration_row_col_text:after { // content: "二维一张图"; } } .integration_row_col_content[name='智能AI应用'] { background: url('@{imgSrc}/智能AI应用.png') 36px 20px no-repeat, url('@{imgSrc}/综合调度bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; .integration_row_col_text:after { // content: "智能AI应用"; } } } // 综合管控end // 数据底板建设 .integration_row[type='数据管理'] { height: 332px; display: flex; align-items: flex-start; margin-bottom: 4px; .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: 845px; flex: none; height: 100%; 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: 865px; height: 69px; line-height: 54px; position: relative; text-align: center; background: url('@{imgSrc}/数据底板建设.png') center/100% 100% no-repeat; top: -13px; padding-top: 18px; padding-right: 20px; font-weight: bold; font-size: 18px; color: rgba(255, 255, 255, 0.85); } .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; position: relative; top: -10px; } .integration_row_col[type='数据底板建设'] { width: 202px; height: 131px; } .integration_row_list[type='数据底板建设'] { .integration_row_col_content[name='数据治理'] { background: url('@{imgSrc}/数据治理.png') center 22px no-repeat, url('@{imgSrc}/数据底板建设bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='数据服务'] { background: url('@{imgSrc}/数据服务.png') center 22px no-repeat, url('@{imgSrc}/数据底板建设bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='数据交换'] { background: url('@{imgSrc}/数据交换.png') center 22px no-repeat, url('@{imgSrc}/数据底板建设bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='外部共享'] { background: url('@{imgSrc}/外部共享.png') center 22px no-repeat, url('@{imgSrc}/数据底板建设bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='基础数据'] { background: url('@{imgSrc}/基础数据.png') center 22px no-repeat, url('@{imgSrc}/数据底板建设bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='监测数据'] { background: url('@{imgSrc}/监测数据.png') center 22px no-repeat, url('@{imgSrc}/数据底板建设bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='业务数据'] { background: url('@{imgSrc}/业务数据.png') center 22px no-repeat, url('@{imgSrc}/数据底板建设bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='空间数据'] { background: url('@{imgSrc}/空间数据.png') center 22px no-repeat, url('@{imgSrc}/数据底板建设bg.png') center center no-repeat; background-size: 48px 48px, 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('@{taihuImg}/智慧管网管理.png') center/100% 100% no-repeat; font-size: 18px; color: rgba(255, 255, 255, 0.85); } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #AEEFFF; text-align: center; padding-top: 55px; 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: 180px; height: 155px; } .integration_row_col_content[name='预警规则'] { background: url('@{imgSrc}/预警规则.png') center 33px no-repeat, url('@{imgSrc}/预警规则bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='应急预案'] { background: url('@{imgSrc}/应急预案.png') center 33px no-repeat, url('@{imgSrc}/预警规则bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } .integration_row_col_content[name='工程安全'] { background: url('@{imgSrc}/工程安全.png') center 33px no-repeat, url('@{imgSrc}/预警规则bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } } .integration_row_grid[type='知识库'] { display: flex; flex-wrap: wrap; justify-content: center; } //知识库end // 模型库start .integration_row_list[type='模型库'] { width: 100%; height: 108px; 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; padding-top: 15px; .integration_row_col_content { width: 540px; height: 82px; display: flex; padding-left: 207px; padding-bottom: 10px; align-items: center; } .integration_row_col_text { font-size: 20px; color: #AEEFFF; } .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') 77px 18px no-repeat, url('@{imgSrc}/模型库bg.png') center center no-repeat; background-size: 38px 41px, 100% 100%; } } //智慧漏损控制end // 数据支撑start .integration_row[type='支撑保障'] { height: 151px; 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: 338px; height: 137px; 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; padding-top: 12px; .integration_row_col_text { font-weight: bold; font-size: 20px; color: #89FFDC; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5); } .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-left: 125px; padding: 10px 0 18px 125px; } .integration_row_col { width: 305px; height: 127px; } .integration_row_col_content[name='物联网平台'] { background: url('@{imgSrc}/物联网平台.png') 39px 32px no-repeat, url('@{imgSrc}/物联网平台bg.png') center center no-repeat; background-size: 48px 48px, 100% 100%; } } .integration_row_grid[type='数据支撑'] { display: flex; } //数据支撑end // 支撑平台start .integration_row_list[type='支撑平台'] { width: 1083px; height: 137px; overflow: hidden; background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%); border-radius: 20px; flex: none; padding-top: 12px; display: flex; .integration_row_list_title { font-weight: bold; font-size: 22px; line-height: 33px; writing-mode: vertical-rl; color: #FFFFFF; text-shadow: 0px 0px 18px rgba(0, 204, 163, 0.59); padding-left: 18px; padding-right: 2px; letter-spacing: 1px; } .integration_row_col_text { font-weight: bold; font-size: 20px; color: #89FFDC; 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: 252px; height: 126px; } .integration_row_col_content[name='地理信息平台'] { background: url('@{imgSrc}/地理信息平台.png') center 18px no-repeat, url('@{imgSrc}/地理信息平台bg.png') center center no-repeat; background-size: 48px 48px, 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: 48px 48px, 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: 48px 48px, 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: 48px 48px, 100% 100%; } } .integration_row_grid[type='支撑平台'] { display: flex; } //支撑平台end .integrationDongying_title { display: flex; align-items: center; justify-content: center; padding-top: 30px; padding-bottom: 30px; &_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: 55px; font-weight: bold; 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 { .integrationDongying { .anticon { vertical-align: 0.125em; } } }