p4-発注詳細手机端样式

src/pages/Partner/Order/index.tsx

@@ -138,7 +138,7 @@ const GridExample = () => {
       }
 
        .confirm-request-btn {
-        margin-left:65%;
+        margin-left:80%;
         padding: 7px 50px;
         background-color: #000;
         color: #fff;
@@ -146,20 +146,21 @@ const GridExample = () => {
         cursor: pointer;
         font-size: 14px;
         margin-top: 50px;
+        white-space: nowrap;
       }
 
-      .version-select-container {
+      .partner-select-container {
         display: flex;
         align-items: center;
         margin-left: 20px;
       }
-      .version-select-container label {
+      .partner-select-container label {
         margin-right: 10px;
         white-space: nowrap;
         font-size: 14px;
         font-weight: bold;
       }
-      .version-select-container select {
+      .partner-select-container select {
         padding: 5px 35px;
         font-size: 14px;
         margin-left: 20px;
@@ -184,6 +185,13 @@ const GridExample = () => {
         border: none;
         cursor: pointer;
         margin-top: 50px;
+        white-space: nowrap;
+      }
+      .action-buttons-container {
+        display: flex;
+        justify-content: flex-end; 
+        gap: 10px; 
+            
       }
       .add-row-btn {
         background: transparent;
@@ -240,6 +248,10 @@ const GridExample = () => {
      .tokyoBranchCol{
        display: none;
      }
+     .monthly-instruction-text {
+       margin-left: 140px;
+       white-space: nowrap;
+      }
      .chat-sidebar {
        position: fixed;
        top: 0;
@@ -269,6 +281,141 @@ const GridExample = () => {
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
      }
+    .desktop-only {
+      display: table-cell;
+    }
+    .mobile-only {
+      display: none;
+    }
+    .desktop-button-only {
+      display: table-cell;
+    }
+    .mobile-button-only {
+      display: none;
+    }
+        @media (max-width: 1280px) {
+         .title-main {
+           margin-left: -10px; 
+           letter-spacing: 1px !important;
+        }
+        .message-text {
+          color: #0070c0;
+          text-decoration: underline;
+          cursor: pointer;
+          float: right;
+          margin-top: 20px;
+      }
+        .desktop-only {
+          display: none !important;
+          visibility: hidden !important; 
+          height: 0 !important; 
+          padding: 0 !important; 
+          margin: 0 !important;
+        }
+        .mobile-only {
+          display: table-cell;
+        }
+        .desktop-button-only {
+          display: none;
+        }
+        .mobile-button-only {
+          display: table-cell;
+        }
+        .mobile-button-only span {
+          color: #0070c0;
+          text-decoration: underline;
+          cursor: pointer;
+          white-space: nowrap;
+        }
+        .message-btn {
+          padding: 4px 20px; 
+          top: 20px;   
+          margin-right: -25px;     
+        }
+        .partner-select-container select {
+          margin-left: 5px;
+          padding: 3px 15px;
+        }
+        .order-info-section {
+          margin-bottom: 80px;
+        }
+        .partner-select-container {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          margin-left: 20px;
+          margin-top: 20px;
+          flex-wrap: nowrap;
+          width: calc(100% - 40px);
+        }
+
+        .action-buttons-container {
+          display: block;
+          margin-top: 20px;
+        }
+
+        .confirm-request-btn,
+        .save-btn {
+          padding: 5px 30px;
+          margin-top: 20px;
+          margin-left: -10px;
+          display: block; 
+          width: 140px;
+        }
+        .monthly-instruction-text {
+          margin-left: 10px; 
+        }
+        .company-info-right {
+          margin-top: 120px !important;
+          margin-left: -70px !important;
+        }
+        .payment-table {
+          width: 100% !important; 
+        }
+        .payment-table tbody tr {
+          display: block;
+          margin-bottom: 10px; 
+        }
+        .payment-table tbody td {
+          display: block; 
+          width: 100% !important; 
+          box-sizing: border-box; 
+          padding: 5px 0 !important; 
+        }
+        .mobile-text{
+          font-weight: bold;
+          margin-left:-15px;
+        }
+        .btn-group-mobile {
+          display: block !important;
+          text-align: center;
+          padding-right: 0 !important; 
+          margin-top: 30px;
+        }
+
+        .btn-group-mobile .action-btn {
+          display: block !important; 
+          margin: 0 auto 25px auto !important;
+          width: 200px; 
+          padding: 8px 0 !important;
+        }
+        .request-info-section {
+          border-bottom: 1px solid #000; 
+          padding-bottom: 10px;
+        }
+      }
+
+        @media (max-width: 345px) {
+          .partner-select-container select {
+            margin-left: -15px ; 
+          }
+          .order-info-month{
+             margin-left:123px !important;
+          }
+          .order-info-affiliation{
+             margin-left:80px !important;
+          }
+        }
     `;
         document.head.appendChild(style);
 
@@ -600,26 +747,34 @@ const GridExample = () => {
         <div style={containerStyle}>
             <div className="order-info-container">
                 <div className="order-info-section">
-                    <div style={{ fontSize: '14px',letterSpacing:'5px' }}>受注詳細 指示書 ({affiliationName})</div>
-                    <button className="message-btn" onClick={handleMessageClick}>
+                    <div className="title-main" style={{ fontSize: '14px',letterSpacing:'5px' }}>受注詳細 指示書 ({affiliationName})</div>
+                    <button className="message-btn desktop-only" onClick={handleMessageClick}>
                         メッセージ
                     </button>
+                     <span 
+                        className="message-text mobile-only" 
+                        onClick={handleMessageClick}
+                    >
+                        メッセージ
+                    </span>
                 </div>
 
                 <div className="order-info-section">
                     <h3>依頼情報 </h3>
+                    <div className="request-info-section"></div>
                     <div className="order-info-row">
-                         年月<span style={{ marginLeft: '130px' }}>{orderInfo.deliveryPartner.monthYear}</span>
+                         年月<span className="order-info-month"  style={{ marginLeft: '130px' }}>{orderInfo.deliveryPartner.monthYear}</span>
                     </div>
                     <div className="order-info-row">
-                        依頼ベース<span style={{ marginLeft: '87px' }}>{orderInfo.deliveryPartner.affiliationName}</span>
+                        依頼ベース<span className="order-info-affiliation" style={{ marginLeft: '87px' }}>{orderInfo.deliveryPartner.affiliationName}</span>
                     </div>
                 </div>
 
                
                 <div className="order-info-section">
                     <h3>月間運行指示書</h3>
-                    <div className="version-select-container">
+                    <div className="request-info-section"></div>
+                    <div className="partner-select-container">
                         <label>version選択</label>
                         <select 
                             value={orderInfo.monthlyInstruction.selectedVersion}
@@ -637,10 +792,13 @@ const GridExample = () => {
                                 <option key={version} value={version}>{version}</option>
                             ))}
                         </select>
-                        <button  className="confirm-request-btn" > 確認依頼</button>
-                        <button className="save-btn" onClick={handleEditClick}>
-                            保存
-                        </button>
+                        <div className="mobile-button-only">
+                          <span>ダウンロード</span>
+                        </div>
+                    </div>
+                    <div className="action-buttons-container">
+                      <button className="confirm-request-btn">確認依頼</button>
+                      <button className="save-btn" onClick={handleEditClick}>保存</button>
                     </div>
                      <div style={{ 
                          marginLeft: '20px', 
@@ -652,16 +810,18 @@ const GridExample = () => {
                      }}> 
                          <div style={{ display: 'flex', flexDirection: 'column' }}> 
                              <span style={{ marginRight: '10px' }}>{documentInfo.corpCode}</span>
-                             <span style={{ marginTop: '15px' }}>{documentInfo.corpName}</span>
+                             <span style={{ marginTop: '15px',whiteSpace: 'nowrap' }}>{documentInfo.corpName}</span>
                          </div>
-                         <span style={{ marginLeft: '140px' }}>月間運行指示書</span>
+                         <span className="monthly-instruction-text">月間運行指示書</span>
                          <div style={{ marginLeft: 'auto', fontSize: '14px' }}> 
+                          <div className="company-info-right" style={{ marginLeft: 'auto', fontSize: '14px' }}> 
                              <p>【{documentInfo.reportMonth}】</p>
                              <p>署名・捺印の上、送達願います。</p>
                              <p>（御社名+社員・納品担当者印）</p>
                              <p>{documentInfo.company} {documentInfo.branch}</p>
                              <p>TEL {documentInfo.corpPhone}</p>
                              <p>FAX 03-6756-7376/7378</p>
+                           </div>
                         </div>
                      </div>
                 </div>
@@ -676,12 +836,12 @@ const GridExample = () => {
             </div>
 
             <div style={{ marginTop: '40px', marginLeft: '20px', fontSize: '14px' }}>
-              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <table className="payment-table" style={{ width: '100%', borderCollapse: 'collapse' }}> 
                 <tbody>
                   <tr>
-                    <td style={{ width: '150px', padding: '5px 0' }}>支払代金</td>
+                    <td className="mobile-text" style={{ width: '150px', padding: '5px 0' }}>支払代金</td>
                     <td style={{ padding: '5px 0' }}>{paymentInfo.paymentAmountText}</td>
-                    <td style={{ width: '200px', padding: '5px 0'}}>
+                    <td className="desktop-only"  style={{ width: '200px', padding: '5px 0'}}>
                       <span style={{ 
                         display: 'inline-block', 
                         marginLeft:'-800px', 
@@ -691,9 +851,9 @@ const GridExample = () => {
                     </td>
                   </tr>
                   <tr>
-                    <td>支払方法</td>
+                    <td className="mobile-text">支払方法</td>
                     <td>{paymentInfo.paymentMethod}</td>
-                    <td rowSpan={3} style={{ 
+                    <td className="desktop-only" rowSpan={3} style={{ 
                       verticalAlign: 'top', 
                       paddingTop: '40px', 
                       paddingLeft: '0',
@@ -730,27 +890,73 @@ const GridExample = () => {
                     </td>
                   </tr>
                   <tr>
-                    <td>支払期限</td>
+                    <td className="mobile-text">支払期限</td>
                     <td>{paymentInfo.paymentDeadline}</td>
                   </tr>
                   <tr>
-                    <td>消費税</td>
+                    <td className="mobile-text">消費税</td>
                     <td>{paymentInfo.consumptionTaxText}</td>
                   </tr>
                   <tr>
-                    <td>振込手数料</td>
+                    <td className="mobile-text">振込手数料</td>
                     <td>{paymentInfo.transferFeeText}</td>
                   </tr>
+                  <tr>
+                   <td className="mobile-only"  style={{ width: '200px', padding: '5px 0'}}>
+                      <span style={{ 
+                        display: 'inline-block', 
+                      }}>
+                        受付の署名又は捺印の上返信下さい
+                      </span>
+                    </td>
+                    <td className="mobile-only" rowSpan={3} style={{ 
+                      verticalAlign: 'top', 
+                      paddingTop: '40px', 
+                      paddingLeft: '0',
+                      position:'relative' 
+                    }}>
+                      <div style={{ 
+                        position:'relative', 
+                        marginLeft: '85%',
+                        display: 'inline-block' 
+                      }}>
+                        <div style={{ 
+                          border: '1px solid #000', 
+                          width: '60px', 
+                          height: '60px', 
+                          display: 'flex',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+        
+                        }}
+                      >
+                        受付印
+                      </div>
+                      <div 
+                        style={{ 
+                          position: 'absolute',
+                          bottom: 0,
+                          left: '-200px',
+                          width: '200px',
+                          height: '1px',
+                          backgroundColor: '#000',
+                        }}
+                      />
+                     </div>
+                    </td>
+                  </tr>
                 </tbody>
             </table>
         </div>
 
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px', paddingRight: '700px' }}>
+            <div className="btn-group-mobile" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px', paddingRight: '700px' }}>
                 <div>
                     <button className="action-btn">すべて承諾</button>
                     <button className="action-btn" style={{ marginLeft: '10px' }}>チェックした指示を承諾</button>
                 </div>
-                <button className="action-btn">ダウンロード</button>
+                <div className="desktop-button-only">
+                  <button className="action-btn">ダウンロード</button>
+                </div>
             </div>
 
             <div style={{ marginTop: '80px' }}>