Pārlūkot izejas kodu

fix: grid 布局设置

wjc 6 dienas atpakaļ
vecāks
revīzija
192e20c327

+ 6 - 1
src/views/hui-jia/a3-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-11-19 16:09:12
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-11 09:44:37
+ * @LastEditTime: 2025-12-11 17:05:21
  * @Description: 
 -->
 <template>
@@ -102,6 +102,11 @@
             display: grid !important;
             grid-template-columns: repeat(3, 1fr) !important;
             grid-template-rows: repeat(2, 1fr) !important;
+              padding: halfH(20) halfW(20);
+            .work-card-item {
+              align-self: stretch;
+              justify-content: center;
+            }
         }
       }
     }

+ 5 - 1
src/views/hui-jia/a4-screen/index.vue

@@ -165,6 +165,10 @@
       height: calc(50% - $gap-padding);
       .total-container {
         width: calc(35% - $gap-padding);
+        ::v-deep .total-grid {
+          grid-template-columns: repeat(2, 1fr);
+          grid-template-rows: repeat(4, 1fr);
+        }
       }
       .implementing-container {
         width: calc(65% - $gap-padding);
@@ -177,7 +181,7 @@
       width: 100%;
       height: calc(50% - $gap-padding);
       .now-year-container {
-   width: calc(65% - $gap-padding);
+        width: calc(65% - $gap-padding);
       }
       .market-container {
         width: calc(35% - $gap-padding);

+ 33 - 22
src/views/hui-jia/b1-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-11-19 16:09:12
  * @LastEditors: wjc
- * @LastEditTime: 2025-12-11 10:01:57
+ * @LastEditTime: 2025-12-11 17:08:09
  * @Description: 
 -->
 <template>
@@ -19,7 +19,11 @@
         <div class="top">
           <div class="top-left">
             <div class="item-2">
-              <OnlinePay :showLegend="false" :showTitle="false" :showOnlineInfo="true" />
+              <OnlinePay
+                :showLegend="false"
+                :showTitle="false"
+                :showOnlineInfo="true"
+              />
             </div>
             <div class="item-3">
               <OnlinePayWeek :showMarkPoint="false" :showInfo="false" />
@@ -37,26 +41,26 @@
 </template>
 
 <script>
-import Smart from '../components/smart.vue'
-import Hardware from '../components/hardware.vue'
-import WorkCard from '../components/work-card.vue'
-import OnlineWater from '../components/online-water'
-import OnlinePay from '../components/online-pay'
-import OnlinePayWeek from '../components/online-pay-week'
-import OnlinePayDay from '../components/online-pay-day'
+  import Smart from "../components/smart.vue"
+  import Hardware from "../components/hardware.vue"
+  import WorkCard from "../components/work-card.vue"
+  import OnlineWater from "../components/online-water"
+  import OnlinePay from "../components/online-pay"
+  import OnlinePayWeek from "../components/online-pay-week"
+  import OnlinePayDay from "../components/online-pay-day"
 
-export default {
-  name: 'B1Screen',
-  components: {
-    Smart,
-    Hardware,
-    WorkCard,
-    OnlineWater,
-    OnlinePay,
-    OnlinePayWeek,
-    OnlinePayDay
+  export default {
+    name: "B1Screen",
+    components: {
+      Smart,
+      Hardware,
+      WorkCard,
+      OnlineWater,
+      OnlinePay,
+      OnlinePayWeek,
+      OnlinePayDay,
+    },
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -66,7 +70,7 @@ export default {
   .b2-screen {
     width: calc(100vw - halfW(8) * 2);
     height: calc(100vh - halfH(8));
-    padding: 0  halfW(8) halfW(8);
+    padding: 0 halfW(8) halfW(8);
     background: var(--page-bg);
     .logo {
       text-align: right;
@@ -121,7 +125,7 @@ export default {
           width: 50%;
           height: 100%;
           gap: halfW(16);
-          .item-2{
+          .item-2 {
             flex: 1 1 0%;
             width: 100%;
             // max-height: halfH(200);
@@ -149,6 +153,13 @@ export default {
       .work-card-container {
         width: 100%;
         height: calc(20% - $gap-padding);
+        ::v-deep .work-card {
+          padding: halfH(20) halfW(20);
+          .work-card-item {
+            align-self: stretch;
+            justify-content: center;
+          }
+        }
       }
     }
   }