| | |
| | | display: flex; |
| | | gap: 20px; |
| | | margin-bottom: 20px; |
| | | align-items: flex-start; |
| | | justify-content: space-evenly; |
| | | align-items: stretch; |
| | | justify-content: flex-start; |
| | | flex-wrap: nowrap; |
| | | } |
| | | |
| | | .top-left { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | height: 180px; |
| | | flex: 0 0 320px; |
| | | min-width: 280px; |
| | | } |
| | | |
| | | .data-cards { |
| | | flex: 1 1 auto; |
| | | min-width: 0; |
| | | display: flex; |
| | | gap: 16px; |
| | | justify-content: flex-start; |
| | | background: #ffffff; |
| | | border-radius: 12px; |
| | | padding: 20px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .todo-panel { |
| | | background: #fff; |
| | | border-radius: 12px; |
| | | padding: 20px; |
| | | height: 180px; |
| | | flex: 0 0 360px; |
| | | min-width: 320px; |
| | | } |
| | | |
| | | .welcome-banner { |
| | | padding: 12px 14px; |
| | | background: linear-gradient(135deg, rgba(229, 240, 255, 0.95), rgba(214, 232, 255, 0.75), rgba(207, 236, 255, 0.95)); |
| | | display: flex; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | gap: 4px; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .welcome-title { |
| | | flex: 1 1 auto; |
| | | min-width: 0; |
| | | font-size: 12px; |
| | | font-weight: bolder; |
| | | color: #222; |
| | | line-height: 1.3; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .welcome-time { |
| | | flex: 0 0 auto; |
| | | margin-top: 0; |
| | | font-size: 8px; |
| | | font-weight: bold; |
| | | color: rgba(0, 0, 0, 0.55); |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .company-info { |
| | | padding: 0; |
| | | overflow: hidden; |
| | | border-radius: 12px; |
| | | background: #fff; |
| | | height: 100%; |
| | | } |
| | | |
| | | .welcome-banner { |
| | | padding: 10px 10px; |
| | | background: linear-gradient(135deg, rgba(229, 240, 255, 0.9), rgba(214, 232, 255, 0.7), rgba(207, 236, 255, 0.9)); |
| | | } |
| | | |
| | | .welcome-title { |
| | | font-size: 18px; |
| | | font-weight: 700; |
| | | color: #222; |
| | | line-height: 1.3; |
| | | } |
| | | |
| | | .welcome-user { |
| | | margin-right: 6px; |
| | | } |
| | | |
| | | .welcome-time { |
| | | margin-top: 10px; |
| | | font-size: 16px; |
| | | color: rgba(0, 0, 0, 0.55); |
| | | } |
| | | |
| | | .user-card { |
| | |
| | | flex: 0 0 auto; |
| | | } |
| | | .data-cards { |
| | | width: 50%; |
| | | display: flex; |
| | | gap: 16px; |
| | | justify-content: flex-start; |
| | |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | height: 180px; |
| | | width: 20%; |
| | | flex: 0 0 320px; |
| | | min-width: 280px; |
| | | } |
| | | .todo-panel { |
| | | background: #fff; |
| | | border-radius: 12px; |
| | | padding: 20px; |
| | | height: 180px; |
| | | width: 30%; |
| | | flex: 0 0 360px; |
| | | min-width: 320px; |
| | | } |
| | | .todo-list { |
| | | height: 100px; |
| | |
| | | min-width: 220px; |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 1280px) { |
| | | .dashboard-top { |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .top-left { |
| | | flex: 1 1 320px; |
| | | } |
| | | |
| | | .data-cards { |
| | | flex: 1 1 560px; |
| | | } |
| | | |
| | | .todo-panel { |
| | | flex: 1 1 320px; |
| | | min-width: 280px; |
| | | height: auto; |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 768px) { |
| | | .dashboard { |
| | | padding: 12px; |
| | | } |
| | | |
| | | .dashboard-top { |
| | | flex-direction: column; |
| | | align-items: stretch; |
| | | } |
| | | |
| | | .top-left, |
| | | .data-cards, |
| | | .todo-panel { |
| | | width: 100%; |
| | | flex: 1 1 auto; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .top-left { |
| | | height: auto; |
| | | } |
| | | |
| | | .data-cards { |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .data-card { |
| | | width: calc(50% - 8px); |
| | | min-width: 160px; |
| | | } |
| | | |
| | | .welcome-banner { |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | |
| | | } |
| | | |
| | | .welcome-title { |
| | | white-space: normal; |
| | | } |
| | | } |
| | | </style> |