improve style of the page ui

[LinuxSuRen]

We highly recommend you read the contributor's documentation before starting the review process especially since this is your first contribution to this project.

It was updated on 2024/5/27

What type of PR is this?

What this PR does / why we need it:

Which issue(s) this PR fixes:

Fixes #

[sonarcloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions[bot]]

There are 1 test cases, failed count 0:

Name	Average	Max	Min	Count	Error
	9.916384ms	11.110616ms	9.055346ms	3	0

Reported by api-testing.

[codacy-production[bot]]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
:white_check_mark: +0.09% (target: -1.00%)	:white_check_mark: ∅ (target: 80.00%)

Coverage variation details

| | Coverable lines | Covered lines | Coverage | | ------------- | ------------- | ------------- | ------------- | | Common ancestor commit (3620c5475a7915d541b807373205967a5befb58e) | 17567 | 7237 | 41.20% | | | Head commit (7236f31e427a04198031092f11a1ddedac406111) | 17985 (+418) | 7426 (+189) | 41.29% (**+0.09%**) | **Coverage variation** is the difference between the coverage for the head and common ancestor commits of the pull request branch: ` - `

Diff coverage details

| | Coverable lines | Covered lines | Diff coverage | | ------------- | ------------- | ------------- | ------------- | | Pull request (#540) | 0 | 0 | **∅ (not applicable)** | **Diff coverage** is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: `/ * 100%`

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}