静态资源更新 样式调整

src/app/layout/passport/passport.component.html

@@ -3,16 +3,16 @@
     <!-- <header-i18n [showLangText]="false" class="langs" [ngStyle]="styleMessage.headerStyles"></header-i18n> -->
 
     <div class="wrap loginContainer" [ngStyle]="styleMessage.loginContainer">
-      <div [ngStyle]="styleMessage.loginLeft">
-        <div [ngStyle]="styleMessage.loginLeftContainer">
-          <p [ngStyle]="styleMessage.loginLeftTitleStyles">
-            {{ styleMessage.loginLeftTitleTop }}
-          </p>
-          <p [ngStyle]="styleMessage.loginLeftTitleStyles">
-            {{ styleMessage.loginLeftTitleBottom }}
-          </p>
-        </div>
-      </div>
+<!--      <div [ngStyle]="styleMessage.loginLeft">-->
+<!--        <div [ngStyle]="styleMessage.loginLeftContainer">-->
+<!--          <p [ngStyle]="styleMessage.loginLeftTitleStyles">-->
+<!--            {{ styleMessage.loginLeftTitleTop }}-->
+<!--          </p>-->
+<!--          <p [ngStyle]="styleMessage.loginLeftTitleStyles">-->
+<!--            {{ styleMessage.loginLeftTitleBottom }}-->
+<!--          </p>-->
+<!--        </div>-->
+<!--      </div>-->
 
       <div class="login-container" [ngStyle]="styleMessage.loginRight">
         <div [ngStyle]="styleMessage.loginRightContainer" class="login-content">

src/app/layout/passport/passport.component.less

@@ -0,0 +1,102 @@
+@import '@delon/theme/index';
+
+:host {
+  ::ng-deep {
+    .container {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      background: #f0f2f5;
+    }
+
+    .langs {
+      z-index: 10000;
+      width: 100%;
+      height: 40px;
+      line-height: 44px;
+      text-align: right;
+
+      .anticon {
+        margin-top: 24px;
+        margin-right: 24px;
+        font-size: 14px;
+        vertical-align: top;
+        cursor: pointer;
+      }
+    }
+
+    .wrap {
+      flex: 1;
+      padding: 32px 0;
+    }
+
+    .ant-form-item {
+      margin-bottom: 24px;
+    }
+
+    @media (min-width: @screen-md-min) {
+      .container {
+        background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+        background-repeat: no-repeat;
+        // background-position: center 110px;
+        background-size: 100%;
+      }
+
+      .wrap {
+        padding: 32px 0 24px;
+      }
+    }
+
+    .top {
+      text-align: center;
+      margin-bottom: 10px
+    }
+
+    .header {
+      height: 44px;
+      line-height: 44px;
+
+      a {
+        text-decoration: none;
+      }
+    }
+
+    .logo {
+      height: 44px;
+      margin-right: 16px;
+    }
+
+    .title {
+      position: relative;
+      color: @heading-color;
+      font-weight: 600;
+      font-size: 33px;
+      font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+
+    .desc {
+      margin-top: 12px;
+      margin-bottom: 40px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+    }
+  }
+}
+
+// @media (max-width: 1366px),
+// screen and (max-height: 768px) {
+//   .container .loginContainer {
+//     top: 50% !important;
+//     min-width: 700px !important;
+//     min-height: 600px !important;
+//     margin: -300px auto auto !important;
+//   }
+
+// }
+
+@media (max-width: 1466px), screen and (max-height: 768px) {
+  .container {
+    background-size: cover;
+  }
+}

src/app/layout/passport/passport.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit } from '@angular/core';
+import { GeneralHttpService } from '@core';
+import { CacheService } from '@delon/cache';
+import { environment } from '@env/environment';
+
+@Component({
+  selector: 'layout-passport',
+  templateUrl: './passport.component.html',
+  styleUrls: ['./passport.component.less']
+})
+export class LayoutPassportComponent implements OnInit {
+  links = [
+    {
+      title: '帮助',
+      href: ''
+    },
+    {
+      title: '隐私',
+      href: ''
+    },
+    {
+      title: '条款',
+      href: ''
+    }
+  ];
+
+  styleMessage: any = {};
+  logoSrc = '';
+  loginTitle = '';
+  loginicon = '';
+
+  constructor(private httpUtils: GeneralHttpService, public srv: CacheService) {}
+
+  ngOnInit(): void {
+    const queryInfos = { enabled: 'Y' };
+    let loginConfig = this.srv.get('formData-sys_login_config', { mode: 'none', type: 'm' });
+    if (loginConfig) {
+      this.handleLoginConfig(loginConfig);
+    } else {
+      this.httpUtils.getLoginConfigList(queryInfos).subscribe(res => {
+        if (res) {
+          if (res.data.length > 0) {
+            loginConfig = res.data[0];
+            const urls = loginConfig.loginbackgroud.split('-;-');
+            // 缓存
+            this.srv.set('formData-sys_login_config', loginConfig, { type: 'm' });
+            this.handleLoginConfig(loginConfig);
+          }
+        }
+      });
+    }
+  }
+
+  /* #region  处理登录页配置 */
+  handleLoginConfig(loginConfig: any) {
+    if (loginConfig.roption) {
+      const option = JSON.parse(loginConfig.roption);
+      console.log('option', option);
+      //
+      if (option?.loginRight?.width && option?.loginLeft?.display && option.loginLeft.display === 'none') {
+        option.loginRight.width = 'auto';
+        option.loginRight.padding = '0 64px';
+      }
+      if (option?.myStyles) {
+        delete option.myStyles;
+      }
+      if (option?.loginRight) {
+        option.loginRight.width = '100%';
+        option.loginRight.background = 'rgb(0,0,0,0)';
+      }
+      delete option.loginContainer.height;
+      delete option.loginContainer.width;
+      this.styleMessage = option;
+    }
+    if (loginConfig.logintitile) {
+      this.loginTitle = loginConfig.logintitile;
+    }
+  }
+  /* #endregion */
+}

src/app/routes/passport/login/login.component.less

@@ -0,0 +1,64 @@
+@import '@delon/theme/index';
+
+:host {
+  display: block;
+  //width: 368px;
+  margin: 0 auto;
+
+  ::ng-deep {
+    .ant-alert-close-icon {
+      position: initial;
+      top: 8px;
+      right: 16px;
+      overflow: hidden;
+      font-size: 12px;
+      line-height: 22px;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
+
+    .ant-tabs .ant-tabs-bar {
+      margin-bottom: 24px;
+      text-align: center;
+      border-bottom: 0;
+    }
+
+    .ant-tabs-tab {
+      color: gray;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .ant-input-affix-wrapper .ant-input:not(:first-child) {
+      padding-left: 34px;
+    }
+
+    .icon {
+      margin-left: 16px;
+      color: rgba(0, 0, 0, 0.2);
+      font-size: 24px;
+      vertical-align: middle;
+      cursor: pointer;
+      transition: color 0.3s;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+
+    .other {
+      margin-top: 24px;
+      line-height: 22px;
+      text-align: left;
+
+      nz-tooltip {
+        vertical-align: middle;
+      }
+
+      .register {
+        float: right;
+      }
+    }
+  }
+}

src/assets/ic.css

@@ -5,15 +5,15 @@
   background-size: cover !important;
 }
 .loginContainer {
-  background-image: url(/assets/image/bg/left-login.png) !important;
-  background-repeat: no-repeat !important;
-  background-size: 40% 100% !important;
-  width: 64% !important;
+  /*background-image: url(/assets/image/bg/left-login.png) !important;*/
+  /*background-repeat: no-repeat !important;*/
+  /*background-size: 40% 100% !important;*/
+  /*width: 64% !important;*/
 }
 .login-container{
-  background-image: url(/assets/image/bg/right-login.png) !important;
-  float: right !important;
-  width: 60% !important;
+  /*background-image: url(/assets/image/bg/right-login.png) !important;*/
+  /*float: right !important;*/
+  /*width: 60% !important;*/
 }
 .login-content{
   background-color: #fff;
@@ -25,6 +25,7 @@
   justify-content: space-evenly !important;
   align-items: center !important;
   flex-direction: column !important;
+  padding: 32px 40px;
 }
 /*.login-content .ng-star-inserted{*/
 /*  margin-top: 35% !important;*/
@@ -56,12 +57,16 @@
 
 /* banner图标完整版 */
 .alain-default__header-logo .alain-default__header-logo-link .alain-default__header-logo-expanded {
-  max-width: 100%;
+  /*max-width: 100%;*/
+  width: 144px;
+  max-height: 52px !important;
 }
 
 /* banner图标精简版 */
 .alain-default__header-logo .alain-default__header-logo-link .alain-default__header-logo-collapsed {
-  max-width: 100%;
+  /*max-width: 100%;*/
+  width: 52px;
+  max-height: 52px !important;
 }
 
 .sf-inner-table-wrapper .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tbody>tr>td {
@@ -78,4 +83,4 @@
 
 .report-every-hour-inspection {
   background: #ADD8E6;
-}
+}