ソース対応

src/views/fcbi/sales/sumResult.vue

@@ -217,9 +217,50 @@ function handleExportCSV() {
   padding-top: 10px;
   font-weight: 700;
 }
+
 .append-button{
   background-color: #0080c7;
   color: white;
   width: 200px;
 }
-</style>
+
+/* 响应式样式 */
+@media (max-width: 767px) {
+  /* 手机设备 */
+  .csv-title {
+    margin-left: 10px;
+    font-size: 13px;
+  }
+  .append-button {
+    width: 120px;
+    font-size: 12px;
+    padding: 8px 0;
+  }
+  .el-table {
+    font-size: 12px;
+  }
+  .el-table-column {
+    min-width: 40px !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  /* 平板设备 */
+  .csv-title {
+    margin-left: 15px;
+  }
+  .append-button {
+    width: 160px;
+  }
+}
+
+/* 电脑设备保持原有样式 */
+@media (min-width: 1024px) {
+  .csv-title {
+    margin-left: 20px;
+  }
+  .append-button {
+    width: 200px;
+  }
+}
+</style>

src/views/fcbi/sales/sumSettings.vue

@@ -345,7 +345,9 @@ const resetRegionTreeCheck = (nodes) => {
 <style scoped>
 .form-container {
   margin-top: 40px;
+  padding: 0 15px;
 }
+
 .operate-btn {
   background-color: #0080c7;
   color: white;
@@ -353,60 +355,65 @@ const resetRegionTreeCheck = (nodes) => {
   padding: 6px 12px;
   cursor: pointer;
   width: 240px;
-  margin-left: 90px;
-}
-@media (max-width:48em) {
-  .operate-btn {
-    width: 100px;
-    margin-left: 20px;
-  }
+  margin-left: 0;
 }
+
 .radio-group-vertical {
-  margin-left: -20px;
-}
-@media (max-width:48em) {
-  .radio-group-vertical  {
-    margin-left: 7%;
-  }
+  margin-left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
 }
+
 .radio-container {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 30px; /* グループ間の間隔を広げる */
+  margin-bottom: 15px;
+  position: relative;
 }
-.vertical-radio {
+
+.vertical-radio, .annual-radio {
   display: flex;
   align-items: center;
+  margin-bottom: 5px;
+  position: relative;
+  z-index: 1;
 }
-.annual-row {
-  display: flex;
-  align-items: center;
-  margin-left: 88px;
-  margin-top: -45px;
+
+/* 月指定のドロップダウンをラジオボタンの横に配置 */
+.vertical-radio + .annual-row {
+  margin-top: -28px; /* 上に移動してラジオボタンと同じ行に配置 */
+  margin-left: 80px; /* ラジオボタンの右側に配置 */
 }
-@media (max-width:48em) {
-  .annual-row  {
-    margin-left: 13%;
-    width: 80%;
-  }
+
+/* 年度指定のドロップダウンをラジオボタンの横に配置 */
+.annual-radio + .annual-row {
+  margin-top: -28px; /* 上に移動してラジオボタンと同じ行に配置 */
+  margin-left: 80px; /* ラジオボタンの右側に配置 */
 }
+
 .date-group {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-left: 8px;
+  flex-wrap: nowrap; /* 要素の折り返しを禁止 */
+  gap: 8px; /* 要素間の間隔を調整 */
 }
+
 .date-select {
-  min-width: 80px;
+  width: 90px;
 }
+
 .date-select-small {
-  min-width: 65px;
+  width: 70px;
 }
+
 .date-label {
   font-size: 14px;
   color: #666;
   white-space: nowrap;
 }
+
 .section-container {
   display: flex;
   align-items: center;
@@ -417,20 +424,10 @@ const resetRegionTreeCheck = (nodes) => {
   font-size: 14px;
   color: #606266;
   font-weight: 700;
-  min-width: 80px;
-  margin-top: -55px;
-  margin-left: 60px;
-}
-@media (max-width:48em) {
-  .section-container {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-  .form-section {
-    padding-right: 0;
-    margin-left: 7%;
-  }
+  width: 80px;
+  text-align: left !important;
+  padding-right: 10px;
+  margin-top: 0;
 }
 
 .custom-radio-group {
@@ -439,14 +436,64 @@ const resetRegionTreeCheck = (nodes) => {
   align-items: center;
   margin-left: 2px !important;
 }
+
 .divider {
   height: 1px;
   background-color: #0080c7;
   margin: 10px 27px;
 }
+
 .append-button{
   background-color: #0080c7;
   color: white;
-  margin-left: 100px;
+  margin-left: 10px;
+  padding: 6px 10px; /* パディングを調整 */
+  white-space: nowrap; /* テキストの折り返しを防止 */
+}
+
+.btn-section {
+  padding-left: 78px;
+  margin-top: 25px;
+}
+
+/* 响应式样式 */
+@media (max-width: 767px) {
+  .operate-btn {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .annual-row {
+    margin-left: 20px;
+    width: calc(100% - 40px);
+  }
+
+  .form-section {
+    margin-left: 0;
+    padding-left: 20px;
+  }
+
+  .date-group {
+    flex-wrap: wrap;
+  }
+
+  .append-button {
+    margin-left: 0;
+    width: 100%;
+    margin-top: 10px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .operate-btn {
+    width: 180px;
+    margin-left: 20px;
+  }
+}
+
+/* 公共区域标题样式 */
+::v-deep .public-range-title {
+  text-align: left !important;
+  padding-left: 20px;
 }
-</style>
+</style>