封装公共组件，调整样式文件的布局，修改路由页面样式

2025-03-27 19:58:58 +08:00
parent d9b9ce4676
commit 540618b8ca
33 changed files with 2613 additions and 987 deletions
@@ -0,0 +1,80 @@
+/**
+ * 搜索框组件样式
+ */
+
+/* 搜索框容器 */
+.search-box {
+  @apply relative;
+}
+
+/* 搜索框与按钮并排显示 */
+.search-box-row {
+  @apply flex items-center;
+}
+
+.search-box-row .form-input {
+  @apply rounded-r-none;
+}
+
+.search-box-row .search-button {
+  @apply rounded-l-none h-full flex items-center;
+}
+
+/* 搜索输入框 */
+.form-input {
+  @apply w-full py-2 px-4 border border-gray-200 rounded-md text-sm
+         focus:outline-none focus:ring-1 focus:ring-[#00684a] focus:border-[#00684a]
+         placeholder-gray-400 transition-all duration-200;
+}
+
+/* 搜索按钮 */
+.search-button {
+  @apply bg-[#00684a] text-white px-3 py-2 rounded-md border border-[#00684a];
+}
+
+.search-button:hover {
+  @apply bg-[#005a3f] border-[#005a3f];
+}
+
+.search-button i {
+  @apply mr-1;
+}
+
+/* 仅图标按钮样式 */
+.icon-only-btn {
+  @apply px-2;
+}
+
+.icon-only-btn i {
+  @apply mr-0;
+}
+
+/* 搜索框大小 */
+.search-box-sm .form-input {
+  @apply py-1.5 text-sm;
+}
+
+.search-box-lg .form-input {
+  @apply py-2.5 text-base;
+}
+
+/* 搜索图标 */
+.search-box-icon {
+  @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
+}
+
+/* 清除按钮 */
+.search-box-clear {
+  @apply absolute right-3 top-1/2 transform -translate-y-1/2 
+         text-gray-400 hover:text-gray-600 cursor-pointer transition-colors duration-200;
+}
+
+/* 带边框的搜索框 */
+.search-box-bordered {
+  @apply shadow-sm;
+}
+
+/* 搜索框禁用状态 */
+.form-input:disabled {
+  @apply bg-gray-100 cursor-not-allowed opacity-70;
+}