浏览代码

fix:引入一键绑定嵌套页面样式

yangfeng 8 月之前
父节点
当前提交
3c9daf6560

+ 233 - 0
apps/mobile/src/assets/style/modules/fast-login.scss

@@ -0,0 +1,233 @@
+.fast-login-container {
+  margin-top: 0.14rem;
+  margin-bottom: 0.14rem;
+  text-align: center;
+}
+.fast-login {
+  margin: 0 auto;
+  padding: 0 0.4rem;
+}
+.fast-login-text {
+  font-size: 0.32rem;
+  line-height: 0.52rem;
+  background-color: transparent;
+}
+.fast-phone-container {
+  margin: 0.64rem auto 0.8rem;
+  text-align: center;
+}
+.fast-phone-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #171826;
+  font-size: 0.48rem;
+  line-height: 0.96rem;
+}
+.fast-phone-text {
+  color: #5f5e64;
+  text-align: center;
+  font-size: 0.26rem;
+  line-height: 0.4rem;
+}
+.client-verify .phone-number-mask {
+  margin: 0 0.16rem;
+}
+.h5-verify .van-password-input {
+  margin: 0 0.2rem;
+}
+.h5-verify .phone-number-prefix,
+.h5-verify .phone-number-suffix {
+  letter-spacing: 0.1rem;
+}
+.verify-button {
+  padding: 0.18rem 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 0.36rem;
+  line-height: 0.52rem;
+  border-radius: 0.16rem;
+  border: 1px solid transparent;
+}
+.verify-confirm {
+  color: #f7f9fa;
+  background-color: #2abed1;
+  border-color: #2abed1;
+}
+.verify-cancel {
+  color: #2abed1;
+  background-color: transparent;
+  border-color: #2abed1;
+}
+.verify-button-group .verify-button:not(:first-of-type) {
+  margin-top: 0.24rem;
+}
+
+.van-password-input__security li {
+  flex: none;
+  width: 0.4rem;
+  color: inherit;
+  font-size: inherit;
+  border-bottom: 1px solid #5f5e64;
+  background-color: transparent;
+}
+.van-password-input__security li:not(:last-of-type) {
+  margin-right: 0.2rem;
+}
+.van-password-input__security li.van-password-input__item--focus {
+  border-bottom: 2px solid #2abed1;
+}
+
+/* 一键登录相关样式 */
+/* 此处可修改导航栏整体样式:字体大小,字体颜色,背景颜色等 */
+body .page-type-container {
+  position: fixed;
+  bottom: 0;
+  min-height: 100vh;
+  z-index: 99999;
+}
+body .page-type-container .nav-title {
+  color: #fff;
+}
+body
+  .page-type-container
+  .dialog-subtitle,
+  body
+  .dialog-type-container
+  .dialog-subtitle {
+  color: #5f5e64;
+  text-align: center;
+  font-size: 0.26rem;
+  line-height: 0.4rem;
+}
+/* 此处可修改logo容器的样式: 宽度 高度,圆角等 */
+body .page-type-container .logo {
+  margin-top: 0;
+  margin-bottom: 4vh;
+  width: 100%;
+}
+body .dialog-type-container .logo {
+  margin-top: 0;
+  margin-bottom: 4vw;
+  width: 86%;
+}
+.page-type-container .content {
+  min-height: unset;
+}
+/* 此处修改电话号码的样式: 颜色、字体大小等 */
+body .page-type-container .number-con-wrap {
+  flex-direction: column;
+}
+body .page-type-container .number-con-label {
+  color: #5f5e64;
+  text-align: center;
+  font-size: 0.26rem;
+  line-height: 0.4rem;
+}
+body .page-type-container .number-con,
+body .dialog-type-container .number-con {
+  color: #171826;
+  font-size: 0.48rem;
+  line-height: 0.96rem;
+}
+body .page-type-container .number-con {
+  margin: 4vw 0;
+}
+/* 此处修改电话号码掩码的样式:宽度、高度、字体颜、色间距等 */
+body .page-type-container .number-con input,
+body .dialog-type-container .number-con input {
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+  border-bottom: 1px solid #5f5e64;
+}
+body .page-type-container .number-con input:focus,
+body .dialog-type-container .number-con input:focus {
+  border-bottom: 2px solid #2abed1;
+}
+/* 此处修改协议勾选、选中时的颜色 */
+body
+  .page-type-container
+  .agreement
+  .checke-1
+  svg
+  g
+  body
+  .dialog-type-container
+  .agreement
+  .checke-1
+  svg
+  g {
+  fill: #2abed1;
+}
+/* 此处修改登录按钮的样式:颜色大小背景色等 */
+body .page-type-container .submit-btn,
+body .dialog-type-container .submit-btn {
+  margin: 10vw auto;
+  margin-bottom: 20vw;
+  padding: 0.18rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 0.36rem;
+  line-height: 0.52rem;
+  border-radius: 0.16rem;
+  border: 1px solid #2abed1;
+  background: #2abed1;
+}
+body .dialog-type-container .submit-btn {
+  margin: 8vw auto 4vw;
+}
+
+body .page-type-container .submit-disabled,
+body .dialog-type-container .submit-disabled {
+  background: #2abed1;
+}
+body .page-type-container .submit-btn.submit-disabled,
+body .dialog-type-container .submit-btn.submit-disabled {
+  opacity: 0.6;
+}
+/* 此处修改协议区域的样式: 字体颜色,大小等 */
+body .page-type-container .agreement {
+  margin: 2vh 6vw 0;
+}
+body .page-type-container .agreement .agree-content,
+body .dialog-type-container .agreement .agree-content {
+  width: 80vw;
+  margin: 0 auto;
+  color: #171826;
+}
+body .dialog-type-container .agreement .agree-content {
+  width: 74vw;
+}
+body .page-type-container .agreement .checke-0,
+body .page-type-container .agreement .checke-1,
+body .dialog-type-container .agreement .checke-0,
+body .dialog-type-container .agreement .checke-1 {
+  margin-right: 6px;
+}
+body .page-type-container .agreement .checke-1 svg g,
+body .dialog-type-container .agreement .checke-1 svg g {
+  fill: #2abed1;
+}
+body .page-type-container .agreement a,
+body .dialog-type-container .agreement a {
+  color: #2abed1;
+}
+body .page-type-container .custom-view-box {
+  margin: 0 auto;
+  margin-top: -27vw;
+}
+body .page-type-container .agreement .agree-content-tip {
+  top: -7.2vh;
+  left: -1.6vw;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+}
+body .page-type-container .agreement .agree-content-tip::after {
+  content: unset;
+}

+ 3 - 1
apps/mobile/src/components/one-click-binding/index.vue

@@ -273,7 +273,9 @@ export default {
   }
   }
 }
 }
 </script>
 </script>
-
+<style lang="scss">
+@import '@/assets/style/modules/fast-login.scss';
+</style>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .one-click-bind {
 .one-click-bind {
   margin: 12px;
   margin: 12px;