feat: 瑞云登录页

public/web5Config.json

@@ -44,6 +44,9 @@
     },
     {
       "title": "项目 - 德庆"
+    },
+    {
+      "title": "项目 - 瑞云"
     }
   ]
 }

src/pages/user/login/index.js

@@ -2,7 +2,7 @@
  * @Author: 634665781 634665781@qq.com
  * @Date: 2022-07-08 14:28:01
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-07-31 16:44:10
+ * @LastEditTime: 2024-09-12 13:56:00
  * @FilePath: \CivWeb\src\pages\user\login\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -58,6 +58,7 @@ import ChangchunLogin from './template/project/changchun';
 import TiemenguanLogin from './template/project/tiemenguan';
 import TaihuLogin from './template/project/taihu';
 import DeqingLogin from './template/project/deqing';
+import RuiyunLogin from './template/project/ruiyun';
 import { AppInitState } from '../../../render';
 const LoginTemplate = {
   '新春.html': baseLoginNewYear,
@@ -113,6 +114,7 @@ const LoginTemplate = {
   '项目 - 铁门关.html': TiemenguanLogin,
   '项目 - 太湖.html': TaihuLogin,
   '项目 - 德庆.html': DeqingLogin,
+  '项目 - 瑞云.html': RuiyunLogin,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/template/project/ruiyun/index.less

+.ruiyunLogin {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .bg_swiper {
+        pointer-events: none;
+        z-index: 0;
+        // z-index: 2;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    .bg_swiper_item {
+        width: 100vw;
+        height: 100vh;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .caseHide {
+        display: none !important;
+    }
+
+
+    .inner-bg {
+        width: 100%;
+        height: 100%;
+
+
+        &>div {
+            width: 80%;
+            margin: 0 10% 10%;
+        }
+    }
+
+    .inner-wrapper {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 250px;
+        left: calc(50% - 268.5px);
+        z-index: 50;
+
+    }
+
+    .inner-bg .title {
+        font-size: 27px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 1);
+        letter-spacing: 2px;
+    }
+
+    .form-control:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+
+
+    .inner-center {
+        position: relative;
+        width: 545px;
+        height: 340px;
+        border: 1px solid #FDFDFD;
+        box-shadow: 0px 6px 18px 0px rgba(25, 61, 79, 0.35);
+        border-radius: 15px;
+        z-index: 2;
+        backdrop-filter: blur(6px);
+
+    }
+
+    .welcome-title {
+        height: 105px;
+        border-radius: 8px 8px 0px 0px;
+        text-align: center;
+        font-weight: bold;
+        color: #008EFE;
+        padding-top: 30px;
+
+        img {
+            height: 48px;
+        }
+
+
+    }
+
+    .formgroup2 {
+        display: flex;
+        align-items: center;
+        display: flex;
+        margin: 0px 5.5%;
+        margin-bottom: 10%;
+        align-items: center;
+        margin-bottom: 40px;
+    }
+
+    .APPcodeBox {
+        width: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .APPCtext {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #000000;
+        line-height: 30px;
+        opacity: 0.75;
+    }
+
+    .login-header {
+        box-sizing: border-box;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 82px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 22px;
+        z-index: 50;
+        // border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+
+        .left-title {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            img {
+                // width: 55px;
+                height: 40px;
+            }
+
+            .cn-title {
+
+                font-size: 42px;
+                // font-family: 宋体;
+                font-weight: 400;
+                color: #333;
+                line-height: 55px;
+                text-shadow: 0px 1px 10px #A3AFC7;
+                line-height: 1;
+                margin-left: 10px;
+            }
+        }
+
+        .right-timebox {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+
+            .curr-time {
+                width: 140px;
+                font-size: 34px;
+                font-family: Microsoft YaHei;
+                font-weight: 300;
+                color: #333;
+                text-align: right;
+            }
+
+            .curr-week-date {
+                margin-left: 10px;
+
+                .curr-week {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #333;
+                }
+
+                .curr-date {
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #333;
+                }
+            }
+        }
+    }
+
+    .copyright {
+        position: absolute;
+        bottom: 7%;
+        width: 100%;
+        margin: 0 auto;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #F1F6FD;
+        text-align: center;
+    }
+
+    .qrcode-box {
+        position: absolute;
+        bottom: 0;
+        right: -23px;
+        width: 23px;
+        height: 23px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+    .caseHide {
+        display: none !important;
+    }
+
+    .footerCase {
+        width: 100%;
+        height: 16%;
+        color: #fff;
+        font-weight: 400;
+        font-size: 12px;
+
+        .seg_wrap {
+            position: fixed;
+            z-index: 2;
+            bottom: 118px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%);
+            border: 1px solid rgba(255, 255, 255, 0.9);
+            border-radius: 14px 14px 14px 14px;
+            overflow: hidden;
+            height: 30px;
+            padding: 0;
+            display: flex;
+        }
+
+        .seg_item {
+            font-weight: 400;
+            font-size: 16px;
+            color: #5F718C;
+            width: 68px;
+            text-align: center;
+            line-height: 28px;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+
+        .seg_item_selected {
+            background: linear-gradient(0deg, #0468FF 0%, #57BFFA 100%);
+            font-weight: bold;
+            font-size: 16px;
+            color: #FFFFFF;
+
+
+        }
+
+        .copyright {
+            position: fixed;
+            z-index: 2;
+            text-align: center;
+            width: 100%;
+            bottom: 74px;
+            font-size: 16px;
+            color: #ffff;
+
+            a {
+                color: #fff;
+            }
+
+
+        }
+    }
+
+}
+
+
+& :global {
+    .ruiyunLogin {
+        .panda-console-base-btn {
+            border-radius: 20px;
+        }
+
+        .panda-console-base-segmented {}
+
+        .panda-console-base-segmented-item-label {}
+
+        .panda-console-base-segmented-item {
+            background-color: transparent;
+        }
+
+
+    }
+
+    .popover-style {
+        .@{ant-prefix}-popover-inner-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .@{ant-prefix}-popover-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+:global {
+    .popover-style {
+        .@{ant-prefix}-popover-inner-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .@{ant-prefix}-popover-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+.CarouselRipples {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+& :global {
+    .CarouselRipples:before {
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+    }
+}
\ No newline at end of file