| | |
|---|
| | | padding: 18px; |
|---|
| | | width: 100%; |
|---|
| | | height: 420px; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 面板角落装饰 */ |
|---|
| | | .panel-item-customers::before, |
|---|
| | | .panel-item-customers::after { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | width: 15px; |
|---|
| | | height: 15px; |
|---|
| | | border-color: rgba(0, 212, 255, 0.5); |
|---|
| | | border-style: solid; |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .panel-item-customers::before { |
|---|
| | | top: -1px; |
|---|
| | | left: -1px; |
|---|
| | | border-width: 2px 0 0 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .panel-item-customers::after { |
|---|
| | | bottom: -1px; |
|---|
| | | right: -1px; |
|---|
| | | border-width: 0 2px 2px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pie-chart-wrapper { |
|---|
| | |
|---|
| | | width: 100%; |
|---|
| | | height: 320px; |
|---|
| | | background: transparent; |
|---|
| | | animation: pieFloat 4s ease-in-out infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes pieFloat { |
|---|
| | | 0%, 100% { transform: translateY(0); } |
|---|
| | | 50% { transform: translateY(-3px); } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pie-background { |
|---|
| | |
|---|
| | | left: 50%; |
|---|
| | | top: 50%; |
|---|
| | | transform: translate(-51.5%, -39%); |
|---|
| | | animation: pieBgRotate 30s linear infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes pieBgRotate { |
|---|
| | | from { transform: translate(-51.5%, -39%) rotate(0deg); } |
|---|
| | | to { transform: translate(-51.5%, -39%) rotate(360deg); } |
|---|
| | | } |
|---|
| | | </style> |
|---|
