feat: 建始集成登录

src/pages/bootpage/template/constants.js

@@ -16,6 +16,7 @@ import DanlingPage from './project/danling';
 import MilePage from './project/mile';
 import DongyingPage from './project/dongying';
 import QinzhouPage from './project/qinzhou';
+import JianshiPage from './project/jianshi';
 import IntegrationNewPage from './integrationNew';
 export const guidePage = [
   // type 为true 则需要 功能配置 isPanda 为true
@@ -69,6 +70,11 @@ export const guidePage = [
     value: 'qinzhouPage',
     previewSrc: require('@/assets/images/integration/previewImg/钦州.png'),
   },
+  {
+    label: '建始集成登录',
+    value: 'jianshiPage',
+    previewSrc: require('@/assets/images/integration/previewImg/建始.png'),
+  },
   {
     label: '演示环境(旧版)',
     type: true,
@@ -93,4 +99,5 @@ export const BootPageTemplate = {
   milePage: MilePage,
   dongyingPage: DongyingPage,
   qinzhouPage: QinzhouPage,
+  jianshiPage: JianshiPage,
 };

src/pages/bootpage/template/project/jianshi/index.less

+@imgSrc: '@/assets/images/integration/jianshi/';
+
+.integrationJianshi {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: url('@/assets/images/integration/taihu2/背景2.jpg') center/100% 100% no-repeat;
+
+  .integrationJianshi_title {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    margin-top: 44px;
+    margin-bottom: 0px;
+    width: 1324px;
+    height: 75px;
+    background: url('@{imgSrc}/标题bg.png') center center no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .iframeBackIcon {
+    position: absolute;
+    top: 0;
+    right: -45px;
+    display: flex;
+    height: 44px;
+    width: 44px;
+    background: rgba(28, 94, 180, 0.95);
+    border-radius: 7px 0px 0px 7px;
+    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;
+    }
+  }
+
+
+  .iframeBack:hover {
+    .iframeBackIcon {
+      right: 0;
+    }
+
+    .iframeBackLeft {
+      right: -15px;
+    }
+  }
+
+  .iframeBackLeft {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 14px;
+    height: 44px;
+    background: rgba(28, 94, 180, 0.95);
+    border-radius: 7px 0 0 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+
+    img {
+      width: 6px;
+      height: 11px;
+    }
+  }
+
+  .iframeBack {
+    width: 44px;
+    height: 44px;
+    position: absolute;
+    top: 50px;
+    right: 0;
+    color: #FFF;
+    cursor: pointer;
+    user-select: none;
+    position: absolute;
+    z-index: 110;
+
+
+  }
+
+  .integrationJianshi_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_col_no {
+    // filter: grayscale(100%) brightness(90%);
+    cursor: not-allowed;
+  }
+
+  .integration_row_col_link {
+    cursor: pointer;
+  }
+
+  .integration_row_col_link:hover {
+    filter: brightness(120%);
+
+  }
+
+  .integration_row1 {
+    width: 1275px;
+    height: 208px;
+    background: url('@{imgSrc}/水务大数据.png') center/100% 100% no-repeat;
+  }
+
+  .integration_row2 {
+    display: flex;
+    position: relative;
+    height: 115px;
+    width: 1300px;
+    justify-content: space-between;
+
+  }
+
+  .integration_cell {
+    z-index: 20;
+  }
+
+  .integration_cell[type='仓储物资系统'] {
+    height: 149px;
+    width: 312px;
+    position: relative;
+    top: -46px;
+    background: url('@{imgSrc}/仓储物资系统.png') center/100% 100% no-repeat;
+  }
+
+  .integration_cell[type='营业收费系统'] {
+    height: 115px;
+    width: 312px;
+    position: relative;
+    background: url('@{imgSrc}/营业收费系统.png') center/100% 100% no-repeat;
+  }
+
+  .integration_cell[type='OA办公系统'] {
+    height: 115px;
+    width: 312px;
+    position: relative;
+    background: url('@{imgSrc}/OA办公系统.png') center/100% 100% no-repeat;
+  }
+
+  .integration_cell[type='DMA控漏系统'] {
+    height: 149px;
+    width: 312px;
+    position: relative;
+    top: -46px;
+    background: url('@{imgSrc}/DMA控漏系统.png') center/100% 100% no-repeat;
+  }
+
+  .integration_row3 {
+    display: flex;
+    position: relative;
+    height: 338px;
+    width: 1300px;
+    justify-content: space-between;
+    margin-top: 10px;
+
+  }
+
+  .integration_box[type='管网GIS'] {
+    height: 326px;
+    width: 388px;
+    position: relative;
+    top: -40px;
+    background: url('@{imgSrc}/管网GIS.png') center/100% 100% no-repeat;
+  }
+
+  .integration_cell[type='管网采集'] {
+    position: absolute;
+    height: 153px;
+    width: 168px;
+    position: relative;
+    background: url('@{imgSrc}/管网采集.png') center/100% 100% no-repeat;
+    left: 15px;
+    top: 55px;
+  }
+
+
+
+  .integration_cell[type='GIS数据处理'] {
+    position: absolute;
+    height: 149px;
+    width: 168px;
+    background: url('@{imgSrc}/GIS数据处理.png') center/100% 100% no-repeat;
+    left: 187px;
+    top: 76px;
+  }
+
+  .integration_cell[type='水力模型平台'] {
+    position: absolute;
+    height: 190px;
+    width: 341px;
+    background: url('@{imgSrc}/水力模型.png') center/100% 100% no-repeat;
+    left: 15px;
+    top: 188px;
+  }
+
+  .integration_cell[type='厂站网调度'] {
+    height: 338px;
+    width: 501px;
+    position: relative;
+    background: url('@{imgSrc}/厂站网.png') center/100% 100% no-repeat;
+  }
+
+  .integration_cell[type='业务外勤'] {
+    height: 378px;
+    width: 388px;
+    position: relative;
+    top: -40px;
+    background: url('@{imgSrc}/业务外勤.png') center/100% 100% no-repeat;
+  }
+
+  .integration_row4 {
+    position: absolute;
+    height: 374px;
+    width: 1447px;
+    background: url('@{imgSrc}/基础数据平台.png') center/100% 100% no-repeat;
+    bottom: 10px;
+    margin: 0 auto;
+    z-index: 10;
+  }
+
+  .integration_cell[type='统一接入平台'] {
+    height: 98px;
+    width: 193px;
+    position: absolute;
+    bottom: 79px;
+    left: 102px;
+    background: url('@{imgSrc}/统一接入平台.png') center/100% 100% no-repeat;
+  }
+
+  .integration_cell[type='大数据中心'] {
+    height: 63px;
+    width: 221px;
+    position: absolute;
+    bottom: 55px;
+    left: 353px;
+    background: url('@{imgSrc}/大数据中心.png') center/100% 100% no-repeat;
+  }
+
+  .integration_cell[type='运维中心'] {
+    height: 65px;
+    width: 210px;
+    position: absolute;
+    bottom: 55px;
+    right: 343px;
+    background: url('@{imgSrc}/运维中心.png') center/100% 100% no-repeat;
+  }
+
+  .integration_cell[type='信管中心'] {
+    height: 97px;
+    width: 174px;
+    position: absolute;
+    bottom: 86px;
+    right: 107px;
+    background: url('@{imgSrc}/信管中心.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 {
+  .integrationJianshi {
+    .anticon {
+      vertical-align: 0.125em;
+    }
+  }
+}
\ No newline at end of file