From 4861eee0ad264bd59810781b5a09531a868a048f Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Mon, 11 Jul 2022 15:37:31 -0300 Subject: [PATCH] fix --- src/pages/pld/index.tsx | 8 +- src/styles/layouts/pld/PldView.ts | 208 ++++++++++++++++++++++++++++++ 2 files changed, 212 insertions(+), 4 deletions(-) diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index e282817..f5dfb7b 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -17,7 +17,7 @@ import PageTitle from '../../components/pageTitle/PageTitle'; import { api } from '../../services/api'; import { EvolucaoPld } from '../../services/evolucaoPld'; import getAPIClient from '../../services/ssrApi'; -import { GoBack, PldGraphView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView' +import { GoBack, PldGraphView, PldTableMinMaxView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView' import RenderIf from '../../utils/renderIf' import Tabs from '@mui/material/Tabs'; @@ -277,7 +277,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { */} - + { @@ -317,7 +317,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { }
-
+ {/* grafico de grafico por seleção de data (mês)*/} @@ -410,7 +410,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { {pageYPosition > 300 && - + } diff --git a/src/styles/layouts/pld/PldView.ts b/src/styles/layouts/pld/PldView.ts index d791b1e..e4c1557 100644 --- a/src/styles/layouts/pld/PldView.ts +++ b/src/styles/layouts/pld/PldView.ts @@ -1,5 +1,213 @@ import styled from "styled-components" +export const PldTableMinMaxView = styled.div` + width: 100%; + + border-radius: 8px!important; + + border-color:#DDDFE1; + border-style:solid; + border-width: 1px; + + background-color: #EFEFEF; + + margin-top: 15px; + + table { + p { + font-size: 12px; + } + } + + .actual { + font-weight: bold!important; + } + + .tg{ + border-collapse:collapse; + border-spacing:0; + font-family:Poppins; + width: 100%; + } + + .tg td{ + border-color:#DDDFE1; + border-style:solid; + border-width:1px; + font-family:Poppins; + font-size: 10px; + overflow:hidden; + padding:17px 30px; + word-break:normal; + } + + + .tg th{ + border-color:#DDDFE1; + border-style:solid; + border-width:1px; + font-family:Poppins; + font-size:10px; + font-weight:500; + overflow:hidden; + padding:10px 5px; + word-break:normal; + } + .tg .tg-8oo6{ + font-size:20px; + text-align:center; + vertical-align:center; + padding: 10px 18px; + text-align: center; + + color: white; + + background-color: #254F7F; + } + .tg .tg-uulg{ + font-size:14px; + text-align:center; + vertical-align:top; + + :first-child { + background-color: red; + } + :last-child { + border-right-color: transparent; + } + } + + .tg .tg-gceh{ + font-size:14px; + text-align:center; + vertical-align:top; + :first-child { + border-left-color: transparent; + } + } + + table, th:last-child{ + border: transparent; + border-top-right-radius: 8px; + } + + table, th:first-child { + border: transparent; + border-top-left-radius: 8px; + } + + h3{ + font-weight: 600; + font-size: 22px; + line-height: 54px; + + color: #254F7F; + } + + .images { + display: flex; + justify-content: space-around; + align-items: center; + + margin: 40px; + } + + section { + display: flex; + justify-content: center; + align-items: center; + + article { + position: relative; + + display: flex; + justify-content: center; + align-items: center; + + width: 40%; + height: 8rem; + + margin: 40px; + + background: #255488; + color: white; + + border-radius: 8px; + box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + + cursor: pointer; + + background: darken($red, 1.5%); + + background: linear-gradient(200.69deg, #254f7f 9%, #3183e0 98%), #FFFFFF; + + :hover { + transition: all 0.2s linear; + transform: scale(1.1); + } + + svg { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + + rect { + fill: none; + stroke: #fff; + stroke-width: 2; + stroke-dasharray: 422, 0; + transition: all 0.35s linear; + } + } + + .btn-1:hover { + background: rgba($red, 0); + letter-spacing: 1px; + + + rect { + stroke-width: 5; + stroke-dasharray: 15, 310; + stroke-dashoffset: 48; + transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); + } + } + } + + footer { + label { + cursor: pointer; + margin: 20px; + } + } + + .btnDownload{ + width: fit-content; + margin-bottom: 15px; + :hover { + position: relative; + transition: all 0.2s linear; + transform: translateY(-6px); + } + } + + .space { + background-color: #F7F7F7; + + border-color: transparent; + + border-bottom-color: #DDDFE1; + + height: 15px!important; + + padding: 0!important; + } +` export const PldTableView = styled.div` width: 100%;