feat(dev): 添加 dat 环境并调整首页布局

- 在 envFlag 条件判断中增加对 'dat' 环境的检查
- 调整生态服务部分的布局结构
- 优化 CSS 样式，提高代码可读性和维护性

src/main.js

@@ -110,7 +110,7 @@ Object.keys(Filters).forEach(function(k) {
   Vue.filter(k, Filters[k])
 })
 let envFlag = process.env.VUE_APP_FLAG
-if (envFlag != 'prd') {
+if (envFlag != 'prd' || envFlag != 'dat') {
   // eslint-disable-next-line no-undef
   eruda.init()
   Vue.config.devtools = true

src/views/home/home.vue

@@ -116,14 +116,14 @@ export default {
                             <img :src="require('@/assets/images/sunful/sunful-eco.svg')" alt="生态服务">
                             <div>生态服务</div>
                         </h3>
-                        <div class="flex" style="">
+                        <div class="flex">
-                            <div class="service-item health" style="width: 37%; margin-right: 10px;">
+                            <div class="service-item health">
                                 <h4>健康管理</h4>
                                 <p>健康管理描述文案</p>
                                 <button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
                             </div>
 
-                            <div class="flex" style="flex-flow: column nowrap; width: 65%;gap: 4vw;">
+                            <div class="flex flex-column">
                                 <div class="service-item children">
                                     <h4>子女教育</h4>
                                     <p>子女教育描述文案</p>
@@ -138,15 +138,15 @@ export default {
                         </div>
                     </div>
 
-                    <div class="flex" style="gap: 0px; margin-top: -20px;justify-content: center;align-items: center;">
+                    <div class="flex service-row">
-                        <div class="service-item old" style="width: 53%;">
+                        <div class="service-item old">
                             <div>
                                 <h4>养老服务</h4>
                                 <p>养老服务描述文案</p>
                             </div>
                             <button class="go-btn" @click="goEcosystem(28)">去看看</button>
                         </div>
-                        <div class="service-item life" style="width: 53%;">
+                        <div class="service-item life">
                             <div>
                                 <h4>生活娱乐</h4>
                                 <p>生活娱乐描述文案</p>
@@ -375,8 +375,8 @@ $bg-color: #f5f5f5;
     background-position: left top;
 
     padding: 86px 0 0 11px;
-
+    width: 37%;
-
+    margin-right: 10px;
 }
 
 .children,
@@ -420,11 +420,12 @@ $bg-color: #f5f5f5;
 
 .old,
 .life {
-    background-size: 95%;
+    background-size: 100%;
     background-repeat: no-repeat;
     background-position: left top;
 
     padding: 21px 0 0 15px;
+    width: 53%;
 
     p {
         margin-bottom: 46px;
@@ -451,4 +452,18 @@ $bg-color: #f5f5f5;
 
     button {}
 }
+.flex {
+    &.flex-column {
+        flex-flow: column nowrap; 
+        width: 65%;
+        gap: 4vw;
+    }
+    
+    &.service-row {
+        gap: 10px; 
+        margin-top: -20px;
+        justify-content: center;
+        align-items: center;
+    }
+}
 </style>