@imgSrc: '@/assets/images/integration/xinyuan/'; .xinyuanVillagePage { width: 100%; position: relative; height: 100%; overflow: hidden; background: url('@{imgSrc}/新源乡镇.jpg') center/100% 100% no-repeat; .integration_content { position: absolute; left: 197px; top: 103px; padding-top: 10px; height: calc(100% - 113px); overflow: hidden; } .integration_row_col_no { // filter: grayscale(100%) brightness(90%); cursor: not-allowed; } .integration_row_col_link { cursor: pointer; transition: all 0.3s ease-in-out; } .integration_row_col_link:hover { filter: brightness(120%); transform: translateY(-5px); } .integration_row1 { // background: url('@{imgSrc}/运营总览.jpg') center center no-repeat; display: flex; &_col1 { width: 183px; height: 180px; } &_col2 { width: 309px; // height: 180px; margin-left: 12px; } } .integration_row2 { display: flex; } .integration_col1 { &_title { width: 590px; height: 49px; background: url('@{imgSrc}/厂站管理title.png') center/100% 100% no-repeat; text-align: center; line-height: 68px; font-weight: bold; font-size: 18px; color: #FFFFFF; } &_list { display: grid; grid-template-columns: 149px 149px 149px 149px; grid-template-rows: 109px 109px; &_item { text-align: center; background: url('@{imgSrc}/厂站管理bg.png') center/100% 100% no-repeat; img { width: 52px; height: 52px; } &_label { margin-top: 14px; font-weight: bold; font-size: 15px; color: #FFFFFF; line-height: 1; } } } } .integration_col2 { margin-left: 5px; &_title { width: 297px; height: 49px; background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat; text-align: center; line-height: 68px; font-weight: bold; font-size: 18px; color: #FFFFFF; } &_list { display: grid; grid-template-columns: 146px 146px; grid-template-rows: 74px 74px; &_item { text-align: center; background: url('@{imgSrc}/管网运维bg.png') center/100% 100% no-repeat; img { width: 52px; height: 52px; } &_label { margin-top: -10px; font-weight: bold; font-size: 15px; color: #FFFFFF; line-height: 1; } } &_item[name='管网巡检'] { width: 298px; height: 64px; background: url('@{imgSrc}/管网巡检bg.png') center/100% 100% no-repeat; display: flex; align-items: center; img { margin: -3px 43px 0 51px; } &_label { margin-top: 0; } } } } .integration_col3 { margin-left: 10px; &_title { width: 297px; height: 49px; background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat; text-align: center; line-height: 68px; font-weight: bold; font-size: 18px; color: #FFFFFF; } &_list { display: grid; grid-template-columns: 149px 149px; grid-template-rows: 109px 109px; &_item { text-align: center; background: url('@{imgSrc}/业务中心bg.png') center/100% 100% no-repeat; img { width: 52px; height: 52px; } &_label { margin-top: 14px; font-weight: bold; font-size: 15px; color: #FFFFFF; line-height: 1; } } &_item[name='报装管理'] { filter: grayscale(80%) brightness(90%); } } } .integration_col4 { margin-left: 10px; &_title { width: 297px; height: 49px; background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat; text-align: center; line-height: 68px; font-weight: bold; font-size: 18px; color: #FFFFFF; } &_list { display: grid; grid-template-columns: 149px 149px; grid-template-rows: 109px 109px; &_item { text-align: center; background: url('@{imgSrc}/党建管理bg.png') center/100% 100% no-repeat; img { width: 52px; height: 52px; } &_label { margin-top: 14px; font-weight: bold; font-size: 15px; color: #FFFFFF; line-height: 1; } } } } .integration_col5_list_item { position: absolute; &_label { font-weight: bold; font-size: 18px; color: #FFFFFF; } } .integration_col5_list_item[name='物联接入'] { width: 235px; height: 120px; background: url('@{imgSrc}/物联接入.png') center/100% 100% no-repeat; left: 33px; top: 514px; .integration_col5_list_item_label { padding: 28px 0 0 25px; line-height: 1; } } .integration_col5_list_item[name='平台接入'] { width: 231px; height: 123px; background: url('@{imgSrc}/平台接入.png') center/100% 100% no-repeat; left: 355px; top: 572px; .integration_col5_list_item_label { padding: 28px 0 0 25px; line-height: 1; } } .integration_col5_list_item[name='视频接入'] { width: 228px; height: 122px; background: url('@{imgSrc}/视频接入.png') center/100% 100% no-repeat; left: 918px; top: 572px; .integration_col5_list_item_label { padding: 28px 0 0 124px; line-height: 1; } } .integration_col5_list_item[name='门禁接入'] { width: 236px; height: 123px; background: url('@{imgSrc}/门禁接入.png') center/100% 100% no-repeat; left: 1234px; top: 512px; .integration_col5_list_item_label { padding: 28px 0 0 133px; line-height: 1; } } } .hide { visibility: hidden; } & :global { .xinyuanVillagePage { .anticon { vertical-align: 0.125em; } } }