fix: fixed the display bug switching pages and did some finalizations…

… in styles
danieljstri · Dec 19, 2024 · fc25dbb · fc25dbb
1 parent 23c7754
commit fc25dbb
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 59 deletions.
diff --git a/assets/loginImagem.png b/assets/loginImagem.png
diff --git a/assets/login_antiga.png b/assets/login_antiga.png
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -34,7 +34,7 @@ const toggleSidebar = () => {
 <style lang="scss">
 :root {
   --sidebar-width: 240px;
-  --sidebar-width-col: 32px;
+  --sidebar-width-col: 7%;
 }
 
 * {
@@ -64,14 +64,17 @@ button {
     padding: 0.5rem 2rem 0.5rem 0.5rem;
 
     @media (max-width: 1024px) {
-      padding-left: 6rem;
+      padding-left: 2rem;
     }
   }
 }
 
 .main {
   flex: 1;
-  // margin-left: var(--sidebar-width-col);
+  margin-left: var(--sidebar-width-col);
+}
+.isSidebarExpanded + .with-sidebar{
+  margin-left: var(--sidebar-width);
 }
 @media (max-width: 1024px) {
   .main {

diff --git a/frontend/src/components/CardModel.vue b/frontend/src/components/CardModel.vue
@@ -65,7 +65,7 @@ export default {
 <style scoped>
   .card-model {
     height: fit-content;
-    width: 33%;
+    width: 32%;
     padding: 20px;
     border-radius: 16px;
     background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
@@ -151,7 +151,6 @@ export default {
   /* Estilos responsivos */
   @media (max-width: 768px) {
     .card-model {
-      display: block;
       max-width: 767px;
       width: 90%;
       height: fit-content;

diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
@@ -76,17 +76,9 @@
                       <span class="material-icons">bar_chart</span>
                       <span class="text">SERVIÇOS</span>
                   </router-link>
-
-                <!-- div para o botão relacionado ao Lucro Geral
-                  <router-link to="/economia" class="button" :class="{ active: selectedButton === 'economy-chart' }"
-                      @click="setActiveButton('economy-chart')">
-                      <span class="material-icons">bar_chart</span>
-                      <span class="text">GRÁFICO DE ECONOMIA</span>
-                  </router-link> -->
               </div>
 
               <div class="frameInferior">
-
                    <!--div para o botão de Configurações-->
                   <router-link to="/settings" class="button" :class="{ active: selectedButton === 'settings' }"
                       @click="setActiveButton('settings')">
@@ -95,8 +87,8 @@
                   </router-link>
 
                      <!--Condicional para o botão Sair-->
-                  <button @click="setActiveButton('logout'); handlesignOut()"
-                      v-if="isLoggedIn" class="button"
+                  <button class="btnLogOut" @click="setActiveButton('logout'); handlesignOut()"
+                      v-if="isLoggedIn" 
                       :class="{ active: selectedButton === 'logout' }" >
                       <span class="material-icons">logout</span>
                       <span class="text">SAIR</span>
@@ -125,10 +117,9 @@ aside {
     height: 100vh;
     padding: 1rem;
     transition: width 0.2s ease-in-out; 
-    // position: fixed;
-    top: 0;
-    left: 0;
+    position: fixed;
     z-index: 1;
+
     
     /*Parametros globais para os botões da sidebar*/
     .button .text {
@@ -150,7 +141,7 @@ aside {
             display: flex;
             align-items: center;
             height: 45px; 
-            padding: 0.2rem 0;
+            padding: 0.2rem 0.2rem;
             text-decoration: none;
             transition: all 0.2s ease-in-out;
 
@@ -181,7 +172,7 @@ aside {
         justify-content: flex-start;
         margin-bottom: 3rem;
         margin-top: 0rem;
-        
+        padding-left: 0.2rem;
         button {
             padding: 1.2vh 0 0 0;
         }
@@ -219,7 +210,7 @@ aside {
             position: relative;
             align-items: center;
             height: 40px; 
-            padding: 0.2rem 0;
+            padding: 0.2rem 0.2rem;
             text-decoration: none;
             transition: all 0.2s ease-in-out;
 
@@ -242,6 +233,31 @@ aside {
                
             }
         }
+        .btnLogOut {
+            display: flex;
+            position: relative;
+            align-items: center;
+            height: 40px; 
+            padding: 0.2rem 0.3rem;
+            text-decoration: none;
+            transition: all 0.2s ease-in-out;
+
+            .material-icons {
+                color: #CCDEE7;
+                margin-right: 1rem;
+                transition: margin 0.2s ease-in-out;
+            }
+
+            .text {
+                color: #CCDEE7;
+                font-size: 13px;
+                line-height: 15px;
+                opacity: 0;
+                transition: opacity 0.2s ease-in-out;
+                white-space: nowrap; 
+                letter-spacing: 0.05em;
+            }
+        }
     }
 
     .button {

diff --git a/frontend/src/components/home_page/EconomicChart.vue b/frontend/src/components/home_page/EconomicChart.vue
diff --git a/frontend/src/components/home_page/GeneralChart.vue b/frontend/src/components/home_page/GeneralChart.vue
@@ -130,6 +130,7 @@ ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, LinearScale,
   border-radius: 16px;
   background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+
   }
   h3 {
     text-align: center;
@@ -140,7 +141,7 @@ ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, LinearScale,
 
  #chart-canva {
   width: 100%;
-  height: fit-content;
+  height: 100%;
   padding: 20px;
   }
 

diff --git a/frontend/src/components/home_page/MedUpMerchan.vue b/frontend/src/components/home_page/MedUpMerchan.vue
@@ -0,0 +1,77 @@
+<template>
+  <div 
+    class="container" 
+    ref="container" 
+    @mousemove="updateMousePosition" 
+    @mouseenter="showEffect" 
+    @mouseleave="hideEffect"
+  >
+  <h1>Cuidamos de tudo para você. Gaste seu tempo no que importa: seus pacientes e sua carreira!</h1>
+    <div
+      v-if="isHovered"
+      class="distortion"
+      :style="{ transform: `translate(${mouseX - 25}px, ${mouseY - 30}px)` }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DistortionEffect",
+  data() {
+    return {
+      mouseX: 0,
+      mouseY: 0,
+      isHovered: false, // Controla a visibilidade do efeito
+    };
+  },
+  methods: {
+    updateMousePosition(event) {
+      const container = this.$refs.container;
+      const rect = container.getBoundingClientRect();
+
+      // Calcula as coordenadas relativas ao contêiner
+      this.mouseX = event.clientX - rect.left;
+      this.mouseY = event.clientY - rect.top;
+    },
+    showEffect() {
+      this.isHovered = true; // Exibe o efeito quando o mouse entra
+    },
+    hideEffect() {
+      this.isHovered = false; // Esconde o efeito quando o mouse sai
+    },
+  },
+};
+</script>
+
+<style scoped>
+.container {
+  display:flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  background:
+        linear-gradient(135deg,
+            rgba(71, 164, 206, 0.1) 0%,
+            rgba(71, 164, 206, 0) 100%);
+  overflow: hidden;
+  position: relative;
+  padding: 20px;
+}
+
+
+.distortion {
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  background: radial-gradient(circle, #000000 50%, #bdc8c1  100%);
+  position: absolute;
+  pointer-events: none;
+  filter: blur(2px) brightness(1.5);
+  mix-blend-mode: overlay;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+</style>
diff --git a/frontend/src/components/home_page/Valuable-ProductCard.vue b/frontend/src/components/home_page/Valuable-ProductCard.vue
@@ -80,7 +80,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  height: 30%;
   padding: 20px;
   border-radius: 16px;
   background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);

diff --git a/frontend/src/views/EconomicsView.vue b/frontend/src/views/EconomicsView.vue
@@ -1,5 +1,5 @@
 <script>
-  import EconomicChart from '@/components/home_page/EconomicChart.vue';
+  import EconomicChart from '@/components/home_page/MedUpMerchan.vue';
 
   export default {
     components: {

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -4,7 +4,7 @@
   import ExpensesCard from '@/components/home_page/ExpensesCard.vue';
   import RevenueCard from '@/components/home_page/RevenueCard.vue';
   import ProfitChart from '@/components/home_page/GeneralChart.vue';
-  import EconomicChart from '@/components/home_page/EconomicChart.vue';
+  import MedUpMerchan from '@/components/home_page/MedUpMerchan.vue';
   import ValuableProductCard from '@/components/home_page/Valuable-ProductCard.vue';
   import EconomicBar from '@/components/home_page/EconomicBar.vue';
   import TaxSavingsCard from '@/components/home_page/TaxSavingsCard.vue';
@@ -36,7 +36,7 @@
       ExpensesCard,
       RevenueCard,
       ProfitChart,
-      EconomicChart,
+      MedUpMerchan,
       ValuableProductCard,
       EconomicBar,
       TaxSavingsCard
@@ -96,7 +96,7 @@
         <ProfitChart :selectedMonth="selectedMonth" id="general-chart"/>
       </section>
       <section class="control-data">
-        <EconomicChart :selectedMonth="selectedMonth" id="economic-chart"/>
+        <MedUpMerchan id="MerchanMedUp"/>
         <ValuableProductCard :selectedMonth="selectedMonth"/>
       </section>
       <TaxSavingsCard/>
@@ -112,10 +112,8 @@
     
   }
 
-  body {
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+  main {
+    flex: 1;
   }
   .header {
     display: flex;
@@ -163,20 +161,26 @@
       height: 70%;
   }
   .cards {
-      display: flex;
+      display: inline-flex;
       flex-direction: row;
-      gap: 16px;
+      flex-wrap: wrap;
+      min-width: 100%;
+      width: 100%;
       margin-bottom: 16px;
+      gap: 16px;
       justify-content: space-between;
   }
 
   .control-data {
-    margin: 0;
+      margin: 0;
       display: flex;
       flex-direction: column;
       width: 18.5%;
       gap: 16px;
   }
+  #MerchanMedUp {
+    height: 100%;
+  }
 
   .date-selectors {
     display: flex;
@@ -194,4 +198,17 @@
     color:  #245368;
   }
 
+  @media (max-width: 1024px) {
+    .cash-data {
+      width: 100%;
+    }
+    .cards {
+      justify-content: center;
+    }
+    .control-data {
+      width: 100%;
+    }
+    
+  }
+
 </style>
diff --git a/frontend/src/views/ServicosView.vue b/frontend/src/views/ServicosView.vue
@@ -13,7 +13,7 @@ import servicesDetails from '@/components/services_page/servicesDetails.vue';
   <div class="content-container">
     <servicesDetails id="services-component"/>
     <section class="strategic-headlight">
-      <div class="cards">
+      <div class="cards-services">
           <strategicAnesthesiaCard />
           <strategicConsultationCard />
           <strategicAnesthesiaCard />
@@ -79,7 +79,7 @@ import servicesDetails from '@/components/services_page/servicesDetails.vue';
     background: linear-gradient(180deg, rgba(71, 164, 206, 0.01) 0%, rgba(71, 164, 206, 0.05) 10%, rgba(132, 122, 164, 0.05) 44%, rgba(233, 51, 95, 0.05) 100%);
 }
 
-.cards {
+.cards-services {
     display: flex;
     flex-direction: column;
     justify-content: space-between;