Merge branch 'feature/home'

src/views/graphite/components/AddLiquid.vue

@@ -56,38 +56,38 @@
 </script>
 <style scoped>
     .title{
-        font-size: 40px;
+        font-size: 1.25rem;
         font-weight: 500;
-        line-height: 22px;
-        padding-top: 80px;
-        margin-left:90px;
+        line-height: .75rem;
+        padding-top: 2.5rem;
+        margin-left:2.875rem;
         color: #323233;
     }
     
     .waste_main{
-        height: 900px;
+        height: 28.125rem;
         flex-wrap: wrap;
         display: flex;
         .waste_area{
-            height: 330px;
-            width: 480px;
+            height: 10.375rem;
+            width: 15rem;
             border: 2px solid #275EFB;
-            margin-top: 100px;
-            margin-left: 70px;
+            margin-top: 3.125rem;
+            margin-left: 2.25rem;
             background: rgb(243 251 255);
             border-radius: 20px;
             display: flex;
             .waste_percentage{
                 position: relative;
-                width: 141px;
-                height: 198px;
+                width: 4.5rem;
+                height: 6.25rem;
                 background-image: url('@/assets/container.svg');
                 background-size: cover;
                 background-position: center;
                 z-index: 1;
                 border-radius: 10px;
-                margin-top: 33px;
-                margin-left: 32px;
+                margin-top: 1rem;
+                margin-left: 1rem;
             }
 
             .percent_num{
@@ -100,7 +100,7 @@
                 position: absolute;
                 bottom: 0;
                 left: 0;
-                width: 141px;
+                width: 4.375rem;
                 height: 50%;
                 background-color: blue;
                 opacity: 0.5;
@@ -109,25 +109,25 @@
             }
 
             .waste_name{
-                margin-left: 76px;
-                margin-top: 27px;
-                font-size: 26px;
+                margin-left: 2rem;
+                margin-top: .875rem;
+                font-size: .75rem;
                 color: #393F46;
             }
 
             .waste_edit{
                 background: #ffffff;
-                width: 256px;
-                height: 220px;
-                margin-left: 30px;
-                margin-top: 20px;
-                padding-top: 30px;
-                font-size: 20px;
-                padding-left: 35px;
+                width: 8rem;
+                height: 6.875rem;
+                margin-left: 1rem;
+                margin-top: .625rem;
+                padding-top: 1rem;
+                font-size: .625rem;
+                padding-left: 1.125rem;
             }
 
             .waste_field{
-                width: 210px;
+                width: 6.625rem;
                 display: flex;
                 border: 1px solid;
                 border-radius: 304px;
@@ -140,7 +140,7 @@
             background-color: #26D574;
             font-size: 20px;
             color: #ffffff;
-            width: 200px;
+            width: 6.25rem;
             border-radius: 100px;
         }
         
@@ -151,23 +151,23 @@
         width: 100%;
         padding-top: 50px;
         margin-left: 35%;
-        height: 200px;
+        height: 6.25rem;
         .btn{
-            width:438px;
-            height: 90px;
-            font-size: 40px;
+            width:13.75rem;
+            height: 2.875rem;
+            font-size: 1.25rem;
         }
     }
     .ml{
-        margin-right: 20px;
+        margin-right: .625rem;
         padding-top: 5px;
     }
 
     .add_result{
-        font-size: 26px;
+        font-size: .75rem;
         color: #393f46; 
-        margin-top: 18px;
-        margin-left: 45px;
+        margin-top: .625rem;
+        margin-left: 1.375rem;
     }
 
 </style>