|
|
@@ -1,189 +1,206 @@
|
|
|
.login {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- flex-direction: row;
|
|
|
- align-content: flex-start;
|
|
|
-
|
|
|
- .loginLogoBox {
|
|
|
- width: 100%;
|
|
|
- height: 180px;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .loginLogo {
|
|
|
- width: 216px;
|
|
|
- height: 87px;
|
|
|
- position: absolute;
|
|
|
- top: 40px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- background: url("../../assets/login/logo.png");
|
|
|
- background-size: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .languageCon {
|
|
|
- width: 60px;
|
|
|
- right: 15px;
|
|
|
- top: 10px;
|
|
|
- border: 1px solid #FF3456;
|
|
|
- padding: 2px 3px;
|
|
|
- border-radius: 10px;
|
|
|
- color: #FF3456;
|
|
|
-
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: row;
|
|
|
+ align-content: flex-start;
|
|
|
+
|
|
|
+ .loginLogoBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .loginLogo {
|
|
|
+ width: 216px;
|
|
|
+ height: 87px;
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background: url("../../assets/login/logo.png");
|
|
|
+ background-size: 100%;
|
|
|
}
|
|
|
|
|
|
- .loginTitleBox {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .loginTitle {
|
|
|
- height: 28px;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: #404d74;
|
|
|
- font-size: 20px;
|
|
|
- font-family: PingFangSC-Medium;
|
|
|
- text-align: center;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 28px;
|
|
|
- display: block;
|
|
|
- margin: 8px auto 0 auto;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
+ .languageCon {
|
|
|
+ width: 60px;
|
|
|
+ right: 15px;
|
|
|
+ top: 10px;
|
|
|
+ border: 1px solid #ff3456;
|
|
|
+ padding: 2px 3px;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: #ff3456;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .loginTitleBox {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .loginTitle {
|
|
|
+ /* 设置渐变背景，颜色和方向可以根据需要调整 */
|
|
|
+ background: linear-gradient(to right, #f92626, #fcb212);
|
|
|
+ /* 文字颜色设置为透明，这样背景就能透过文字显示出来 */
|
|
|
+ color: transparent;
|
|
|
+ /* 确保渐变背景只应用在文本上 */
|
|
|
+ background-clip: text;
|
|
|
+ /* 某些浏览器可能需要添加前缀 */
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ /* 文字不显示下划线 */
|
|
|
+ text-decoration: none;
|
|
|
+ /* 确保文本是单行的，不换行 */
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 其他样式可以根据实际情况调整 */
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 28px;
|
|
|
+ height: 28px;
|
|
|
}
|
|
|
|
|
|
- .loginFormBox {
|
|
|
- width: 100%;
|
|
|
- margin-top: 38px;
|
|
|
-
|
|
|
- .van-field__body {
|
|
|
- height: 38px;
|
|
|
- }
|
|
|
-
|
|
|
- .van-form .van-cell {
|
|
|
- width: 281px;
|
|
|
- height: 38px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- border-radius: 2px;
|
|
|
- border: 0.5px solid rgba(185, 186, 208, 1);
|
|
|
- padding: 0;
|
|
|
- color: rgba(168, 168, 197, 1);
|
|
|
- font-size: 13px;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 20px;
|
|
|
- overflow: visible;
|
|
|
-
|
|
|
- .van-field__control {
|
|
|
- height: 38px;
|
|
|
- line-height: 38px;
|
|
|
- padding: 6px;
|
|
|
-
|
|
|
- &:-internal-autofill-previewed,
|
|
|
- &:-internal-autofill-selected {
|
|
|
- -webkit-text-fill-color: #323233 !important;
|
|
|
- transition: background-color 5000s ease-in-out 0s !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .van-field__control::-webkit-input-placeholder {
|
|
|
- color: rgba(168, 168, 197, 1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .checkedPasswordBox {
|
|
|
- width: 281px;
|
|
|
- margin: 25px auto 0 auto;
|
|
|
- font-size: 13px;
|
|
|
- color: #FF3456;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 13px;
|
|
|
- line-height: 13px;
|
|
|
-
|
|
|
- .van-checkbox {
|
|
|
- overflow: visible;
|
|
|
- }
|
|
|
-
|
|
|
- .van-checkbox__icon {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .van-checkbox__label {
|
|
|
- line-height: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .van-checkbox__icon--checked .van-icon-success {
|
|
|
- border-color: #FF3456;
|
|
|
- background: #FF3456;
|
|
|
- }
|
|
|
-
|
|
|
- .checkedPassWord .van-icon-success::before {
|
|
|
- content: "";
|
|
|
- background: #fff;
|
|
|
- width: 40%;
|
|
|
- height: 40%;
|
|
|
- position: absolute;
|
|
|
- top: 30%;
|
|
|
- left: 30%;
|
|
|
- border-radius: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .van-checkbox__icon--checked+.van-checkbox__label {
|
|
|
- color: #FF3456;
|
|
|
- }
|
|
|
-
|
|
|
- .forgetPassWord {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .loginWithWechatClass {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .wechat-btn {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- /* 将按钮样式修改为圆形 */
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ // .loginTitle {
|
|
|
+ // height: 28px;
|
|
|
+ // overflow-wrap: break-word;
|
|
|
+ // color: #404d74;
|
|
|
+ // font-size: 20px;
|
|
|
+ // font-family: PingFangSC-Medium;
|
|
|
+ // text-align: center;
|
|
|
+ // white-space: nowrap;
|
|
|
+ // line-height: 28px;
|
|
|
+ // display: block;
|
|
|
+ // margin: 8px auto 0 auto;
|
|
|
+ // font-weight: 600;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ .loginFormBox {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 38px;
|
|
|
+
|
|
|
+ .van-field__body {
|
|
|
+ height: 38px;
|
|
|
+ }
|
|
|
|
|
|
- .wechat-icon {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
+ .van-form .van-cell {
|
|
|
+ width: 281px;
|
|
|
+ height: 38px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 0.5px solid rgba(185, 186, 208, 1);
|
|
|
+ padding: 0;
|
|
|
+ color: rgba(168, 168, 197, 1);
|
|
|
+ font-size: 13px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ overflow: visible;
|
|
|
+
|
|
|
+ .van-field__control {
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ padding: 6px;
|
|
|
+
|
|
|
+ &:-internal-autofill-previewed,
|
|
|
+ &:-internal-autofill-selected {
|
|
|
+ -webkit-text-fill-color: #323233 !important;
|
|
|
+ transition: background-color 5000s ease-in-out 0s !important;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .buttonBox {
|
|
|
- width: 281px;
|
|
|
- margin: 20px auto 0 auto;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .van-field__control::-webkit-input-placeholder {
|
|
|
+ color: rgba(168, 168, 197, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .van-button {
|
|
|
- width: 120px;
|
|
|
- height: 34px;
|
|
|
- border: 1px solid rgba(255, 52, 86, 1);
|
|
|
- background-color: rgba(255, 52, 86, 1);
|
|
|
- }
|
|
|
+ .checkedPasswordBox {
|
|
|
+ width: 281px;
|
|
|
+ margin: 25px auto 0 auto;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #ff3456;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 13px;
|
|
|
+ line-height: 13px;
|
|
|
+
|
|
|
+ .van-checkbox {
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-checkbox__icon {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-checkbox__label {
|
|
|
+ line-height: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-checkbox__icon--checked .van-icon-success {
|
|
|
+ border-color: #ff3456;
|
|
|
+ background: #ff3456;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkedPassWord .van-icon-success::before {
|
|
|
+ content: "";
|
|
|
+ background: #fff;
|
|
|
+ width: 40%;
|
|
|
+ height: 40%;
|
|
|
+ position: absolute;
|
|
|
+ top: 30%;
|
|
|
+ left: 30%;
|
|
|
+ border-radius: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-checkbox__icon--checked + .van-checkbox__label {
|
|
|
+ color: #ff3456;
|
|
|
+ }
|
|
|
+
|
|
|
+ .forgetPassWord {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .register {
|
|
|
- background-color: transparent;
|
|
|
- color: rgba(255, 52, 86, 1);
|
|
|
- }
|
|
|
+ .loginWithWechatClass {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ .wechat-btn {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50%;
|
|
|
+ /* 将按钮样式修改为圆形 */
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
+ .wechat-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
}
|
|
|
|
|
|
+ .buttonBox {
|
|
|
+ width: 281px;
|
|
|
+ margin: 20px auto 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .van-button {
|
|
|
+ width: 120px;
|
|
|
+ height: 34px;
|
|
|
+ border: 1px solid rgba(255, 52, 86, 1);
|
|
|
+ background-color: rgba(255, 52, 86, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .register {
|
|
|
+ background-color: transparent;
|
|
|
+ color: rgba(255, 52, 86, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
:root {
|
|
|
- --van-width: auto;
|
|
|
- --van-popover-action-width: var(--van-width);
|
|
|
-}
|
|
|
+ --van-width: auto;
|
|
|
+ --van-popover-action-width: var(--van-width);
|
|
|
+}
|
