ソースを参照

实际样式修改_hn

huning 3 ヶ月 前
コミット
1a324202a3
2 ファイル変更747 行追加736 行削除
  1. 537 624
      src/pages/Base/Record/index.tsx
  2. 210 112
      src/pages/Base/Record/styles.css

ファイルの差分が大きいため隠しています
+ 537 - 624
src/pages/Base/Record/index.tsx


+ 210 - 112
src/pages/Base/Record/styles.css

@@ -1,73 +1,76 @@
 .example-wrapper {
-    display: flex;
-    height: 100%;
+  display: flex;
+  height: 100%;
 }
 
 .inner-col {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .inner-col.vertical-toolbar {
-    display: flex;
-    flex: none;
-    width: 100px;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  flex: none;
+  width: 100px;
+  align-items: center;
+  justify-content: center;
 }
 
 .toolbar {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
-.vertical-toolbar > span {
-    padding: 10px;
-    margin: 10px;
-    cursor: default;
-    user-select: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
-    -webkit-user-modify: none;
+.vertical-toolbar>span {
+  padding: 10px;
+  margin: 10px;
+  cursor: default;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-modify: none;
 }
 
 button.factory {
-    height: 25px;
-    border-radius: 5px;
-    border: none;
-    color: white;
-    outline: none;
-    cursor: pointer;
-    margin-right: 5px;
+  height: 25px;
+  border-radius: 5px;
+  border: none;
+  color: white;
+  outline: none;
+  cursor: pointer;
+  margin-right: 5px;
 }
 
 button i {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 .bin i {
-    transform: scale(1);
-    transition: transform 500ms;
+  transform: scale(1);
+  transition: transform 500ms;
 }
 
 .version-select-container {
-   display: flex;
-   align-items: center;
-   margin: 20px 0;
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
 }
+
 .version-select-container label {
-  margin: 0 3%;
+  margin: 0 1%;
   white-space: nowrap;
   font-size: 14px;
 }
+
 .version-select-container select {
   padding: 5px 35px;
   font-size: 14px;
   margin-left: 20px;
   padding-left: 10px;
 }
+
 .edit-btn {
   margin-left: auto;
   padding: 7px 4%;
@@ -77,6 +80,7 @@ button i {
   cursor: pointer;
   float: right;
 }
+
 .action-btn {
   background-color: #000;
   color: #fff;
@@ -85,39 +89,48 @@ button i {
   cursor: pointer;
   font-size: 14px;
 }
+
 .history-title-custom {
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 8px;
-    display: block;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  display: block;
 }
+
 .history-table-custom {
   width: 100%;
   border-collapse: collapse;
 }
+
 .type-td {
   padding: 5px 20px;
 }
+
 .date-td {
   padding: 5px 20px;
 }
+
 .action-td {
   padding: 5px 20px;
 }
+
 .history-title-custom {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 8px;
   display: block;
 }
+
 .order-info-section {
   margin-bottom: 35px;
 }
-.order-info-section h3 {
+
+h3 {
   margin: 0 0 5px 0;
   font-size: 14px;
   font-weight: bold;
 }
+
 .message-btn {
   float: right;
   padding: 7px 50px;
@@ -128,25 +141,30 @@ button i {
   position: relative;
   top: -17px;
 }
+
 .order-info-row {
   margin: 10px 0 10px 20px;
   font-size: 14px;
 }
+
 .status-section {
   width: 100%;
   border-collapse: collapse;
   margin-top: 8px;
   margin-left: 10px;
 }
+
 .status-section th,
 .status-section td {
   padding: 5px 10px;
   text-align: left;
   font-size: 14px;
 }
+
 .status-section th {
   font-weight: normal;
 }
+
 .custom-tab-list {
   display: flex;
   list-style: none;
@@ -195,81 +213,161 @@ button i {
 .custom-tab:focus {
   box-shadow: none;
 }
-  .horizontal-header {
-    text-align: center;
-    white-space: normal;
-    padding: 10px 5px;
-    font-weight: bold;
-    height: 100px;
-    border-right: 1px solid #dde2eb;
-    border-left: 1px solid #dde2eb;
-    border-bottom: 1px solid #dde2eb;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  /* 移除列宽调整手柄 */
-  .ag-header-cell-resize {
-    display: none !important;
-  }
-  .ag-pinned-left-header .ag-header-cell,
-  .ag-pinned-left-cols-container .ag-cell {
-    font-weight: bold;
-  }
-  /* .ag-theme-alpine {
+
+.horizontal-header {
+  text-align: center;
+  white-space: normal;
+  padding: 10px 5px;
+  font-weight: bold;
+  height: 100px;
+  border-right: 1px solid #dde2eb;
+  border-left: 1px solid #dde2eb;
+  border-bottom: 1px solid #dde2eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 移除列宽调整手柄 */
+.ag-header-cell-resize {
+  display: none !important;
+}
+
+.ag-pinned-left-header .ag-header-cell,
+.ag-pinned-left-cols-container .ag-cell {
+  font-weight: bold;
+}
+
+/* .ag-theme-alpine {
     --ag-border-color: #dde2eb;
     --ag-cell-horizontal-border: solid 1px #dde2eb;
     --ag-header-horizontal-border: solid 1px #dde2eb;
     --ag-header-vertical-border: solid 1px #dde2eb;
     --ag-cell-vertical-border: solid 1px #dde2eb;
     --ag-grid-size: 1px;  } */
-  .ag-header {
-    border-bottom: 2px solid #c1c8d4;
-  }
-  .ag-theme-alpine .ag-row-odd {
-    background-color: #fafbfc;
-  }
-  .toolbar {
-    padding: 12px 16px;
-    background: #fff;
-    border: 1px solid #dde2eb;
-    border-radius: 6px;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  }
-  .version-select-container {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin: 16px 0;
-  }
-  .edit-btn {
-    padding: 6px 12px;
-    background-color: #1890ff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .edit-btn:hover {
-    background-color: #40a9ff;
-  }
-  .custom-dropdown {
-    padding: 4px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    width: 80px;
-  }
-  .custom-checkbox {
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-  }
-  .ag-cell {
-    border-right: 1px solid #dde2eb !important;
-    border-left: 1px solid #dde2eb !important;
-  }
-  .ag-header-cell {
-    border-right: 1px solid #dde2eb !important;
-    border-left: 1px solid #dde2eb !important;
-  }
+.ag-header {
+  border-bottom: 2px solid #c1c8d4;
+}
+
+.ag-theme-alpine .ag-row-odd {
+  background-color: #fafbfc;
+}
+
+.toolbar {
+  padding: 12px 16px;
+  background: #fff;
+  border: 1px solid #dde2eb;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.version-select-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 16px 0;
+}
+
+.edit-btn {
+  padding: 6px 12px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.edit-btn:hover {
+  background-color: #40a9ff;
+}
+
+.custom-dropdown {
+  /* padding: 4px; */
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+}
+
+.custom-checkbox {
+  display: block;
+  margin: 0 auto;
+  width: 16px;
+  height: 16px
+}
+
+.ag-cell {
+  border-right: 1px solid #dde2eb !important;
+  border-left: 1px solid #dde2eb !important;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+}
+
+.ag-header-group-cell {
+  border-right: 1px solid #dde2eb !important;
+  border-left: 1px solid #dde2eb !important;
+}
+
+.confirm-content {
+  float: left;
+  margin: 10px 1%;
+  height: 150px;
+  width: 20%;
+}
+
+.clear {
+  clear: both;
+}
+
+.payment {
+  float: left;
+  width: 30%;
+  height: 100%;
+}
+
+.payment-content {
+  float: left;
+  margin: 10px 1%;
+  height: 150px;
+  width: 100%;
+}
+
+.add-row-btn {
+  background: transparent;
+  border: none;
+  color: #0070c0;
+  cursor: pointer;
+  margin-left: 5px;
+  float: right;
+}
+
+.ag-cell[col-id="date"],
+.ag-cell[col-id="dayOfWeek"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.ag-cell[col-id="status"] {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+.ag-header-cell-comp-wrapper{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.lineCdCty{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ag-header-cell-label{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}