commit

assets/css/style.css

@@ -0,0 +1,165 @@
+/* 后台样式 */
+.flm-admin-container {
+    display: flex;
+    gap: 2rem;
+    margin-top: 20px;
+}
+
+.flm-add-form {
+    flex: 1;
+    max-width: 400px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 4px;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+}
+
+.flm-links-list {
+    flex: 2;
+    background: #fff;
+    padding: 20px;
+    border-radius: 4px;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
+.form-group input[type="text"],
+.form-group input[type="url"] {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+#flm-sortable-links {
+    list-style: none;
+    padding: 0;
+    margin: 20px 0;
+}
+
+.flm-link-item {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 15px;
+    margin-bottom: 15px;
+    background: #f9f9f9;
+    border-radius: 4px;
+    border-left: 4px solid #6667ab;
+}
+
+.flm-link-preview {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 200px;
+}
+
+.flm-link-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.flm-link-fields {
+    flex: 1;
+}
+
+.flm-link-actions {
+    min-width: 100px;
+}
+
+.flm-import-export {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid #eee;
+}
+
+.flm-import-export h3 {
+    margin-bottom: 15px;
+}
+
+.flm-export, .flm-import {
+    margin-bottom: 15px;
+}
+
+/* 前端展示样式 */
+.flm-links-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    margin: 20px 0;
+}
+
+.flm-link-card {
+    border: 1px solid #6667ab;
+    border-radius: 14px;
+    padding: 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.flm-link-card:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    transform: translateY(-2px);
+}
+
+.flm-link-icon-container {
+    margin-bottom: 10px;
+}
+
+.flm-link-icon-container img {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid #eee;
+}
+
+.flm-link-name {
+    font-weight: bold;
+    color: inherit; /* 使用主题默认颜色 */
+    margin-top: 10px;
+}
+
+.flm-link-card a {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+    .flm-links-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 600px) {
+    .flm-admin-container {
+        flex-direction: column;
+    }
+    
+    .flm-add-form {
+        max-width: 100%;
+    }
+    
+    .flm-links-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .flm-link-item {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}