zz-shopify-components 0.3.1-beta.9 → 0.5.0

package/blocks/zz-edu-form.liquid

@@ -0,0 +1,895 @@
+{% schema %}
+{
+  "name": "Edu Form",
+  "class": "zz-edu-form",
+  "settings": [
+    {
+        "type": "color_background",
+        "id": "background_color",
+        "label": "背景颜色",
+    },
+    {
+      "type": "select",
+      "id": "request_type",
+      "label": "请求类型",
+      "options": [
+        { "value": "prod", "label": "正式" },
+        { "value": "test", "label": "测试" }
+      ],
+      "default": "test"
+    },
+    {
+      "type": "select",
+      "id": "site_type",
+      "label": "站点",
+      "options": [
+        { "value": "us", "label": "US" },
+        { "value": "eu", "label": "EU" }
+      ],
+      "default": "us"
+    },
+    {
+      "type": "url",
+      "id": "login_url",
+      "label": "登录链接"
+    },
+    {
+      "type": "text",
+      "id": "verify_email_title",
+      "label": "验证邮箱标题",
+      "default": "Verify my email"
+    },
+    {
+      "type": "text",
+      "id": "verify_email_message",
+      "label": "验证邮箱内容",
+      "default": "Verification code sent to your educational email, please check."
+    },
+    {
+      "type": "text",
+      "id": "verify_success_title",
+      "label": "验证成功标题",
+      "default": "Verification successful"
+    },
+    {
+      "type": "text",
+      "id": "verify_success_message",
+      "label": "验证成功内容",
+      "default": "Authentication successful. An account activation email has been sent to your email address. Please check your email to complete the activation."
+    },
+    {
+      "type": "text",
+      "id": "verify_fail_title",
+      "label": "验证失败标题",
+      "default": "Verification failed"
+    },
+  ],
+  "presets": [ 
+    {
+      "name": "Edu Form"
+    },
+   
+  ]
+}
+{% endschema %}
+
+{% assign is_logged_in = false %}
+{% assign is_edu_verified = false %}
+{% if customer %}
+  {% assign is_logged_in = true %}
+  {% if customer.tags contains 'edu-verified' %}
+    {% assign is_edu_verified = true %}
+  {% endif %}
+{% endif %}
+
+{% if block.settings.site_type == 'us' %}
+  {% assign shop_id = 'a0989c' %}
+{% else %}
+  {% assign shop_id = 'thehovereu' %}
+{% endif %}
+
+
+{% assign eu_country_list = 'Deutschland,Germany,La France,France,España,Italia,Österreich,Belgium,Bulgaria,Croatia,Czech Republic,Denmark,Estonia,Finland,Hungary,Ireland,Latvia,Lithuania,Luxembourg,Monaco,Netherlands,Poland,Portugal,Romania,Slovakia,Slovenia,Sweden' | split: ',' %}
+
+<div class="tw-w-full tw-flex tw-flex-col tw-items-center tw-justify-center">
+  <zz-radio-tabs name="edu-form-type" class="tw-bg-[#F5F5F6] lg:tw-w-[388px]">
+    <zz-radio-tabs-item value="email" checked>Verify my email</zz-radio-tabs-item>
+    <zz-radio-tabs-item value="manual">Upload student card</zz-radio-tabs-item>
+  </zz-radio-tabs>
+  <div class="zz-edu-form-container">
+    <form class="zz-edu-form-form" id="eduForm-{{ block.id }}">
+      <div class="zz-edu-form-group">
+        <label for="firstName" class="zz-edu-form-label">Full name</label>
+        <div class="zz-edu-form-row">
+          <input class="zz-edu-form-input-column" type="text" id="firstName" name="firstName" placeholder="First name" required>
+          <input class="zz-edu-form-input-column" type="text" id="lastName" name="lastName" placeholder="Last name" required>
+        </div>
+      </div>
+      <div class="zz-edu-form-row">
+        <!-- 左列 -->
+        <div class="zz-edu-form-column">
+          <div class="zz-edu-form-group">
+            <label for="country" class="zz-edu-form-label">Country</label>
+            <select id="country" name="country" class="zz-edu-form-select" required>
+              {% if block.settings.site_type == 'us' %}
+                  <option value="United States" checked>United States</option>
+              {% else %}
+                {% for country in eu_country_list %}
+                  <option value="{{ country }}">{{ country }}</option>
+                {% endfor %}
+              {% endif %}
+            </select>
+          </div>
+        </div>
+        
+        <!-- 右列 -->
+        <div class="zz-edu-form-column">
+          <div class="zz-edu-form-group">
+            <label for="university" class="zz-edu-form-label">University</label>
+            <input type="text" id="university" name="university" placeholder="University Name" required>
+          </div>
+        </div>
+      </div>
+      
+      <div class="zz-edu-form-row">
+        <div class="zz-edu-form-column">
+          <div class="zz-edu-form-group">
+            <label for="email" class="zz-edu-form-label">Email Address</label>
+            <input type="email" id="email" name="email" placeholder="example@example.com" required>
+          </div>
+
+        </div>
+        <div class="zz-edu-form-column">
+          <div class="zz-edu-form-group">
+            <label for="phone" class="zz-edu-form-label">Phone Number</label>
+            <input type="text" id="phone" name="phone" placeholder="Phone Number" required>
+          </div>
+
+
+        </div>
+
+      </div>
+      <div class="zz-edu-form-row">
+        <!-- 左列 -->
+        <div class="zz-edu-form-column">
+          <div class="zz-edu-form-group">
+            <label for="identityType" class="zz-edu-form-label">Identity Type</label>
+            <select id="identityType" name="identityType" class="zz-edu-form-select" required>
+              <option value="student" checked>Student</option>
+              <option value="parent">Parent</option>
+              <option value="teacher">Teacher</option>
+            </select>
+          </div>
+          
+          
+        </div>
+        <div class="zz-edu-form-column">  </div>
+      </div>
+      
+      <div class="zz-edu-form-row upload-file-row zz-edu-form-hidden">
+        <div class="zz-edu-form-column">
+          <div class="zz-edu-form-group">
+            <label for="fileUpload-{{ block.id }}" class="zz-edu-form-label">Upload Document</label>
+            <div class="zz-edu-form-file-upload-container">
+              <input type="file" id="fileUpload-{{ block.id }}" name="fileUpload" class="zz-edu-form-file-input" accept=".pdf,.jpg,.jpeg,.png">
+              <label for="fileUpload-{{ block.id }}" class="zz-edu-form-file-upload-label">
+                <div class="zz-edu-form-file-upload-content">
+                  <svg class="zz-edu-form-file-upload-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 16L12 8M12 8L15 11M12 8L9 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M3 15V16C3 18.8284 3 20.2426 3.87868 21.1213C4.75736 22 6.17157 22 9 22H15C17.8284 22 19.2426 22 20.1213 21.1213C21 20.2426 21 18.8284 21 16V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  <span class="zz-edu-form-file-upload-text">Choose file or drag here</span>
+                  <span class="zz-edu-form-file-upload-hint">PDF, JPG, PNG (Max 10MB)</span>
+                </div>
+              </label>
+              <div class="zz-edu-form-file-preview" id="filePreview-{{ block.id }}"></div>
+            </div>
+          </div>
+        </div>
+        
+      </div>
+      
+      <div class="zz-edu-form-submit">
+        <button type="submit" class="zz-edu-form-submit-btn tw-h-[36px] md:tw-h-[48px]">
+          <span
+            class='zz-edu-form-submit-loading  tw-hidden tw-daisy-loading tw-daisy-loading-spinner '
+          ></span>
+          Submit</button>
+      </div>
+    </form>
+  </div>
+     
+     {% if block.settings.login_url != blank and is_logged_in == false %}
+    <div class="tw-font-[500] tw-text-[#000000B2] tw-text-[14px] tw-leading-[1.5] tw-text-center tw-mt-[24px]  md:tw-text-[16px]">
+      Already verified? <a href="{{ block.settings.login_url }}" class="tw-text-[#000] tw-underline">Log in to shop</a></div>
+  {% endif %}
+</div>
+
+
+
+
+{% render 'zz-edu-info-dialog',
+   shop: shop_id,
+   verify_success_title: block.settings.verify_success_title,
+   verify_success_message: block.settings.verify_success_message,
+   verify_fail_title: block.settings.verify_fail_title
+%}
+
+<script src="{{ 'aliyun-oss-sdk-6.20.0.min.js' | asset_url }}" defer></script>
+<script src="{{ 'crypto-js.min.js' | asset_url }}" defer></script>
+
+<script src="{{ 'zz-edu-info-dialog.js' | asset_url }}" defer></script>
+
+<script>
+  
+
+  
+  var EduErrorCodeConf = {
+    201: {
+      zh: "该教育邮箱已完成注册，无需重复认证",
+      en: "This educational email has been registered, no need to re-authenticate"
+    },
+    400: {
+      zh: "邮箱格式不符合教育邮箱规范，请检查后重试",
+      en: "Email format does not meet educational email standards, please check and try again"
+    },
+    401: {
+      zh: "认证方式与历史记录不一致，请使用相同认证方式",
+      en: "Authentication method inconsistent with historical records, please use the same authentication method"
+    },
+    402: {
+      zh: "已有相同信息和资料的审核表单已在处理中，无需提交",
+      en: "A review form with the same information and materials is already being processed, no need to submit"
+    },
+    403: {
+      zh: "申请拒绝次数已达上限(5次)，无法继续提交",
+      en: "Application rejection limit reached (5 times), cannot continue to submit"
+    },
+    404: {
+      zh: "审核资料未上传或上传格式不合要求",
+      en: "Application review materials not uploaded or upload format does not meet requirements"
+    },
+    405: {
+      zh: "验证码格式错误，请输入正确的  位数字验证码",
+      en: "Verification code format is incorrect, please enter the correct six-digit verification code"
+    },
+    406: {
+      zh: "验证码已过期，请重新获取",
+      en: "Verification code has expired, please obtain a new one"
+    },
+    407: {
+      zh: "验证码错误，请重新输入",
+      en: "Incorrect verification code, please try again"
+    },
+    429: {
+      zh: "验证码发送过于频繁，请 1 分钟后再试",
+      en: "Verification code sent too frequently, please try again in 1 minute"
+    },
+    500: {
+      zh: "系统繁忙，请稍后再试",
+      en: "System is busy, please try again later"
+    }
+  }
+  document.addEventListener('DOMContentLoaded', function () {
+    var hasInput = false
+    {% if block.settings.request_type == 'prod' %}
+      {% assign base_url = 'https://h130-app-server-us.hoverx1.cn' %}
+    {% else %}
+      {% assign base_url = 'https://h130-app-server-test-us.hoverx1.cn' %}
+    {% endif %}
+    const verifySuccessTitle = '{{ block.settings.verify_success_title }}';
+    const verifySuccessMessage = '{{ block.settings.verify_success_message }}';
+    const verifyFailTitle = '{{ block.settings.verify_fail_title }}';
+
+    const baseUrl = '{{ base_url }}';
+    const block = document.getElementById('shopify-block-{{ block.id }}');
+    const form = block.querySelector('#eduForm-{{ block.id }}');
+    let verifyType = 'email'
+    let identityDocumentUrl = ''
+    
+    // 表单提交处理
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+      const zzEduInfoDialog = block.querySelector('zz-edu-info-dialog');
+      // 获取表单数据
+      const formData = new FormData(form);
+      const data = Object.fromEntries(formData);
+      
+      // 验证必填字段
+      const requiredFields = ['firstName', 'lastName', 'country', 'university', 'email', 'phone', 'identityType'];
+      let isValid = true;
+      
+      requiredFields.forEach(field => {
+        const input = form.querySelector(`[name="${field}"]`);
+        if (input) {
+          if (!input.value.trim()) {
+            input.classList.add('error');
+            isValid = false;
+          } else {
+            input.classList.remove('error');
+          }
+        }
+          
+      });
+      
+      // 验证文件上传
+      if (verifyType === 'manual') {
+        const fileInput = form.querySelector('#fileUpload-{{ block.id }}');
+        if (!fileInput.files || fileInput.files.length === 0) {
+          fileInput.classList.add('error');
+          isValid = false;
+        } else {
+          fileInput.classList.remove('error');
+        }
+      }
+      
+      
+      // 验证邮箱格式
+      const email = form.querySelector('[name="email"]');
+      let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (verifyType === 'email') {
+        emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]*(\.edu|\.ac|zerozero)(\.[a-zA-Z]{2,})?$/;
+      }
+      if (email.value && !emailRegex.test(email.value)) {
+        email.classList.add('error');
+        isValid = false;
+        {% comment %} zzShowToast('Please fill in all required fields!'); {% endcomment %}
+         zzEduInfoDialog.showModal({
+          message: verifyType === 'email' ? 'Email format does not meet educational email standards, please check and try again' : 'Please enter a valid email address',
+          showInput: false
+         })
+        return
+      }
+      
+      if (isValid) {
+        // 提交表单数据
+        block.querySelector('.zz-edu-form-submit-loading').classList.toggle('tw-hidden');
+        // 例如发送到服务器或第三方服务
+        httpRequest.post('/shopify/edu_identity_verify_request', {
+          shopId: "{{ shop_id }}",
+          ...data,
+          verifyMethod: verifyType == 'email' ? 'Self-service authentication' : 'Manual authentication',
+          identityDocumentUrl: identityDocumentUrl
+        }, {
+          baseUrl: baseUrl
+        }).then((res) => {
+          if(res.code == 200) {
+            if(verifyType == 'email') {
+              zzEduInfoDialog.showModal({
+                title: '{{ block.settings.verify_email_title }}',
+                message: '{{ block.settings.verify_email_message }}',
+                showInput: true,
+                verifyInfo: {
+                  recordId: res.data,
+                  baseUrl: baseUrl,
+                  email: data.email
+                }
+              });
+            } else {
+              zzEduInfoDialog.showModal({
+                message: 'The application has been submitted successfully, please wait patiently for review.',
+                showInput: false
+              });
+            }
+          } else {
+            zzEduInfoDialog.showModal({
+              title: '{{ block.settings.verify_fail_title }}',
+              message: EduErrorCodeConf[res.code].en || res.message,
+              showInput: false
+            });
+          }
+        }).catch((err) => {
+          zzShowToast(EduErrorCodeConf[500].en)
+        }).finally(() => {
+          block.querySelector('.zz-edu-form-submit-loading').classList.toggle('tw-hidden');
+        });
+        
+        // 显示成功消息
+        
+        {% comment %} form.reset(); {% endcomment %}
+      } else {
+        zzShowToast('Please fill in all required fields!');
+      }
+    });
+    
+    // 实时验证
+    const inputs = form.querySelectorAll('input[required], select[required]');
+    inputs.forEach(input => {
+      input.addEventListener('blur', function() {
+        if (!this.value.trim()) {
+          this.classList.add('error');
+        } else {
+          this.classList.remove('error');
+        }
+      });
+      
+      input.addEventListener('input', function() {
+        if(!hasInput) {
+          hasInput = true
+          dataLayer.push({
+            event: "edu_page_form_input",
+            timestamp: new Date().toISOString(),
+          });
+          return;
+        }
+        if (this.value.trim()) {
+          this.classList.remove('error');
+        }
+      });
+      
+      // 为select元素添加change事件
+      if (input.tagName === 'SELECT') {
+        input.addEventListener('change', function() {
+          if (this.value.trim()) {
+            this.classList.remove('error');
+          } else {
+            this.classList.add('error');
+          }
+        });
+      }
+    });
+    
+    
+    // 文件上传处理
+    const fileInput = form.querySelector('#fileUpload-{{ block.id }}');
+    const filePreview = form.querySelector('#filePreview-{{ block.id }}');
+    const fileUploadLabel = form.querySelector('.zz-edu-form-file-upload-label');
+    
+    fileInput.addEventListener('change', async function(e) {
+      const file = e.target.files[0];
+      if (file) {
+        // 验证文件大小 (10MB)
+        const maxSize = 10 * 1024 * 1024; // 10MB in bytes
+        if (file.size > maxSize) {
+          zzShowToast('File size cannot exceed 10MB');
+          this.value = '';
+          return;
+        }
+        
+        // 验证文件类型
+        const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
+        if (!allowedTypes.includes(file.type)) {
+          zzShowToast('Please upload PDF, JPG or PNG format files');
+          this.value = '';
+          return;
+        }
+        // 显示文件预览
+        showFilePreview(file);
+        const fileName = await getFileMD5Name(file);
+        console.log('fileName', fileName)
+
+        httpRequest
+        .get(
+          '',
+          {},
+          { baseUrl: 'https://aliyun-oss-sts.zerozero.cn/' }
+        )
+        .then(async (data) => {
+          if(data.StatusCode == '200') {
+            try {
+              const client = new OSS({
+                // 将<YOUR_BUCKET>设置为OSS Bucket名称。
+                bucket: "gethover-cdn-america",
+                // 将<YOUR_REGION>设置为OSS Bucket所在地域，例如region: 'oss-cn-hangzhou'。
+                region: "oss-us-east-1",
+                accessKeyId: data.AccessKeyId,
+                accessKeySecret: data.AccessKeySecret,
+                stsToken: data.SecurityToken,
+              });
+              const result = await client.put(fileName || file.name, file);
+              console.log('result---------', result)
+              if(result.url) {
+                identityDocumentUrl = result.url
+              } else {
+                removeEduVerifyFile()
+                zzShowToast('File upload failed, please try again.')
+              }
+              
+            } catch (error) {
+              removeEduVerifyFile()
+              zzShowToast('File upload failed, please try again.')
+            }
+            
+          } else {
+            removeEduVerifyFile()
+            zzShowToast('File upload failed, please try again.')
+          }
+
+        }).catch((err) => {
+          zzShowToast(EduErrorCodeConf[500].en)
+          removeEduVerifyFile()
+        });
+      }
+    });
+    
+    // 拖拽上传功能
+    fileUploadLabel.addEventListener('dragover', function(e) {
+      e.preventDefault();
+      this.classList.add('drag-over');
+    });
+    
+    fileUploadLabel.addEventListener('dragleave', function(e) {
+      e.preventDefault();
+      this.classList.remove('drag-over');
+    });
+    
+    fileUploadLabel.addEventListener('drop', function(e) {
+      e.preventDefault();
+      this.classList.remove('drag-over');
+      
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        fileInput.files = files;
+        fileInput.dispatchEvent(new Event('change'));
+      }
+    });
+    
+    function showFilePreview(file) {
+      const fileSize = (file.size / 1024 / 1024).toFixed(2);
+      const fileName = file.name;
+      
+      filePreview.innerHTML = `
+        <div class="zz-edu-form-file-preview-item">
+          <div class="zz-edu-form-file-preview-info">
+            <span class="zz-edu-form-file-name">${fileName}</span>
+            <span class="zz-edu-form-file-size">${fileSize} MB</span>
+          </div>
+          <div class="zz-edu-form-file-remove-btn" onclick="removeEduVerifyFile{{ block.id }}()">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="12" fill="#DD3B46"/>
+            <path d="M8.07812 15.9609L15.9977 8.04134" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+            <path d="M8.07812 8.03906L15.9977 15.9587" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+            </svg>
+          </div>
+        </div>
+      `;
+      
+      fileUploadLabel.style.display = 'none';
+    }
+    
+    // 移除文件
+    window['removeEduVerifyFile{{ block.id }}'] = function() {
+      fileInput.value = '';
+      filePreview.innerHTML = '';
+      fileUploadLabel.style.display = 'flex';
+    };
+
+    block.querySelector('zz-radio-tabs').addEventListener('change', (e) => {
+      verifyType = e.target.value
+      if (e.target.value === 'manual') {
+        block.querySelector('.upload-file-row').classList.remove('zz-edu-form-hidden');
+      } else {
+        block.querySelector('.upload-file-row').classList.add('zz-edu-form-hidden');
+      }
+    });
+
+    
+    function getFileMD5Name(file) {
+      return new Promise((resolve, reject) => {
+        if (!file || !(file instanceof File)) {
+          resolve('');
+          return;
+        }
+    
+        // 获取文件扩展名（处理无扩展名的情况）
+        const fileParts = file.name.split('.');
+        const fileExt = fileParts.length > 1 ? fileParts.pop() : '';
+        const baseName = fileParts.join('.');
+    
+        const reader = new FileReader();
+        
+        reader.onload = function(e) {
+          try {
+            const fileContent = e.target.result;
+            // 计算MD5哈希
+            const md5Hash = CryptoJS.MD5(CryptoJS.lib.WordArray.create(fileContent)).toString();
+            
+            // 构建新文件名（保留扩展名）
+            const newFileName = fileExt ? `${md5Hash}.${fileExt}` : md5Hash;
+            
+            resolve(newFileName)
+          } catch (error) {
+            resolve("");
+          }
+        };
+        
+        reader.onerror = () => {
+          resolve('');
+        };
+        
+        reader.readAsArrayBuffer(file);
+      });
+    }
+
+  });
+</script>
+
+<style>
+#shopify-block-{{ block.id }} {
+    {% if block.settings.background_color != blank %}
+        background-color: {{ block.settings.background_color }};
+    {% endif %}
+    width: 100%;
+    
+}
+
+.zz-edu-form-container {
+  max-width: 750px;
+  width: 100%;
+  margin: 0 auto;
+  padding-top: 30px;
+  {% comment %} padding: 40px 20px; {% endcomment %}
+}
+
+.zz-edu-form-form {
+  width: 100%;
+}
+
+.zz-edu-form-hidden {
+  display: none !important;
+}
+.zz-edu-form-row {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 30px;
+}
+
+.zz-edu-form-column {
+  flex: 1;
+}
+.zz-edu-form-input-column {
+  flex:1;
+  {% comment %} margin-bottom: 20px; {% endcomment %}
+}
+.zz-edu-form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.zz-edu-form-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.zz-edu-form-label::after {
+  content: '*';
+  color: #e74c3c;
+  margin-left: 4px;
+}
+
+.zz-edu-form-label:has(+ input:not([required]))::after {
+  content: '';
+}
+
+.zz-edu-form-name-fields {
+  display: flex;
+  gap: 30px;
+}
+
+.zz-edu-form-name-fields input {
+  flex: 1;
+}
+
+.zz-edu-form-form input[type="text"],
+.zz-edu-form-form input[type="email"],
+.zz-edu-form-form select {
+  padding: 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s ease;
+  background: #fff;
+}
+
+.zz-edu-form-form input[type="text"]:focus,
+.zz-edu-form-form input[type="email"]:focus,
+.zz-edu-form-form select:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+}
+
+.zz-edu-form-form input[type="text"]::placeholder,
+.zz-edu-form-form input[type="email"]::placeholder {
+  color: #999;
+}
+
+.zz-edu-form-form input.error,
+.zz-edu-form-form select.error {
+  border-color: #e74c3c;
+  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
+}
+
+/* 下拉选择框样式 */
+.zz-edu-form-form select {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px;
+  padding-right: 40px;
+}
+
+.zz-edu-form-form select option {
+  padding: 8px 12px;
+  background: #fff;
+  color: #333;
+}
+
+.zz-edu-form-form select option:disabled {
+  color: #999;
+  font-style: italic;
+}
+
+.zz-edu-form-submit {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.zz-edu-form-submit-btn {
+  background: #000;
+  color: white;
+  border: none;
+  border-radius: 100px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  max-width: 360px;
+  width: 100%;
+}
+
+.zz-edu-form-submit-btn:hover {
+  background: #333;
+}
+
+
+
+/* 文件上传样式 */
+.zz-edu-form-file-upload-container {
+  position: relative;
+  width: 100%;
+}
+
+.zz-edu-form-file-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.zz-edu-form-file-upload-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 120px;
+  border: 2px dashed #ddd;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: #fafafa;
+}
+
+.zz-edu-form-file-upload-label:hover {
+  border-color: #007bff;
+  background: #f0f8ff;
+}
+
+.zz-edu-form-file-upload-label.drag-over {
+  border-color: #007bff;
+  background: #e6f3ff;
+  transform: scale(1.02);
+}
+
+.zz-edu-form-file-upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.zz-edu-form-file-upload-icon {
+  color: #666;
+  width: 32px;
+  height: 32px;
+}
+
+.zz-edu-form-file-upload-text {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.zz-edu-form-file-upload-hint {
+  font-size: 12px;
+  color: #999;
+}
+
+.zz-edu-form-file-preview {
+  margin-top: 12px;
+}
+
+.zz-edu-form-file-preview-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  margin-bottom: 8px;
+}
+
+.zz-edu-form-file-preview-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.zz-edu-form-file-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.zz-edu-form-file-size {
+  font-size: 12px;
+  color: #666;
+}
+
+.zz-edu-form-file-remove-btn {
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+}
+
+.zz-edu-form-file-remove-btn:hover {
+  background: #c82333;
+}
+
+.zz-edu-form-file-input.error + .zz-edu-form-file-upload-label {
+  border-color: #e74c3c;
+  background: #fff5f5;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .zz-edu-form-row {
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  .zz-edu-form-name-fields {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .zz-edu-form-file-upload-label {
+    min-height: 100px;
+  }
+  
+  .zz-edu-form-file-upload-text {
+    font-size: 14px;
+  }
+}
+</style>