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

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,7 +71,20 @@ 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',
+          }
+        ]
+      },
     ]
   },
 

src/pages/announce/announce.less

@@ -63,14 +63,14 @@
     flex-wrap: wrap;
   }
 }
-.announceContainer{
+.announceContainer {
   background-color: #fff;
-  .banner{
+  .banner {
     width: 100%;
     height: 300px;
     margin-bottom: 20px;
   }
-  .search{
+  .search {
     border: 1px solid rgba(@main-text-color-2, 0.1);
     padding: 20px;
     margin-bottom: 12px;
@@ -87,9 +87,9 @@
     min-width: 60px;
     text-align: center;
     padding: 0 10px;
-    border-left-width:1px;
+    border-left-width: 1px;
     background: rgb(244, 244, 245);
-    &:before{
+    &:before {
       display: none;
     }
   }
@@ -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);
     }
@@ -172,21 +173,62 @@
   display: flex;
   gap: 20px;
 }
-.supplierService{
+.supplierService {
   border: 1px solid rgba(@main-text-color-2, 0.1);
   padding: 20px;
   margin-top: 12px;
   margin-bottom: 20px;
   width: 300px;
-  .supplierServiceTitle{
+  .supplierServiceTitle {
     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;
 }
-.ant-list-item{
+.ant-list-item {
   border-bottom: none !important;
 }
 .itemContent {
@@ -202,14 +244,14 @@
   justify-content: space-between;
   gap: 10px;
 }
-.itemInfo{
+.itemInfo {
   flex: 1;
 }
-.itemCompany{
+.itemCompany {
   color: @main-text-color-1;
   font-size: 14px;
 }
-.itemDate{
+.itemDate {
   color: @main-text-color-2;
   font-size: 12px;
   margin-top: 10px;
@@ -219,13 +261,13 @@
   min-width: 90px;
   text-align: center;
 }
-.itemLastTime{
+.itemLastTime {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
-  .itemLastTimeNum{
+  .itemLastTimeNum {
     color: @main-text-color-1;
     background-color: @main-danger-color;
     color: #fff;
@@ -234,7 +276,7 @@
     font-size: 14px;
     width: 100%;
   }
-  .itemLastTimeBtn{
+  .itemLastTimeBtn {
     background: rgba(@main-danger-color, 0.1);
     border: 1px solid rgba(@main-danger-color, 0.5);
     color: @main-danger-color;
@@ -260,15 +302,15 @@
   font-size: 14px;
   border-top: 1px solid rgba(@main-text-color-2, 0.1);
   padding-top: 10px;
-  .itemFooterLeft{
+  .itemFooterLeft {
     flex: 1;
     display: flex;
     gap: 10px;
   }
-  .itemFooterRight{
+  .itemFooterRight {
     min-width: 180px;
     text-align: right;
-    .itemFooterRightBtn{
+    .itemFooterRightBtn {
       color: @main-color;
       cursor: pointer;
     }
@@ -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,10 +130,10 @@
 
 
 .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')}>
+      </div>
-            <HomeOutlined /> {intl.formatMessage({ id: 'login.back.home' })}
+      <div className="layout-content-main">
-          </a>
+        {/* fetchingQuestions */}
-        </div>
+        <Spin spinning={false}>
-
-        <div className="register-title">
-          {intl.formatMessage({ id: 'register.supplier.title' })}
-        </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>
-              <Radio.Group
+              <div style={{ textAlign: 'center' }}>
-                onChange={handleSupplierTypeChange}
+                <span style={{ marginRight: 10 }}>请选择身份类型:</span>
-                buttonStyle="solid"
+                <Radio.Group
-                value={supplierType}
+                  onChange={handleSupplierTypeChange}
-              >
+                  buttonStyle="solid"
-                <Radio.Button value="dvs">{intl.formatMessage({ id: 'register.supplier.domestic' })}</Radio.Button>
+                  value={supplierType}
-                <Radio.Button value="ovs">{intl.formatMessage({ id: 'register.supplier.foreign' })}</Radio.Button>
+                >
-              </Radio.Group>
+                  <span className={`register-radio-item ${supplierType === 'dvs' ? 'active' : ''}`}>
+                    <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,30 +249,34 @@ 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' }),
+                          ),
+                        ),
                 },
               ]}
             >
-              <Checkbox>
+              <div style={{ textAlign: 'center' }}>
-                {intl.formatMessage({ id: 'register.supplier.agreement' })}
+                <Checkbox>
-                <Button
+                  {intl.formatMessage({ id: 'register.supplier.agreement' })}
-                  type="link"
+                  <Button
-                  onClick={(e) => {
+                    type="link"
-                    e.preventDefault();
+                    onClick={(e) => {
-                    e.stopPropagation();
+                      e.preventDefault();
-                    setModalVisible(true);
+                      e.stopPropagation();
-                  }}
+                      setModalVisible(true);
-                >
+                    }}
-                  {intl.formatMessage({ id: 'register.supplier.commitment' })}
+                  >
-                </Button>
+                    {intl.formatMessage({ id: 'register.supplier.commitment' })}
-              </Checkbox>
+                  </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,227 +48,357 @@ 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
+            <Form.Item
-            name={['coscoSupplierBase', 'enterpriseType']}
+              name={['coscoSupplierBase', 'enterpriseType']}
-            label={intl.formatMessage({ id: 'register.domestic.enterpriseType' })}
+              label={intl.formatMessage({ id: 'register.domestic.enterpriseType' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.enterpriseType.required' }) }]}
+              rules={[
-            valuePropName="value"
+                {
-          >
+                  required: true,
-            <Select placeholder={intl.formatMessage({ id: 'register.domestic.enterpriseType.placeholder' })}>
+                  message: intl.formatMessage({ id: 'register.domestic.enterpriseType.required' }),
-              {entTypeList.map((item) => (
+                },
-                <Option key={item.code} value={item.code}>
+              ]}
-                  {item.dicName}
+              valuePropName="value"
-                </Option>
+            >
-              ))}
+              <Select
-            </Select>
+                placeholder={intl.formatMessage({
-          </Form.Item>
+                  id: 'register.domestic.enterpriseType.placeholder',
-        </Col>
+                })}
-        <Col span={8}>
+              >
-          <Form.Item
+                {entTypeList.map((item) => (
-            name={['coscoSupplierBase', 'licenceAccessory']}
+                  <Option key={item.code} value={item.code}>
-            label={intl.formatMessage({ id: 'register.domestic.licenceAccessory' })}
+                    {item.dicName}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.licenceAccessory.required' }) }]}
+                  </Option>
-            valuePropName="value"
+                ))}
-          >
+              </Select>
-            <FileUpload
+            </Form.Item>
-              maxSize={10}
+          </Col>
-              allowedTypes={['pdf', 'jpg', 'jpeg', 'png']}
+          <Col span={12}></Col>
-              maxCount={1}
+          <Col span={12}>
-              buttonText={intl.formatMessage({ id: 'register.form.upload' })}
+            <Form.Item
-              tip={intl.formatMessage({ id: 'register.domestic.licenceAccessory.tip' })}
+              name={['coscoSupplierBase', 'licenceAccessory']}
-            />
+              label={intl.formatMessage({ id: 'register.domestic.licenceAccessory' })}
-          </Form.Item>
+              rules={[
-        </Col>
+                {
-        <Col span={8}>
+                  required: true,
-          <Form.Item
+                  message: intl.formatMessage({
-            name={['coscoSupplierBase', 'licenceDate']}
+                    id: 'register.domestic.licenceAccessory.required',
-            label={intl.formatMessage({ id: 'register.domestic.licenceDate' })}
+                  }),
-            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" />
+              valuePropName="value"
-          </Form.Item>
+            >
-        </Col>
+              <FileUpload
-        <Col span={8}>
+                maxSize={10}
-          <Form.Item
+                allowedTypes={['pdf', 'jpg', 'jpeg', 'png']}
-            name={['coscoSupplierBase', 'name']}
+                maxCount={1}
-            label={intl.formatMessage({ id: 'register.domestic.companyName' })}
+                buttonText={intl.formatMessage({ id: 'register.form.upload' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.companyName.required' }) }]}
+                tip={intl.formatMessage({ id: 'register.domestic.licenceAccessory.tip' })}
-          >
+              />
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.companyName.placeholder' })} />
+            </Form.Item>
-          </Form.Item>
+          </Col>
-        </Col>
+          <Col span={12}>
-        <Col span={8}>
+            <Form.Item
-          <Form.Item
+              name={['coscoSupplierBase', 'licenceDate']}
-            name={['coscoSupplierBase', 'nameEn']}
+              label={intl.formatMessage({ id: 'register.domestic.licenceDate' })}
-            label={intl.formatMessage({ id: 'register.domestic.companyNameEn' })}
+              rules={[
-            rules={[{ required: false, message: intl.formatMessage({ id: 'register.domestic.companyNameEn.required' }) }]}
+                {
-          >
+                  required: true,
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.companyNameEn.placeholder' })} />
+                  message: intl.formatMessage({ id: 'register.domestic.licenceDate.required' }),
-          </Form.Item>
+                },
-        </Col>
+              ]}
-        <Col span={8}>
+            >
-          <Form.Item
+              <DatePicker
-            name={['coscoSupplierBase', 'socialCreditCode']}
+                placeholder={intl.formatMessage({ id: 'register.form.date.placeholder' })}
-            label={intl.formatMessage({ id: 'register.domestic.socialCreditCode' })}
+                style={{ width: '100%' }}
-            rules={[
+                format="YYYY-MM-DD"
-              { required: true, message: intl.formatMessage({ id: 'register.domestic.socialCreditCode.required' }) },
+              />
-              { pattern: /^[0-9A-HJ-NPQRTUWXY]{18}$/, message: intl.formatMessage({ id: 'register.domestic.socialCreditCode.pattern' }) },
+            </Form.Item>
-            ]}
+          </Col>
-          >
+          <Col span={12}>
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.socialCreditCode.placeholder' })} />
+            <Form.Item
-          </Form.Item>
+              name={['coscoSupplierBase', 'name']}
-        </Col>
+              label={intl.formatMessage({ id: 'register.domestic.companyName' })}
-        <Col span={24} className="ant-form-item-label-fix">
+              rules={[
-          <Form.Item
+                {
-            name={['coscoSupplierBase', 'range']}
+                  required: true,
-            label={intl.formatMessage({ id: 'register.domestic.businessScope' })}
+                  message: intl.formatMessage({ id: 'register.domestic.companyName.required' }),
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.businessScope.required' }) }]}
+                },
-            labelCol={{ span: 2 }}
+              ]}
-            wrapperCol={{ span: 22 }}
+            >
-          >
+              <Input
-            <TextArea
+                placeholder={intl.formatMessage({
-              placeholder={intl.formatMessage({ id: 'register.domestic.businessScope.placeholder' })}
+                  id: 'register.domestic.companyName.placeholder',
-              rows={2}
+                })}
-              maxLength={200}
+              />
-              showCount
+            </Form.Item>
-              style={{ resize: 'none' }}
+          </Col>
-            />
+          <Col span={12}>
-          </Form.Item>
+            <Form.Item
-        </Col>
+              name={['coscoSupplierBase', 'nameEn']}
-        <Col span={24} className="ant-form-item-label-fix">
+              label={intl.formatMessage({ id: 'register.domestic.companyNameEn' })}
-          <Form.Item
+              rules={[
-            labelCol={{ span: 2 }}
+                {
-            wrapperCol={{ span: 22 }}
+                  required: false,
-            name={['coscoSupplierBase', 'regAddress']}
+                  message: intl.formatMessage({ id: 'register.domestic.companyNameEn.required' }),
-            label={intl.formatMessage({ id: 'register.domestic.regAddress' })}
+                },
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.regAddress.required' }) }]}
+              ]}
-          >
+            >
-            <Input prefix={<EnvironmentOutlined />} placeholder={intl.formatMessage({ id: 'register.domestic.regAddress.placeholder' })} />
+              <Input
-          </Form.Item>
+                placeholder={intl.formatMessage({
-        </Col>
+                  id: 'register.domestic.companyNameEn.placeholder',
-        <Col span={24} className="ant-form-item-label-fix">
+                })}
-          <Form.Item
+              />
-            name={['coscoSupplierBase', 'workAddress']}
+            </Form.Item>
-            label={intl.formatMessage({ id: 'register.domestic.workAddress' })}
+          </Col>
-            labelCol={{ span: 2 }}
+          <Col span={12}>
-            wrapperCol={{ span: 22 }}
+            <Form.Item
-          >
+              name={['coscoSupplierBase', 'socialCreditCode']}
-            <Input
+              label={intl.formatMessage({ id: 'register.domestic.socialCreditCode' })}
-              prefix={<EnvironmentOutlined />}
+              rules={[
-              placeholder={intl.formatMessage({ id: 'register.domestic.workAddress.placeholder' })}
+                {
-            />
+                  required: true,
-          </Form.Item>
+                  message: intl.formatMessage({
-        </Col>
+                    id: 'register.domestic.socialCreditCode.required',
-        <Col span={24} className="ant-form-item-label-fix">
+                  }),
-          <Form.Item
+                },
-            name={['coscoSupplierBase', 'parentCompanyInvestor']}
+                {
-            label={intl.formatMessage({ id: 'register.domestic.parentCompany' })}
+                  pattern: /^[0-9A-HJ-NPQRTUWXY]{18}$/,
-            labelCol={{ span: 2 }}
+                  message: intl.formatMessage({ id: 'register.domestic.socialCreditCode.pattern' }),
-            wrapperCol={{ span: 22 }}
+                },
-          >
+              ]}
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.parentCompany.placeholder' })} />
+            >
-          </Form.Item>
+              <Input
-        </Col>
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.socialCreditCode.placeholder',
+                })}
+              />
+            </Form.Item>
+          </Col>
+          <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' }),
+                },
+              ]}
+            >
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.businessScope.placeholder',
+                })}
+                maxLength={200}
+                showCount
+                style={{ resize: 'none' }}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              name={['coscoSupplierBase', 'regAddress']}
+              label={intl.formatMessage({ id: 'register.domestic.regAddress' })}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.domestic.regAddress.required' }),
+                },
+              ]}
+            >
+              <Input
+                prefix={<EnvironmentOutlined />}
+                placeholder={intl.formatMessage({ id: 'register.domestic.regAddress.placeholder' })}
+              />
+            </Form.Item>
+          </Col>
+          <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' })}
+            >
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'register.domestic.parentCompany.placeholder',
+                })}
+              />
+            </Form.Item>
+          </Col>
 
-        <Col span={8}>
+          <Col span={12}>
-          <Form.Item
+            <Form.Item
-            name={['coscoSupplierBase', 'legalPerson']}
+              name={['coscoSupplierBase', 'legalPerson']}
-            label={intl.formatMessage({ id: 'register.domestic.legalPerson' })}
+              label={intl.formatMessage({ id: 'register.domestic.legalPerson' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.legalPerson.required' }) }]}
+              rules={[
-          >
+                {
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.legalPerson.placeholder' })} />
+                  required: true,
-          </Form.Item>
+                  message: intl.formatMessage({ id: 'register.domestic.legalPerson.required' }),
-        </Col>
+                },
-        <Col span={8}>
+              ]}
-          <Form.Item
+            >
-            name={['coscoSupplierBase', 'idCard']}
+              <Input
-            label={intl.formatMessage({ id: 'register.domestic.idCard' })}
+                placeholder={intl.formatMessage({
-          >
+                  id: 'register.domestic.legalPerson.placeholder',
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.idCard.placeholder' })} />
+                })}
-          </Form.Item>
+              />
-        </Col>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              name={['coscoSupplierBase', 'idCard']}
+              label={intl.formatMessage({ id: 'register.domestic.idCard' })}
+            >
+              <Input
+                placeholder={intl.formatMessage({ id: 'register.domestic.idCard.placeholder' })}
+              />
+            </Form.Item>
+          </Col>
 
-        <Col span={8}>
+          <Col span={12}>
-          <Form.Item
+            <Form.Item
-            name={['coscoSupplierBase', 'capital']}
+              name={['coscoSupplierBase', 'capital']}
-            label={intl.formatMessage({ id: 'register.domestic.capital' })}
+              label={intl.formatMessage({ id: 'register.domestic.capital' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.capital.required' }) }]}
+              rules={[
-          >
+                {
-            <Input type="number" placeholder={intl.formatMessage({ id: 'register.domestic.capital.placeholder' })} addonBefore="人民币" addonAfter="万元" />
+                  required: true,
-          </Form.Item>
+                  message: intl.formatMessage({ id: 'register.domestic.capital.required' }),
-        </Col>
+                },
+              ]}
+            >
+              <Input
+                type="number"
+                placeholder={intl.formatMessage({ id: 'register.domestic.capital.placeholder' })}
+                addonBefore="人民币"
+                addonAfter="万元"
+              />
+            </Form.Item>
+          </Col>
 
-        <Col span={8}>
+          <Col span={12}>
-          <Form.Item
+            <Form.Item
-            name={['coscoSupplierBase', 'contactsName']}
+              name={['coscoSupplierBase', 'contactsName']}
-            label={intl.formatMessage({ id: 'register.domestic.contactsName' })}
+              label={intl.formatMessage({ id: 'register.domestic.contactsName' })}
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.domestic.contactsName.required' }) }]}
+              rules={[
-          >
+                {
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.contactsName.placeholder' })} />
+                  required: true,
-          </Form.Item>
+                  message: intl.formatMessage({ id: 'register.domestic.contactsName.required' }),
-        </Col>
+                },
-        <Col span={8}>
+              ]}
-          <Form.Item
+            >
-            name={['coscoSupplierBase', 'contactsPhone']}
+              <Input
-            label={intl.formatMessage({ id: 'register.domestic.contactsPhone' })}
+                placeholder={intl.formatMessage({
-            rules={[
+                  id: 'register.domestic.contactsName.placeholder',
-              { required: true, message: intl.formatMessage({ id: 'register.domestic.contactsPhone.required' }) },
+                })}
-              { pattern: /^1[3-9]\d{9}$/, message: intl.formatMessage({ id: 'register.domestic.contactsPhone.pattern' }) },
+              />
-            ]}
+            </Form.Item>
-          >
+          </Col>
-            <Input prefix={<MobileOutlined />} placeholder={intl.formatMessage({ id: 'register.domestic.contactsPhone.placeholder' })} />
+          <Col span={12}>
-          </Form.Item>
+            <Form.Item
-        </Col>
+              name={['coscoSupplierBase', 'contactsPhone']}
-        <Col span={8}>
+              label={intl.formatMessage({ id: 'register.domestic.contactsPhone' })}
-          <Form.Item
+              rules={[
-            name="captcha"
+                {
-            label={intl.formatMessage({ id: 'register.captcha.label' })}
+                  required: true,
-            rules={[{ required: true, message: intl.formatMessage({ id: 'register.captcha.required' }) }]}
+                  message: intl.formatMessage({ id: 'register.domestic.contactsPhone.required' }),
-          >
+                },
-            <Row gutter={8}>
+                {
-              <Col span={14}>
+                  pattern: /^1[3-9]\d{9}$/,
-                <Input placeholder={intl.formatMessage({ id: 'register.captcha.placeholder' })} />
+                  message: intl.formatMessage({ id: 'register.domestic.contactsPhone.pattern' }),
-              </Col>
+                },
-              <Col span={10}>
+              ]}
-                <Button
+              extra="该手机号用于后续联系和召回密码"
-                  type="primary"
+            >
-                  style={{ marginTop: 0 }}
+              <Input
-                  disabled={countdown > 0}
+                prefix={<MobileOutlined />}
-                  onClick={handleGetCaptcha}
+                placeholder={intl.formatMessage({
-                >
+                  id: 'register.domestic.contactsPhone.placeholder',
-                  {countdown > 0 ? `${countdown}s` : intl.formatMessage({ id: 'register.captcha.get' })}
+                })}
-                </Button>
+              />
-              </Col>
+            </Form.Item>
-            </Row>
+          </Col>
-          </Form.Item>
+          <Col span={12}>
-        </Col>
+            <Form.Item
+              name="captcha"
+              label={intl.formatMessage({ id: 'register.captcha.label' })}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'register.captcha.required' }),
+                },
+              ]}
+            >
+              <Input
+                placeholder={intl.formatMessage({ id: 'register.captcha.placeholder' })}
+                addonAfter={
+                  <Button
+                   type="link"
+                    size="small"
+                    // style={{ marginTop: 0 }}
+                    disabled={countdown > 0}
+                    onClick={handleGetCaptcha}
+                  >
+                    {countdown > 0
+                      ? `${countdown}s`
+                      : intl.formatMessage({ id: 'register.captcha.get' })}
+                  </Button>
+                }
+              />
+            </Form.Item>
+          </Col>
 
-        <Col span={8}>
+          <Col span={12}>
-          <Form.Item
+            <Form.Item
-            name={['coscoSupplierBase', 'contactsEmail']}
+              name={['coscoSupplierBase', 'contactsEmail']}
-            label={intl.formatMessage({ id: 'register.domestic.contactsEmail' })}
+              label={intl.formatMessage({ id: 'register.domestic.contactsEmail' })}
-            rules={[
+              rules={[
-              { type: 'email', message: intl.formatMessage({ id: 'register.email.invalid' }) },
+                { 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' })} />
+                },
-          </Form.Item>
+              ]}
-        </Col>
+            >
-        <Col span={8}>
+              <Input
-          <Form.Item
+                prefix={<MailOutlined />}
-            name={['coscoSupplierBase', 'telephone']}
+                placeholder={intl.formatMessage({
-            label={intl.formatMessage({ id: 'register.domestic.telephone' })}
+                  id: 'register.domestic.contactsEmail.placeholder',
-          >
+                })}
-            <Input placeholder={intl.formatMessage({ id: 'register.domestic.telephone.placeholder' })} />
+              />
-          </Form.Item>
+            </Form.Item>
-        </Col>
+          </Col>
-      </Row>
+          <Col span={12}>
+            <Form.Item
+              name={['coscoSupplierBase', 'telephone']}
+              label={intl.formatMessage({ id: 'register.domestic.telephone' })}
+            >
+              <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} />