更改注册页面样式;修改公告公示页面样式

config/router.config.ts

@@ -3,19 +3,6 @@ export default [
     path: '/login',
     component: '@/pages/login/login',
   },
-  {
-    path: '/register',
-    routes: [
-      {
-        path: '/register/supplier',
-        component: '@/pages/register/supplier',
-      },
-      {
-        path: '/register/expert',
-        component: '@/pages/register/expert',
-      }
-    ]
-  },
   {
     path: '/',
     component: '@/layouts/Index',
@@ -84,9 +71,22 @@ export default [
         name: 'helpQuestion',
         path: '/help/helpQuestion',
         component: '@/pages/help/helpQuestion',
+      },
+      {
+        path: '/register',
+        routes: [
+          {
+            path: '/register/supplier',
+            component: '@/pages/register/supplier',
+          },
+          {
+            path: '/register/expert',
+            component: '@/pages/register/expert',
           }
         ]
       },
+    ]
+  },
 
   {
     exact: true,

src/pages/announce/announce.less

@@ -117,7 +117,8 @@
     background-color: rgb(0, 79, 142);
     border-color: rgb(0, 79, 142);
     border-radius: 0;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: rgba(0, 79, 142, 0.8);
       border-color: rgba(0, 79, 142, 0.8);
     }
@@ -182,6 +183,47 @@
     font-size: 16px;
     font-weight: 500;
   }
+  .downloadCenterBtn {
+    margin: 10px auto;
+    width: 150px;
+    color: #fff;
+    //  #54d0d7 #0195a2 渐变
+    background: linear-gradient(to bottom, #54d0d7, #0195a2);
+    text-align: center;
+    padding: 5px 0;
+    cursor: pointer;
+  }
+  .downloadCenterBtn2 {
+    background: linear-gradient(to bottom, #005faf, #004f8f);
+  }
+  .downloadCenterDesc {
+    background-color: #ededed;
+    padding: 15px;
+    // border-radius: 5px;
+    // margin-top: 10px;
+    // font-size: 12px;
+    // color: #666;
+  }
+}
+.downloadCenterList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    line-height: 26px;
+    &:hover {
+      text-decoration: underline;
+    }
+    img {
+      width: 12px;
+    }
+  }
 }
 .listItem {
   // border-bottom: 1px solid #f0f0f0;
@@ -282,4 +324,3 @@
   min-width: 180px;
   text-align: right;
 }
-

src/pages/announce/announce.tsx

@@ -169,17 +169,25 @@ const AnnouncePage: React.FC = () => {
             <div className={styles.supplierService}>
               <div className={styles.supplierServiceTitle}>供应商服务</div>
               <img src="" alt="" />
-              <Button className={styles.downloadCenter}>下载中心</Button>
+              <div className={styles.downloadCenterBtn}>下载中心</div>
-              <ul>
+              <ul className={styles.downloadCenterList}>
                 <li>
-                  <i></i>
+                  <img src={require('@/assets/img/fileIcon.png')} alt="" />
+                  <span>公开招标操作手册</span>
+                </li>
+                <li>
+                  <img src={require('@/assets/img/fileIcon.png')} alt="" />
+                  <span>公开招标操作手册</span>
+                </li>
+                <li>
+                  <img src={require('@/assets/img/fileIcon.png')} alt="" />
                   <span>公开招标操作手册</span>
                 </li>
               </ul>
 
-              <Button>投标指引</Button>
+              <div className={styles.downloadCenterBtn + ' ' + styles.downloadCenterBtn2}>投标指引</div>
 
-              <div>
+              <div className={styles.downloadCenterDesc}>
                 投标指引包含各采购方式系统的投标操作流程，及相关插件的安装操作手册，请各供应商先进行登录，后方可查看.
               </div>
             </div>

src/pages/register/register.less

@@ -2,31 +2,49 @@
 
 // 注册页面整体布局
 .register-page {
-  display: flex;
+  background: #fff;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background: #f0f2f5;
-  background-image: url('~@/assets/img/loginBg.jpg');
-  background-size: cover;
-  background-position: center;
   position: relative;
+  .register-banner{
+    width: 100%;
+    height: 400px;
+    margin-bottom: 20px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .register-radio-item{
+    border: 1px solid #d9d9d9;
+    display: inline-block;
+    padding: 5px 0;
+    min-width: 150px;
+    text-align: center;
+    margin-right: 10px;
+    &.active{
+      border-color: @main-color;
+    }
+  }
+  .border-box{
+    border: 1px solid #d9d9d9;
+    padding: 20px 50px;
+    margin-bottom: 30px;
+  }
 }
 
 // 注册容器
 .register-container {
-  width: 600px;
+  // width: 600px;
   padding: 30px;
-  background: rgba(255, 255, 255, 0.95);
+  // background: rgba(255, 255, 255, 0.95);
-  border-radius: 8px;
+  // border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   position: relative;
-  margin: 40px 0;
+  // margin: 40px 0;
-  &.large-width{
+  // &.large-width{
-    width: 80%;
+  //   width: 80%;
-    position: absolute;
+  //   position: absolute;
-    top: 3%;
+  //   top: 3%;
-  }
+  // }
 }
 
 // 标题样式
@@ -62,9 +80,12 @@
 .form-section-title {
   font-size: 16px;
   font-weight: 600;
-  margin: 20px 0 16px 0;
+  // margin: 0 0 20px 40px;
-  padding-left: 12px;
+  // margin-left: 0px;
-  border-left: 4px solid #1890ff;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e5e5e5;
+  // border-left: 4px solid #1890ff;
 }
 
 .questionnaire-header,
@@ -109,9 +130,9 @@
 
 
 .register-form{
-  height: 75vh;
+  // height: 75vh;
-  overflow-x: hidden;
+  // overflow-x: hidden;
-  overflow-y: auto;
+  // overflow-y: auto;
   .ant-form-item-label-fix{
     padding-left: 30px !important;
   }

src/pages/register/supplier.tsx

@@ -65,7 +65,9 @@ const SupplierRegister: React.FC = () => {
     form
       .validateFields(['contactPhone'])
       .then((values) => {
-        message.success(intl.formatMessage({ id: 'register.captcha.sent' }, { phone: values.contactPhone }));
+        message.success(
+          intl.formatMessage({ id: 'register.captcha.sent' }, { phone: values.contactPhone }),
+        );
         let count = 60;
         setCountdown(count);
 
@@ -188,39 +190,41 @@ const SupplierRegister: React.FC = () => {
 
   return (
     <div className="register-page ">
-      <div className="register-container large-width">
+      <div className="register-banner">
-        <div className="back-home">
+        <img src={require('@/assets/img/banner.jpg')} alt="注册banner" />
-          <a onClick={() => history.push('/index')}>
-            <HomeOutlined /> {intl.formatMessage({ id: 'login.back.home' })}
-          </a>
       </div>
-
+      <div className="layout-content-main">
-        <div className="register-title">
+        {/* fetchingQuestions */}
-          {intl.formatMessage({ id: 'register.supplier.title' })}
+        <Spin spinning={false}>
-        </div>
-
-        <Spin spinning={fetchingQuestions}>
           <Form
             form={form}
             name="supplier_register"
             className="register-form"
             onFinish={onFinish}
             onFinishFailed={onFinishFailed}
-            layout="horizontal"
+            layout="vertical"
-            labelAlign="right"
             size="large"
-            labelCol={{ span: 7 }}
-            wrapperCol={{ span: 17 }}
           >
-            <Form.Item label={intl.formatMessage({ id: 'register.supplier.identityType' })} labelCol={{ span: 2 }} wrapperCol={{ span: 19 }}>
+            <Form.Item>
+              <div style={{ textAlign: 'center' }}>
+                <span style={{ marginRight: 10 }}>请选择身份类型:</span>
                 <Radio.Group
                   onChange={handleSupplierTypeChange}
                   buttonStyle="solid"
                   value={supplierType}
                 >
-                <Radio.Button value="dvs">{intl.formatMessage({ id: 'register.supplier.domestic' })}</Radio.Button>
+                  <span className={`register-radio-item ${supplierType === 'dvs' ? 'active' : ''}`}>
-                <Radio.Button value="ovs">{intl.formatMessage({ id: 'register.supplier.foreign' })}</Radio.Button>
+                    <Radio value="dvs">
+                      {intl.formatMessage({ id: 'register.supplier.domestic' })}
+                    </Radio>
+                  </span>
+                  <span className={`register-radio-item ${supplierType === 'ovs' ? 'active' : ''}`}>
+                    <Radio value="ovs">
+                      {intl.formatMessage({ id: 'register.supplier.foreign' })}
+                    </Radio>
+                  </span>
                 </Radio.Group>
+              </div>
             </Form.Item>
 
             {supplierType === 'dvs' ? (
@@ -245,17 +249,20 @@ const SupplierRegister: React.FC = () => {
             <Form.Item
               name="agreement"
               valuePropName="checked"
-              labelCol={{ span: 2 }}
-              wrapperCol={{ span: 19 }}
               rules={[
                 {
                   validator: (_, value) =>
                     value
                       ? Promise.resolve()
-                      : Promise.reject(new Error(intl.formatMessage({ id: 'register.supplier.agreement.required' }))),
+                      : Promise.reject(
+                          new Error(
+                            intl.formatMessage({ id: 'register.supplier.agreement.required' }),
+                          ),
+                        ),
                 },
               ]}
             >
+              <div style={{ textAlign: 'center' }}>
                 <Checkbox>
                   {intl.formatMessage({ id: 'register.supplier.agreement' })}
                   <Button
@@ -269,6 +276,7 @@ const SupplierRegister: React.FC = () => {
                     {intl.formatMessage({ id: 'register.supplier.commitment' })}
                   </Button>
                 </Checkbox>
+              </div>
             </Form.Item>
             <Form.Item wrapperCol={{ span: 24 }}>
               <div style={{ textAlign: 'center' }}>
@@ -303,18 +311,12 @@ const SupplierRegister: React.FC = () => {
           <p>{intl.formatMessage({ id: 'register.supplier.commitment.content.intro1' })}</p>
           <p>{intl.formatMessage({ id: 'register.supplier.commitment.content.intro2' })}</p>
           <ol>
-            <li>
+            <li>{intl.formatMessage({ id: 'register.supplier.commitment.content.item1' })}</li>
-              {intl.formatMessage({ id: 'register.supplier.commitment.content.item1' })}
-            </li>
             <li>{intl.formatMessage({ id: 'register.supplier.commitment.content.item2' })}</li>
-            <li>
+            <li>{intl.formatMessage({ id: 'register.supplier.commitment.content.item3' })}</li>
-              {intl.formatMessage({ id: 'register.supplier.commitment.content.item3' })}
-            </li>
             <li>{intl.formatMessage({ id: 'register.supplier.commitment.content.item4' })}</li>
             <li>{intl.formatMessage({ id: 'register.supplier.commitment.content.item5' })}</li>
-            <li>
+            <li>{intl.formatMessage({ id: 'register.supplier.commitment.content.item6' })}</li>
-              {intl.formatMessage({ id: 'register.supplier.commitment.content.item6' })}
-            </li>
             <li>{intl.formatMessage({ id: 'register.supplier.commitment.content.item7' })}</li>
             <li>{intl.formatMessage({ id: 'register.supplier.commitment.content.item8' })}</li>
           </ol>

src/pages/register/supplier/CommonFormSections.tsx

@@ -88,7 +88,7 @@ export const QualificationSection: React.FC<CommonFormSectionsProps> = ({ form }
     getDict();
   }, []);
   return (
-    <>
+    <div className="border-box">
       <div className="form-section-title">{intl.formatMessage({ id: 'register.form.section.qualification' })}</div>
 
       <Form.List name="coscoSupplierQualifications">
@@ -255,7 +255,7 @@ export const QualificationSection: React.FC<CommonFormSectionsProps> = ({ form }
           </>
         )}
       </Form.List>
-    </>
+    </div>
   );
 };
 
@@ -276,7 +276,7 @@ export const InvoiceSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
     getDict();
   }, []);
   return (
-    <>
+    <div className="border-box">
       <div className="form-section-title">{intl.formatMessage({ id: 'register.form.section.invoice' })}</div>
 
       <Row gutter={24}>
@@ -360,7 +360,7 @@ export const InvoiceSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
           </Form.Item>
         </Col>
       </Row>
-    </>
+    </div>
   );
 };
 
@@ -371,7 +371,7 @@ export const InvoiceSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
 export const BankAccountSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
   const intl = useIntl();
   return (
-    <>
+    <div className="border-box">
       <div className="form-section-title">{intl.formatMessage({ id: 'register.form.section.bankAccount' })}</div>
 
       <Form.List name="coscoSupplierBank">
@@ -485,7 +485,7 @@ export const BankAccountSection: React.FC<CommonFormSectionsProps> = ({ form })
           </>
         )}
       </Form.List>
-    </>
+    </div>
   );
 };
 
@@ -503,7 +503,7 @@ export const SurveySection: React.FC<SurveySectionProps> = ({ form, surveyQuesti
   console.log('调查问卷数据:', surveyQuestions);
 
   return (
-    <>
+    <div className="border-box">
       <div className="form-section-title">{intl.formatMessage({ id: 'register.form.section.survey' })}</div>
 
       <div className="questionnaire-header">{intl.formatMessage({ id: 'register.survey.fillerInfo' })}：</div>
@@ -647,7 +647,7 @@ export const SurveySection: React.FC<SurveySectionProps> = ({ form, surveyQuesti
           <Empty description={intl.formatMessage({ id: 'register.survey.noData' })} image={Empty.PRESENTED_IMAGE_SIMPLE} />
         </div>
       )}
-    </>
+    </div>
   );
 };
 
@@ -657,7 +657,7 @@ export const SurveySection: React.FC<SurveySectionProps> = ({ form, surveyQuesti
 export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
   const intl = useIntl();
   return (
-    <>
+    <div className="border-box">
       <div className="form-section-title">{intl.formatMessage({ id: 'register.form.section.commitment' })}</div>
       <Row gutter={24}>
         <Col span={12}>
@@ -816,6 +816,6 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
           </Form.List>
         </Col>
       </Row>
-    </>
+    </div>
   );
 };

src/pages/register/supplier/DomesticForm.tsx

@@ -48,18 +48,30 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
 
   return (
     <>
-      <div className="form-section-title">{intl.formatMessage({ id: 'register.form.section.basicInfo' })}</div>
+      <div className="border-box">
+        <div className="form-section-title">
+          {intl.formatMessage({ id: 'register.form.section.basicInfo' })}
+        </div>
 
         {/* 营业执照附件和有效期 */}
-      <Row gutter={24}>
+        <Row gutter={40}>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'enterpriseType']}
               label={intl.formatMessage({ id: 'register.domestic.enterpriseType' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.enterpriseType.required' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.enterpriseType.required' }),
+                },
+              ]}
               valuePropName="value"
             >
-            <Select placeholder={intl.formatMessage({ id: 'register.domestic.enterpriseType.placeholder' })}>
+              <Select
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.enterpriseType.placeholder',
+                })}
+              >
                 {entTypeList.map((item) => (
                   <Option key={item.code} value={item.code}>
                     {item.dicName}
@@ -68,11 +80,19 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
               </Select>
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}></Col>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'licenceAccessory']}
               label={intl.formatMessage({ id: 'register.domestic.licenceAccessory' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.licenceAccessory.required' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({
+                    id: 'register.domestic.licenceAccessory.required',
+                  }),
+                },
+              ]}
               valuePropName="value"
             >
               <FileUpload
@@ -84,191 +104,301 @@ const DomesticForm: React.FC<DomesticFormProps> = ({
               />
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'licenceDate']}
               label={intl.formatMessage({ id: 'register.domestic.licenceDate' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.licenceDate.required' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.licenceDate.required' }),
+                },
+              ]}
             >
-            <DatePicker placeholder={intl.formatMessage({ id: 'register.form.date.placeholder' })} style={{ width: '100%' }} format="YYYY-MM-DD" />
+              <DatePicker
+                placeholder={intl.formatMessage({ id: 'register.form.date.placeholder' })}
+                style={{ width: '100%' }}
+                format="YYYY-MM-DD"
+              />
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'name']}
               label={intl.formatMessage({ id: 'register.domestic.companyName' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.companyName.required' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.companyName.required' }),
+                },
+              ]}
             >
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.companyName.placeholder' })} />
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.companyName.placeholder',
+                })}
+              />
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'nameEn']}
               label={intl.formatMessage({ id: 'register.domestic.companyNameEn' })}
-            rules={[{ required: false, message: intl.formatMessage({ id: 'register.domestic.companyNameEn.required' }) }]}
+              rules={[
+                {
+                  required: false,
+                  message: intl.formatMessage({ id: 'register.domestic.companyNameEn.required' }),
+                },
+              ]}
             >
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.companyNameEn.placeholder' })} />
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.companyNameEn.placeholder',
+                })}
+              />
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'socialCreditCode']}
               label={intl.formatMessage({ id: 'register.domestic.socialCreditCode' })}
               rules={[
-              { required: true, message: intl.formatMessage({ id: 'register.domestic.socialCreditCode.required' }) },
+                {
-              { pattern: /^[0-9A-HJ-NPQRTUWXY]{18}$/, message: intl.formatMessage({ id: 'register.domestic.socialCreditCode.pattern' }) },
+                  required: true,
+                  message: intl.formatMessage({
+                    id: 'register.domestic.socialCreditCode.required',
+                  }),
+                },
+                {
+                  pattern: /^[0-9A-HJ-NPQRTUWXY]{18}$/,
+                  message: intl.formatMessage({ id: 'register.domestic.socialCreditCode.pattern' }),
+                },
               ]}
             >
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.socialCreditCode.placeholder' })} />
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.socialCreditCode.placeholder',
+                })}
+              />
             </Form.Item>
           </Col>
-        <Col span={24} className="ant-form-item-label-fix">
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'range']}
               label={intl.formatMessage({ id: 'register.domestic.businessScope' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.businessScope.required' }) }]}
+              rules={[
-            labelCol={{ span: 2 }}
+                {
-            wrapperCol={{ span: 22 }}
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.businessScope.required' }),
+                },
+              ]}
             >
-            <TextArea
+              <Input
-              placeholder={intl.formatMessage({ id: 'register.domestic.businessScope.placeholder' })}
+                placeholder={intl.formatMessage({
-              rows={2}
+                  id: 'register.domestic.businessScope.placeholder',
+                })}
                 maxLength={200}
                 showCount
                 style={{ resize: 'none' }}
               />
             </Form.Item>
           </Col>
-        <Col span={24} className="ant-form-item-label-fix">
+          <Col span={12}>
             <Form.Item
-            labelCol={{ span: 2 }}
-            wrapperCol={{ span: 22 }}
               name={['coscoSupplierBase', 'regAddress']}
               label={intl.formatMessage({ id: 'register.domestic.regAddress' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.regAddress.required' }) }]}
+              rules={[
-          >
+                {
-            <Input prefix={<EnvironmentOutlined />} placeholder={intl.formatMessage({ id: 'register.domestic.regAddress.placeholder' })} />
+                  required: true,
-          </Form.Item>
+                  message: intl.formatMessage({ id: 'register.domestic.regAddress.required' }),
-        </Col>
+                },
-        <Col span={24} className="ant-form-item-label-fix">
+              ]}
-          <Form.Item
-            name={['coscoSupplierBase', 'workAddress']}
-            label={intl.formatMessage({ id: 'register.domestic.workAddress' })}
-            labelCol={{ span: 2 }}
-            wrapperCol={{ span: 22 }}
             >
               <Input
                 prefix={<EnvironmentOutlined />}
-              placeholder={intl.formatMessage({ id: 'register.domestic.workAddress.placeholder' })}
+                placeholder={intl.formatMessage({ id: 'register.domestic.regAddress.placeholder' })}
               />
             </Form.Item>
           </Col>
-        <Col span={24} className="ant-form-item-label-fix">
+          <Col span={12}>
+            <Form.Item
+              name={['coscoSupplierBase', 'workAddress']}
+              label={intl.formatMessage({ id: 'register.domestic.workAddress' })}
+            >
+              <Input
+                prefix={<EnvironmentOutlined />}
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.workAddress.placeholder',
+                })}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'parentCompanyInvestor']}
               label={intl.formatMessage({ id: 'register.domestic.parentCompany' })}
-            labelCol={{ span: 2 }}
-            wrapperCol={{ span: 22 }}
             >
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.parentCompany.placeholder' })} />
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.parentCompany.placeholder',
+                })}
+              />
             </Form.Item>
           </Col>
 
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'legalPerson']}
               label={intl.formatMessage({ id: 'register.domestic.legalPerson' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.legalPerson.required' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.legalPerson.required' }),
+                },
+              ]}
             >
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.legalPerson.placeholder' })} />
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.legalPerson.placeholder',
+                })}
+              />
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'idCard']}
               label={intl.formatMessage({ id: 'register.domestic.idCard' })}
             >
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.idCard.placeholder' })} />
+              <Input
+                placeholder={intl.formatMessage({ id: 'register.domestic.idCard.placeholder' })}
+              />
             </Form.Item>
           </Col>
 
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'capital']}
               label={intl.formatMessage({ id: 'register.domestic.capital' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.capital.required' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.capital.required' }),
+                },
+              ]}
             >
-            <Input type="number" placeholder={intl.formatMessage({ id: 'register.domestic.capital.placeholder' })} addonBefore="人民币" addonAfter="万元" />
+              <Input
+                type="number"
+                placeholder={intl.formatMessage({ id: 'register.domestic.capital.placeholder' })}
+                addonBefore="人民币"
+                addonAfter="万元"
+              />
             </Form.Item>
           </Col>
 
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'contactsName']}
               label={intl.formatMessage({ id: 'register.domestic.contactsName' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.contactsName.required' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.contactsName.required' }),
+                },
+              ]}
             >
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.contactsName.placeholder' })} />
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.contactsName.placeholder',
+                })}
+              />
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'contactsPhone']}
               label={intl.formatMessage({ id: 'register.domestic.contactsPhone' })}
               rules={[
-              { required: true, message: intl.formatMessage({ id: 'register.domestic.contactsPhone.required' }) },
+                {
-              { pattern: /^1[3-9]\d{9}$/, message: intl.formatMessage({ id: 'register.domestic.contactsPhone.pattern' }) },
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.contactsPhone.required' }),
+                },
+                {
+                  pattern: /^1[3-9]\d{9}$/,
+                  message: intl.formatMessage({ id: 'register.domestic.contactsPhone.pattern' }),
+                },
               ]}
+              extra="该手机号用于后续联系和召回密码"
             >
-            <Input prefix={<MobileOutlined />} placeholder={intl.formatMessage({ id: 'register.domestic.contactsPhone.placeholder' })} />
+              <Input
+                prefix={<MobileOutlined />}
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.contactsPhone.placeholder',
+                })}
+              />
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name="captcha"
               label={intl.formatMessage({ id: 'register.captcha.label' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.captcha.required' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.captcha.required' }),
+                },
+              ]}
             >
-            <Row gutter={8}>
+              <Input
-              <Col span={14}>
+                placeholder={intl.formatMessage({ id: 'register.captcha.placeholder' })}
-                <Input placeholder={intl.formatMessage({ id: 'register.captcha.placeholder' })} />
+                addonAfter={
-              </Col>
-              <Col span={10}>
                   <Button
-                  type="primary"
+                   type="link"
-                  style={{ marginTop: 0 }}
+                    size="small"
+                    // style={{ marginTop: 0 }}
                     disabled={countdown > 0}
                     onClick={handleGetCaptcha}
                   >
-                  {countdown > 0 ? `${countdown}s` : intl.formatMessage({ id: 'register.captcha.get' })}
+                    {countdown > 0
+                      ? `${countdown}s`
+                      : intl.formatMessage({ id: 'register.captcha.get' })}
                   </Button>
-              </Col>
+                }
-            </Row>
+              />
             </Form.Item>
           </Col>
 
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'contactsEmail']}
               label={intl.formatMessage({ id: 'register.domestic.contactsEmail' })}
               rules={[
                 { type: 'email', message: intl.formatMessage({ id: 'register.email.invalid' }) },
-              { required: true, message: intl.formatMessage({ id: 'register.domestic.contactsEmail.required' }) },
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.contactsEmail.required' }),
+                },
               ]}
             >
-            <Input prefix={<MailOutlined />} placeholder={intl.formatMessage({ id: 'register.domestic.contactsEmail.placeholder' })} />
+              <Input
+                prefix={<MailOutlined />}
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.contactsEmail.placeholder',
+                })}
+              />
             </Form.Item>
           </Col>
-        <Col span={8}>
+          <Col span={12}>
             <Form.Item
               name={['coscoSupplierBase', 'telephone']}
               label={intl.formatMessage({ id: 'register.domestic.telephone' })}
             >
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.telephone.placeholder' })} />
+              <Input
+                placeholder={intl.formatMessage({ id: 'register.domestic.telephone.placeholder' })}
+              />
             </Form.Item>
           </Col>
         </Row>
+      </div>
 
       {/* 使用通用表单组件 */}
       <QualificationSection form={form} />

src/pages/register/supplier/ForeignForm.tsx

@@ -44,11 +44,12 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
 
   return (
     <>
+     <div className='border-box'>
       {/* 境外企业特有的基本信息部分 */}
       <div className="form-section-title">{intl.formatMessage({ id: 'register.form.section.basicInfo' })}</div>
 
-      <Row gutter={24}>
+      <Row gutter={40}>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'name']}
             label={intl.formatMessage({ id: 'register.foreign.companyName' })}
@@ -57,7 +58,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
             <Input placeholder={intl.formatMessage({ id: 'register.foreign.companyName.placeholder' })} />
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'nameEn']}
             label={intl.formatMessage({ id: 'register.foreign.companyNameEn' })}
@@ -66,7 +67,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
             <Input placeholder={intl.formatMessage({ id: 'register.foreign.companyNameEn.placeholder' })} />
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item
             name="country"
             label={intl.formatMessage({ id: 'register.foreign.country' })}
@@ -86,7 +87,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
             </Select>
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'vat']}
             label={intl.formatMessage({ id: 'register.foreign.vat' })}
@@ -95,33 +96,28 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
             <Input placeholder={intl.formatMessage({ id: 'register.foreign.vat.placeholder' })} />
           </Form.Item>
         </Col>
-        <Col span={24} className="ant-form-item-label-fix">
+        <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'workAddress']}
             label={intl.formatMessage({ id: 'register.foreign.workAddress' })}
-            labelCol={{ span: 2 }}
-            wrapperCol={{ span: 22 }}
           >
             <Input prefix={<EnvironmentOutlined />} placeholder={intl.formatMessage({ id: 'register.foreign.workAddress.placeholder' })} />
           </Form.Item>
         </Col>
-        <Col span={24} className="ant-form-item-label-fix">
+        <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'range']}
             label={intl.formatMessage({ id: 'register.foreign.businessScope' })}
-            labelCol={{ span: 2 }}
-            wrapperCol={{ span: 22 }}
             rules={[{ required: true, message: intl.formatMessage({ id: 'register.foreign.businessScope.required' }) }]}
           >
-            <TextArea
+            <Input
               placeholder={intl.formatMessage({ id: 'register.foreign.businessScope.placeholder' })}
-              rows={2}
               maxLength={200}
               showCount
             />
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'parentCompanyInvestor']}
             label={intl.formatMessage({ id: 'register.foreign.parentCompany' })}
@@ -129,7 +125,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
             <Input placeholder={intl.formatMessage({ id: 'register.foreign.parentCompany.placeholder' })} />
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'legalPerson']}
             label={intl.formatMessage({ id: 'register.foreign.legalPerson' })}
@@ -138,7 +134,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
             <Input placeholder={intl.formatMessage({ id: 'register.foreign.legalPerson.placeholder' })} />
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item label={intl.formatMessage({ id: 'register.foreign.capital' })} required style={{ marginBottom: 0 }}>
             <Input.Group compact style={{ display: 'flex' }}>
               <Form.Item name="currency" noStyle initialValue="USD">
@@ -164,7 +160,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
             </Input.Group>
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'contactsName']}
             label={intl.formatMessage({ id: 'register.foreign.contactsName' })}
@@ -173,7 +169,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
             <Input placeholder={intl.formatMessage({ id: 'register.foreign.contactsName.placeholder' })} />
           </Form.Item>
         </Col>
-        <Col span={8}>
+          <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'contactsEmail']}
             label={intl.formatMessage({ id: 'register.foreign.contactsEmail' })}
@@ -181,7 +177,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
               { type: 'email', message: intl.formatMessage({ id: 'register.email.invalid' }) },
               { required: true, message: intl.formatMessage({ id: 'register.foreign.contactsEmail.required' }) },
             ]}
-
+            extra={intl.formatMessage({ id: 'register.foreign.contactsEmail.extra' })}
           >
             <Input prefix={<MailOutlined />} placeholder={intl.formatMessage({ id: 'register.foreign.contactsEmail.placeholder' })} addonAfter={
                 <Button
@@ -195,20 +191,19 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
               } />
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item
             name="verificationCode"
-            label={intl.formatMessage({ id: 'register.captcha.label' })}
+            label="验证码"
             rules={[
-              { required: true, message: intl.formatMessage({ id: 'register.captcha.required' }) },
+              { required: true, message: "请输入验证码" },
-              { pattern: /^\d{6}$/, message: intl.formatMessage({ id: 'register.captcha.pattern' }) },
+              { pattern: /^\d{6}$/, message: "请输入6位验证码" },
             ]}
-            extra={intl.formatMessage({ id: 'register.foreign.contactsEmail.extra' })}
           >
-            <Input placeholder={intl.formatMessage({ id: 'register.captcha.placeholder' })} />
+            <Input placeholder="请输入验证码" />
           </Form.Item>
         </Col>
-        <Col span={8}>
+          <Col span={12}>
           <Form.Item
             name={['coscoSupplierBase', 'contactsPhone']}
             label={intl.formatMessage({ id: 'register.foreign.contactsPhone' })}
@@ -223,7 +218,7 @@ const ForeignForm: React.FC<ForeignFormProps> = ({
           </Form.Item>
         </Col>
       </Row>
-
+      </div>
       {/* 使用通用表单组件 */}
       <QualificationSection form={form} />
       <InvoiceSection form={form} />