format code

底部信息展示栏响应式
卡片展示响应式
2024-01-04 18:58:46 +08:00 · 2024-01-04 01:19:19 +08:00 · 2024-01-04 01:18:55 +08:00 · 2024-01-04 01:18:40 +08:00 · 2024-01-04 01:18:24 +08:00 · 2024-01-04 01:18:05 +08:00
25 changed files with 1041 additions and 389 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,579 @@
+[*]
+charset = utf-8
+end_of_line = crlf
+indent_size = 4
+indent_style = space
+insert_final_newline = false
+max_line_length = 120
+tab_width = 4
+ij_continuation_indent_size = 8
+ij_formatter_off_tag = @formatter:off
+ij_formatter_on_tag = @formatter:on
+ij_formatter_tags_enabled = true
+ij_smart_tabs = false
+ij_visual_guides = 
+ij_wrap_on_typing = false
+
+[*.css]
+ij_css_align_closing_brace_with_properties = false
+ij_css_blank_lines_around_nested_selector = 1
+ij_css_blank_lines_between_blocks = 1
+ij_css_block_comment_add_space = false
+ij_css_brace_placement = end_of_line
+ij_css_enforce_quotes_on_format = false
+ij_css_hex_color_long_format = false
+ij_css_hex_color_lower_case = false
+ij_css_hex_color_short_format = false
+ij_css_hex_color_upper_case = false
+ij_css_keep_blank_lines_in_code = 2
+ij_css_keep_indents_on_empty_lines = false
+ij_css_keep_single_line_blocks = false
+ij_css_space_after_colon = true
+ij_css_space_before_opening_brace = true
+ij_css_use_double_quotes = true
+ij_css_value_alignment = do_not_align
+
+[*.feature]
+indent_size = 2
+ij_gherkin_keep_indents_on_empty_lines = false
+
+[*.less]
+indent_size = 2
+ij_less_align_closing_brace_with_properties = false
+ij_less_blank_lines_around_nested_selector = 1
+ij_less_blank_lines_between_blocks = 1
+ij_less_block_comment_add_space = false
+ij_less_brace_placement = 0
+ij_less_enforce_quotes_on_format = false
+ij_less_hex_color_long_format = false
+ij_less_hex_color_lower_case = false
+ij_less_hex_color_short_format = false
+ij_less_hex_color_upper_case = false
+ij_less_keep_blank_lines_in_code = 2
+ij_less_keep_indents_on_empty_lines = false
+ij_less_keep_single_line_blocks = false
+ij_less_line_comment_add_space = false
+ij_less_line_comment_at_first_column = false
+ij_less_space_after_colon = true
+ij_less_space_before_opening_brace = true
+ij_less_use_double_quotes = true
+ij_less_value_alignment = 0
+
+[*.sass]
+indent_size = 2
+ij_sass_align_closing_brace_with_properties = false
+ij_sass_blank_lines_around_nested_selector = 1
+ij_sass_blank_lines_between_blocks = 1
+ij_sass_brace_placement = 0
+ij_sass_enforce_quotes_on_format = false
+ij_sass_hex_color_long_format = false
+ij_sass_hex_color_lower_case = false
+ij_sass_hex_color_short_format = false
+ij_sass_hex_color_upper_case = false
+ij_sass_keep_blank_lines_in_code = 2
+ij_sass_keep_indents_on_empty_lines = false
+ij_sass_keep_single_line_blocks = false
+ij_sass_line_comment_add_space = false
+ij_sass_line_comment_at_first_column = false
+ij_sass_space_after_colon = true
+ij_sass_space_before_opening_brace = true
+ij_sass_use_double_quotes = true
+ij_sass_value_alignment = 0
+
+[*.scss]
+indent_size = 2
+ij_scss_align_closing_brace_with_properties = false
+ij_scss_blank_lines_around_nested_selector = 1
+ij_scss_blank_lines_between_blocks = 1
+ij_scss_block_comment_add_space = false
+ij_scss_brace_placement = 0
+ij_scss_enforce_quotes_on_format = false
+ij_scss_hex_color_long_format = false
+ij_scss_hex_color_lower_case = false
+ij_scss_hex_color_short_format = false
+ij_scss_hex_color_upper_case = false
+ij_scss_keep_blank_lines_in_code = 2
+ij_scss_keep_indents_on_empty_lines = false
+ij_scss_keep_single_line_blocks = false
+ij_scss_line_comment_add_space = false
+ij_scss_line_comment_at_first_column = false
+ij_scss_space_after_colon = true
+ij_scss_space_before_opening_brace = true
+ij_scss_use_double_quotes = true
+ij_scss_value_alignment = 0
+
+[*.vue]
+indent_size = 2
+tab_width = 2
+ij_continuation_indent_size = 4
+ij_vue_indent_children_of_top_level = template
+ij_vue_interpolation_new_line_after_start_delimiter = true
+ij_vue_interpolation_new_line_before_end_delimiter = true
+ij_vue_interpolation_wrap = off
+ij_vue_keep_indents_on_empty_lines = false
+ij_vue_spaces_within_interpolation_expressions = true
+
+[.editorconfig]
+ij_editorconfig_align_group_field_declarations = false
+ij_editorconfig_space_after_colon = false
+ij_editorconfig_space_after_comma = true
+ij_editorconfig_space_before_colon = false
+ij_editorconfig_space_before_comma = false
+ij_editorconfig_spaces_around_assignment_operators = true
+
+[{*.ant,*.fxml,*.jhm,*.jnlp,*.jrxml,*.rng,*.tld,*.wsdl,*.xml,*.xsd,*.xsl,*.xslt,*.xul}]
+ij_xml_align_attributes = true
+ij_xml_align_text = false
+ij_xml_attribute_wrap = normal
+ij_xml_block_comment_add_space = false
+ij_xml_block_comment_at_first_column = true
+ij_xml_keep_blank_lines = 2
+ij_xml_keep_indents_on_empty_lines = false
+ij_xml_keep_line_breaks = true
+ij_xml_keep_line_breaks_in_text = true
+ij_xml_keep_whitespaces = false
+ij_xml_keep_whitespaces_around_cdata = preserve
+ij_xml_keep_whitespaces_inside_cdata = false
+ij_xml_line_comment_at_first_column = true
+ij_xml_space_after_tag_name = false
+ij_xml_space_around_equals_in_attribute = false
+ij_xml_space_inside_empty_tag = false
+ij_xml_text_wrap = normal
+
+[{*.ats,*.cts,*.mts,*.ts}]
+ij_continuation_indent_size = 4
+ij_typescript_align_imports = false
+ij_typescript_align_multiline_array_initializer_expression = false
+ij_typescript_align_multiline_binary_operation = false
+ij_typescript_align_multiline_chained_methods = false
+ij_typescript_align_multiline_extends_list = false
+ij_typescript_align_multiline_for = true
+ij_typescript_align_multiline_parameters = true
+ij_typescript_align_multiline_parameters_in_calls = false
+ij_typescript_align_multiline_ternary_operation = false
+ij_typescript_align_object_properties = 0
+ij_typescript_align_union_types = false
+ij_typescript_align_var_statements = 0
+ij_typescript_array_initializer_new_line_after_left_brace = false
+ij_typescript_array_initializer_right_brace_on_new_line = false
+ij_typescript_array_initializer_wrap = off
+ij_typescript_assignment_wrap = off
+ij_typescript_binary_operation_sign_on_next_line = false
+ij_typescript_binary_operation_wrap = off
+ij_typescript_blacklist_imports = rxjs/Rx,node_modules/**,**/node_modules/**,@angular/material,@angular/material/typings/**
+ij_typescript_blank_lines_after_imports = 1
+ij_typescript_blank_lines_around_class = 1
+ij_typescript_blank_lines_around_field = 0
+ij_typescript_blank_lines_around_field_in_interface = 0
+ij_typescript_blank_lines_around_function = 1
+ij_typescript_blank_lines_around_method = 1
+ij_typescript_blank_lines_around_method_in_interface = 1
+ij_typescript_block_brace_style = end_of_line
+ij_typescript_block_comment_add_space = false
+ij_typescript_block_comment_at_first_column = true
+ij_typescript_call_parameters_new_line_after_left_paren = false
+ij_typescript_call_parameters_right_paren_on_new_line = false
+ij_typescript_call_parameters_wrap = off
+ij_typescript_catch_on_new_line = false
+ij_typescript_chained_call_dot_on_new_line = true
+ij_typescript_class_brace_style = end_of_line
+ij_typescript_comma_on_new_line = false
+ij_typescript_do_while_brace_force = never
+ij_typescript_else_on_new_line = false
+ij_typescript_enforce_trailing_comma = keep
+ij_typescript_enum_constants_wrap = on_every_item
+ij_typescript_extends_keyword_wrap = off
+ij_typescript_extends_list_wrap = off
+ij_typescript_field_prefix = _
+ij_typescript_file_name_style = relaxed
+ij_typescript_finally_on_new_line = false
+ij_typescript_for_brace_force = never
+ij_typescript_for_statement_new_line_after_left_paren = false
+ij_typescript_for_statement_right_paren_on_new_line = false
+ij_typescript_for_statement_wrap = off
+ij_typescript_force_quote_style = false
+ij_typescript_force_semicolon_style = false
+ij_typescript_function_expression_brace_style = end_of_line
+ij_typescript_if_brace_force = never
+ij_typescript_import_merge_members = global
+ij_typescript_import_prefer_absolute_path = global
+ij_typescript_import_sort_members = true
+ij_typescript_import_sort_module_name = false
+ij_typescript_import_use_node_resolution = true
+ij_typescript_imports_wrap = on_every_item
+ij_typescript_indent_case_from_switch = true
+ij_typescript_indent_chained_calls = true
+ij_typescript_indent_package_children = 0
+ij_typescript_jsdoc_include_types = false
+ij_typescript_jsx_attribute_value = braces
+ij_typescript_keep_blank_lines_in_code = 2
+ij_typescript_keep_first_column_comment = true
+ij_typescript_keep_indents_on_empty_lines = false
+ij_typescript_keep_line_breaks = true
+ij_typescript_keep_simple_blocks_in_one_line = false
+ij_typescript_keep_simple_methods_in_one_line = false
+ij_typescript_line_comment_add_space = true
+ij_typescript_line_comment_at_first_column = false
+ij_typescript_method_brace_style = end_of_line
+ij_typescript_method_call_chain_wrap = off
+ij_typescript_method_parameters_new_line_after_left_paren = false
+ij_typescript_method_parameters_right_paren_on_new_line = false
+ij_typescript_method_parameters_wrap = off
+ij_typescript_object_literal_wrap = on_every_item
+ij_typescript_object_types_wrap = on_every_item
+ij_typescript_parentheses_expression_new_line_after_left_paren = false
+ij_typescript_parentheses_expression_right_paren_on_new_line = false
+ij_typescript_place_assignment_sign_on_next_line = false
+ij_typescript_prefer_as_type_cast = false
+ij_typescript_prefer_explicit_types_function_expression_returns = false
+ij_typescript_prefer_explicit_types_function_returns = false
+ij_typescript_prefer_explicit_types_vars_fields = false
+ij_typescript_prefer_parameters_wrap = false
+ij_typescript_property_prefix = 
+ij_typescript_reformat_c_style_comments = false
+ij_typescript_space_after_colon = true
+ij_typescript_space_after_comma = true
+ij_typescript_space_after_dots_in_rest_parameter = false
+ij_typescript_space_after_generator_mult = true
+ij_typescript_space_after_property_colon = true
+ij_typescript_space_after_quest = true
+ij_typescript_space_after_type_colon = true
+ij_typescript_space_after_unary_not = false
+ij_typescript_space_before_async_arrow_lparen = true
+ij_typescript_space_before_catch_keyword = true
+ij_typescript_space_before_catch_left_brace = true
+ij_typescript_space_before_catch_parentheses = true
+ij_typescript_space_before_class_lbrace = true
+ij_typescript_space_before_class_left_brace = true
+ij_typescript_space_before_colon = true
+ij_typescript_space_before_comma = false
+ij_typescript_space_before_do_left_brace = true
+ij_typescript_space_before_else_keyword = true
+ij_typescript_space_before_else_left_brace = true
+ij_typescript_space_before_finally_keyword = true
+ij_typescript_space_before_finally_left_brace = true
+ij_typescript_space_before_for_left_brace = true
+ij_typescript_space_before_for_parentheses = true
+ij_typescript_space_before_for_semicolon = false
+ij_typescript_space_before_function_left_parenth = true
+ij_typescript_space_before_generator_mult = false
+ij_typescript_space_before_if_left_brace = true
+ij_typescript_space_before_if_parentheses = true
+ij_typescript_space_before_method_call_parentheses = false
+ij_typescript_space_before_method_left_brace = true
+ij_typescript_space_before_method_parentheses = false
+ij_typescript_space_before_property_colon = false
+ij_typescript_space_before_quest = true
+ij_typescript_space_before_switch_left_brace = true
+ij_typescript_space_before_switch_parentheses = true
+ij_typescript_space_before_try_left_brace = true
+ij_typescript_space_before_type_colon = false
+ij_typescript_space_before_unary_not = false
+ij_typescript_space_before_while_keyword = true
+ij_typescript_space_before_while_left_brace = true
+ij_typescript_space_before_while_parentheses = true
+ij_typescript_spaces_around_additive_operators = true
+ij_typescript_spaces_around_arrow_function_operator = true
+ij_typescript_spaces_around_assignment_operators = true
+ij_typescript_spaces_around_bitwise_operators = true
+ij_typescript_spaces_around_equality_operators = true
+ij_typescript_spaces_around_logical_operators = true
+ij_typescript_spaces_around_multiplicative_operators = true
+ij_typescript_spaces_around_relational_operators = true
+ij_typescript_spaces_around_shift_operators = true
+ij_typescript_spaces_around_unary_operator = false
+ij_typescript_spaces_within_array_initializer_brackets = false
+ij_typescript_spaces_within_brackets = false
+ij_typescript_spaces_within_catch_parentheses = false
+ij_typescript_spaces_within_for_parentheses = false
+ij_typescript_spaces_within_if_parentheses = false
+ij_typescript_spaces_within_imports = true
+ij_typescript_spaces_within_interpolation_expressions = false
+ij_typescript_spaces_within_method_call_parentheses = false
+ij_typescript_spaces_within_method_parentheses = false
+ij_typescript_spaces_within_object_literal_braces = false
+ij_typescript_spaces_within_object_type_braces = true
+ij_typescript_spaces_within_parentheses = false
+ij_typescript_spaces_within_switch_parentheses = false
+ij_typescript_spaces_within_type_assertion = false
+ij_typescript_spaces_within_union_types = true
+ij_typescript_spaces_within_while_parentheses = false
+ij_typescript_special_else_if_treatment = true
+ij_typescript_ternary_operation_signs_on_next_line = false
+ij_typescript_ternary_operation_wrap = off
+ij_typescript_union_types_wrap = on_every_item
+ij_typescript_use_chained_calls_group_indents = false
+ij_typescript_use_double_quotes = true
+ij_typescript_use_explicit_js_extension = auto
+ij_typescript_use_import_type = auto
+ij_typescript_use_path_mapping = always
+ij_typescript_use_public_modifier = false
+ij_typescript_use_semicolon_after_statement = true
+ij_typescript_var_declaration_wrap = normal
+ij_typescript_while_brace_force = never
+ij_typescript_while_on_new_line = false
+ij_typescript_wrap_comments = false
+
+[{*.bash,*.sh,*.zsh}]
+indent_size = 2
+tab_width = 2
+ij_shell_binary_ops_start_line = false
+ij_shell_keep_column_alignment_padding = false
+ij_shell_minify_program = false
+ij_shell_redirect_followed_by_space = false
+ij_shell_switch_cases_indented = false
+ij_shell_use_unix_line_separator = true
+
+[{*.cjs,*.js}]
+ij_continuation_indent_size = 4
+ij_javascript_align_imports = false
+ij_javascript_align_multiline_array_initializer_expression = false
+ij_javascript_align_multiline_binary_operation = false
+ij_javascript_align_multiline_chained_methods = false
+ij_javascript_align_multiline_extends_list = false
+ij_javascript_align_multiline_for = true
+ij_javascript_align_multiline_parameters = true
+ij_javascript_align_multiline_parameters_in_calls = false
+ij_javascript_align_multiline_ternary_operation = false
+ij_javascript_align_object_properties = 0
+ij_javascript_align_union_types = false
+ij_javascript_align_var_statements = 0
+ij_javascript_array_initializer_new_line_after_left_brace = false
+ij_javascript_array_initializer_right_brace_on_new_line = false
+ij_javascript_array_initializer_wrap = off
+ij_javascript_assignment_wrap = off
+ij_javascript_binary_operation_sign_on_next_line = false
+ij_javascript_binary_operation_wrap = off
+ij_javascript_blacklist_imports = rxjs/Rx,node_modules/**,**/node_modules/**,@angular/material,@angular/material/typings/**
+ij_javascript_blank_lines_after_imports = 1
+ij_javascript_blank_lines_around_class = 1
+ij_javascript_blank_lines_around_field = 0
+ij_javascript_blank_lines_around_function = 1
+ij_javascript_blank_lines_around_method = 1
+ij_javascript_block_brace_style = end_of_line
+ij_javascript_block_comment_add_space = false
+ij_javascript_block_comment_at_first_column = true
+ij_javascript_call_parameters_new_line_after_left_paren = false
+ij_javascript_call_parameters_right_paren_on_new_line = false
+ij_javascript_call_parameters_wrap = off
+ij_javascript_catch_on_new_line = false
+ij_javascript_chained_call_dot_on_new_line = true
+ij_javascript_class_brace_style = end_of_line
+ij_javascript_comma_on_new_line = false
+ij_javascript_do_while_brace_force = never
+ij_javascript_else_on_new_line = false
+ij_javascript_enforce_trailing_comma = keep
+ij_javascript_extends_keyword_wrap = off
+ij_javascript_extends_list_wrap = off
+ij_javascript_field_prefix = _
+ij_javascript_file_name_style = relaxed
+ij_javascript_finally_on_new_line = false
+ij_javascript_for_brace_force = never
+ij_javascript_for_statement_new_line_after_left_paren = false
+ij_javascript_for_statement_right_paren_on_new_line = false
+ij_javascript_for_statement_wrap = off
+ij_javascript_force_quote_style = false
+ij_javascript_force_semicolon_style = false
+ij_javascript_function_expression_brace_style = end_of_line
+ij_javascript_if_brace_force = never
+ij_javascript_import_merge_members = global
+ij_javascript_import_prefer_absolute_path = global
+ij_javascript_import_sort_members = true
+ij_javascript_import_sort_module_name = false
+ij_javascript_import_use_node_resolution = true
+ij_javascript_imports_wrap = on_every_item
+ij_javascript_indent_case_from_switch = true
+ij_javascript_indent_chained_calls = true
+ij_javascript_indent_package_children = 0
+ij_javascript_jsx_attribute_value = braces
+ij_javascript_keep_blank_lines_in_code = 2
+ij_javascript_keep_first_column_comment = true
+ij_javascript_keep_indents_on_empty_lines = false
+ij_javascript_keep_line_breaks = true
+ij_javascript_keep_simple_blocks_in_one_line = false
+ij_javascript_keep_simple_methods_in_one_line = false
+ij_javascript_line_comment_add_space = true
+ij_javascript_line_comment_at_first_column = false
+ij_javascript_method_brace_style = end_of_line
+ij_javascript_method_call_chain_wrap = off
+ij_javascript_method_parameters_new_line_after_left_paren = false
+ij_javascript_method_parameters_right_paren_on_new_line = false
+ij_javascript_method_parameters_wrap = off
+ij_javascript_object_literal_wrap = on_every_item
+ij_javascript_object_types_wrap = on_every_item
+ij_javascript_parentheses_expression_new_line_after_left_paren = false
+ij_javascript_parentheses_expression_right_paren_on_new_line = false
+ij_javascript_place_assignment_sign_on_next_line = false
+ij_javascript_prefer_as_type_cast = false
+ij_javascript_prefer_explicit_types_function_expression_returns = false
+ij_javascript_prefer_explicit_types_function_returns = false
+ij_javascript_prefer_explicit_types_vars_fields = false
+ij_javascript_prefer_parameters_wrap = false
+ij_javascript_property_prefix = 
+ij_javascript_reformat_c_style_comments = false
+ij_javascript_space_after_colon = true
+ij_javascript_space_after_comma = true
+ij_javascript_space_after_dots_in_rest_parameter = false
+ij_javascript_space_after_generator_mult = true
+ij_javascript_space_after_property_colon = true
+ij_javascript_space_after_quest = true
+ij_javascript_space_after_type_colon = true
+ij_javascript_space_after_unary_not = false
+ij_javascript_space_before_async_arrow_lparen = true
+ij_javascript_space_before_catch_keyword = true
+ij_javascript_space_before_catch_left_brace = true
+ij_javascript_space_before_catch_parentheses = true
+ij_javascript_space_before_class_lbrace = true
+ij_javascript_space_before_class_left_brace = true
+ij_javascript_space_before_colon = true
+ij_javascript_space_before_comma = false
+ij_javascript_space_before_do_left_brace = true
+ij_javascript_space_before_else_keyword = true
+ij_javascript_space_before_else_left_brace = true
+ij_javascript_space_before_finally_keyword = true
+ij_javascript_space_before_finally_left_brace = true
+ij_javascript_space_before_for_left_brace = true
+ij_javascript_space_before_for_parentheses = true
+ij_javascript_space_before_for_semicolon = false
+ij_javascript_space_before_function_left_parenth = true
+ij_javascript_space_before_generator_mult = false
+ij_javascript_space_before_if_left_brace = true
+ij_javascript_space_before_if_parentheses = true
+ij_javascript_space_before_method_call_parentheses = false
+ij_javascript_space_before_method_left_brace = true
+ij_javascript_space_before_method_parentheses = false
+ij_javascript_space_before_property_colon = false
+ij_javascript_space_before_quest = true
+ij_javascript_space_before_switch_left_brace = true
+ij_javascript_space_before_switch_parentheses = true
+ij_javascript_space_before_try_left_brace = true
+ij_javascript_space_before_type_colon = false
+ij_javascript_space_before_unary_not = false
+ij_javascript_space_before_while_keyword = true
+ij_javascript_space_before_while_left_brace = true
+ij_javascript_space_before_while_parentheses = true
+ij_javascript_spaces_around_additive_operators = true
+ij_javascript_spaces_around_arrow_function_operator = true
+ij_javascript_spaces_around_assignment_operators = true
+ij_javascript_spaces_around_bitwise_operators = true
+ij_javascript_spaces_around_equality_operators = true
+ij_javascript_spaces_around_logical_operators = true
+ij_javascript_spaces_around_multiplicative_operators = true
+ij_javascript_spaces_around_relational_operators = true
+ij_javascript_spaces_around_shift_operators = true
+ij_javascript_spaces_around_unary_operator = false
+ij_javascript_spaces_within_array_initializer_brackets = false
+ij_javascript_spaces_within_brackets = false
+ij_javascript_spaces_within_catch_parentheses = false
+ij_javascript_spaces_within_for_parentheses = false
+ij_javascript_spaces_within_if_parentheses = false
+ij_javascript_spaces_within_imports = true
+ij_javascript_spaces_within_interpolation_expressions = false
+ij_javascript_spaces_within_method_call_parentheses = false
+ij_javascript_spaces_within_method_parentheses = false
+ij_javascript_spaces_within_object_literal_braces = false
+ij_javascript_spaces_within_object_type_braces = true
+ij_javascript_spaces_within_parentheses = false
+ij_javascript_spaces_within_switch_parentheses = false
+ij_javascript_spaces_within_type_assertion = false
+ij_javascript_spaces_within_union_types = true
+ij_javascript_spaces_within_while_parentheses = false
+ij_javascript_special_else_if_treatment = true
+ij_javascript_ternary_operation_signs_on_next_line = false
+ij_javascript_ternary_operation_wrap = off
+ij_javascript_union_types_wrap = on_every_item
+ij_javascript_use_chained_calls_group_indents = false
+ij_javascript_use_double_quotes = true
+ij_javascript_use_explicit_js_extension = auto
+ij_javascript_use_import_type = auto
+ij_javascript_use_path_mapping = always
+ij_javascript_use_public_modifier = false
+ij_javascript_use_semicolon_after_statement = true
+ij_javascript_var_declaration_wrap = normal
+ij_javascript_while_brace_force = never
+ij_javascript_while_on_new_line = false
+ij_javascript_wrap_comments = false
+
+[{*.har,*.jsb2,*.jsb3,*.json,*.jsonc,*.postman_collection,*.postman_collection.json,*.postman_environment,*.postman_environment.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config}]
+indent_size = 2
+ij_json_array_wrapping = split_into_lines
+ij_json_keep_blank_lines_in_code = 0
+ij_json_keep_indents_on_empty_lines = false
+ij_json_keep_line_breaks = true
+ij_json_keep_trailing_comma = false
+ij_json_object_wrapping = split_into_lines
+ij_json_property_alignment = do_not_align
+ij_json_space_after_colon = true
+ij_json_space_after_comma = true
+ij_json_space_before_colon = false
+ij_json_space_before_comma = false
+ij_json_spaces_within_braces = false
+ij_json_spaces_within_brackets = false
+ij_json_wrap_long_lines = false
+
+[{*.htm,*.html,*.ng,*.sht,*.shtm,*.shtml}]
+ij_html_add_new_line_before_tags = body,div,p,form,h1,h2,h3
+ij_html_align_attributes = true
+ij_html_align_text = false
+ij_html_attribute_wrap = normal
+ij_html_block_comment_add_space = false
+ij_html_block_comment_at_first_column = true
+ij_html_do_not_align_children_of_min_lines = 0
+ij_html_do_not_break_if_inline_tags = title,h1,h2,h3,h4,h5,h6,p
+ij_html_do_not_indent_children_of_tags = html,body,thead,tbody,tfoot
+ij_html_enforce_quotes = false
+ij_html_inline_tags = a,abbr,acronym,b,basefont,bdo,big,br,cite,cite,code,dfn,em,font,i,img,input,kbd,label,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var
+ij_html_keep_blank_lines = 2
+ij_html_keep_indents_on_empty_lines = false
+ij_html_keep_line_breaks = true
+ij_html_keep_line_breaks_in_text = true
+ij_html_keep_whitespaces = false
+ij_html_keep_whitespaces_inside = span,pre,textarea
+ij_html_line_comment_at_first_column = true
+ij_html_new_line_after_last_attribute = never
+ij_html_new_line_before_first_attribute = never
+ij_html_quote_style = double
+ij_html_remove_new_line_before_tags = br
+ij_html_space_after_tag_name = false
+ij_html_space_around_equality_in_attribute = false
+ij_html_space_inside_empty_tag = false
+ij_html_text_wrap = normal
+
+[{*.http,*.rest}]
+indent_size = 0
+ij_continuation_indent_size = 4
+ij_http-request_call_parameters_wrap = normal
+ij_http-request_method_parameters_wrap = split_into_lines
+ij_http-request_space_before_comma = true
+ij_http-request_spaces_around_assignment_operators = true
+
+[{*.markdown,*.md}]
+ij_markdown_force_one_space_after_blockquote_symbol = true
+ij_markdown_force_one_space_after_header_symbol = true
+ij_markdown_force_one_space_after_list_bullet = true
+ij_markdown_force_one_space_between_words = true
+ij_markdown_format_tables = true
+ij_markdown_insert_quote_arrows_on_wrap = true
+ij_markdown_keep_indents_on_empty_lines = false
+ij_markdown_keep_line_breaks_inside_text_blocks = true
+ij_markdown_max_lines_around_block_elements = 1
+ij_markdown_max_lines_around_header = 1
+ij_markdown_max_lines_between_paragraphs = 1
+ij_markdown_min_lines_around_block_elements = 1
+ij_markdown_min_lines_around_header = 1
+ij_markdown_min_lines_between_paragraphs = 1
+ij_markdown_wrap_text_if_long = true
+ij_markdown_wrap_text_inside_blockquotes = true
+
+[{*.yaml,*.yml}]
+indent_size = 2
+ij_yaml_align_values_properties = do_not_align
+ij_yaml_autoinsert_sequence_marker = true
+ij_yaml_block_mapping_on_new_line = false
+ij_yaml_indent_sequence_value = true
+ij_yaml_keep_indents_on_empty_lines = false
+ij_yaml_keep_line_breaks = true
+ij_yaml_sequence_on_new_line = false
+ij_yaml_space_before_colon = false
+ij_yaml_spaces_within_braces = true
+ij_yaml_spaces_within_brackets = true
--- a/16
+++ b/16
@@ -1,16 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,16 @@
      "name": "angular-demo",
      "version": "0.0.0",
      "dependencies": {
-        "@angular/animations": "^17.0.0",
-        "@angular/cdk": "^17.0.3",
-        "@angular/common": "^17.0.0",
-        "@angular/compiler": "^17.0.0",
-        "@angular/core": "^17.0.0",
-        "@angular/forms": "^17.0.0",
-        "@angular/material": "^17.0.3",
-        "@angular/platform-browser": "^17.0.0",
-        "@angular/platform-browser-dynamic": "^17.0.0",
-        "@angular/router": "^17.0.0",
+        "@angular/animations": "^17.0.8",
+        "@angular/cdk": "^17.0.4",
+        "@angular/common": "^17.0.8",
+        "@angular/compiler": "^17.0.8",
+        "@angular/core": "^17.0.8",
+        "@angular/forms": "^17.0.8",
+        "@angular/material": "^17.0.4",
+        "@angular/platform-browser": "^17.0.8",
+        "@angular/platform-browser-dynamic": "^17.0.8",
+        "@angular/router": "^17.0.8",
        "@ng-bootstrap/ng-bootstrap": "^16.0.0",
        "@popperjs/core": "^2.11.8",
        "bootstrap": "^5.3.2",
@@ -26,10 +26,10 @@
        "zone.js": "~0.14.2"
      },
      "devDependencies": {
-        "@angular-devkit/build-angular": "^17.0.5",
-        "@angular/cli": "^17.0.5",
-        "@angular/compiler-cli": "^17.0.0",
-        "@angular/localize": "^17.0.0",
+        "@angular-devkit/build-angular": "^17.0.7",
+        "@angular/cli": "^17.0.7",
+        "@angular/compiler-cli": "^17.0.8",
+        "@angular/localize": "^17.0.8",
        "@types/jasmine": "~5.1.0",
        "autoprefixer": "^10.4.16",
        "jasmine-core": "~5.1.0",
@@ -68,12 +68,12 @@
      }
    },
    "node_modules/@angular-devkit/architect": {
-      "version": "0.1700.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1700.6.tgz",
-      "integrity": "sha512-zVpz736cBZHXcv0v2bRLfJLcykanUyEMVQXkGwZp2eygjNK1Ls9s/74o1dXd6nGdvjh6AnkzOU/vouj2dqA41g==",
+      "version": "0.1700.7",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1700.7.tgz",
+      "integrity": "sha512-32uitQKsYLGXAKoXBsmOnPsTt9pS+b9cnFI9ZvBFVhJ31I2EOM7vGcMFalhTxdB/DkVHk4TyO78efV0V26DwCA==",
      "dev": true,
      "dependencies": {
-        "@angular-devkit/core": "17.0.6",
+        "@angular-devkit/core": "17.0.7",
        "rxjs": "7.8.1"
      },
      "engines": {
@@ -83,15 +83,15 @@
      }
    },
    "node_modules/@angular-devkit/build-angular": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-17.0.6.tgz",
-      "integrity": "sha512-gYxmbvq5/nk7aVJ6JxIIW0//RM7859kMPJGPKekcCGSWkkObjqG6P5cDgJJNAjMl/IfCsG7B+xGYjr4zN8QV9g==",
+      "version": "17.0.7",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-17.0.7.tgz",
+      "integrity": "sha512-AtEzLk6n6BXqQzk0Bsupe6GV0IgUe7RbpBfqROi+NZqMA7OUAHCX3xA6M68Qu+5KxBtW7T5lHeZZ7iP/y39wtQ==",
      "dev": true,
      "dependencies": {
        "@ampproject/remapping": "2.2.1",
-        "@angular-devkit/architect": "0.1700.6",
-        "@angular-devkit/build-webpack": "0.1700.6",
-        "@angular-devkit/core": "17.0.6",
+        "@angular-devkit/architect": "0.1700.7",
+        "@angular-devkit/build-webpack": "0.1700.7",
+        "@angular-devkit/core": "17.0.7",
        "@babel/core": "7.23.2",
        "@babel/generator": "7.23.0",
        "@babel/helper-annotate-as-pure": "7.22.5",
@@ -102,7 +102,7 @@
        "@babel/preset-env": "7.23.2",
        "@babel/runtime": "7.23.2",
        "@discoveryjs/json-ext": "0.5.7",
-        "@ngtools/webpack": "17.0.6",
+        "@ngtools/webpack": "17.0.7",
        "@vitejs/plugin-basic-ssl": "1.0.1",
        "ansi-colors": "4.1.3",
        "autoprefixer": "10.4.16",
@@ -234,12 +234,12 @@
      }
    },
    "node_modules/@angular-devkit/build-webpack": {
-      "version": "0.1700.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1700.6.tgz",
-      "integrity": "sha512-xT5LL92rScVjvGZO7but/YbTQ12PNilosyjDouephl+HIf2V6rwDovTsEfpLYgcrqgodh+R0X0ZCOk95+MmSBA==",
+      "version": "0.1700.7",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1700.7.tgz",
+      "integrity": "sha512-B9Mg/qYDpE5my8PJ3VPQyRSUV0Oq1bFUzU8s0ZpqEZl1URKc04pm0LtLmebrMIcUZgDiGk0RHaD+O1E9IV/bdQ==",
      "dev": true,
      "dependencies": {
-        "@angular-devkit/architect": "0.1700.6",
+        "@angular-devkit/architect": "0.1700.7",
        "rxjs": "7.8.1"
      },
      "engines": {
@@ -253,9 +253,9 @@
      }
    },
    "node_modules/@angular-devkit/core": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.0.6.tgz",
-      "integrity": "sha512-+h9VnFHof7rKzBJ5FWrbPXWzbag31QKbUGJ/mV5BYgj39vjzPNUXBW8AaScZAlATi8+tElYXjRMvM49GnuyRLg==",
+      "version": "17.0.7",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.0.7.tgz",
+      "integrity": "sha512-vATobHo5O5tJba424hJfQWLb40GzvZPNsI74dcgSUTgrDph8ksmk5xB9OvEvf0INorQZ2IMphj/VIWj4/+JqSA==",
      "dev": true,
      "dependencies": {
        "ajv": "8.12.0",
@@ -280,12 +280,12 @@
      }
    },
    "node_modules/@angular-devkit/schematics": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.0.6.tgz",
-      "integrity": "sha512-2g769MpazA1aOzJOm2MNGosra3kxw8CbdIQQOKkvycIzroRNgN06yHcRTDC03GADgP/CkDJ6kxwJQNG+wNFL2A==",
+      "version": "17.0.7",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.0.7.tgz",
+      "integrity": "sha512-BY11OkJkM3xyXcvyD7x5kGY/c8Ufd4AfPvI0D9imhVxbns45Q48b1DlvCQvSnCJ/s+OwnkrYb/Efa70ZiaGu8A==",
      "dev": true,
      "dependencies": {
-        "@angular-devkit/core": "17.0.6",
+        "@angular-devkit/core": "17.0.7",
        "jsonc-parser": "3.2.0",
        "magic-string": "0.30.5",
        "ora": "5.4.1",
@@ -298,9 +298,9 @@
      }
    },
    "node_modules/@angular/animations": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.0.6.tgz",
-      "integrity": "sha512-fic61LjLHry79c5H9UGM8Ff311MJnf9an7EukLj2aLJ3J0uadL/H9de7dDp8PaIT10DX9g+aRTIKOmF3PmmXIQ==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.0.8.tgz",
+      "integrity": "sha512-iKJ2s4ZqVoGS9tSRBuuwYEWTV+Rw6b4zDY1rqiXvbZrpNRxfzYr6s+aYsLQQEindZ4hzxgp9j60FJ8aE/g4w6A==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -308,13 +308,13 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/core": "17.0.6"
+        "@angular/core": "17.0.8"
      }
    },
    "node_modules/@angular/cdk": {
-      "version": "17.0.3",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.0.3.tgz",
-      "integrity": "sha512-Qd5uvC09B3+uk2uX1JxmiWrD7wueMHSxNBoCbDEmnrsdDVUta0wN/jj/CtATljxUM8ZqvEvkqgxJCig1od9oyQ==",
+      "version": "17.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.0.4.tgz",
+      "integrity": "sha512-mh/EuIR0NPfpNqAXBSZWuJeBMXUvUDYdKhiFWZet5NLO1bDgFe1MGLBjtW4us95k4BZsMLbCKNxJgc+4JqwUvg==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -328,15 +328,15 @@
      }
    },
    "node_modules/@angular/cli": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.0.6.tgz",
-      "integrity": "sha512-BLA2wDeqZManC/7MI6WvRRV+VhrwjxxB7FawLyp4xYlo0CTSOFOfeKPVRMLEnA/Ou4R5d47B+BqJTlep62pHwg==",
+      "version": "17.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.0.7.tgz",
+      "integrity": "sha512-oSa0GVAQNA7wFbLJYeaO3kV4iUcbKEqXDLxcIE8s1GfHddBOlXH2P1T4fXonCBl5qvV+joP0G0+fs7I0w2utZQ==",
      "dev": true,
      "dependencies": {
-        "@angular-devkit/architect": "0.1700.6",
-        "@angular-devkit/core": "17.0.6",
-        "@angular-devkit/schematics": "17.0.6",
-        "@schematics/angular": "17.0.6",
+        "@angular-devkit/architect": "0.1700.7",
+        "@angular-devkit/core": "17.0.7",
+        "@angular-devkit/schematics": "17.0.7",
+        "@schematics/angular": "17.0.7",
        "@yarnpkg/lockfile": "1.1.0",
        "ansi-colors": "4.1.3",
        "ini": "4.1.1",
@@ -362,9 +362,9 @@
      }
    },
    "node_modules/@angular/common": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.0.6.tgz",
-      "integrity": "sha512-FZtf8ol8W2V21ZDgFtcxmJ6JJKUO97QZ+wr/bosyYEryWMmn6VGrbOARhfW7BlrEgn14NdFkLb72KKtqoqRjrg==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.0.8.tgz",
+      "integrity": "sha512-fFfwtdg7H+OkqnvV/ENu8F8KGfgIiH16DDbQqYY5KQyyQB+SMsoVW29F1fGx6Y30s7ZlsLOy6cHhgrw74itkSw==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -372,14 +372,14 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/core": "17.0.6",
+        "@angular/core": "17.0.8",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/compiler": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.0.6.tgz",
-      "integrity": "sha512-PaCNnlPcL0rvByKCBUUyLWkKJYXOrcfKlYYvcacjOzEUgZeEpekG81hMRb9u/Pz+A+M4HJSTmdgzwGP35zo8qw==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.0.8.tgz",
+      "integrity": "sha512-48jWypuhBGTrUUbkz1vB9gjbKKZ3hpuJ2DUUncd331Yw4tqkqZQbBa/E3ei4IHiCxEvW2uX3lI4AwlhuozmUtA==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -387,7 +387,7 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/core": "17.0.6"
+        "@angular/core": "17.0.8"
      },
      "peerDependenciesMeta": {
        "@angular/core": {
@@ -396,9 +396,9 @@
      }
    },
    "node_modules/@angular/compiler-cli": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.0.6.tgz",
-      "integrity": "sha512-C1Gfh9kbjYZezEMOwxnvUTHuPXa+6pk7mAfSj8e5oAO6E+wfo2dTxv1J5zxa3KYzxPYMNfF8OFvLuMKsw7lXjA==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.0.8.tgz",
+      "integrity": "sha512-ny2SMVgl+icjMuU5ZM57yFGUrhjR0hNxfCn0otAD3jUFliz/Onu9l6EPRKA5Cr8MZx3mg3rTLSBMD17YT8rsOg==",
      "dependencies": {
        "@babel/core": "7.23.2",
        "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -418,14 +418,14 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/compiler": "17.0.6",
+        "@angular/compiler": "17.0.8",
        "typescript": ">=5.2 <5.3"
      }
    },
    "node_modules/@angular/core": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.0.6.tgz",
-      "integrity": "sha512-QzfKRTDNgGOY9D5VxenUUz20cvPVC+uVw9xiqkDuHgGfLYVFlCAK9ymFYkdUCLTcVzJPxckP+spMpPX8nc4Aqw==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.0.8.tgz",
+      "integrity": "sha512-tzYsK24LdkNuKNJK6efF4XOqspvF/qOe9j/n1Y61a6mNvFwsJFGbcmdZMby4hI/YRm6oIDoIIFjSep8ycp6Pbw==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -438,9 +438,9 @@
      }
    },
    "node_modules/@angular/forms": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.0.6.tgz",
-      "integrity": "sha512-n/trsMtQHUBGiWz5lFaggMcMOuw0gH+96TCtHxQiUYJOdrbOemkFdGrNh3B4fGHmogWuOYJVF5FAm97WRES2XA==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.0.8.tgz",
+      "integrity": "sha512-WZBHbMQjaSovAzOMhKqZN+m7eUPGfOzh9rKFKvj6UQLIJ9qSpEpqlvL0omU1z/47s3XXeLiBzomMiRfQISJvvw==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -448,16 +448,16 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/common": "17.0.6",
-        "@angular/core": "17.0.6",
-        "@angular/platform-browser": "17.0.6",
+        "@angular/common": "17.0.8",
+        "@angular/core": "17.0.8",
+        "@angular/platform-browser": "17.0.8",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/localize": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-17.0.6.tgz",
-      "integrity": "sha512-LHLadqRQ4lnM0VxWZld2JLO50t3URi7on0YhZp6p/xhY6cQLcTG3GDNGC/k8dg8JW/7aXJU0hmJEMcop9ELM7g==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-17.0.8.tgz",
+      "integrity": "sha512-1zW8qWKNMH3r/x4KpwzzUmVY+iN76vYdhjA6gzZDnpJxpon9eyljNEildj9+zSWeNUr2LgJ6HnkIX9q1f3mXfA==",
      "dependencies": {
        "@babel/core": "7.23.2",
        "fast-glob": "3.3.1",
@@ -472,14 +472,14 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/compiler": "17.0.6",
-        "@angular/compiler-cli": "17.0.6"
+        "@angular/compiler": "17.0.8",
+        "@angular/compiler-cli": "17.0.8"
      }
    },
    "node_modules/@angular/material": {
-      "version": "17.0.3",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-17.0.3.tgz",
-      "integrity": "sha512-a7l5hMMCMobULAjwPK8HVQmOsbd3pOwju1QdBVhec0XwNGj2pK4ooKWdUmQcwsUA9DaZaOwAgEISHEADXJfKpQ==",
+      "version": "17.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-17.0.4.tgz",
+      "integrity": "sha512-IKkys4EavE1TMHApPMbFLvJU4pP8S8XNfY2eS7/kFwW7eyTcz0zV/IKeBbxkpej19MaouozU+KWeRJtxHg6x8g==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.a246a4439.0",
        "@material/auto-init": "15.0.0-canary.a246a4439.0",
@@ -532,7 +532,7 @@
      },
      "peerDependencies": {
        "@angular/animations": "^17.0.0 || ^18.0.0",
-        "@angular/cdk": "17.0.3",
+        "@angular/cdk": "17.0.4",
        "@angular/common": "^17.0.0 || ^18.0.0",
        "@angular/core": "^17.0.0 || ^18.0.0",
        "@angular/forms": "^17.0.0 || ^18.0.0",
@@ -541,9 +541,9 @@
      }
    },
    "node_modules/@angular/platform-browser": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.0.6.tgz",
-      "integrity": "sha512-nBhWH1MKT2WswgRNIoMnmNAt0n5/fG59BanJtodW71//Aj5aIE+BuVoFgK3wmO8IMoeP4i4GXRInBXs6lUMOJw==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.0.8.tgz",
+      "integrity": "sha512-XaI+p2AxQaIHzR761lhPUf4OcOp46WDW0IfbvOzaezHE+8r81joZyVSDQPgXSa/aRfI58YhcfUavuGqyU3PphA==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -551,9 +551,9 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/animations": "17.0.6",
-        "@angular/common": "17.0.6",
-        "@angular/core": "17.0.6"
+        "@angular/animations": "17.0.8",
+        "@angular/common": "17.0.8",
+        "@angular/core": "17.0.8"
      },
      "peerDependenciesMeta": {
        "@angular/animations": {
@@ -562,9 +562,9 @@
      }
    },
    "node_modules/@angular/platform-browser-dynamic": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-17.0.6.tgz",
-      "integrity": "sha512-5ZEmBtBkqamTaWjUXCls7G1f3xyK/ykXE7hnUV9CgGqXKrNkxblmbtOhoWdsbuIYjjdxQcAk1qtg/Rg21wcc4w==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-17.0.8.tgz",
+      "integrity": "sha512-BIXNKnfBZb8sdluQ7WIhIXFuVnsJJ0SV+aiMKzQ7B6XhWoAXZQnlvON2thydjIIVuCvaF3YmWTbILI2K8YZ2jQ==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -572,16 +572,16 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/common": "17.0.6",
-        "@angular/compiler": "17.0.6",
-        "@angular/core": "17.0.6",
-        "@angular/platform-browser": "17.0.6"
+        "@angular/common": "17.0.8",
+        "@angular/compiler": "17.0.8",
+        "@angular/core": "17.0.8",
+        "@angular/platform-browser": "17.0.8"
      }
    },
    "node_modules/@angular/router": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-17.0.6.tgz",
-      "integrity": "sha512-xW6yDxREpBOB9MoODSfIw5HwkwLK+OgK34Q6sGYs0ft9UryMoFwft+pHGAaDz2nzhA72n+Ht9B2eai78UE9jGQ==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-17.0.8.tgz",
+      "integrity": "sha512-ptphcRe1RG/mIS60R7ZPilkkrxautqB0sOhds3h5VP3g628G1a2HWzvnmvjEfpJWDMFivV32VJMMBtTLqGr+0Q==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -589,9 +589,9 @@
        "node": "^18.13.0 || >=20.9.0"
      },
      "peerDependencies": {
-        "@angular/common": "17.0.6",
-        "@angular/core": "17.0.6",
-        "@angular/platform-browser": "17.0.6",
+        "@angular/common": "17.0.8",
+        "@angular/core": "17.0.8",
+        "@angular/platform-browser": "17.0.8",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
@@ -3649,9 +3649,9 @@
      }
    },
    "node_modules/@ngtools/webpack": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.0.6.tgz",
-      "integrity": "sha512-9Us20rqGhi8PmQBwQu6Qtww3WVV/gf2s2DbzcLclsiDtSBobzT64Z6F6E9OpAYD+c5PxlUaOghL6NXdnSNdByA==",
+      "version": "17.0.7",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.0.7.tgz",
+      "integrity": "sha512-gwhUhpwXn0trwwKdSu9WlJbEcLt+s/2fPwoD9lZ0y3wXfrOogsfcNBJKeO5BZf1h+A3AWt7ePmgrZXSJM+865Q==",
      "dev": true,
      "engines": {
        "node": "^18.13.0 || >=20.9.0",
@@ -3906,13 +3906,13 @@
      }
    },
    "node_modules/@schematics/angular": {
-      "version": "17.0.6",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.0.6.tgz",
-      "integrity": "sha512-AyC7Bk3Omy6PfADThhq5ci+zzdTTi2N1oZI35gw4tMK5ZxVwIACx2Zyhaz399m5c2RCDi9Hz4A2BOFq9f0j/dg==",
+      "version": "17.0.7",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.0.7.tgz",
+      "integrity": "sha512-d7QKmcKrM4owb/2bR7Ipf23roiNbvbD/x7reNhQAtKAPLSHJ3Ulkf1+Yv+dj+9f+K7y9SBviEUSrD27BQ9WaxQ==",
      "dev": true,
      "dependencies": {
-        "@angular-devkit/core": "17.0.6",
-        "@angular-devkit/schematics": "17.0.6",
+        "@angular-devkit/core": "17.0.7",
+        "@angular-devkit/schematics": "17.0.7",
        "jsonc-parser": "3.2.0"
      },
      "engines": {
@@ -13736,9 +13736,9 @@
      }
    },
    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "version": "8.15.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.15.1.tgz",
+      "integrity": "sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==",
      "dev": true,
      "engines": {
        "node": ">=10.0.0"
--- a/package.json
+++ b/package.json
@@ -10,16 +10,16 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/cdk": "^17.0.3",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/material": "^17.0.3",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
+    "@angular/animations": "^17.0.8",
+    "@angular/cdk": "^17.0.4",
+    "@angular/common": "^17.0.8",
+    "@angular/compiler": "^17.0.8",
+    "@angular/core": "^17.0.8",
+    "@angular/forms": "^17.0.8",
+    "@angular/material": "^17.0.4",
+    "@angular/platform-browser": "^17.0.8",
+    "@angular/platform-browser-dynamic": "^17.0.8",
+    "@angular/router": "^17.0.8",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
@@ -28,10 +28,10 @@
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.5",
-    "@angular/cli": "^17.0.5",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/localize": "^17.0.0",
+    "@angular-devkit/build-angular": "^17.0.7",
+    "@angular/cli": "^17.0.7",
+    "@angular/compiler-cli": "^17.0.8",
+    "@angular/localize": "^17.0.8",
    "@types/jasmine": "~5.1.0",
    "autoprefixer": "^10.4.16",
    "jasmine-core": "~5.1.0",
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,8 +3,15 @@
 </div>

 <div>
-    <app-img-show></app-img-show>
+    <ngbd-carousel-pause></ngbd-carousel-pause>
 </div>

+<div>
+    <app-body></app-body>
+</div>
+
+<div>
+    <app-foot></app-foot>
+</div>

 <router-outlet></router-outlet>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,12 +2,21 @@ import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterOutlet} from '@angular/router';
 import {TopBarComponent} from "./top-bar/top-bar.component";
-import {ImgShowComponent} from "./img-show/img-show.component";
+import {NgbdCarouselPause} from "./carousel-pause/carousel-pause.component";
+import {FootComponent} from "./foot/foot.component";
+import {BodyComponent} from "./body/body.component";

@Component({
    selector: 'app-root',
    standalone: true,
-    imports: [CommonModule, RouterOutlet, TopBarComponent, ImgShowComponent],
+    imports: [
+        CommonModule,
+        RouterOutlet,
+        TopBarComponent,
+        NgbdCarouselPause,
+        FootComponent,
+        BodyComponent
+    ],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss'
 })
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -2,7 +2,7 @@ import {ApplicationConfig} from '@angular/core';
 import {provideRouter} from '@angular/router';

 import {routes} from './app.routes';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import {provideAnimations} from '@angular/platform-browser/animations';

 export const appConfig: ApplicationConfig = {
    providers: [provideRouter(routes), provideAnimations()]
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,5 +1,3 @@
 import {Routes} from '@angular/router';

-export const routes: Routes = [
-
-];
+export const routes: Routes = [];
--- a/src/app/body/body.component.html
+++ b/src/app/body/body.component.html
@@ -1,115 +1,92 @@
-<div class="w-full flex">
-    <div class="flex w-3/5 flex-wrap">
-        <div class="m-4 shadow-lg w-full h-auto rounded-lg border-2">
-            <h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
-                学院新闻
-                <span class="float-right text-lg text-gray-400 hover:text-red-400">
-                        更多>>
-                    </span>
-            </h1>
-            <ul class="mx-4 px-6 pb-2 pt-2 text-sm leading-8 list-disc">
-                <li class="hover:text-blue-400">很久以前，那还是我用win98的时候有次我系统崩溃了</li>
-                <li class="hover:text-blue-400">因为我是电脑白痴</li>
-                <li class="hover:text-blue-400">我朋友给我介绍了一个高手来帮我修电脑</li>
-                <li class="hover:text-blue-400">他看了一下电脑，问我有没有98的盘</li>
-                <li class="hover:text-blue-400">我说没有</li>
-                <li class="hover:text-blue-400">他想了一下，叫我把固定电话拿给他</li>
-                <li class="hover:text-blue-400">我想修电脑要电话干什么</li>
-                <li class="hover:text-blue-400">但人家是高手，我也不好说什么</li>
-                <li class="hover:text-blue-400">就把电话拔下来给他了</li>
-            </ul>
-        </div>
-        
-        <div class="flex flex-nowrap">
-            <div class="ml-4 mr-1 shadow-lg w-1/2 h-auto rounded-lg border-2">
-                <h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold">
-                    学术动态
-                    <span class="float-right text-lg text-gray-400 hover:text-red-400">
-                        更多>>
-                        </span>
-                </h1>
-                <ul class="mx-3 pl-4 pr-0 pb-2 pt-2 text-sm leading-8 list-disc">
-                    <li class="hover:text-blue-400">他把电话线空着的一头接在电脑的一个插孔内</li>
-                    <li class="hover:text-blue-400">然后进入了dos</li>
-                    <li class="hover:text-blue-400">然后就开始在电话上不停的按着键</li>
-                    <li class="hover:text-blue-400">他按键的速度非常快，但是只按0，1两个键</li>
-                </ul>
-            </div>
-            
-            <div class="mr-4 shadow-lg w-1/2 h-auto rounded-lg border-2">
-                <div class="h-auto">
-                    <h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold flex-nowrap">
-                        历史学习
-                        <span class="float-right text-lg text-gray-400 hover:text-red-400">
-                                更多>>
-                            </span>
-                    </h1>
-                </div>
-                
-                <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
-                    <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
-                        我渐渐的有些困，我问他这东西要搞多久
-                    </div>
-                    <div class="w-1/3 border-2">
-                        <img class="h-16 w-32" src="../assets/img/picture.png" alt=""/>
-                    </div>
-                </div>
-                
-                <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
-                    <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
-                        他说要几个小时
-                    </div>
-                    <div class="w-1/3 border-2">
-                        <img class="h-16 w-32" src="../assets/img/picture.png" alt=""/>
-                    </div>
-                </div>
-                
-                <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
-                    <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
-                        我给他倒了杯茶，就一个人去隔壁睡觉了
-                    </div>
-                    <div class="w-1/3 border-2">
-                        <img class="h-16 w-32" src="../assets/img/picture.png" alt=""/>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-    <div class="w-2/5 flex-grow mb-4">
-        <div class="h-full my-4 mr-4 shadow-lg rounded-lg border-2">
-            <h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
-                信息公告
-                <span class="float-right text-lg text-gray-400 hover:text-red-400">
-                        更多>>
-                    </span>
-            </h1>
-            <ul class="mx-4 px-6 pb-2 pt-2 text-sm leading-8 list-disc">
-                <li class="hover:text-blue-400">醒来的时候，一看已经过了4个多小时</li>
-                <li class="hover:text-blue-400">我起身到隔壁，看见他正在98里面调试</li>
-                <li class="hover:text-blue-400">过了一会儿，他说，你试试，我坐上椅子用了一下，真的好了</li>
-                <li class="hover:text-blue-400">我当时也不懂电脑</li>
-                <li class="hover:text-blue-400">谢过人家就走了</li>
-                <li class="hover:text-blue-400">后来我慢慢对电脑有了了解</li>
-                <li class="hover:text-blue-400">终于了解</li>
-                <li class="hover:text-blue-400">原来当时那位高手是用机器语言编了一个98系统</li>
-                <li class="hover:text-blue-400">我后来问我朋友那位高手的下落</li>
-                <li class="hover:text-blue-400">朋友说前几年去了美国之后</li>
-                <li class="hover:text-blue-400">杳无音讯……</li>
-            </ul>
-        </div>
-    </div>
+<div class="container responsive-grid">
+    <mat-card>
+        <mat-card-header>学院新闻</mat-card-header>
+        <mat-nav-list>
+            <a mat-list-item href="#" target="_blank">很久以前，那还是我用win98的时候有次我系统崩溃了</a>
+            <a mat-list-item href="#" target="_blank">因为我是电脑白痴</a>
+            <a mat-list-item href="#" target="_blank">我朋友给我介绍了一个高手来帮我修电脑</a>
+            <a mat-list-item href="#" target="_blank">他看了一下电脑，问我有没有98的盘</a>
+            <a mat-list-item href="#" target="_blank">我说没有</a>
+            <a mat-list-item href="#" target="_blank">他想了一下，叫我把固定电话拿给他</a>
+            <a mat-list-item href="#" target="_blank">我想修电脑要电话干什么</a>
+        </mat-nav-list>
+    </mat-card>
+
+    <mat-card>
+        <mat-card-header>学术动态</mat-card-header>
+        <mat-nav-list>
+            <a mat-list-item href="#" target="_blank">但人家是高手，我也不好说什么</a>
+            <a mat-list-item href="#" target="_blank">就把电话拔下来给他了</a>
+            <a mat-list-item href="#" target="_blank">他把电话线空着的一头接在电脑的一个插孔内</a>
+            <a mat-list-item href="#" target="_blank">然后进入了dos</a>
+            <a mat-list-item href="#" target="_blank">然后就开始在电话上不停的按着键</a>
+            <a mat-list-item href="#" target="_blank">他按键的速度非常快，但是只按0，1两个键</a>
+        </mat-nav-list>
+    </mat-card>
+
+    <mat-card>
+        <mat-card-header>历史学习</mat-card-header>
+        <!--        <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
+        <!--            <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
+        <!--                我渐渐的有些困，我问他这东西要搞多久-->
+        <!--            </div>-->
+        <!--            <div class="w-1/3 border-2">-->
+        <!--                <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
+        <!--            </div>-->
+        <!--        </div>-->
+
+        <!--        <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
+        <!--            <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
+        <!--                他说要几个小时-->
+        <!--            </div>-->
+        <!--            <div class="w-1/3 border-2">-->
+        <!--                <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
+        <!--            </div>-->
+        <!--        </div>-->
+
+        <!--        <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
+        <!--            <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
+        <!--                我给他倒了杯茶，就一个人去隔壁睡觉了-->
+        <!--            </div>-->
+        <!--            <div class="w-1/3 border-2">-->
+        <!--                <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
+        <!--            </div>-->
+        <!--        </div>-->
+        <mat-nav-list>
+            <a mat-list-item href="#" target="_blank">我渐渐的有些困，我问他这东西要搞多久</a>
+            <a mat-list-item href="#" target="_blank">他说要几个小时</a>
+            <a mat-list-item href="#" target="_blank">我给他倒了杯茶，就一个人去隔壁睡觉了</a>
+        </mat-nav-list>
+    </mat-card>
+
+    <mat-card>
+        <mat-card-header>信息公告</mat-card-header>
+        <mat-nav-list>
+            <a mat-list-item href="#" target="_blank">醒来的时候，一看已经过了4个多小时</a>
+            <a mat-list-item href="#" target="_blank">我起身到隔壁，看见他正在98里面调试</a>
+            <a mat-list-item href="#" target="_blank">过了一会儿，他说，你试试，我坐上椅子用了一下，真的好了</a>
+            <a mat-list-item href="#" target="_blank">我当时也不懂电脑</a>
+            <a mat-list-item href="#" target="_blank">谢过人家就走了</a>
+            <a mat-list-item href="#" target="_blank">后来我慢慢对电脑有了了解</a>
+            <a mat-list-item href="#" target="_blank">终于了解</a>
+            <a mat-list-item href="#" target="_blank">原来当时那位高手是用机器语言编了一个98系统</a>
+            <a mat-list-item href="#" target="_blank">我后来问我朋友那位高手的下落</a>
+            <a mat-list-item href="#" target="_blank">朋友说前几年去了美国之后</a>
+            <a mat-list-item href="#" target="_blank">杳无音讯……</a>
+        </mat-nav-list>
+    </mat-card>
 </div>

-<div class="w-fit flex flex-wrap m-4 border-2 justify-around rounded-lg shadow-lg bg-gradient-to-r from-cyan-300 to to-violet-300">
-    <ul class="li-img clearfix">
-        <li><img src="../assets/img/anyuse2.png" alt=""/></li>
-        <li><img src="../assets/img/anyuse3.png" alt=""/></li>
-        <li><img src="../assets/img/anyuse4.png" alt=""/></li>
-        <li><img src="../assets/img/anyuse5.png" alt=""/></li>
-        <li><img src="../assets/img/anyuse6.png" alt=""/></li>
-        <li><img src="../assets/img/anyuse7.png" alt=""/></li>
-        <li><img src="../assets/img/anyuse8.png" alt=""/></li>
-        <li><img src="../assets/img/anyuse9.png" alt=""/></li>
-    </ul>
-</div>
+<mat-divider></mat-divider>
+
+<mat-grid-list cols="4" rowHeight="2:1">
+    <mat-grid-tile><img ngSrc="/assets/img/anyuse2.png" alt="" height="720" width="1280"/></mat-grid-tile>
+    <mat-grid-tile><img ngSrc="/assets/img/anyuse3.png" alt="" height="800" width="1280"/></mat-grid-tile>
+    <mat-grid-tile><img ngSrc="/assets/img/anyuse4.png" alt="" height="678" width="1280"/></mat-grid-tile>
+    <mat-grid-tile><img ngSrc="/assets/img/anyuse5.png" alt="" height="960" width="1280"/></mat-grid-tile>
+    <mat-grid-tile><img ngSrc="/assets/img/anyuse6.png" alt="" height="1080" width="1920"/></mat-grid-tile>
+    <mat-grid-tile><img ngSrc="/assets/img/anyuse7.png" alt="" height="1080" width="1920"/></mat-grid-tile>
+    <mat-grid-tile><img ngSrc="/assets/img/anyuse8.png" alt="" height="1080" width="1920"/></mat-grid-tile>
+    <mat-grid-tile><img ngSrc="/assets/img/anyuse9.png" alt="" height="1080" width="1920"/></mat-grid-tile>
+</mat-grid-list>
+
--- a/src/app/body/body.component.scss
+++ b/src/app/body/body.component.scss
@@ -3,28 +3,38 @@
@tailwind components;

 .li-img li {
-	list-style: none;
-	float: left;
-	width: 25%; /*四列图片排列*/
-	height: 175px;
-	overflow: hidden;
+  list-style: none;
+  float: left;
+  width: 25%; /*四列图片排列*/
+  height: 175px;
+  overflow: hidden;
 }

 .li-img li img {
-	position: relative;
-	width: 100%;
-	height: auto;
-	top: 50%; /*li高度的一半*/
-	transform: translateY(-50%); /*再向上移动自身的50%*/
+  position: relative;
+  width: 100%;
+  height: auto;
+  top: 50%; /*li高度的一半*/
+  transform: translateY(-50%); /*再向上移动自身的50%*/
 }

 /*清除浮动*/
 .clearfix:after {
-	position: relative;
-	content: '';
-	display: block;
-	width: 0;
-	height: 0;
-	visibility: hidden;
-	clear: both;
+  position: relative;
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  clear: both;
+}
+
+.container {
+  padding: 24px;
+}
+
+.responsive-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(50vw, 550px), 1fr));
+  gap: 24px;
 }
--- a/src/app/body/body.component.ts
+++ b/src/app/body/body.component.ts
@@ -0,0 +1,22 @@
+import { Component } from "@angular/core";
+import { NgForOf, NgOptimizedImage } from "@angular/common";
+import { MatGridListModule } from "@angular/material/grid-list";
+import { MatCardModule } from "@angular/material/card";
+import { MatListModule } from "@angular/material/list";
+
+@Component({
+    standalone: true,
+    selector: 'app-body',
+    templateUrl: './body.component.html',
+    styleUrls: ['./body.component.scss'],
+    imports: [
+        NgOptimizedImage,
+        MatGridListModule,
+        MatCardModule,
+        NgForOf,
+        MatListModule
+    ]
+})
+
+export class BodyComponent {
+}
--- a/src/app/carousel-pause/carousel-pause.component.html
+++ b/src/app/carousel-pause/carousel-pause.component.html
@@ -0,0 +1,42 @@
+<ngb-carousel
+        #carousel
+        [interval]="1000"
+        [pauseOnHover]="pauseOnHover"
+        [pauseOnFocus]="pauseOnFocus"
+        (slide)="onSlide($event)"
+>
+    @for (img of images; track img; let i = $index) {
+        <ng-template ngbSlide>
+            <div class="carousel-caption">
+                <!--                <h3>My slide {{ i + 1 }} title</h3>-->
+            </div>
+            <a href="https://www.google.fr/?q=Number+{{ i + 1 }}" target="_blank" rel="nofollow noopener noreferrer">
+                <div class="picsum-img-wrapper">
+                    <img [src]="img" alt="My image {{ i + 1 }} description"/>
+                </div>
+            </a>
+        </ng-template>
+    }
+</ngb-carousel>
+
+<hr/>
+
+<!--<div class="form-check">-->
+<!--    <input type="checkbox" class="form-check-input" id="pauseOnHover" [(ngModel)]="pauseOnHover"/>-->
+<!--    <label class="form-check-label" for="pauseOnHover">Pause on hover</label>-->
+<!--</div>-->
+<!--<div class="form-check">-->
+<!--    <input type="checkbox" class="form-check-input" id="pauseOnFocus" [(ngModel)]="pauseOnFocus"/>-->
+<!--    <label class="form-check-label" for="pauseOnFocus">Pause on focus</label>-->
+<!--</div>-->
+<!--<div class="form-check">-->
+<!--    <input type="checkbox" class="form-check-input" id="unpauseOnArrow" [(ngModel)]="unpauseOnArrow"/>-->
+<!--    <label class="form-check-label" for="unpauseOnArrow">Unpause when clicking on arrows</label>-->
+<!--</div>-->
+<!--<div class="form-check">-->
+<!--    <input type="checkbox" class="form-check-input" id="pauseOnIndicator" [(ngModel)]="pauseOnIndicator"/>-->
+<!--    <label class="form-check-label" for="pauseOnIndicator">Pause when clicking on navigation indicator</label>-->
+<!--</div>-->
+<!--<button type="button" (click)="togglePaused()" class="btn btn-outline-dark btn-sm">-->
+<!--    {{ paused ? 'Cycle' : 'Pause' }}-->
+<!--</button>-->
--- a/src/app/carousel-pause/carousel-pause.component.scss
+++ b/src/app/carousel-pause/carousel-pause.component.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/app/carousel-pause/carousel-pause.component.ts
+++ b/src/app/carousel-pause/carousel-pause.component.ts
@@ -0,0 +1,44 @@
+import {Component, ViewChild} from '@angular/core';
+import {NgbCarousel, NgbCarouselModule, NgbSlideEvent, NgbSlideEventSource} from '@ng-bootstrap/ng-bootstrap';
+import {FormsModule} from '@angular/forms';
+import {NgOptimizedImage} from "@angular/common";
+
+@Component({
+    selector: 'ngbd-carousel-pause',
+    standalone: true,
+    imports: [NgbCarouselModule, FormsModule, NgOptimizedImage],
+    templateUrl: './carousel-pause.component.html',
+})
+export class NgbdCarouselPause {
+    images = [62, 83, 466, 965, 982, 1043, 738].map((n) => `https://picsum.photos/id/${n}/1920/1080`);
+
+    paused = false;
+    unpauseOnArrow = false;
+    pauseOnIndicator = false;
+    pauseOnHover = true;
+    pauseOnFocus = true;
+
+    @ViewChild('carousel', {static: true}) carousel: NgbCarousel = {} as NgbCarousel;
+
+    togglePaused() {
+        if (this.paused) {
+            this.carousel.cycle();
+        } else {
+            this.carousel.pause();
+        }
+        this.paused = !this.paused;
+    }
+
+    onSlide(slideEvent: NgbSlideEvent) {
+        if (
+            this.unpauseOnArrow &&
+            slideEvent.paused &&
+            (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)
+        ) {
+            this.togglePaused();
+        }
+        if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) {
+            this.togglePaused();
+        }
+    }
+}
--- a/src/app/foot/foot.component.html
+++ b/src/app/foot/foot.component.html
@@ -3,8 +3,6 @@
        <p>云南大学软件学院 版权所有</p>
        <p>地址：昆明市呈贡区大学城东外环南路云南大学呈贡校区软件学院楼</p>
        <p>邮编：650504</p>
-        <p>Copyright@ 2002-2018 School of Software</p>
+        <p>Copyright&#64; 2002-2018 School of Software</p>
    </footer>
-</div>
-
-<router-outlet></router-outlet>
+</div>
--- a/src/app/foot/foot.component.scss
+++ b/src/app/foot/foot.component.scss
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+p {
+  font-size: clamp(0.5rem, 0.5vw, 1.5rem);
+}
--- a/src/app/foot/foot.component.ts
+++ b/src/app/foot/foot.component.ts
@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+import { RouterOutlet } from "@angular/router";
+
+@Component({
+    selector: 'app-foot',
+    standalone: true,
+    templateUrl: './foot.component.html',
+    imports: [
+        RouterOutlet
+    ],
+    styleUrls: ['./foot.component.scss']
+})
+export class FootComponent {
+
+}
--- a/src/app/img-show/img-show.component.html
+++ b/src/app/img-show/img-show.component.html
@@ -1,13 +0,0 @@
-<!--图片轮播实现-->
-
-<!-- 轮播图容器 -->
-<div id="carousel">
-    <img src="assets/img/anyuse0.png" alt="anyuse6">
-    <img src="/assets/img/anyuse7.png" alt="anyuse7">
-    <img src="/assets/img/anyuse9.png" alt="anyuse9">
-    <img src="/assets/img/anyuse8.png" alt="anyuse8">
-    <!-- 按钮组 -->
-    <div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->
-    <div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
-    <div id="sliderBtn"></div> <!-- 切换按钮组 -->
-</div>
--- a/src/app/img-show/img-show.component.scss
+++ b/src/app/img-show/img-show.component.scss
@@ -1,68 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-#carousel {
-	@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
-}
-
-#carousel img {
-	position: absolute; /* 绝对定位 使图片堆叠 */
-	width: auto; /* 设定大小 按比例缩放 */
-	height: auto; /* 设定大小 按比例缩放 */
-	transition: all .6s; /* 动画 */
-	opacity: 0; /* 隐藏 */
-}
-
-.imgActive {
-	opacity: 1 !important; /* 显示图片 最高优先级 */
-}
-
-/* 控制按钮的样式 */
-#leftArrow,
-#rightArrow {
-	//position: absolute;
-	//left: 5px;
-	//top: 50%;
-	//width: 25px;
-	//height: 30px;
-	//background-color: #eee;
-	//display: flex;
-	//justify-content: center;
-	//align-items: center;
-	//opacity: 0.7;
-	//font-size: 20px;
-	//cursor: pointer;
-	//z-index: 1000;
-	@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
-}
-
-#rightArrow {
-	//left: auto;
-	//right: 5px;
-	@apply left-auto right-5;
-}
-
-#sliderBtn {
-	//position: absolute;
-	//width: 100%;
-	//bottom: 0;
-	//display: flex;
-	//justify-content: flex-end;
-	//z-index: 1000;
-	@apply absolute w-full bottom-0 flex justify-end z-10;
-}
-
-.unitBtn {
-	//width: 10px;
-	//height: 10px;
-	//background-color: #eee;
-	//border-radius: 10px;
-	//margin: 10px;
-	//cursor: pointer;
-	@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
-}
-
-.btnActive {
-	background-color: #4C98F7;
-}
--- a/src/app/img-show/img-show.component.ts
+++ b/src/app/img-show/img-show.component.ts
@@ -1,13 +0,0 @@
-import {Component} from "@angular/core";
-import {RouterLink} from "@angular/router";
-
-@Component({
-    standalone: true,
-    selector: 'app-img-show',
-    templateUrl: './img-show.component.html',
-    styleUrls: ['./img-show.component.scss'],
-    imports: [RouterLink],
-})
-
-export class ImgShowComponent {
-}
--- a/src/app/top-bar/top-bar.component.scss
+++ b/src/app/top-bar/top-bar.component.scss
@@ -1,3 +1,19 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* header.component.css */
+.flex {
+  /* 标题栏的通用样式 */
+  /* ... */
+
+  /* 响应式布局样式 */
+}
+
+/* 媒体查询样式 */
+@media (max-width: 768px) {
+  .flex {
+    /* 在移动设备上的样式 */
+    /* ... */
+  }
+}
--- a/src/app/top-bar/top-bar.component.ts
+++ b/src/app/top-bar/top-bar.component.ts
@@ -1,6 +1,6 @@
-import {Component} from '@angular/core';
-import {NgOptimizedImage} from '@angular/common';
-import {RouterLink} from "@angular/router";
+import { Component, HostListener, OnInit } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
+import { RouterLink } from "@angular/router";

@Component({
    standalone: true,
@@ -9,5 +9,24 @@ import {RouterLink} from "@angular/router";
    styleUrls: ['./top-bar.component.scss'],
    imports: [NgOptimizedImage, RouterLink],
 })
-export class TopBarComponent {
+export class TopBarComponent implements OnInit {
+    isMobile: boolean = false;
+
+    constructor() {
+
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize(event: Event) {
+        this.updateLayout();
+    }
+
+    ngOnInit(): void {
+        this.updateLayout();
+    }
+
+    updateLayout() {
+        const screenWidth = window.innerWidth;
+        this.isMobile = screenWidth < 768;
+    }
 }
--- a/src/index.html
+++ b/src/index.html
@@ -10,6 +10,6 @@
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body class="mat-typography">
-    <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,5 @@
+/// <reference types="@angular/localize" />
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,3 @@
-
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
@@ -21,11 +20,11 @@ $AngularDemo-warn: mat.define-palette(mat.$red-palette);
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
 $AngularDemo-theme: mat.define-light-theme((
-  color: (
-    primary: $AngularDemo-primary,
-    accent: $AngularDemo-accent,
-    warn: $AngularDemo-warn,
-  )
+        color: (
+                primary: $AngularDemo-primary,
+                accent: $AngularDemo-accent,
+                warn: $AngularDemo-warn,
+        )
 ));

 // Include theme styles for core and each component used in your app.
@@ -38,5 +37,14 @@ $AngularDemo-theme: mat.define-light-theme((
@tailwind components;
@tailwind utilities;

-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+/* Importing Bootstrap SCSS file. */
+@import 'bootstrap/scss/bootstrap';
Author	SHA1	Message	Date
myh	00db29293b	format code	2024-01-04 18:58:46 +08:00
myh	690c28da6d	底部信息展示栏响应式	2024-01-04 01:19:19 +08:00
myh	4a0ffce087	卡片展示响应式	2024-01-04 01:18:55 +08:00
myh	312e815d64	图片轮播响应式	2024-01-04 01:18:40 +08:00
myh	bac7d19682	顶部菜单栏响应式	2024-01-04 01:18:24 +08:00
myh	ab355594ef	代码样式	2024-01-04 01:18:05 +08:00
myh	0fda619b43	format code	2023-12-26 20:32:01 +08:00
myh	0f43786e79	update @angular/core	2023-12-21 22:58:58 +08:00
myh	6a4299a578	angular/material update	2023-12-21 22:23:46 +08:00
myh	dcca62aa6f	angular/core update	2023-12-21 22:22:36 +08:00
myh	dbd45ca636	Angular/cli update	2023-12-21 22:20:51 +08:00
myh	a598f36371	body.component implement	2023-12-08 19:13:46 +08:00
myh	3ea3fa8ea7	page show	2023-12-08 17:45:31 +08:00
myh	bfa6dcd9ea	foot component implement	2023-12-08 17:45:20 +08:00
myh	244e71e007	carousel component implement	2023-12-08 17:45:15 +08:00
myh	614961e475	@ng-bootstrap/ng-bootstrap config	2023-12-08 17:43:50 +08:00