jufubao-base 1.0.186 → 1.0.187-beta3

package/src/components/JfbBasePhoneLogin/JfbBasePhoneLogin.vue

@@ -3,78 +3,114 @@
     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 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"
+    <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"
           :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="请输入11位手机号"
+              :placeholder="phonePlaceholder"
             />
           </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="请输入验证码"
+                :placeholder="codePlaceholder"
               />
-              <view
-                class="get_code"
-                @click="reGetCode"
-                :style="{color: mainColor}"
-              >{{jfbTimeer ? jfbTimeer + '秒后获取':'获取验证码'}}</view>
+              <view class="get_code" @click="reGetCode" :style="getCodeStyle">{{
+                jfbTimeer ? jfbTimeer + "秒后获取" : "获取验证码"
+              }}</view>
             </view>
           </xd-form-item>
         </xd-form>
-        <view class="form-group" style="padding-bottom:0">
+        <view class="form-group" :style="agreementBoxStyle">
           <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">
+              <view class="text-content" :style="agreeFont">
                 <text>请阅读并同意</text>
-                <text @click.stop="handlePrivacy('privacy_privacy')" :style="{color: mainColor}">《隐私政策》</text>
-                <text @click.stop="handlePrivacy('privacy_service')" :style="{color: mainColor}">《用户服务协议》</text>
+                <text
+                  @click.stop="handlePrivacy('privacy_privacy')"
+                  :style="privacyFont"
+                  >《隐私政策》</text
+                >
+                <text
+                  @click.stop="handlePrivacy('privacy_service')"
+                  :style="privacyFont"
+                  >《用户服务协议》</text
+                >
               </view>
             </template>
           </xd-form-checkbox>
         </view>
-        <view class="form-group">
+        <view :style="btnWrapStyle" class="form-group">
           <xd-button
             :disabled="!panelIsChecked"
-            style="flex: 1;"
+            style="flex: 1"
             type="primary"
-            radius="10rpx"
+            :radius="btnRadius + 'rpx'"
             @click="doLoginForm"
-          >登录</xd-button>
+            >登录</xd-button
+          >
         </view>
         <!-- <view
           class="not_login"
@@ -87,188 +123,506 @@
 </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"
+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
+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: "",
 
-    name: "JfbBasePhoneLogin",
-    components: {
-      XdFontIcon,
-      XdForm,
-      XdFormItem,
-      XdFormInput,
-      XdButton,
-      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);
     },
-    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
-      }
+    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}`
+
+      return this.styleObjectToString({
+        background: this.formBgColor,
+        padding: padding,
+        margin,
+        borderRadius,
+        border,
+        boxShadow
+      })
     },
-    computed: {
-      panelIsChecked(){
-        return this.panel_1_checked.includes(1);
-      }
+    getCodeStyle() {
+      return this.styleObjectToString({
+        color: this.getCodeFont.color,
+        borderColor:
+          this.getCodeShowType === "button"
+            ? this.getCodeFont.color
+            : "transparent",
+        fontSize: this.getCodeFont.fontSize,
+        fontWeight: this.getCodeFont.fontWeight,
+      });
     },
-    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;
-          }
+    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,
+      });
+    },
+  },
+  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);
+  },
+  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}`,
+      });
     },
-    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(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
+    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",
         });
-        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()
+        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)
-        }).catch(error=>{
-          this.$xdHideLoading()
-          this.$xdLog.catch(error)
+          }, 1000);
         })
-      },
-      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()
+        .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();
           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
-          })
-        }).catch(error=>{
-          this.$xdHideLoading()
-          this.$xdLog.catch(error)
+            url: callback_url || this.settings.index,
+          });
         })
-      },
-      // 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();
-      },
-    }
-  }
-
+        .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();
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-  @import "./JfbBasePhoneLoginLess.less";
+@import "./JfbBasePhoneLoginLess.less";
 
-  .jfb-base-phone-login {
-    &__body {
-      .xd-form-checkbox {
+.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 {
       /deep/ .checklist-content .checklist-text {
         font-size: 26rpx !important;
       }
     }
 
     .xd-form-checkbox {
-      /deep/ .checklist-box {
-        margin: 0 !important;
+      ::v-deep .checklist-box {
+        margin: 0;
+        align-items: var(--agreement-align);
       }
     }
     .xd-form-checkbox {
@@ -279,7 +633,7 @@
 
     .xd-form-checkbox {
       /deep/ .checklist-text {
-        margin-left: unit(20,rpx) !important;
+        margin-left: unit(20, rpx) !important;
       }
     }
 
@@ -287,95 +641,97 @@
       padding: 40rpx 70rpx;
     }
 
-      .get_code {
-        color: @xd-base-color;
-        font-size: 24rpx;
+    .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;
       }
-      .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>