style(page): 调整数据抓取页面UI布局和样式
- 增大主容器间距和内边距,提升视觉层次感 - 扩大标题字体大小,增强可读性 - 调整表单网格间距和内边距,优化布局紧凑度 - 增加平台选择下拉框宽度,改善用户体验 - 修改日期选择器默认值和宽度,便于操作 - 增大按钮间距和内边距,提升触控友好性 - 扩大场景窗口尺寸,提供更宽敞的操作空间
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
package com.fantaibao.page;
|
package com.fantaibao.page;
|
||||||
|
|
||||||
|
import com.fantaibao.page.PlatformSelectionView;
|
||||||
import javafx.geometry.Insets;
|
import javafx.geometry.Insets;
|
||||||
import javafx.geometry.Pos;
|
import javafx.geometry.Pos;
|
||||||
import javafx.scene.Scene;
|
import javafx.scene.Scene;
|
||||||
@@ -32,20 +33,20 @@ public class DataCrawlView {
|
|||||||
// 创建主容器
|
// 创建主容器
|
||||||
VBox root = new VBox();
|
VBox root = new VBox();
|
||||||
root.setAlignment(Pos.CENTER);
|
root.setAlignment(Pos.CENTER);
|
||||||
root.setSpacing(20);
|
root.setSpacing(30);
|
||||||
root.setPadding(new Insets(30));
|
root.setPadding(new Insets(40));
|
||||||
root.setStyle("-fx-background-color: #f5f5f5;");
|
root.setStyle("-fx-background-color: #f5f5f5;");
|
||||||
|
|
||||||
// 标题
|
// 标题
|
||||||
Label titleLabel = new Label("数据抓取配置");
|
Label titleLabel = new Label("数据抓取配置");
|
||||||
titleLabel.setStyle("-fx-font-size: 24px; -fx-font-weight: bold; -fx-text-fill: #333333;");
|
titleLabel.setStyle("-fx-font-size: 28px; -fx-font-weight: bold; -fx-text-fill: #333333;");
|
||||||
|
|
||||||
// 创建表单容器
|
// 创建表单容器
|
||||||
GridPane formPane = new GridPane();
|
GridPane formPane = new GridPane();
|
||||||
formPane.setAlignment(Pos.CENTER);
|
formPane.setAlignment(Pos.CENTER);
|
||||||
formPane.setHgap(15);
|
formPane.setHgap(20);
|
||||||
formPane.setVgap(20);
|
formPane.setVgap(25);
|
||||||
formPane.setPadding(new Insets(20));
|
formPane.setPadding(new Insets(30));
|
||||||
formPane.setStyle("-fx-background-color: white; -fx-border-radius: 10px; -fx-background-radius: 10px; " +
|
formPane.setStyle("-fx-background-color: white; -fx-border-radius: 10px; -fx-background-radius: 10px; " +
|
||||||
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 10, 0, 0, 0);");
|
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 10, 0, 0, 0);");
|
||||||
|
|
||||||
@@ -56,7 +57,7 @@ public class DataCrawlView {
|
|||||||
platformComboBox = new ComboBox<>();
|
platformComboBox = new ComboBox<>();
|
||||||
platformComboBox.getItems().addAll("美团", "大众点评");
|
platformComboBox.getItems().addAll("美团", "大众点评");
|
||||||
platformComboBox.setValue("美团");
|
platformComboBox.setValue("美团");
|
||||||
platformComboBox.setPrefWidth(200);
|
platformComboBox.setPrefWidth(250);
|
||||||
platformComboBox.setStyle("-fx-font-size: 14px;");
|
platformComboBox.setStyle("-fx-font-size: 14px;");
|
||||||
|
|
||||||
// 开始时间选择
|
// 开始时间选择
|
||||||
@@ -64,8 +65,8 @@ public class DataCrawlView {
|
|||||||
startDateLabel.setStyle("-fx-font-size: 14px; -fx-text-fill: #333333;");
|
startDateLabel.setStyle("-fx-font-size: 14px; -fx-text-fill: #333333;");
|
||||||
|
|
||||||
startDatePicker = new DatePicker();
|
startDatePicker = new DatePicker();
|
||||||
startDatePicker.setValue(LocalDate.now().minusDays(7)); // 默认一周前
|
startDatePicker.setValue(LocalDate.now().minusDays(10)); // 默认10天前
|
||||||
startDatePicker.setPrefWidth(200);
|
startDatePicker.setPrefWidth(250);
|
||||||
startDatePicker.setStyle("-fx-font-size: 14px;");
|
startDatePicker.setStyle("-fx-font-size: 14px;");
|
||||||
|
|
||||||
// 结束时间选择
|
// 结束时间选择
|
||||||
@@ -73,8 +74,8 @@ public class DataCrawlView {
|
|||||||
endDateLabel.setStyle("-fx-font-size: 14px; -fx-text-fill: #333333;");
|
endDateLabel.setStyle("-fx-font-size: 14px; -fx-text-fill: #333333;");
|
||||||
|
|
||||||
endDatePicker = new DatePicker();
|
endDatePicker = new DatePicker();
|
||||||
endDatePicker.setValue(LocalDate.now()); // 默认今天
|
endDatePicker.setValue(LocalDate.now().minusDays(1)); // 默认昨天
|
||||||
endDatePicker.setPrefWidth(200);
|
endDatePicker.setPrefWidth(250);
|
||||||
endDatePicker.setStyle("-fx-font-size: 14px;");
|
endDatePicker.setStyle("-fx-font-size: 14px;");
|
||||||
|
|
||||||
// 添加到表单
|
// 添加到表单
|
||||||
@@ -88,39 +89,39 @@ public class DataCrawlView {
|
|||||||
// 按钮区域
|
// 按钮区域
|
||||||
HBox buttonBox = new HBox();
|
HBox buttonBox = new HBox();
|
||||||
buttonBox.setAlignment(Pos.CENTER);
|
buttonBox.setAlignment(Pos.CENTER);
|
||||||
buttonBox.setSpacing(20);
|
buttonBox.setSpacing(30);
|
||||||
|
|
||||||
// 返回按钮
|
// 返回按钮
|
||||||
Button backButton = new Button("返回");
|
Button backButton = new Button("返回");
|
||||||
backButton.setStyle("-fx-background-color: #cccccc; -fx-text-fill: #333333; " +
|
backButton.setStyle("-fx-background-color: #cccccc; -fx-text-fill: #333333; " +
|
||||||
"-fx-font-size: 16px; -fx-font-weight: bold; -fx-padding: 12px 36px; " +
|
"-fx-font-size: 16px; -fx-font-weight: bold; -fx-padding: 15px 40px; " +
|
||||||
"-fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
"-fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
||||||
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);");
|
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);");
|
||||||
backButton.setCursor(javafx.scene.Cursor.HAND);
|
backButton.setCursor(javafx.scene.Cursor.HAND);
|
||||||
backButton.setOnMouseEntered(e -> backButton.setStyle("-fx-background-color: #bbbbbb; " +
|
backButton.setOnMouseEntered(e -> backButton.setStyle("-fx-background-color: #bbbbbb; " +
|
||||||
"-fx-text-fill: #333333; -fx-font-size: 16px; -fx-font-weight: bold; " +
|
"-fx-text-fill: #333333; -fx-font-size: 16px; -fx-font-weight: bold; " +
|
||||||
"-fx-padding: 12px 36px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
"-fx-padding: 15px 40px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
||||||
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0, 0, 0);"));
|
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0, 0, 0);"));
|
||||||
backButton.setOnMouseExited(e -> backButton.setStyle("-fx-background-color: #cccccc; " +
|
backButton.setOnMouseExited(e -> backButton.setStyle("-fx-background-color: #cccccc; " +
|
||||||
"-fx-text-fill: #333333; -fx-font-size: 16px; -fx-font-weight: bold; " +
|
"-fx-text-fill: #333333; -fx-font-size: 16px; -fx-font-weight: bold; " +
|
||||||
"-fx-padding: 12px 36px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
"-fx-padding: 15px 40px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
||||||
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);"));
|
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);"));
|
||||||
backButton.setOnAction(e -> handleBackAction());
|
backButton.setOnAction(e -> handleBackAction());
|
||||||
|
|
||||||
// 开始抓取按钮
|
// 开始抓取按钮
|
||||||
crawlButton = new Button("开始抓取");
|
crawlButton = new Button("开始抓取");
|
||||||
crawlButton.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white; " +
|
crawlButton.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white; " +
|
||||||
"-fx-font-size: 16px; -fx-font-weight: bold; -fx-padding: 12px 36px; " +
|
"-fx-font-size: 16px; -fx-font-weight: bold; -fx-padding: 15px 40px; " +
|
||||||
"-fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
"-fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
||||||
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);");
|
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);");
|
||||||
crawlButton.setCursor(javafx.scene.Cursor.HAND);
|
crawlButton.setCursor(javafx.scene.Cursor.HAND);
|
||||||
crawlButton.setOnMouseEntered(e -> crawlButton.setStyle("-fx-background-color: #45a049; " +
|
crawlButton.setOnMouseEntered(e -> crawlButton.setStyle("-fx-background-color: #45a049; " +
|
||||||
"-fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold; " +
|
"-fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold; " +
|
||||||
"-fx-padding: 12px 36px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
"-fx-padding: 15px 40px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
||||||
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0, 0, 0);"));
|
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0, 0, 0);"));
|
||||||
crawlButton.setOnMouseExited(e -> crawlButton.setStyle("-fx-background-color: #4CAF50; " +
|
crawlButton.setOnMouseExited(e -> crawlButton.setStyle("-fx-background-color: #4CAF50; " +
|
||||||
"-fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold; " +
|
"-fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold; " +
|
||||||
"-fx-padding: 12px 36px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
"-fx-padding: 15px 40px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
|
||||||
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);"));
|
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);"));
|
||||||
|
|
||||||
// 为按钮添加点击事件
|
// 为按钮添加点击事件
|
||||||
@@ -133,7 +134,7 @@ public class DataCrawlView {
|
|||||||
root.getChildren().addAll(titleLabel, formPane, buttonBox);
|
root.getChildren().addAll(titleLabel, formPane, buttonBox);
|
||||||
|
|
||||||
// 设置场景并显示窗口
|
// 设置场景并显示窗口
|
||||||
Scene scene = new Scene(root, 500, 450);
|
Scene scene = new Scene(root, 800, 600);
|
||||||
primaryStage.setScene(scene);
|
primaryStage.setScene(scene);
|
||||||
primaryStage.show();
|
primaryStage.show();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user