| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- /* 这三个 tailwind指令告诉 Tailwind CSS 注入三类样式: */
- /* 基础样式重置(如 margin、padding 的默认值)*/
- @tailwind base;
- /* 组件样式(如按钮、输入框等)*/
- @tailwind components;
- /* 工具类样式(如 bg-blue-500、flex、p-4 等)*/
- @tailwind utilities;
- body {
- /* min-height: 1024px; */
- font-family: ui-sans-serif, system-ui, sans-serif;
- }
- .circle-button {
- width: 120px;
- height: 120px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- transition: all 0.3s ease;
- }
- .circle-button:hover {
- transform: translateY(-5px);
- box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
- }
- .circle-button i {
- font-size: 32px;
- margin-bottom: 8px;
- }
- .circle-button span {
- font-weight: 500;
- }
- .user-info {
- background-color: #f9fafb;
- padding: 8px 16px;
- border-radius: 9999px;
- display: flex;
- align-items: center;
- }
- .action-btn {
- padding: 8px 16px;
- border-radius: 9999px;
- font-weight: 500;
- transition: all 0.2s ease;
- }
- .action-btn:hover {
- opacity: 0.9;
- }
|