|
|
@@ -1,137 +1,114 @@
|
|
|
-body {
|
|
|
- font-family: Arial, sans-serif;
|
|
|
- background-color: #f4f4f9;
|
|
|
+/* 全局样式 */
|
|
|
+* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'Microsoft YaHei', sans-serif;
|
|
|
}
|
|
|
-.container {
|
|
|
- max-width: 800px;
|
|
|
- margin: 50px auto;
|
|
|
+
|
|
|
+body {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ min-height: 100vh;
|
|
|
padding: 20px;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 8px;
|
|
|
}
|
|
|
+
|
|
|
+.container {
|
|
|
+ max-width: 1000px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 30px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 15px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 标题样式 */
|
|
|
h1 {
|
|
|
+ color: #2c3e50;
|
|
|
text-align: center;
|
|
|
- color: #333;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ font-size: 2.2em;
|
|
|
}
|
|
|
-.search-bar {
|
|
|
- width: calc(100% - 22px);
|
|
|
- padding: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
-.button {
|
|
|
- padding: 10px 20px;
|
|
|
- margin: 5px;
|
|
|
- background-color: #007bff;
|
|
|
- color: #fff;
|
|
|
- border: none;
|
|
|
- border-radius: 4px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.button:hover {
|
|
|
- background-color: #0056b3;
|
|
|
-}
|
|
|
-.result {
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-.pagination {
|
|
|
+
|
|
|
+/* 搜索表单样式 */
|
|
|
+#searchForm {
|
|
|
display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ margin-bottom: 30px;
|
|
|
justify-content: center;
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-.page-item {
|
|
|
- margin: 0 5px;
|
|
|
- cursor: pointer;
|
|
|
- color: #007bff;
|
|
|
}
|
|
|
-.page-item.active {
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
+
|
|
|
+.search-bar {
|
|
|
+ padding: 12px 20px;
|
|
|
+ border: 2px solid #e0e0e0;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 300px;
|
|
|
+ font-size: 16px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
-/* 查询结果表格样式 */
|
|
|
-.result table {
|
|
|
- width: 100%;
|
|
|
- border-collapse: collapse;
|
|
|
- margin-top: 20px;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
|
+.search-bar:focus {
|
|
|
+ border-color: #3498db;
|
|
|
+ outline: none;
|
|
|
+ box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
|
|
|
}
|
|
|
|
|
|
-.result th, .result td {
|
|
|
- padding: 12px;
|
|
|
- text-align: left;
|
|
|
- border-bottom: 1px solid #ddd;
|
|
|
+.button {
|
|
|
+ padding: 12px 25px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ color: white;
|
|
|
}
|
|
|
|
|
|
-.result th {
|
|
|
- background-color: #f5f5f5;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
+button[onclick="searchDebt()"] {
|
|
|
+ background-color: #3498db;
|
|
|
}
|
|
|
|
|
|
-.result tr:hover {
|
|
|
- background-color: #f9f9f9;
|
|
|
+button[onclick="searchDebt()"]:hover {
|
|
|
+ background-color: #2980b9;
|
|
|
}
|
|
|
|
|
|
-/* 空结果样式 */
|
|
|
-.no-result {
|
|
|
- padding: 20px;
|
|
|
- text-align: center;
|
|
|
- color: #666;
|
|
|
- background-color: #f9f9f9;
|
|
|
- border-radius: 4px;
|
|
|
- margin-top: 20px;
|
|
|
+#addRecordBtn {
|
|
|
+ background-color: #2ecc71;
|
|
|
}
|
|
|
|
|
|
-/* 错误消息样式 */
|
|
|
-.error-message {
|
|
|
- padding: 10px;
|
|
|
- color: #721c24;
|
|
|
- background-color: #f8d7da;
|
|
|
- border: 1px solid #f5c6cb;
|
|
|
- border-radius: 4px;
|
|
|
- margin-top: 20px;
|
|
|
+#addRecordBtn:hover {
|
|
|
+ background-color: #27ae60;
|
|
|
}
|
|
|
|
|
|
-/* 搜索结果容器 */
|
|
|
+/* 搜索结果样式 */
|
|
|
.search-result {
|
|
|
- max-width: 800px;
|
|
|
- margin: 20px auto;
|
|
|
+ background: white;
|
|
|
+ border-radius: 10px;
|
|
|
padding: 20px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
-/* 结果头部样式 */
|
|
|
.result-header {
|
|
|
- border-bottom: 2px solid #eee;
|
|
|
+ border-bottom: 2px solid #f0f0f0;
|
|
|
padding-bottom: 15px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.debtor-name {
|
|
|
- color: #333;
|
|
|
- font-size: 24px;
|
|
|
- margin: 0 0 10px 0;
|
|
|
+ color: #2c3e50;
|
|
|
+ font-size: 1.8em;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.remaining-debt {
|
|
|
- font-size: 18px;
|
|
|
- color: #666;
|
|
|
+ font-size: 1.2em;
|
|
|
+ color: #7f8c8d;
|
|
|
}
|
|
|
|
|
|
-.remaining-debt .amount {
|
|
|
+.amount {
|
|
|
color: #e74c3c;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
-/* 还款记录部分 */
|
|
|
+/* 还款记录样式 */
|
|
|
.repayment-section h3 {
|
|
|
color: #2c3e50;
|
|
|
margin-bottom: 15px;
|
|
|
@@ -144,64 +121,98 @@ h1 {
|
|
|
}
|
|
|
|
|
|
.repayment-item {
|
|
|
- padding: 15px;
|
|
|
background: #f8f9fa;
|
|
|
- border-radius: 6px;
|
|
|
- border-left: 4px solid #3498db;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 15px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.repayment-item:hover {
|
|
|
+ transform: translateX(5px);
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.repayment-date {
|
|
|
- color: #666;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 8px;
|
|
|
+ color: #34495e;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.repayment-details {
|
|
|
display: grid;
|
|
|
- gap: 8px;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
+ gap: 10px;
|
|
|
}
|
|
|
|
|
|
.label {
|
|
|
- color: #666;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.repayment-amount {
|
|
|
- color: #27ae60;
|
|
|
- font-weight: bold;
|
|
|
+ color: #7f8c8d;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-/* 无记录提示 */
|
|
|
-.no-repayments, .no-result, .no-input {
|
|
|
+/* 错误提示样式 */
|
|
|
+.no-result, .no-input {
|
|
|
text-align: center;
|
|
|
- padding: 20px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 6px;
|
|
|
- color: #666;
|
|
|
+ padding: 30px;
|
|
|
+ color: #7f8c8d;
|
|
|
+ font-size: 1.1em;
|
|
|
}
|
|
|
|
|
|
-.no-result, .no-input {
|
|
|
- margin: 20px auto;
|
|
|
- max-width: 400px;
|
|
|
+.no-result i, .no-input i {
|
|
|
+ font-size: 2em;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #e74c3c;
|
|
|
}
|
|
|
|
|
|
-/* 图标样式 */
|
|
|
-.fas {
|
|
|
- margin-right: 8px;
|
|
|
+/* 新增记录表单样式 */
|
|
|
+form {
|
|
|
+ max-width: 500px;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
-/* 为表单添加样式 */
|
|
|
-#searchForm {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
+form label {
|
|
|
+ display: block;
|
|
|
margin-bottom: 20px;
|
|
|
+ color: #2c3e50;
|
|
|
}
|
|
|
|
|
|
-/* 为按钮添加不同状态 */
|
|
|
-#addRecordBtn {
|
|
|
- background-color: #28a745; /* 区分普通查询按钮 */
|
|
|
+form input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ border: 2px solid #e0e0e0;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
|
|
|
-#addRecordBtn:hover {
|
|
|
- background-color: #218838;
|
|
|
+form input:focus {
|
|
|
+ border-color: #3498db;
|
|
|
+ outline: none;
|
|
|
+ box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+form button[type="submit"] {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ background-color: #3498db;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+form button[type="submit"]:hover {
|
|
|
+ background-color: #2980b9;
|
|
|
+}
|
|
|
+
|
|
|
+/* 添加返回按钮样式 */
|
|
|
+a.button {
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #95a5a6;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+a.button:hover {
|
|
|
+ background-color: #7f8c8d;
|
|
|
}
|
