Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Análise de Conciliação Bancária - Jan-Mar 2025</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1d4ed8', | |
| secondary: '#10b981', | |
| danger: '#ef4444', | |
| warning: '#f59e0b', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .rotate-icon { | |
| transition: transform 0.3s ease; | |
| } | |
| .rotate-180 { | |
| transform: rotate(180deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Análise de Conciliação Bancária Park Poente</h1> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <h2 class="text-xl text-gray-600">Período: Janeiro a Março de 2025</h2> | |
| <div class="flex items-center space-x-2 bg-blue-50 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-calendar-alt text-blue-500"></i> | |
| <span class="text-blue-800 font-medium">01/01/2025 - 31/03/2025</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Summary Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-blue-500 fade-in"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Total Janeiro</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">R$ 2.261.354</h3> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-file-invoice-dollar text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-sm text-gray-600">Principal gasto: Mão de obra de Terceiros</p> | |
| <p class="text-sm font-medium text-blue-600 mt-1">R$ 500.073</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-green-500 fade-in"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Total Fevereiro</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">R$ 2.440.954</h3> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-chart-line text-green-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-sm text-gray-600">Principal gasto: Empréstimos</p> | |
| <p class="text-sm font-medium text-green-600 mt-1">R$ 655.858</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-purple-500 fade-in"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Total Março</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">R$ 2.583.647</h3> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-wallet text-purple-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-sm text-gray-600">Principal gasto: Diversos</p> | |
| <p class="text-sm font-medium text-purple-600 mt-1">R$ 640.009</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quarterly Summary --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 fade-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800">Resumo Trimestral</h3> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">Jan-Mar 2025</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-gray-500 text-sm">Total Trimestre</p> | |
| <p class="text-xl font-bold">R$ 7.285.956</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-gray-500 text-sm">Média Mensal</p> | |
| <p class="text-xl font-bold">R$ 2.427.278</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-gray-500 text-sm">Maior Gasto</p> | |
| <p class="text-xl font-bold">Mão de obra (Jan)</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-gray-500 text-sm">Variação</p> | |
| <p class="text-xl font-bold text-green-600">+14.08%</p> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Apropriação</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Janeiro</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fevereiro</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Março</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mão de obra de Terceiros</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 500.073,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 376.744,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 410.145,33</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">R$ 1.286.962,33</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Empréstimos</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 214.464,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 655.858,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 79.404,91</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">R$ 949.726,91</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Esquadrias de Alumínio</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 231.965,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 11.389,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 392.052,89</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">R$ 635.406,89</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Imóveis</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 184.050,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 123.675,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 161.649,74</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">R$ 469.374,74</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">TOTAIS</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">R$ 2.261.354,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">R$ 2.440.954,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">R$ 2.579.528,21</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-600">R$ 7.281.836,21</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Inconsistencies Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 fade-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800">Inconsistências Identificadas</h3> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium">Atenção</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> | |
| Entradas/Saídas não lançadas no Sienge | |
| </h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">14/jan</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Pix pagto Apice Incorporadora</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-red-600">-R$ 7.335,50</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">15/jan</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Pix recebido Janaina Padilha</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-green-600">R$ 2.276,21</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">23/jan</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Ted Saint Gobain do Brasil</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-green-600">R$ 2.044,15</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">05/fev</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Pix Recebido Vitor Mateus Felipetto da Silva</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-green-600">R$ 9.956,94</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">05/fev</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Recebimento Pix Kalil Silveira de Alcantara</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-green-600">R$ 1,00</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-file-invoice text-blue-500 mr-2"></i> | |
| Lançamentos no Sienge sem baixa no banco | |
| </h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">10/jan</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">JULIANO BRAZ MACHADO NFS. 20252</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-red-600">R$ 8.198,50</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">25/jan</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">INCO PLATAFORMA ELETRONICA DE.. NFS.2025 96</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-red-600">R$ 1.654,80</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">25/jan</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">INCO PLATAFORMA ELETRONICA DE... NFS.2025 99</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-red-600">R$ 280,00</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">31/jan</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">TARIFA TED - Despesas Bancárias</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-red-600">R$ 9,50</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SPE Transfers Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 fade-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800">Transferências entre SPEs</h3> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Total: R$ 9.151.717</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">Totais de Entradas por SPE</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SPE</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Entradas</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Butiá</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-bold text-green-600">R$ 5.166.246,43</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">LBF</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-bold text-green-600">R$ 1.110.288,26</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Apice</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-bold text-green-600">R$ 1.004.000,00</td> | |
| </tr> | |
| <tr> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">Totais de Saídas por SPE</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SPE</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Saídas</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Butiá</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-bold text-red-600">R$ 292.806,45</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">LBF</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-bold text-red-600">R$ 733.865,24</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">Apice</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-bold text-red-600">R$ 844.510,78</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Observations Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 fade-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Observações</h3> | |
| <i class="fas fa-clipboard-list text-blue-500 text-xl"></i> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-5 w-5 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-info-circle text-blue-500 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-700"> | |
| <span class="font-medium">Variação Mensal:</span> Observa-se crescimento nos gastos ao longo do trimestre, com aumento de 7.93% de janeiro para fevereiro e 5.68% de fevereiro para março. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-5 w-5 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-700"> | |
| <span class="font-medium">Inconsistências:</span> Foram identificadas 5 transações bancárias não registradas no Sienge e 4 lançamentos no Sienge sem correspondência bancária. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-5 w-5 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-exchange-alt text-green-500 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-700"> | |
| <span class="font-medium">Transferências entre SPEs:</span> Movimentação intensa entre as SPEs, com destaque para Butiá como principal origem de recursos. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-5 w-5 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-hand-holding-usd text-red-500 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-700"> | |
| <span class="font-medium">Principais Gastos:</span> Mão de obra de terceiros e empréstimos representaram 30.73% do total de gastos no trimestre, com R$ 1.286.962,33 e R$ 949.726,91 respectivamente. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="mt-12 text-center text-gray-500 text-sm"> | |
| <p>Relatório gerado em <span id="current-date"></span> por Era Digital Gestão Financeira</p> | |
| <p class="mt-1">© 2025 Todos os direitos reservados</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Set current date in footer | |
| const now = new Date(); | |
| const options = { day: '2-digit', month: 'long', year: 'numeric' }; | |
| document.getElementById('current-date').textContent = now.toLocaleDateString('pt-BR', options); | |
| // Add animation to elements when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('fade-in'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.fade-in').forEach(el => { | |
| observer.observe(el); | |
| el.classList.remove('fade-in'); | |
| }); | |
| // Collapsible sections functionality | |
| document.querySelectorAll('[data-collapse]').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const target = document.getElementById(button.getAttribute('data-collapse')); | |
| const icon = button.querySelector('.rotate-icon'); | |
| target.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;"> |