jurong_circle_frontdesk/src/views/Register.vue

<template>
  <div class="register-page">
    <div class="register-container">
      <div class="register-card">
        <div class="register-header">
          <h2>用户注册</h2>
          <p>创建你的账号，开始使用炬融圈</p>
        </div>

        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerRules"
          class="register-form"
          @submit.prevent="handleRegister"
        >
<!--          <el-form-item prop="username">-->
<!--            <el-input-->
<!--              v-model="registerForm.username"-->
<!--              placeholder="请输入用户名"-->
<!--              size="large"-->
<!--              :prefix-icon="User"-->
<!--              clearable-->
<!--            />-->
<!--          </el-form-item>-->

          <el-form-item prop="phone">
            <el-input
              v-model="registerForm.phone"
              placeholder="请输入手机号"
              size="large"
              :prefix-icon="Message"
              clearable
            />
          </el-form-item>

          <el-form-item prop="smsCode">
            <div class="sms-code-group">
              <el-input
                v-model="registerForm.smsCode"
                placeholder="请输入短信验证码"
                size="large"
                :prefix-icon="ChatDotRound"
                clearable
                class="sms-input"
              />
              <el-button
                type="primary"
                size="large"
                :disabled="!canSendSMS || smsCountdown > 0"
                :loading="sendingSMS"
                @click="sendSMSCode"
                class="sms-button"
              >
                {{ smsCountdown > 0 ? `${smsCountdown}s后重发` : '发送验证码' }}
              </el-button>
            </div>
          </el-form-item>

          <el-form-item prop="region">
            <el-cascader
              v-model="registerForm.region"
              :options="regionOptions"
              placeholder="请选择省市区"
              size="large"
              style="width: 100%"
              :props="{ expandTrigger: 'hover', value: 'code' }"
              :show-all-levels="true"
              :collapse-tags="true"
              :max-collapse-tags="1"
              :teleported="false"
              popper-class="mobile-cascader-popper"
              @change="handleRegionChange"
            >
              <template #prefix>
                <el-icon><Location /></el-icon>
              </template>
            </el-cascader>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              placeholder="请输入密码"
              size="large"
              :prefix-icon="Lock"
              show-password
              clearable
            />
          </el-form-item>

          <el-form-item prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请确认密码"
              size="large"
              :prefix-icon="Lock"
              show-password
              clearable
            />
          </el-form-item>

          <el-form-item prop="captcha">
            <Captcha
              ref="captchaRef"
              v-model="registerForm.captcha"
              placeholder="请输入验证码"
              size="large"
            />
          </el-form-item>

          <el-form-item prop="agreement">
            <el-checkbox
              v-model="registerForm.agreement"
              @click.prevent="showAgreementDialog"
              :disabled="true"
            >
              <span @click="showAgreementDialog" class="agreement-text">
                我已阅读并同意《用户协议》和《隐私政策》
              </span>
            </el-checkbox>
            <div class="agreement-hint">
              <el-icon><InfoFilled /></el-icon>
              <span>请点击查看用户协议和隐私政策</span>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="large"
              class="register-button"
              :loading="userStore.loading"
              @click="handleRegister"
            >
              {{ userStore.loading ? '注册中...' : '立即注册' }}
            </el-button>
          </el-form-item>
        </el-form>

        <div class="register-footer">
          <p>
            已有账号？
            <el-link type="primary" @click="$router.push('/mylogin')">
              立即登录
            </el-link>
          </p>
        </div>
      </div>
    </div>

    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="decoration-shape shape-1"></div>
      <div class="decoration-shape shape-2"></div>
      <div class="decoration-shape shape-3"></div>
      <div class="decoration-shape shape-4"></div>
    </div>

    <!-- 协议弹窗 -->
    <el-dialog
      v-model="showAgreementDialogVisible"
      title="用户协议和隐私政策"
      width="90%"
      :style="{ maxWidth: '600px' }"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      class="agreement-dialog"
      position="bottom"
    >
      <div class="agreement-content">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <el-tab-pane name="agreement">
            <template #label>
              <span class="tab-label">用户协议</span>
              <el-icon v-if="agreementViewed" class="check-icon"><Check /></el-icon>
            </template>
             <div class="agreement-text-content" ref="agreementContent">
               <h3>用户协议</h3>
               <p>1. 用户应当遵守法律法规，不得发布违法违规内容。</p>
               <p>2. 用户对自己发布的内容承担全部责任。</p>
               <p>3. 平台有权对违规内容进行删除或限制。</p>
               <p>4. 用户应当保护好自己的账号安全。</p>
               <p>5. 平台保留修改本协议的权利。</p>
             </div>
          </el-tab-pane>
          <el-tab-pane name="privacy">
            <template #label>
              <span class="tab-label">隐私政策</span>
              <el-icon v-if="privacyViewed" class="check-icon"><Check /></el-icon>
            </template>
             <div class="privacy-text-content" ref="privacyContent">
               <h3>隐私政策</h3>
               <p>1. 我们重视用户隐私保护。</p>
               <p>2. 我们只收集必要的用户信息。</p>
               <p>3. 用户信息仅用于提供服务。</p>
               <p>4. 我们不会向第三方泄露用户信息。</p>
               <p>5. 用户有权查看、修改或删除个人信息。</p>
             </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div class="read-status">
            
          </div>
          <div class="dialog-buttons">
            <el-button @click="closeAgreementDialog">取消</el-button>
            <el-button type="primary" @click="confirmAgreement" :disabled="!(agreementViewed && privacyViewed)">确认已阅读</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  User,
  Lock,
  Message,
  Edit,
  ChatDotRound,
  CreditCard,
  Location,
  InfoFilled,
  Check,
} from '@element-plus/icons-vue';
import Captcha from '@/components/Captcha.vue';
import api from '@/utils/api'

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

// 表单引用
const registerFormRef = ref();
const captchaRef = ref();

// 表单数据
const registerForm = reactive({
  username: '',
  phone: '',
  region: [],
  province: '',
  city: '',
  district: '',
  district_id: '',
  password: '',
  confirmPassword: '',
  captcha: '',
  smsCode: '',
  agreement: false,
});

// 协议查看状态
const agreementViewed = ref(false);
const privacyViewed = ref(false);

// 协议弹窗相关状态
const showAgreementDialogVisible = ref(false);
const activeTab = ref('agreement');
const agreementContent = ref();
const privacyContent = ref();

// 短信验证码相关状态
const sendingSMS = ref(false);
const smsCountdown = ref(0);
const canSendSMS = computed(() => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(registerForm.phone);
});

// 地区数据
const regions = ref([]);
const regionOptions = ref([]);
const cities = computed(() => {
  const citySet = new Set();
  regions.value.forEach((region) => {
    if (region.city_name) {
      citySet.add(region.city_name);
    }
  });
  return Array.from(citySet).sort();
});

const filteredDistricts = computed(() => {
  if (!registerForm.city) return [];
  return regions.value.filter(
    (region) => region.city_name === registerForm.city
  );
});

// 自定义验证函数
const validateUsername = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入用户名'));
  } else if (value.length < 3) {
    callback(new Error('用户名至少3个字符'));
  } else if (value.length > 20) {
    callback(new Error('用户名不能超过20个字符'));
  } else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
    callback(new Error('用户名只能包含字母、数字、下划线和中文'));
  } else {
    callback();
  }
};

const validatePassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'));
  } else if (value.length < 6) {
    callback(new Error('密码至少6个字符'));
  } else if (value.length > 20) {
    callback(new Error('密码不能超过20个字符'));
  } else if (!/(?=.*[a-zA-Z])(?=.*\d)/.test(value)) {
    callback(new Error('密码必须包含字母和数字'));
  } else {
    // 如果确认密码已输入，重新验证确认密码
    if (registerForm.confirmPassword) {
      registerFormRef.value?.validateField('confirmPassword');
    }
    callback();
  }
};

const validateConfirmPassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请确认密码'));
  } else if (value !== registerForm.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
};

const validateAgreement = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请阅读并同意用户协议和隐私政策'));
  } else {
    callback();
  }
};

// 表单验证规则
const registerRules = {
  username: [{ validator: validateUsername, trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],

  smsCode: [
    { required: true, message: '请输入短信验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '短信验证码为6位数字', trigger: 'blur' },
  ],
  region: [{ required: true, message: '请选择省市区', trigger: 'change' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
  confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' },
  ],
  agreement: [{ validator: validateAgreement, trigger: 'change' }],
};

// 发送短信验证码
const sendSMSCode = async () => {
  if (!canSendSMS.value || sendingSMS.value || smsCountdown.value > 0) {
    return;
  }

  try {
    sendingSMS.value = true;

    const response = await fetch('/api/sms/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        phone: registerForm.phone,
      }),
    });

    const result = await response.json();

    if (result.success) {
      ElMessage.success('验证码发送成功，请查收短信');
      // 开始倒计时
      startCountdown();
    } else {
      ElMessage.error(result.message || '发送失败，请重试');
    }
  } catch (error) {
    console.error('发送短信验证码失败:', error);
    ElMessage.error('发送失败，请检查网络连接');
  } finally {
    sendingSMS.value = false;
  }
};

// 开始倒计时
const startCountdown = () => {
  smsCountdown.value = 60;
  const timer = setInterval(() => {
    smsCountdown.value--;
    if (smsCountdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 加载省市区级联数据
const loadRegionOptions = async () => {
  const provincesResponse = await api.get('/regions/provinces');
  regionOptions.value = provincesResponse.data.data || [];
};

// 处理级联选择器变化
const handleRegionChange = (value) => {
  if (value && value.length === 3) {
    registerForm.province = value[0];
    registerForm.city = value[1];
    registerForm.district = value[2];
    registerForm.district_id = value[2];
  }
};

/**
 * 城市变化处理
 */
const onCityChange = () => {
  // 清空区域选择
  registerForm.district_id = '';
};

// 处理注册
const handleRegister = async () => {
  if (!registerFormRef.value || !captchaRef.value) return;

  try {
    // 先验证表单
    const valid = await registerFormRef.value.validate();
    if (!valid) return;

    // 验证验证码
    const captchaValid = await captchaRef.value.verifyCaptcha(
      registerForm.captcha
    );
    if (!captchaValid) {
      registerForm.captcha = '';
      return;
    }

    // 获取验证码信息
    const captchaInfo = captchaRef.value.getCaptchaInfo();

    // 提交注册请求（包含验证码信息）
    const registerData = {
      username: registerForm.phone,
      phone: registerForm.phone,
      city: registerForm.city,
      district_id: registerForm.district_id,
      password: registerForm.password,
      smsCode: registerForm.smsCode,
      captchaId: captchaInfo.captchaId,
      captchaText: captchaInfo.captchaText,
      province: registerForm.province,
      inviter: registerForm.inviter,
    };
    console.log(registerData,'registerData');
    console.log(registerForm,'registerForm')
    const result = await userStore.register(registerData);

    if (result.success) {
      // 检查是否需要支付
      if (result.needPayment) {
        ElMessage.success('用户信息创建成功，请完成支付以激活账户');
        // 跳转到支付页面
        router.push({
          path: '/payment',
        });
      } else {
        ElMessage.success('注册成功！请登录');
        router.push('/mylogin');
      }
    }
  } catch (error) {
    console.error('注册失败:', error);
    // 注册失败后刷新验证码
    if (captchaRef.value) {
      await captchaRef.value.refreshCaptcha();
    }
    registerForm.captcha = '';
  }
};

// 显示协议弹窗
const showAgreementDialog = () => {
  showAgreementDialogVisible.value = true;
  activeTab.value = 'agreement';
  // 弹窗打开时默认用户协议已读
  agreementViewed.value = true;
};

// 关闭协议弹窗
const closeAgreementDialog = () => {
  showAgreementDialogVisible.value = false;
};

// 确认已阅读协议
const confirmAgreement = () => {
  if (agreementViewed.value && privacyViewed.value) {
    registerForm.agreement = true;
    showAgreementDialogVisible.value = false;
    ElMessage.success('已确认阅读用户协议和隐私政策');
  } else {
    ElMessage.warning('请先查看用户协议和隐私政策');
  }
};

// 处理选项卡切换
const handleTabChange = (tabName) => {
  if (tabName === 'agreement') {
    // 切换到用户协议时，标记为已读
    agreementViewed.value = true;
  } else if (tabName === 'privacy') {
    // 切换到隐私政策时，标记为已读
    privacyViewed.value = true;
  }
};





// 图片上传成功处理
const handleUploadSuccess = (response, field) => {
  ElMessage.success('图片上传成功');
};

// 图片上传失败处理
const handleUploadError = (error) => {
  ElMessage.error('图片上传失败，请重试');
};

const invite = async () => {
  const inviter = route.query.inviter;
  console.log('邀请人ID:', inviter);
  if (inviter) {
    registerForm.inviter = inviter;
    // try {
    //   const response = await api.get(`/user/${inviter}`);
    //   if (response.data.success) {
    //     registerForm.inviter = inviter;
    //   }
    // } catch (error) {
    //   console.error('获取邀请人信息失败:', error);
    // }
  }
}

// 组件挂载时的处理
onMounted(() => {
  // 如果已经登录，直接跳转
  if (userStore.isAuthenticated) {
    const redirectPath = route.query.redirect || '/';
    router.push(redirectPath);
  }


  // 加载省市区级联数据
  loadRegionOptions();

  invite();
});
</script>

<style lang="scss" scoped>
.register-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.register-container {
  width: 100%;
  max-width: 450px;
  padding: 20px;
  position: relative;
  z-index: 10;
}

.register-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.register-header {
  text-align: center;
  margin-bottom: 30px;
}

.register-header h2 {
  color: #303133;
  margin-bottom: 8px;
  font-weight: 600;
}

.register-header p {
  color: #909399;
  font-size: 14px;
}

.register-form {
  margin-bottom: 20px;
}

.register-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
}

.register-footer {
  text-align: center;
  margin-bottom: 20px;
}

.register-footer p {
  color: #606266;
  font-size: 14px;
}

.document-upload-section {
  margin: 20px 0;
}

.document-upload-section .el-divider {
  margin: 20px 0;
}

.document-upload-section .el-form-item {
  margin-bottom: 20px;
}

.document-upload-section .el-form-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
}





.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
}

.feature-item .el-icon {
  color: #409eff;
  font-size: 16px;
}

.upload-preview {
  margin-top: 10px;
}

.upload-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
}

.upload-demo {
  margin-bottom: 10px;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.decoration-shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  animation: float 8s ease-in-out infinite;
}

.shape-1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 15%;
  left: 15%;
  animation-delay: 0s;
}

.shape-2 {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  top: 70%;
  right: 20%;
  animation-delay: 2s;
}

.shape-3 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  bottom: 25%;
  left: 25%;
  animation-delay: 4s;
}

.shape-4 {
  width: 120px;
  height: 40px;
  border-radius: 20px;
  top: 40%;
  right: 10%;
  animation-delay: 6s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-15px) rotate(180deg);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .register-container {
    padding: 15px;
  }

  .register-card {
    padding: 30px 20px;
  }

  .features-list {
    gap: 8px;
  }
}

/* Element Plus 组件样式覆盖 */
:deep(.el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-button) {
  border-radius: 8px;
}

:deep(.el-divider__text) {
  background-color: rgba(255, 255, 255, 0.95);
  color: #909399;
}

:deep(.el-checkbox__label) {
  font-size: 14px;
  color: #606266;
}

/* 输入框聚焦效果 */
:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}

/* 加载状态样式 */
.register-button.is-loading {
  pointer-events: none;
}

/* 动画效果 */
.register-card {
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 错误状态样式 */
:deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: 0 0 0 1px #f56c6c inset;
}

/* 成功状态样式 */
:deep(.el-form-item.is-success .el-input__wrapper) {
  box-shadow: 0 0 0 1px #67c23a inset;
}

/* 协议对话框样式 */
:deep(.agreement-dialog),
:deep(.privacy-dialog) {
  .el-message-box__content {
    max-height: 400px;
    overflow-y: auto;
  }
}

/* 密码强度指示器 */
.password-strength {
  margin-top: 5px;
  font-size: 12px;
}

.strength-weak {
  color: #f56c6c;
}

.strength-medium {
  color: #e6a23c;
}

.strength-strong {
  color: #67c23a;
}

/* 短信验证码样式 */
.sms-code-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sms-input {
  flex: 1;
}

.sms-button {
  flex-shrink: 0;
  min-width: 120px;
  height: 40px;
}

.sms-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 协议相关样式 */
.agreement-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: #e6a23c;
}

.agreement-hint .el-icon {
  font-size: 14px;
}

.agreement-text {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}

.agreement-text:hover {
  color: #66b1ff;
}

/* 协议弹窗样式 */
:deep(.agreement-dialog) {
  .el-dialog__body {
    padding: 20px;
    max-height: 60vh;
    overflow: hidden;
  }
}

.agreement-content {
  height: 100%;
}

:deep(.agreement-dialog .el-tabs__nav) {
  display: flex;
  width: 100%;
}

:deep(.agreement-dialog .el-tabs__item) {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-label {
  margin-right: 4px;
}

.agreement-text-content,
.privacy-text-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.6;
  font-size: 14px;
  color: #606266;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
}

.agreement-text-content h3,
.privacy-text-content h3 {
  color: #303133;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
}

.agreement-text-content p,
.privacy-text-content p {
  margin-bottom: 12px;
}

.agreement-text-content strong,
.privacy-text-content strong {
  color: #409eff;
  font-weight: 600;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.check-icon {
  color: #67c23a;
  font-size: 16px;
}

/* 滚动条样式 */
.agreement-text-content::-webkit-scrollbar,
.privacy-text-content::-webkit-scrollbar {
  width: 6px;
}

.agreement-text-content::-webkit-scrollbar-track,
.privacy-text-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.agreement-text-content::-webkit-scrollbar-thumb,
.privacy-text-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.agreement-text-content::-webkit-scrollbar-thumb:hover,
.privacy-text-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

:deep(.el-link.viewed:hover) {
  color: #529b2e !important;
}

/* 移动端级联选择器样式优化 */
:deep(.mobile-cascader-popper) {
  max-width: calc(100vw - 20px) !important;
  left: 10px !important;
  right: 10px !important;
  transform: none !important;
  margin: 0 !important;
}

:deep(.mobile-cascader-popper .el-cascader-panel) {
  max-width: 100% !important;
  overflow-x: hidden !important;
  display: flex !important;
  gap: 0 !important;
  padding: 0 !important;
}

:deep(.mobile-cascader-popper .el-cascader-menu) {
  min-width: 33.33% !important;
  max-width: 33.33% !important;
  width: 33.33% !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  overflow-x: hidden !important;
  border-right: 1px solid #e4e7ed;
  margin: 0 !important;
}

:deep(.mobile-cascader-popper .el-cascader-menu:last-child) {
  border-right: none !important;
}

:deep(.mobile-cascader-popper .el-cascader-menu__item) {
  padding: 6px 3px !important;
  line-height: 1.1 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  :deep(.mobile-cascader-popper) {
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
  }
  
  :deep(.mobile-cascader-popper .el-cascader-menu__item) {
    padding: 5px 2px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 360px) {
  :deep(.mobile-cascader-popper) {
    max-width: calc(100vw - 12px) !important;
    left: 6px !important;
    right: 6px !important;
  }
  
  :deep(.mobile-cascader-popper .el-cascader-menu__item) {
    padding: 4px 1px !important;
    font-size: 10px !important;
    line-height: 1.0 !important;
  }
}

@media (max-width: 320px) {
  :deep(.mobile-cascader-popper .el-cascader-menu__item) {
    padding: 3px 1px !important;
    font-size: 9px !important;
  }
}
</style>