gypsy-crm-frontend-vu/pages/login/regist.vue

<template>
  <view class="regist-page" :isHeaderFixed="true" :isLoginPage="true">
    <view class="fixed" />
    <view class="main-content" :style="{ backgroundImage: `url(${loginBg})` }">
      <!-- 全局顶部栏：占据一整行，带有占位和背景 -->
      <cwg-match-media :min-width="991">
        <view class="global-header-bar pc-header">
          <view class="header-inner">
            <view class="logo-placeholder"></view> <!-- 左侧可预留放logo或留空 -->
            <LoginHeaderGroup text-color="#fff" icon-color="#fff" />
          </view>
        </view>
      </cwg-match-media>

      <!-- 移动端顶部栏：悬浮在上方，深色文字 -->
      <cwg-match-media :max-width="991">
        <view class="mobile-header-bar">

          <LoginHeaderGroup text-color="#141d22" icon-color="#141d22" />
        </view>
      </cwg-match-media>

      <uni-row class="demo-uni-row">
        <cwg-match-media :min-width="991">
          <uni-col :xs="24" :sm="24" :md="12" :lg="14" :xl="16">
            <view class="left-bg">
              <view class="left-box">
                <view class="inner">
                  <view class="section-title">
                    <text class="bg-secondary-opacity subtitle w-40" v-t="'newLoop.item11'"></text>
                  </view>
                  <view class="title w-700">
                    <text v-t="'newLoop.item12'"></text>
                    <text>&nbsp;</text>
                    <text class="color-white" v-t="'newLoop.item13'"></text>
                  </view>
                  <view class="text-white" v-t="'newLoop.item14'"></view>
                </view>
                <image src="/static/images/trust-pilot.png" class="img-fluid mt--10" mode="widthFix"></image>
                <view class="left-content">
                  <view class="des text-white">
                    <text v-html="t('newSignin.item12')"></text>
                    <br />
                    <text v-html="t('newSignin.item12_1')"></text>
                    <br />
                    <text v-html="t('newSignin.item10')"></text>
                    <br />
                    <text v-html="t('newSignin.item11')"></text>
                    <br />
                    <text v-t="'newSignin.item13'"></text>
                    <cwg-link type="pdf" :title="'newSignin.item13_1'"
                      :url="`pdf/Risk-Disclosures-and-Acknowledgements-2020-09.pdf`" target="_blank"
                      v-t="'newSignin.item13_1'" class="doc-link" />
                    <text v-t="'newSignin.item13_2'"></text>
                    <!-- <view v-t="'newSignin.item13_3'"></view>
                  <text v-t="'newSignin.item13_4'"></text> -->
                  </view>
                </view>
              </view>
            </view>
          </uni-col>
        </cwg-match-media>
        <uni-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8" class="right-f">
          <view class="account">
            <cwg-match-media :max-width="991">
              <view class="company u-flex-y u-flex-y-center">
                <image src="/static/images/logo-full.svg" class="company-icon" mode="widthFix"></image>
              </view>
            </cwg-match-media>
            <view class="title">
              <view class="tit1">{{ t('newSignup.item1') }}</view>
              <view class="tit2">{{ t('newSignup.item2') }}</view>
            </view>
            <view>
              <uni-forms ref="form" :modelValue="formData" :rules="rules" validate-trigger="blur" label-position="top"
                label-width="120">
                <uni-row :gutter="20" class="formContent">
                  <uni-col :xs="24" :md="12">
                    <uni-forms-item name="country" :label="t('newSignup.item3')">
                      <cwg-combox v-model:value="formData.country" :options="countryOptions" filterable>
                      </cwg-combox>
                    </uni-forms-item>
                  </uni-col>
                  <uni-col :xs="24" :md="12">
                    <uni-forms-item name="phone" :label="t('newSignup.item5')">
                      <uni-easyinput v-model="formData.phone"></uni-easyinput>
                    </uni-forms-item>
                  </uni-col>
                  <uni-col :xs="24" :md="24">
                    <cwg-match-media :max-width="991">
                      <uni-forms-item name="birthDate" :label="t('newSignup.item18')">
                        <uni-datetime-picker type="date" v-model="formData.birthDate"
                          :placeholder="t('newSignup.item19')" @change="checkAge" />
                      </uni-forms-item>
                    </cwg-match-media>
                    <cwg-match-media :min-width="992">
                      <uni-forms-item name="birthDate" :label="t('newSignup.item18')">
                        <uni-datetime-picker style="width: 50%;" type="date" v-model="formData.birthDate"
                          :placeholder="t('newSignup.item19')" @change="checkAge" />
                      </uni-forms-item>
                    </cwg-match-media>
                  </uni-col>
                  <uni-col :xs="24" :md="12">
                    <uni-forms-item name="email" :label="t('newSignup.item7')">
                      <uni-easyinput v-model="formData.email" :placeholder="t('newSignup.item8')"
                        :disabled="!isAgeValid || !formData.birthDate"></uni-easyinput>
                    </uni-forms-item>
                  </uni-col>
                  <uni-col :xs="24" :md="12">
                    <uni-forms-item name="emailCode" :label="t('newSignup.item9')">
                      <view style="display: flex; gap: 8px;">
                        <view style="flex: 1;">
                          <uni-easyinput :disabled="!isAgeValid || !formData.birthDate" v-model="formData.emailCode"
                            :placeholder="t('newSignup.item10')">
                          </uni-easyinput>
                        </view>
                        <view class="btn-code" @click="(!isAgeValid || !formData.birthDate) ? '' : handleGetCode()">
                          {{ getCodeString }}
                        </view>
                      </view>
                    </uni-forms-item>
                  </uni-col>
                  <uni-col :xs="24" :md="24">
                    <view class="agreemnet9">*{{ t('signup.agreemnet9') }}</view>
                  </uni-col>
                  <uni-col :xs="24" :md="12">
                    <uni-forms-item name="password" :label="t('newSignup.item12')">
                      <uni-easyinput v-model.trim="formData.password" :disabled="!isAgeValid || !formData.birthDate"
                        :placeholder="t('newSignup.item13')" type="password"></uni-easyinput>
                    </uni-forms-item>
                    <uni-col :xs="24" :md="24">
                      <uni-forms-item>
                        <ul class="pwd">
                          <li :class="{ fit: rule1 }" v-t="'signup.form.rules.1st'"></li>
                          <li :class="{ fit: rule2 }" v-t="'signup.form.rules.2nd'"></li>
                          <li :class="{ fit: rule3 }" v-t="'signup.form.rules.3rd'"></li>
                        </ul>
                      </uni-forms-item>
                    </uni-col>
                  </uni-col>
                  <uni-col :xs="24" :md="12">
                    <uni-forms-item v-if="!isRouteHasId" name="linkValue" :label="t('newSignup.item14')">
                      <uni-easyinput v-model.trim="formData.linkValue" :disabled="!isAgeValid || !formData.birthDate"
                        :placeholder="t('newSignup.item15')" @input="limitAgentIdLength"></uni-easyinput>
                    </uni-forms-item>
                  </uni-col>

                </uni-row>
                <uni-forms-item name="agree">
                  <view class="check-box" @click="toggleAgree">
                    <up-checkbox-group v-model="agreeGroup" @change="onAgreeChange">
                      <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a" name="agree"
                        class="wcg-checkbox"></up-checkbox>
                    </up-checkbox-group>
                    <text class="checkbox-label">{{ t('signup.agree') }}</text>
                  </view>
                </uni-forms-item>
                <uni-forms-item name="isSubscribeEmail">
                  <view class="check-box" @click="toggleSubscribeEmail">
                    <up-checkbox-group v-model="subscribeEmailGroup" @change="onSubscribeEmailChange">
                      <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
                        name="subscribeEmail" class="wcg-checkbox"></up-checkbox>
                    </up-checkbox-group>
                    <text class="checkbox-label">{{ t('signup.agree1') }}</text>
                  </view>
                </uni-forms-item>
              </uni-forms>
            </view>
            <view>
              <u-button class="regiset-btn" @click="register">
                {{ t('signup.button') }}
              </u-button>

            </view>
            <view class="login-link">
              <text>{{ t('newSignup.item16') }}</text>
              <navigator url="/pages/login/index" class="link" hover-class="none">{{ t('newSignup.item17') }}
              </navigator>
            </view>
            <view class="des-bottom">
              <text v-t="'signup.agreemnet1'"></text>
              <cwg-link type="pdf" url='pdf/Client_Agreement.pdf' target="_blank" :title="'signup.agreemnet2'"
                class="desc-link" />
              <text v-t="'signup.agreemnet3'"></text>
              <cwg-link type="pdf" url='pdf/Terms_Conditions.pdf' target="_blank" :title="'signup.agreemnet4'"
                class="desc-link" />
              <text v-t="'signup.agreemnet5'"></text>
              <cwg-link type="pdf" url='pdf/Privacy_Policy.pdf' target="_blank" :title="'signup.agreemnet6'"
                class="desc-link" />
              <text v-t="'signup.agreemnet7'"></text>
            </view>
          </view>
        </uni-col>
      </uni-row>
    </view>
    <view class="chat-icon cursor-pointer" :data-tooltip="t('Downloadpage.item16')"
      :class="{ 'chat-icon-expanded': isChatIconExpanded, 'chat-icon-hidden': type == 'chat' }"
      @click="handleChatIconClick">
      <cwg-icon name="chat" color="#fff" />
    </view>
  </view>
</template>
<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useEmailCountdown } from '@/hooks/useEmailCountdown'
import { loginApi } from '@/api/login'
import { countryApi } from '@/api/country'
import Config from '@/config/index'
import { showToast } from '@/utils/toast'
import { onLoad } from '@dcloudio/uni-app'
import useUserStore from '@/stores/use-user-store'
import { userToken } from '@/composables/config'
import { userApi } from '@/api/user'
import { openLocalPdf } from '@/utils/pdf.js'
import ImportModel from './components/ImportModel.vue'
import logoImage from '@/static/images/logo3.png'
import loginBg from '@/static/images/login-bg.jpeg'
import QrCode from '@/components/QrCode.vue'
import LoginHeaderGroup from './components/LoginHeaderGroup.vue'
import { useWindowWidth } from '@/composables/useWindowWidth'
const windowWidth = useWindowWidth(300)
const isMobile = computed(() => windowWidth.value <= 991)
const { t } = useI18n()
const { Code } = Config
const userStore = useUserStore()
import LiveChatService from '@/utils/liveChat.js'
const {
  time,
  text: getCodeString,
  canSend,
  start,
  restore,
} = useEmailCountdown()
const status = ref(false)

const isRouteHasId = ref(false)
const formData = ref({
  country: 'CN',
  phone: '',
  birthDate: '',
  email: '',
  code: '',
  password: '',
  linkValue: '',
  agree: 0,
  isSubscribeEmail: 0,
  sourceCode: null,
  w: '',
  subId: '',
  oc: '',
  agentId: null,
  ibInvalid: null,
})

const rules = {
  country: { rules: [{ required: true, errorMessage: t('vaildate.country.empty'), trigger: 'blur' }] },
  email: {
    rules: [
      { required: true, errorMessage: t('vaildate.email.empty'), trigger: 'blur' },
      { pattern: Config.Pattern.Email, errorMessage: t('vaildate.email.format'), trigger: 'blur' },
    ],
  },
  emailCode: { rules: [{ required: true, errorMessage: t('vaildate.code.empty'), trigger: 'blur' }] },
  password: {
    rules: [
      { required: true, errorMessage: t('vaildate.password.format'), trigger: 'blur' },
      { pattern: Config.Pattern.Password, errorMessage: t('vaildate.password.format'), trigger: 'blur' },
    ],
  },
  agree: {
    rules: [
      {
        validateFunction: (rule, value) => {
          if (value) return true
          return t('vaildate.agree.empty')
        },
        trigger: 'change',
      },
    ],
  },
  phone: {
    rules: [
      { required: true, errorMessage: t('vaildate.phone.format'), trigger: 'blur' },
      { pattern: Config.Pattern.NonNegInt, errorMessage: t('vaildate.phone.format'), trigger: 'blur' },
    ],
  },
  birthDate: { rules: [{ required: true, errorMessage: t('vaildate.birthDate.empty'), trigger: 'change' }] },
}

const agreeGroup = ref([])
const subscribeEmailGroup = ref([])

watch(() => formData.value.agree, (val) => {
  agreeGroup.value = val === 1 ? ['agree'] : []
}, { immediate: true })

watch(() => formData.value.isSubscribeEmail, (val) => {
  subscribeEmailGroup.value = val === 1 ? ['subscribeEmail'] : []
}, { immediate: true })

const onAgreeChange = (e) => {
  formData.value.agree = e && e.length ? 1 : 0
}

const onSubscribeEmailChange = (e) => {
  formData.value.isSubscribeEmail = e && e.length ? 1 : 0
}

const toggleAgree = () => {
  const next = agreeGroup.value.length ? [] : ['agree']
  agreeGroup.value = next
  onAgreeChange(next)
}
const isChatIconExpanded = ref(false)
// 处理聊天图标点击
const handleChatIconClick = () => {
  // 如果还没显示 → 先滑出来
  if (!isChatIconExpanded.value) {
    isChatIconExpanded.value = true
    return
  }
  if (isMobile.value) {
    router.push('/pages/common/chat')
  } else {
    if (LiveChatService) {
      LiveChatService.showChat();
    }
  }
  setTimeout(() => {
    isChatIconExpanded.value = false
  }, 300)
}
const toggleSubscribeEmail = () => {
  const next = subscribeEmailGroup.value.length ? [] : ['subscribeEmail']
  subscribeEmailGroup.value = next
  onSubscribeEmailChange(next)
}

const rule1 = computed(() => {
  if (!formData.value.password) return false
  return /^.{8,16}$/.test(formData.value.password)
})

const rule2 = computed(() => {
  return /^(?=.*?[a-z])(?=.*?[A-Z]).*$/.test(formData.value.password)
})

const rule3 = computed(() => {
  return /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?!.*([~!@&%$^\(\)#_]).*\1.*\1)[A-Za-z0-9~!@&%$^\(\)#_]{8,16}$/.test(
    formData.value.password,
  )
})
const openUrl = (url) => {
  openLocalPdf(url)
}

// 检查是否满18周岁
const isAgeValid = computed(() => {
  if (!formData.value.birthDate) {
    return false // 如果还没选择日期，不允许继续
  }
  const today = new Date()
  const birthDate = new Date(formData.value.birthDate)
  let age = today.getFullYear() - birthDate.getFullYear()
  const monthDiff = today.getMonth() - birthDate.getMonth()
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--
  }
  return age >= 18
})

// 检查年龄并提示
const checkAge = () => {
  if (formData.value.birthDate && !isAgeValid.value) {
    uni.showModal({
      title: t('Msg.SystemPrompt'),
      content: t('signup.ageRestriction'),
      showCancel: false,
      confirmText: t('Btn.Confirm'),
      success: function (res) {
        if (res.confirm) {
          // 用户点击确认后的操作
        }
      },
    })
  }
}

const limitAgentIdLength = (val) => {
  if (val == null || val === '') return
  // 推荐码只能输入数字和英文
  const filtered = val.toString().replace(/[^0-9a-zA-Z]/g, '').slice(0, 10)
  if (formData.value.linkValue !== filtered) {
    formData.value.linkValue = filtered
  }
}

onLoad((options) => {
  if (options) {
    formData.value.sourceCode = options.ex || null
    formData.value.w = options.w || ''
    formData.value.subId = options.SUBID || ''
    formData.value.oc = options.oc || ''
    formData.value.email = options.emailAdvertisement || ''

    console.log(options, '-----')

    if (options.id) {
      isRouteHasId.value = true
      formData.value.agentId = Number(options.id)
      formData.value.linkValue = options.commission || ''

      switch (options.ibInvalid) {
        case 'B0':
          formData.value.ibInvalid = 0
          break
        case 'B1':
          formData.value.ibInvalid = 1
          break
      }
    }
  }
})
const ho = ref('')


const form = ref(null)
const value = ref('')
const mock_options = ref([])
const countryCode = ref('my')
const countryOptions = computed(() => {
  return mock_options.value.map(item => ({
    text: item.enName,
    value: item.code,
    disable: item.isOpenAccount == 0 || item.isOpenAccount === null ? true : false,
  }))
})

// 国家列表
async function getCountry() {
  try {
    let res = await countryApi.Country({})
    if (res.code == 200) { // Code.StatusOK
      mock_options.value = res.data
    } else {
      showToast(res.msg)
    }
  } catch (error) {
    console.error(error)
  }
}

//获取当前国家编码
const getCountryMsg = async () => {
  let res = await countryApi.CountryGet({})
  if (res.code == Code.StatusOK) {
    countryCode.value = res.msg
  } else {
    console.log(res)
  }
}

// 获取验证码按钮点击
async function handleGetCode() {
  if (!formData.value.birthDate) {
    showToast(t('vaildate.birthDate.empty'))
    return
  }
  if (!isAgeValid.value) {
    showToast(t('signup.ageRestriction'))
    return
  }
  if (!formData.value.country) {
    showToast(t('vaildate.country.empty'))
    return
  }
  if (!formData.value.email) {
    showToast(t('vaildate.email.empty'))
    return
  }
  if (!Config.Pattern.Email.test(formData.value.email)) {
    showToast(t('vaildate.email.format'))
    return
  }

  if (!canSend.value) return
  await sendEmailCode()
}


// 发送邮箱验证码
async function sendEmailCode() {
  const res = await loginApi.Code({
    ...formData.value,
  })

  if (res.code === 200) {
    showToast(t('Msg.CodeSuccess'))
    start()
    return true
  } else {
    showToast(t('Msg.CodeFail'))
    return false
  }
}

const handleModelConfirm = () => {
  // 弹窗确认后的处理
  status.value = false
}

const register = async () => {
  if (countryCode.value == 'MY' || countryCode.value == 'ID') {
    status.value = true
    return
  }
  form.value.validate().then(async (res) => {
    // 中国（含港澳台）使用 X-System: B，非中国使用 X-System: A
    const chinaCountryCodes = ['CN']
    const isChina = chinaCountryCodes.includes(formData.value.country)
    const xSystemValue = isChina ? 'B' : 'A'


    let resData = await loginApi.Register(
      { ...formData.value },
      { headers: { 'X-System': xSystemValue } },
    )
    if (resData.code == 200) { // Code.StatusOK
      showToast(t('Msg.registerSuc'))
      login()
    } else {
      showToast(resData.msg)
    }

  }).catch(err => {
    console.log('表单错误信息：', err)
    showToast(err.msg)
    return false
  })
}

const login = async () => {
  try {
    let res = await userApi.login({
      loginName: formData.value.email,
      password: formData.value.password,
    })
    if (res.code == 200) { // Code.StatusOK
      userToken.value = res.data
      getLoginInfo()
    } else {
      showToast(res.msg)
    }
  } catch (error) {
    console.error(error)
  }
}

const getLoginInfo = async () => {
  try {
    let res = await userApi.getUserInfo()
    if (res.code == 200) { // Code.StatusOK
      userStore.saveUserInfo(res.data)
      showToast(t('Msg.LoginSuccess'))
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/customer/index',
        })
        // this.$store.commit("isActiveTab", "0"); (可能需要适配相应的逻辑)
      }, 1000)
    } else {
      showToast(t('Msg.SystemError'))
    }
  } catch (error) {
    console.error(error)
  }
}


onMounted(() => {
  getCountry()
  getCountryMsg()
})

</script>


<style lang="scss" scoped>
.chat-icon {
  width: px2rpx(50);
  height: px2rpx(50);
  border-radius: 50%;
  background-color: #cf1322;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: px2rpx(25);
  right: px2rpx(0);
  z-index: 999;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 px2rpx(8) px2rpx(20) rgba(0, 0, 0, 0.15);
  will-change: transform;
}

.chat-icon:hover {
  transform: scale(1.1);
}

.chat-icon-expanded {
  bottom: px2rpx(20);
  right: px2rpx(20);
  transform: scale(1.1);
  box-shadow: 0 px2rpx(12) px2rpx(30) rgba(0, 0, 0, 0.2);
}

.chat-icon-hidden {
  display: none;
}

.pwd {
  list-style: none;
  padding-left: 0;
  margin: 0;

  li {
    font-size: px2rpx(12);
    color: var(--bs-heading-color);
    line-height: px2rpx(20);
    position: relative;
    padding-left: px2rpx(16);

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: px2rpx(6);
      height: px2rpx(6);
      border-radius: 50%;
      background-color: var(--bs-heading-color);
    }

    &.fit {
      color: #67c23a;

      &::before {
        background-color: #67c23a;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@import "@/uni.scss";

:deep(uni-content) {
  padding-left: 0 !important;
}

.regist-page {
  height: 100vh;
  border: none;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.fixed {
  width: 100%;
  height: var(--status-bar-height);
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  z-index: 9;
}

.global-header-bar {
  width: 100%;
  height: px2rpx(60);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 100;

  &.pc-header {
    background-color: transparent;
  }

  .header-inner {
    width: 100%;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    /* 两端对齐，可放logo和组件 */
    align-items: center;
  }
}

.mobile-header-bar {
  //position: absolute;
  //top: px2rpx(20);
  //right: px2rpx(20);
  z-index: 10;
  width: 100%;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  display: flex;
  justify-content: flex-end;
}

.main-content {
  flex: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.demo-uni-row {
  height: 100%;
  margin: 0 !important;

  .left-bg {
    height: 100%;
    min-height: calc(100vh - 120px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .left-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      width: 60%;
      //margin-top: px2rpx(0);

      .inner {
        width: 100%;
        text-align: start;
        margin-bottom: px2rpx(20);

        .section-title {
          margin-top: px2rpx(10);
          margin-bottom: px2rpx(10);
        }


        .title {
          font-size: px2rpx(50);
          line-height: 1.3;
          color: var(--bs-emphasis-color);
          font-weight: 700;
          text-align: left;
        }

        .w-700 {
          font-weight: 700;
        }

        .subtitle {
          width: 45%;
          font-size: px2rpx(18);
          letter-spacing: px2rpx(1);
          display: block;
          margin-bottom: px2rpx(24);
          color: #ffffff;
          line-height: px2rpx(15);
          font-weight: 500;
          padding: px2rpx(10) px2rpx(20);
          border-radius: px2rpx(100);
          text-transform: uppercase;
          background-color: #e61f1e;
          text-align: center;
        }

        .w-40 {
          max-width: 40%;
        }

        .text-white {
          margin-top: px2rpx(10);
          font-size: px2rpx(14);
          line-height: 1.6;
          color: var(--bs-emphasis-color);
        }
      }

      .img-fluid {
        width: 100%;
        max-width: px2rpx(240);
      }

      .mt--10 {
        margin-top: px2rpx(10);
      }

      .h1 {
        // text-align: center;
        color: var(--bs-emphasis-color);
        font-size: 30px;
        margin-top: 30px;
        line-height: 1.5;
      }

      .h6 {
        text-align: start;
        line-height: 20px;
        color: var(--bs-emphasis-color);
        font-size: 14px;
        margin-top: 10px;
      }

      .company {
        padding: px2rpx(10) 0 px2rpx(10) 0;
        position: relative;
        align-items: flex-start !important;
        width: 100%;
      }
    }

    .left-content {
      width: 100%;

      .des {
        text-align: start;
        line-height: 24px;
        color: var(--bs-emphasis-color);
        font-size: 14px;
        margin-top: px2rpx(20);
        padding: 0;

        :nth-child(n) {
          display: inline;
          word-break: break-all;
          word-wrap: break-word;
        }

        .doc-link {
          color: #e61f1e;
          text-decoration: underline;
          margin: 0 px2rpx(4);
        }
      }
    }
  }

  .right-f {
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    padding: 0 px2rpx(24);
    height: 100%;
    box-sizing: border-box;

    .account {
      background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
      position: relative;
      height: calc(100vh - 120px);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: px2rpx(32) 10%;

      .title {
        margin: px2rpx(32) 0;
        font-size: px2rpx(24);
        font-weight: bolder;
        color: #e4e4e4;
        text-align: center;

        i {
          margin-right: px2rpx(10);
        }

        .tit1 {
          font-size: px2rpx(34);
          line-height: 1.5;
          font-weight: bold;
          color: #000000;
        }

        .tit2 {
          font-size: px2rpx(16);
          line-height: 1.5;
          color: #cecece;
          font-weight: 500;
        }
      }

      .company {
        padding: px2rpx(50) 0 px2rpx(20) 0;
        position: relative;
        align-items: center !important;
      }

      .company-icon {
        width: px2rpx(234);
      }
    }
  }
}

.content-wrapper {
  max-width: px2rpx(1224);
  width: 100%;
  margin: 0 auto;
  padding-top: px2rpx(20);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 56px);
}

.regist-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: px2rpx(650);
  margin: 0 auto;
}

.regist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: px2rpx(40) 0 px2rpx(20);
  padding-bottom: px2rpx(10);

  .title {
    font-size: px2rpx(28);
    font-weight: bold;
    color: var(--bs-emphasis-color);
    line-height: 1;
  }

  .login-link {
    font-size: px2rpx(14);
    color: var(--bs-emphasis-color);
    display: flex;
    align-items: center;
    line-height: 1;

    .text {
      margin-right: px2rpx(4);
    }


  }
}

.login-link {
  margin-top: px2rpx(20);
  text-align: start;
  display: flex;
  align-items: center;
  font-size: px2rpx(16);
  line-height: 1.6;
}

.link {
  color: #e61f1e;
  padding-bottom: 2px;
  cursor: pointer;
  font-size: px2rpx(14);
}

//display: flex;
.logo {
  width: 100%;
  margin-top: px2rpx(40);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreemnet9 {
  text-align: initial;
  color: #e61f1e;
}

.company-icon {
  width: px2rpx(234);
}

.account-type {
  width: 100%;
  margin-top: px2rpx(20);
  padding: px2rpx(10);
  background-color: $uni-bg-color-hover;
  height: px2rpx(60);
  box-sizing: border-box;
  border-radius: px2rpx(20);
  display: flex;
  align-items: center;

  .type-btn {
    width: 50%;
    text-align: center;
    height: px2rpx(40);
    border-radius: px2rpx(20);
    line-height: px2rpx(40);
    font-size: px2rpx(18);
    cursor: pointer;

    &.active {
      background-color: var(--primary-color);
    }
  }
}


.formStyle {
  height: px2rpx(40);
}

.account-tip {
  width: 100%;
  text-align: center;
  margin: px2rpx(30) 0;

  .title {
    font-size: px2rpx(26);
    font-weight: bold;
  }

  .tip {
    margin-top: px2rpx(5);
    color: var(--gray);
  }
}

.formContent {
  padding: 0 10px;
}

// 修改表单组件高度。
:deep(.uni-stat-box) {
  height: 100%;
}

:deep(.uni-select) {
  height: 100%;
}

:deep(.uni-easyinput__content) {
  height: 100%;
}

:deep(.uni-date-editor) {
  height: 100%;
}

:deep(.uni-date-editor--x) {
  height: 100%;
}

.btn-code {
  width: 120px;
  height: px2rpx(37);
  box-sizing: border-box;
  background-color: #102047;
  border: 1px solid rgb(229, 229, 229);
  color: var(--bs-emphasis-color);
  text-align: center;
  line-height: px2rpx(35);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}

.check-box {
  padding: 0 px2rpx(10);
  margin-bottom: px2rpx(10);
  display: flex;
  align-items: center;
  cursor: pointer;

  .checkbox-label {
    font-size: px2rpx(14);
    color: #666666;
    margin-left: px2rpx(8);
    user-select: none;
  }

  :deep(.u-checkbox) {
    display: flex;
    align-items: flex-start;
  }
}

.regiset-btn {
  width: 100%;
  height: px2rpx(40);
  border-radius: px2rpx(4);
  background-color: var(--color-error);
  color: var(--bs-emphasis-color);
  font-weight: bold;
}

.or-title {
  font-size: px2rpx(16);
  line-height: 1.5;
  color: var(--bs-heading-color);
  font-weight: 500;
  text-align: center;
  margin: px2rpx(20) 0 px2rpx(18) 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .line {
    flex: 1;
    height: 1px;
    background-color: #e4e4e4;
  }

  .qr-tit2 {
    margin: 0 px2rpx(12);
  }
}

.login-btn {
  width: 100%;
  height: px2rpx(40);
  border-radius: px2rpx(20);
  background-color: #1EBF42;
  color: var(--bs-emphasis-color);
  font-weight: bold;
  margin-bottom: px2rpx(20);
}

.code-text {
  padding-right: px2rpx(20);
}

.des-bottom {
  margin-top: px2rpx(20);
  line-height: 20px;
  color: #000;
  font-size: 12px;

  .desc-link {
    display: inline-block;
    color: #e61f1e;
    text-decoration: underline;
  }
}

.des {
  width: 100%;
  box-sizing: border-box;
  text-align: start;
  line-height: 20px;
  color: #000;
  font-size: 12px;
  padding: px2rpx(20) px2rpx(30);

  //display: none;
  :nth-child(n) {
    display: inline;
    word-break: break-all;
    word-wrap: break-word;
  }

  a {
    color: #e61f1e;
  }
}

:deep(.u-text__value) {
  color: #ea002a !important;
  font-size: px2rpx(14) !important;
}
</style>