jufubao-base 1.0.186-beta3 → 1.0.186

package/src/components/JfbBasePhoneLogin/JfbBasePhoneLogin.vue

@@ -3,114 +3,78 @@
     class="jfb-base-phone-login"
     @click="handleEditxSelect"
     :class="{
-      editx: isEditx && active,
-      noBorder: noBorder,
+      editx : isEditx && active,
+      noBorder: noBorder
     }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-phone-login__edit"
-      :class="{ editx: isEditx && active }"
+      :class="{ editx : isEditx && active }"
       v-if="isEditx && active && !noBorder"
     >
       <view class="jfb-base-phone-login__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view :style="{
-      '--agreement-align': agreementAlign
-    }" class="jfb-base-phone-login__body">
-      <view :style="loginFormStyle" class="panel-login-password">
-        <xd-form
-          :label-align="labelAlign"
-          :labelPosition="labelPosition"
-          :key="formRenderKey"
+    <view class="jfb-base-phone-login__body">
+      <view class="panel-login-password">
+        <xd-form label-width="128"
+          style="margin-top: 40rpx;"
+          label-align="right"
+          content-align="left"
           :border="true"
-          paddingBetween="0"
-          :style="{
-            '--form-border-color': formBorderColor,
-            '--form-border-width': formBorderWidth + 'px',
-            '--label-font-size': $rpxNum * parseInt(labelFont.fontSize) + 'px',
-            '--label-font-color': labelFont.color,
-            '--label-font-weight': labelFont.fontWeight,
-            '--content-font-size':
-              $rpxNum * parseInt(contentFont.fontSize) + 'px',
-            '--content-font-color': contentFont.color,
-            '--content-font-weight': contentFont.fontWeight,
-            '--placeholder-font-size':
-              $rpxNum * parseInt(placeholderFont.fontSize) + 'px',
-            '--placeholder-font-color': placeholderFont.color,
-            '--placeholder-font-weight': placeholderFont.fontWeight,
-            'margin-top': '40rpx',
-          }"
         >
           <xd-form-item
-            class="form-item"
-            :class="[inputStyle]"
-            :leftIcon="phoneIcon"
-            :labelWidth="labelWidth"
             label="手机号"
             content-align="left"
           >
             <xd-form-input
               v-model="accountForm.phone_number"
-              :placeholder="phonePlaceholder"
+              placeholder="请输入11位手机号"
             />
           </xd-form-item>
           <xd-form-item
-            class="form-item"
             label="验证码"
             content-align="left"
-            :class="[inputStyle]"
-            :leftIcon="codeIcon"
-            :labelWidth="labelWidth"
           >
             <view class="flex align-center">
               <xd-form-input
                 v-model="accountForm.verification_code"
-                :placeholder="codePlaceholder"
+                placeholder="请输入验证码"
               />
-              <view class="get_code" @click="reGetCode" :style="getCodeStyle">{{
-                jfbTimeer ? jfbTimeer + "秒后获取" : "获取验证码"
-              }}</view>
+              <view
+                class="get_code"
+                @click="reGetCode"
+                :style="{color: mainColor}"
+              >{{jfbTimeer ? jfbTimeer + '秒后获取':'获取验证码'}}</view>
             </view>
           </xd-form-item>
         </xd-form>
-        <view class="form-group" :style="agreementBoxStyle">
+        <view class="form-group" style="padding-bottom:0">
           <xd-form-checkbox
             class="xd-form-checkbox"
             v-model="panel_1_checked"
             mode="default"
             multiple
-            :localdata="[
-              { value: 1, text: '登录即同意《隐私政策》《用户服务协议》' },
-            ]"
+            :localdata="[{value: 1, text: '登录即同意《隐私政策》《用户服务协议》'}]"
           >
             <template slot="a1">
-              <view class="text-content" :style="agreeFont">
+              <view class="text-content">
                 <text>请阅读并同意</text>
-                <text
-                  @click.stop="handlePrivacy('privacy_privacy')"
-                  :style="privacyFont"
-                  >《隐私政策》</text
-                >
-                <text
-                  @click.stop="handlePrivacy('privacy_service')"
-                  :style="privacyFont"
-                  >《用户服务协议》</text
-                >
+                <text @click.stop="handlePrivacy('privacy_privacy')" :style="{color: mainColor}">《隐私政策》</text>
+                <text @click.stop="handlePrivacy('privacy_service')" :style="{color: mainColor}">《用户服务协议》</text>
               </view>
             </template>
           </xd-form-checkbox>
         </view>
-        <view :style="btnWrapStyle" class="form-group">
+        <view class="form-group">
           <xd-button
             :disabled="!panelIsChecked"
-            style="flex: 1"
+            style="flex: 1;"
             type="primary"
-            :radius="btnRadius + 'rpx'"
+            radius="10rpx"
             @click="doLoginForm"
-            >登录</xd-button
-          >
+          >登录</xd-button>
         </view>
         <!-- <view
           class="not_login"
@@ -123,506 +87,188 @@
 </template>
 
 <script>
-import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-import { jfbRootExec } from "@/utils/xd.event";
-import JfbBasePhoneLoginMixin from "./JfbBasePhoneLoginMixin";
-import componentsMixins from "@/mixins/componentsMixins";
-import extsMixins from "@/mixins/extsMixins";
-import { getContainerPropsValue } from "@/utils/xd.base";
-import XdFormItem from "@/components/XdFormItem/XdFormItem";
-import XdForm from "@/components/XdForm/XdForm";
-import XdFormInput from "@/components/XdFormInput/XdFormInput";
-import XdButton from "@/components/XdButton/XdButton";
-import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox";
-
-export default {
-  // #ifdef MP-WEIXIN
-  options: { styleIsolation: "shared" },
-  // #endif
-
-  name: "JfbBasePhoneLogin",
-  components: {
-    XdFontIcon,
-    XdForm,
-    XdFormItem,
-    XdFormInput,
-    XdButton,
-    XdFormCheckbox,
-  },
-  mixins: [componentsMixins, extsMixins, JfbBasePhoneLoginMixin],
-  data() {
-    return {
-      panel_1_checked: "",
-      accountForm: {
-        phone_number: "",
-        verification_code: "",
-      },
-      jfbTimeer: 0,
-      interval: null,
-      auth_code: "",
-      provider_id: "",
-      callback_url: "",
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBasePhoneLoginMixin from "./JfbBasePhoneLoginMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins"
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import XdFormItem from "@/components/XdFormItem/XdFormItem";
+  import XdForm from "@/components/XdForm/XdForm";
+  import XdFormInput from "@/components/XdFormInput/XdFormInput";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox"
 
-      inputStyle: "linear", //输入框样式 linear:线性  face: 面性
-      formBorderColor: "#F9F9F9", //
-      formBorderWidth: 1, //表单边框宽度
-      formWrapBorderWidth: 1, //表单外边框宽度
-      formWrapBorderColor: "#F9F9F9", //表单外边框宽度
-      formShadowW: 0, //表单阴影宽度
-      formShadowColor: '#fff', //表单阴影颜色
-      formBorderRadius: 20, //表单圆角
-      formBgColor: "", //表单背景颜色
-      formPadding: {
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-      },
-      formMargin: {
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-      },
-      labelAlign: "left", //表单label对齐方式
-      labelPosition: "left", //表单label位置
-      labelWidth: 160, //表单label宽度
-      phoneIcon: "", //手机号登录输入框图标
-      codeIcon: "", //验证码登录输入框图标
-      passwordIcon: "", //密码登录输入框图标
-      labelFont: {
-        //表单label字体
-        color: "#333",
-        fontSize: "24rpx",
-        fontWeight: "normal",
-      },
-      placeholderFont: {
-        color: "#d4d4d4",
-        fontSize: "24rpx",
-        fontWeight: "normal",
-      },
-      contentFont: {
-        //表单内容字体
-        color: "#333",
-        fontSize: "24rpx",
-        fontWeight: "normal",
-      },
-      getCodeFont: {
-        color: "#ff5a39",
-        fontSize: "24rpx",
-        fontWeight: "normal",
-      },
-      getCodeShowType: "text", //获取验证码展示方式
-      btnMargin: {},
-      btnRadius: 20, //按钮圆角
-      agreeFont: {}, //条款字体
-      privacyFont: {}, //隐私字体
-      agreementAlign: "center", //条款对齐方式
-      agreePadding: {
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }, //条款内边距
-      formRenderKey: "formRenderKey",
-      jumpFont: {}, //跳过字体
-      jumpAlign: 'right'
-    };
-  },
-  computed: {
-    panelIsChecked() {
-      return this.panel_1_checked.includes(1);
-    },
-    loginFormStyle(){
-      let padding = `${this.checkValue(this.formPadding.top, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(this.formPadding.right, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(this.formPadding.bottom, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(this.formPadding.left, 20)}rpx`;
-      let margin = `${this.checkValue(this.formMargin.top, 20)}rpx`;
-      margin = `${margin} ${this.checkValue(this.formMargin.right, 20)}rpx`;
-      margin = `${margin} ${this.checkValue(this.formMargin.bottom, 20)}rpx`;
-      margin = `${margin} ${this.checkValue(this.formMargin.left, 20)}rpx`;
-      let borderRadius = `${this.checkValue(this.formRadius, 20)}rpx`;
-      let border = `${this.formWrapBorderWidth}px solid ${this.formWrapBorderColor}`;
-      let boxShadow = `0 0 ${this.formShadowW}rpx ${this.formShadowColor}`
+  export default {
+    // #ifdef MP-WEIXIN
+    options: { styleIsolation: 'shared' },
+    // #endif
 
-      return this.styleObjectToString({
-        background: this.formBgColor,
-        padding: padding,
-        margin,
-        borderRadius,
-        border,
-        boxShadow
-      })
+    name: "JfbBasePhoneLogin",
+    components: {
+      XdFontIcon,
+      XdForm,
+      XdFormItem,
+      XdFormInput,
+      XdButton,
+      XdFormCheckbox
     },
-    getCodeStyle() {
-      return this.styleObjectToString({
-        color: this.getCodeFont.color,
-        borderColor:
-          this.getCodeShowType === "button"
-            ? this.getCodeFont.color
-            : "transparent",
-        fontSize: this.getCodeFont.fontSize,
-        fontWeight: this.getCodeFont.fontWeight,
-      });
-    },
-    agreementBoxStyle() {
-      let padding = `${this.checkValue(this.agreePadding.top, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(this.agreePadding.right, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(
-        this.agreePadding.bottom,
-        20
-      )}rpx`;
-      padding = `${padding} ${this.checkValue(this.agreePadding.left, 20)}rpx`;
-      return this.styleObjectToString({
-        padding: padding,
-      });
-    },
-    btnWrapStyle() {
-      let padding = `${this.checkValue(this.btnMargin.top, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(this.btnMargin.right, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(this.btnMargin.bottom, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(this.btnMargin.left, 20)}rpx`;
-      return this.styleObjectToString({
-        padding: padding,
-      });
+    mixins: [componentsMixins,extsMixins,JfbBasePhoneLoginMixin],
+    data() {
+      return {
+        panel_1_checked: "",
+        accountForm: {
+          phone_number: '',
+          verification_code: '',
+        },
+        jfbTimeer: 0,
+        interval: null,
+        auth_code: "",
+        provider_id: "",
+        callback_url: ""
+        //todo
+      }
     },
-  },
-  watch: {
-    container(value, oldValue) {
-      if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
-      if (this.$configProject["isPreview"]) this.init(value);
+    computed: {
+      panelIsChecked(){
+        return this.panel_1_checked.includes(1);
+      }
     },
-    "accountForm.verification_code"(value) {
-      if (value && value.length >= 8 && value.length % 2 === 0) {
-        let start = value.slice(0, value.length / 2);
-        let end = value.slice(value.length / 2);
-        if (start === end) {
-          this.accountForm.verification_code = start;
+    watch: {
+      container(value,oldValue) {
+        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+      "accountForm.verification_code"(value) {
+        if (value && value.length >= 8 && value.length % 2 === 0) {
+          let start = value.slice(0, value.length / 2);
+          let end = value.slice(value.length / 2);
+          if (start === end) {
+            this.accountForm.verification_code = start;
+          }
         }
       }
     },
-  },
-  created() {
-    this.init(this.container);
-  },
-  methods: {
-    handlePrivacy(code) {
-      let params = `page_id=${this.pageAttr["page_id"]}`;
-      params = `${params}&container_id=${this.containerId}${code}`;
-      this.$xdUniHelper.navigateTo({
-        url: `/pages/content/content?${params}`,
-      });
+    created() {
+      this.init(this.container);
     },
+    methods: {
+      handlePrivacy(code) {
+        let params = `page_id=${this.pageAttr["page_id"]}`;
+        params = `${params}&container_id=${this.containerId}${code}`;
+        this.$xdUniHelper.navigateTo({
+          url: `/pages/content/content?${params}`
+        })
+      },
 
-    onJfbLoad(options) {
-      this.auth_code = options.auth_code;
-      this.provider_id = options.provider_id;
-      this.callback_url = options.callback_url;
-    },
-    /**
-     * @description 监听事件变化
-     * @param container {object} 业务组件对象自己
-     */
-    init(value) {
-      this.inputStyle = getContainerPropsValue(
-        value,
-        "content.inputStyle",
-        "linear"
-      );
-      this.formBorderColor = getContainerPropsValue(
-        value,
-        "content.formBorderColor",
-        "#F9F9F9"
-      );
-      this.is_show_skip = getContainerPropsValue(
-        value,
-        "content.is_show_skip",
-        "Y"
-      );
-      this.formBorderWidth = getContainerPropsValue(
-        value,
-        "content.formBorderWidth",
-        "1"
-      );
-      this.formBgColor = getContainerPropsValue(
-        value,
-        "content.formBgColor",
-        "#FFFFFF"
-      );
-      this.formPadding = getContainerPropsValue(value, "content.formPadding", {
-        top: 20,
-        left: 20,
-        right: 20,
-        bottom: 20,
-      });
-      this.formMargin = getContainerPropsValue(value, "content.formMargin", {top: 0, left: 0, right: 0, bottom: 0});
-      this.formRadius = getContainerPropsValue(value, "content.formRadius", '0');
-      this.formWrapBorderColor = getContainerPropsValue(value, "content.formWrapBorderColor", '#F9F9F9');
-      this.formWrapBorderWidth = getContainerPropsValue(value, "content.formWrapBorderWidth", '0');
-      this.formShadowColor = getContainerPropsValue(value, "content.formShadowColor", '#F9F9F9');
-      this.formShadowW = getContainerPropsValue(value, "content.formShadowW", '0');
-      this.labelAlign = getContainerPropsValue(
-        value,
-        "content.labelAlign",
-        "left"
-      );
-      this.labelPosition = getContainerPropsValue(
-        value,
-        "content.labelPosition",
-        "left"
-      );
-      this.labelWidth = getContainerPropsValue(
-        value,
-        "content.labelWidth",
-        "180"
-      );
-      this.phoneIcon = getContainerPropsValue(value, "content.phoneIcon", "");
-      this.codeIcon = getContainerPropsValue(value, "content.codeIcon", "");
-      this.passwordIcon = getContainerPropsValue(
-        value,
-        "content.passwordIcon",
-        ""
-      );
-      this.labelFont = getContainerPropsValue(value, "content.labelFont", {});
-      this.placeholderFont = getContainerPropsValue(
-        value,
-        "content.placeholderFont",
-        {}
-      );
-      this.contentFont = getContainerPropsValue(
-        value,
-        "content.contentFont",
-        {}
-      );
-      this.getCodeFont = getContainerPropsValue(
-        value,
-        "content.getCodeFont",
-        {}
-      );
-      this.getCodeShowType = getContainerPropsValue(
-        value,
-        "content.getCodeShowType",
-        "text"
-      );
-      this.btnMargin = getContainerPropsValue(value, "content.btnMargin", {});
-      this.btnRadius = getContainerPropsValue(value, "content.btnRadius", "20");
-      this.phonePlaceholder = getContainerPropsValue(
-        value,
-        "content.phonePlaceholder",
-        "请输入手机号"
-      );
-      this.codePlaceholder = getContainerPropsValue(
-        value,
-        "content.codePlaceholder",
-        "请输入验证码"
-      );
-      let agreeFont = getContainerPropsValue(value, "content.agreeFont", {});
-      if (!agreeFont.color) {
-        agreeFont.color = "#666";
-      }
-      this.agreeFont = agreeFont;
-      let privacyFont = getContainerPropsValue(
-        value,
-        "content.privacyFont",
-        {}
-      );
-      if (!privacyFont.color) {
-        privacyFont.color = this.mainColor;
-      }
-      this.privacyFont = privacyFont;
-      this.agreementAlign = getContainerPropsValue(
-        value,
-        "content.agreementAlign",
-        "center"
-      );
-      this.agreePadding = getContainerPropsValue(
-        value,
-        "content.agreePadding",
-        {}
-      );
-      if (this.inputStyle === "face") {
-        this.labelPosition = "top";
-        this.labelAlign = "left";
-      }
-      if (this.$configProject.isPreview) {
-        this.formRenderKey = Date.now();
-      }
-    },
-    reGetCode() {
-      this.$xdLog.setProject("get.code.handle", {
-        time: this.time,
-        jfbTimeer: this.jfbTimeer,
-      });
-      if (this.jfbTimeer > 0) return;
-      const { phone_number } = this.accountForm;
-      if (!/^1[3-9]\d{9}$/.test(phone_number)) {
-        uni.showToast({
-          title: "请填写正确的手机号",
-          icon: "none",
+      onJfbLoad(options) {
+        this.auth_code = options.auth_code;
+        this.provider_id = options.provider_id;
+        this.callback_url = options.callback_url;
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        //this.bgcolor = getContainerPropsValue(value, 'content.bgcolor', '#fff');
+        //this.height = getContainerPropsValue(value, 'content.height', 10);
+      },
+      reGetCode(){
+        this.$xdLog.setProject('get.code.handle', {
+          time: this.time,
+          jfbTimeer: this.jfbTimeer
         });
-        return false;
-      }
-      this.$xdShowLoading({});
-      console.log("jfbRootExec: sendMsg");
-      jfbRootExec("sendMsg", {
-        vm: this,
-        data: {
-          phone_number,
-          biz_name: "login",
-        },
-      })
-        .then((res) => {
-          this.$xdHideLoading();
+        if(this.jfbTimeer > 0) return;
+        const { phone_number } = this.accountForm;
+        if(!/^1[3-9]\d{9}$/.test(phone_number)){
+          uni.showToast({
+            title: "请填写正确的手机号",
+            icon: 'none'
+          });
+          return false;
+        }
+        this.$xdShowLoading({})
+        console.log("jfbRootExec: sendMsg");
+        jfbRootExec('sendMsg', {
+          vm: this,
+          data: {
+            phone_number,
+            biz_name: "login"
+          }
+        }).then(res => {
+          this.$xdHideLoading()
           this.jfbTimeer = 120;
           this.interval = setInterval(() => {
             this.jfbTimeer--;
-            if (this.jfbTimeer == 0) {
+            if(this.jfbTimeer == 0){
               clearTimeout(this.interval);
             }
-          }, 1000);
+          }, 1000)
+        }).catch(error=>{
+          this.$xdHideLoading()
+          this.$xdLog.catch(error)
         })
-        .catch((error) => {
-          this.$xdHideLoading();
-          this.$xdLog.catch(error);
-        });
-    },
-    doLoginForm() {
-      const { auth_code, provider_id } = this;
-      const { phone_number, verification_code } = this.accountForm;
-      if (!phone_number || !verification_code)
-        return uni.showToast({ title: "手机号跟验证码不能为空", icon: "none" });
-      this.$xdShowLoading({});
-      jfbRootExec("phoneLogin", {
-        vm: this,
-        data: {
-          auth_code,
-          provider_id,
-          phone_number,
-          verification_code,
-        },
-      })
-        .then((res) => {
-          this.$xdHideLoading();
+      },
+      doLoginForm(){
+        const { auth_code, provider_id } = this;
+        const { phone_number, verification_code } = this.accountForm;
+        if(!phone_number || !verification_code) return uni.showToast({title: "手机号跟验证码不能为空",icon: 'none'});
+        this.$xdShowLoading({})
+        jfbRootExec('phoneLogin', {
+          vm: this,
+          data: {
+            auth_code,
+            provider_id,
+            phone_number,
+            verification_code
+          },
+        }).then(res => {
+          this.$xdHideLoading()
           let { callback_url } = this;
-          if (callback_url) callback_url = decodeURIComponent(callback_url);
+          if(callback_url) callback_url = decodeURIComponent(callback_url);
           this.$xdUniHelper.redirectTo({
-            url: callback_url || this.settings.index,
-          });
+            url: callback_url || this.settings.index
+          })
+        }).catch(error=>{
+          this.$xdHideLoading()
+          this.$xdLog.catch(error)
         })
-        .catch((error) => {
-          this.$xdHideLoading();
-          this.$xdLog.catch(error);
-        });
-    },
-    // onJfbScroll(options) {
-    //   console.log('event.onJfbScroll', options)
-    // },
-    // onJfbReachBottom(options) {
-    //   console.log('event.onJfbReachBottom', options)
-    // },
-    // onJfbShow(options) {
-    //   console.log('event.onJfbShow', options)
-    // },
-    // onJfbHide(options) {
-    //   console.log('event.onJfbHide', options)
-    // },
-    onJfbBack(options) {
-      this.$xdUniHelper.navigateBack();
-    },
-  },
-};
+      },
+      // onJfbScroll(options) {
+      //   console.log('event.onJfbScroll', options)
+      // },
+      // onJfbReachBottom(options) {
+      //   console.log('event.onJfbReachBottom', options)
+      // },
+      // onJfbShow(options) {
+      //   console.log('event.onJfbShow', options)
+      // },
+      // onJfbHide(options) {
+      //   console.log('event.onJfbHide', options)
+      // },
+      onJfbBack(options) {
+        this.$xdUniHelper.navigateBack();
+      },
+    }
+  }
+
 </script>
 
 <style scoped lang="less">
-@import "./JfbBasePhoneLoginLess.less";
+  @import "./JfbBasePhoneLoginLess.less";
 
-.jfb-base-phone-login {
-  &__body {
-      // #ifdef H5
-    .form-item {
-      ::v-deep &.uni-forms-item {
-        // padding-left: unit(30,rpx) !important;
-        .uni-input-input{
-          font-size: var(--content-font-size);
-          color: var(--content-font-color);
-          font-weight: var(--content-font-weight);
-        }
-        .label-text {
-          font-size: var(--label-font-size) !important;
-          color: var(--label-font-color) ;
-          font-weight: var(--label-font-weight);
-        }
-        .uni-easyinput__placeholder-class{
-          font-size: var(--placeholder-font-size);
-          color: var(--placeholder-font-color);
-          font-weight: var(--placeholder-font-weight);
-        }
-      }
-      &.linear{
-        ::v-deep &.uni-forms-item--border{
-          border-color: var(--form-border-color) !important;
-          border-width: var(--form-border-width) !important;
-        }
-      }
-      &.face{
-        ::v-deep .uni-forms-item__content{
-          background: #F7F7F7;
-          border-radius: 16rpx;
-        }
-        ::v-deep &.uni-forms-item--border{
-          border: none;
-        }
-
-      }
-    }
-    // #endif
-
-    // #ifdef MP
-    ::v-deep .uni-forms-item {
-      // padding-left: 30rpx !important;
-      .uni-input-input{
-        font-size: var(--content-font-size);
-        color: var(--content-font-color);
-        font-weight: var(--content-font-weight);
-      }
-      .label-text {
-        font-size: var(--label-font-size);
-        color: var(--label-font-color);
-        font-weight: var(--label-font-weight);
-      }
-      .uni-easyinput__placeholder-class{
-        font-size: var(--placeholder-font-size);
-        color: var(--placeholder-font-color);
-        font-weight: var(--placeholder-font-weight);
-      }
-    }
-    .linear{
-      ::v-deep .uni-forms-item--border{
-        border-top: none !important;
-        border-bottom: var(--form-border-width) solid var(--form-border-color) !important;
-      }
-    }
-    .face{
-      ::v-deep .uni-forms-item__content{
-        background: #F7F7F7;
-        border-radius: 16rpx;
-      }
-      ::v-deep .uni-forms-item--border{
-        border: none;
-      }
-    }
-    // #endif
-    .xd-form-checkbox {
+  .jfb-base-phone-login {
+    &__body {
+      .xd-form-checkbox {
       /deep/ .checklist-content .checklist-text {
         font-size: 26rpx !important;
       }
     }
 
     .xd-form-checkbox {
-      ::v-deep .checklist-box {
-        margin: 0;
-        align-items: var(--agreement-align);
+      /deep/ .checklist-box {
+        margin: 0 !important;
       }
     }
     .xd-form-checkbox {
@@ -633,7 +279,7 @@ export default {
 
     .xd-form-checkbox {
       /deep/ .checklist-text {
-        margin-left: unit(20, rpx) !important;
+        margin-left: unit(20,rpx) !important;
       }
     }
 
@@ -641,97 +287,95 @@ export default {
       padding: 40rpx 70rpx;
     }
 
-    .get_code {
-      color: @xd-base-color;
-      font-size: 24rpx;
-      margin-right: unit(20, rpx);
-      padding: 10rpx 24rpx;
-      border: 1px solid @xd-base-color;
-      border-radius: 40rpx;
-      white-space: nowrap;
-    }
-    .panel-login-password {
-      /deep/ .uni-forms-item__label {
-          font-size: 26rpx;
-          color: #a6a6a6;
+      .get_code {
+        color: @xd-base-color;
+        font-size: 24rpx;
       }
+      .panel-login-password {
+        /deep/ .uni-forms-item__label {
+          .label-text {
+            font-size: 26rpx;
+            color: #A6A6A6;
+          }
+        }
 
-      /deep/ .uni-easyinput__placeholder-class {
-        font-size: 26rpx;
-        color: #d4d4d4;
-      }
+        /deep/ .uni-easyinput__placeholder-class {
+          font-size: 26rpx;
+          color: #D4D4D4;
+        }
 
-      .phone-login-type {
-        display: flex;
-        color: #808080;
-        font-size: 32rpx;
-        padding: 20rpx 70rpx;
-        align-items: center;
+        .phone-login-type {
+          display: flex;
+          color: #808080;
+          font-size: 32rpx;
+          padding: 20rpx 70rpx;
+          align-items: center;
 
-        ._item {
-          margin: 0 30rpx;
-          position: relative;
-          line-height: 2;
+          ._item {
+            margin: 0 30rpx;
+            position: relative;
+            line-height: 2;
 
-          &:first-child {
-            margin-left: 0;
-          }
+            &:first-child {
+              margin-left: 0;
+            }
 
-          &.active {
-            color: #383838;
-            font-size: 36rpx;
+            &.active {
+              color: #383838;
+              font-size: 36rpx;
 
-            text {
-              position: absolute;
-              height: 6rpx;
-              width: 90rpx;
-              border-radius: 6rpx;
-              left: 50%;
-              bottom: 0;
-              transform: translateX(-50%);
+              text {
+                position: absolute;
+                height: 6rpx;
+                width: 90rpx;
+                border-radius: 6rpx;
+                left: 50%;
+                bottom: 0;
+                transform: translateX(-50%);
+              }
             }
           }
         }
-      }
 
-      .forget_password {
-        font-size: 24rpx;
-        color: #a6a6a6;
-        text-align: right;
-        margin: 20rpx 70rpx 0 0;
-      }
+        .forget_password {
+          font-size: 24rpx;
+          color: #A6A6A6;
+          text-align: right;
+          margin: 20rpx 70rpx 0 0;
 
-      .not_login {
-        position: fixed;
-        width: 100%;
-        text-align: center;
-        bottom: 100rpx;
-        font-size: 24rpx;
-        color: #fe7a63;
+        }
+
+        .not_login {
+          position: fixed;
+          width: 100%;
+          text-align: center;
+          bottom: 100rpx;
+          font-size: 24rpx;
+          color: #FE7A63;
+        }
       }
     }
   }
-}
-.flex {
-  display: flex;
-}
-.flex-sub {
-  flex: 1;
-}
-.align-center {
-  align-items: center;
-}
-/* #ifdef MP-WEIXIN */
-/deep/ .xd-form-checkbox .checklist-group {
-  justify-content: center;
-  display: flex;
-  align-items: center;
-}
-.text-content {
-  width: 100%;
-  & > text {
-    font-size: 26rpx;
+  .flex{
+    display: flex;
+  }
+  .flex-sub{
+    flex: 1;
+  }
+  .align-center{
+    align-items: center;
+  }
+  /* #ifdef MP-WEIXIN */
+  /deep/ .xd-form-checkbox .checklist-group {
+    justify-content: center;
+    display: flex;
+    align-items: center;
+  }
+  .text-content {
+    width: 100%;
+    & > text {
+      font-size: 26rpx;
+    }
   }
-}
-/* #endif */
+  /* #endif */
 </style>