ZYM/BH-Bookstore-2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复了查询页面的样式问题

Browse Source
This commit is contained in:
ZhuangYumin
2023-12-18 08:57:39 +00:00
parent d747b430ae
commit a580e27ba4
1 changed files with 55 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/Web/show.html
View File

@ -17,53 +17,58 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.search-panel { .search-panel {
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
} }
.search-panel button { .search-panel button,
background-color: #4CAF50; .search-panel form {
color: white; display: inline-block; /* 或者使用 display: inline-flex; */
padding: 10px 15px; }
border: none;
border-radius: 5px;
cursor: pointer;
}
.search-panel label { .search-panel button {
margin-right: 10px; background-color: #4CAF50;
} color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.search-panel select, .search-panel label {
.search-panel input { margin-right: 10px;
padding: 8px; }
margin-right: 10px;
}
#searchResults { .search-panel select,
margin-top: 20px; .search-panel input {
} padding: 8px;
margin-right: 10px;
}
#searchResults table { #searchResults {
width: 100%; margin-top: 20px;
border-collapse: collapse; }
margin-top: 10px;
}
#searchResults th, #searchResults td { #searchResults table {
border: 1px solid #ddd; width: 100%;
padding: 8px; border-collapse: collapse;
text-align: left; margin-top: 10px;
} }
#searchResults th { #searchResults th, #searchResults td {
background-color: #4CAF50; border: 1px solid #ddd;
color: white; padding: 8px;
} text-align: left;
}
#searchResults td { #searchResults th {
background-color: #f2f2f2; background-color: #4CAF50;
} color: white;
}
#searchResults td {
background-color: #f2f2f2;
}
</style> </style>
</head> </head>
<body> <body>
@ -96,15 +101,17 @@
<div class="content"> <div class="content">
<div class="search-panel"> <div class="search-panel">
<button onclick="ShowAll()">Show All Books</button> <button onclick="ShowAll()">Show All Books</button>
<label for="searchType">Or Search by:</label> <form onsubmit="console.log('trying passwd'); performSearch(); return false;">
<select id="searchType"> <label for="searchType">Or Search by:</label>
<option value="isbn">ISBN</option> <select id="searchType">
<option value="title">Title</option> <option value="isbn">ISBN</option>
<option value="author">Author</option> <option value="title">Title</option>
<option value="keyword">Keyword</option> <option value="author">Author</option>
</select> <option value="keyword">Keyword</option>
<input type="text" id="searchInput" placeholder="Enter search term" required> </select>
<button onclick="performSearch()">Search</button> <input type="text" id="searchInput" placeholder="Enter search term" required>
<button type="submit">Search</button>
</form>
</div> </div>
<div id="searchResults"></div> <div id="searchResults"></div>
</div> </div>