优化加液样式

src/components/home/Environment.vue

@@ -132,6 +132,6 @@ onMounted(() => {
     }
   }
   .odd {
-    background: rgba(139, 190, 239, 0.2);
+    background: rgba(139, 190, 239, 0.1);
   }
 </style>

src/components/home/HomeFormula.vue

@@ -30,6 +30,10 @@ watchEffect(() => {
 
 <style lang="scss" scoped>
 .home-right-title{
+  background: #fff;
+  width: 90%;
+  border-radius: 10px;
+  margin: 10px auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   font-size: 1.5rem;

src/layouts/default.vue

@@ -224,7 +224,7 @@ const toggleLanguage = () => {
 .main {
   box-sizing: border-box;
   height: 100%;
-  background: #fff;
+  background: #FAFAFA;
   .header {
     height: 50px;
     width: 100%;
@@ -242,6 +242,7 @@ const toggleLanguage = () => {
   }
   .header {
     color: #393F46;
+    box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
 
     .logo {
       height: 22px;
@@ -306,7 +307,7 @@ const toggleLanguage = () => {
   }
   .container {
     height: calc(100% - 100px);
-    background: #F6F6F6;
+    background: #fff;
   }
 }
 .aside {

src/views/home/index.vue

@@ -131,12 +131,14 @@ const nowLiquid = computed(() => {
 <style lang="scss" scoped>
   $input-height: 3rem;
   .home{
-    min-height: $main-container-height;
+    width: 100%;
+    height: 100%;
   }
   .home-grid-container {
+    width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
+    gap: 20px;
   }
   .home-merged-cell {
     grid-column: 1 / 2;
@@ -146,16 +148,16 @@ const nowLiquid = computed(() => {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, auto);
-    gap:.5rem;
+    gap: 20px;
     .card {
       text-align: center;
-      height: 41.5vh;
+      height: 40vh;
       width: 30.5vw;
       border: 1px solid rgb(225, 225, 225);
       position: relative;
       border-radius: 10px 10px 10px 10px;
       background: #FFFFFF;
-      background: $gradient-color;
+      background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%);
       .title-line{
         height: 1vw;
         background-color: #b3d9ff;
@@ -188,10 +190,11 @@ const nowLiquid = computed(() => {
   }
 
   .home-right{
-    width: 36vw;
-    background: $gradient-color;
+    width: 32.8vw;
+    background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%);
     position: relative;
-    border-radius: 10px
+    border-radius: 10px;
+    box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
   }
   .el-button {
     background-color: #2892F3 !important;