upgrade_page_browse
This commit is contained in:
superlishunqin
parent
a23fa40c82
commit
868cc88d54
@ -86,7 +86,7 @@
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 10; /* 增加z-index值 */
|
||||
}
|
||||
|
||||
.search-form {
|
||||
@ -203,7 +203,7 @@
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
|
||||
padding: 10px;
|
||||
z-index: 100;
|
||||
z-index: 20; /* 确保下拉菜单有更高的z-index */
|
||||
display: none;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
@ -272,6 +272,54 @@
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
/* 统一下拉菜单样式 */
|
||||
.sort-filters, .order-filters {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.sort-toggle, .order-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
background: #f7fafc;
|
||||
border: 1px solid #e4e7eb;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
color: #3c4858;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.sort-toggle:hover, .order-toggle:hover {
|
||||
background: #edf2f7;
|
||||
}
|
||||
|
||||
.sort-dropdown, .order-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
|
||||
padding: 10px;
|
||||
z-index: 20; /* 确保下拉菜单有更高的z-index */
|
||||
display: none;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sort-dropdown.show, .order-dropdown.show {
|
||||
display: block;
|
||||
animation: fadeIn 0.2s;
|
||||
}
|
||||
|
||||
/* 图书统计显示 */
|
||||
.browse-stats {
|
||||
display: flex;
|
||||
@ -340,7 +388,7 @@
|
||||
gap: 25px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 5; /* 降低图书卡片的z-index */
|
||||
}
|
||||
|
||||
/* 图书卡片样式 */
|
||||
|
||||
@ -1,15 +1,42 @@
|
||||
// 图书浏览页面脚本
|
||||
$(document).ready(function() {
|
||||
// 分类筛选下拉菜单
|
||||
$('.category-filter-toggle').click(function() {
|
||||
$('.category-filter-toggle:not(.sort-toggle):not(.order-toggle)').click(function(e) {
|
||||
e.stopPropagation();
|
||||
// 关闭其他可能打开的下拉菜单
|
||||
$('.category-filter-dropdown').not($(this).siblings('.category-filter-dropdown')).removeClass('show');
|
||||
$('.category-filter-toggle').not($(this)).removeClass('active');
|
||||
|
||||
$(this).toggleClass('active');
|
||||
$('.category-filter-dropdown').toggleClass('show');
|
||||
$(this).siblings('.category-filter-dropdown').toggleClass('show');
|
||||
});
|
||||
|
||||
// 排序下拉菜单
|
||||
$('.sort-toggle').click(function(e) {
|
||||
e.stopPropagation();
|
||||
// 关闭其他可能打开的下拉菜单
|
||||
$('.category-filter-dropdown').not($(this).siblings('.sort-dropdown')).removeClass('show');
|
||||
$('.category-filter-toggle').not($(this)).removeClass('active');
|
||||
|
||||
$(this).toggleClass('active');
|
||||
$(this).siblings('.sort-dropdown').toggleClass('show');
|
||||
});
|
||||
|
||||
// 升降序下拉菜单
|
||||
$('.order-toggle').click(function(e) {
|
||||
e.stopPropagation();
|
||||
// 关闭其他可能打开的下拉菜单
|
||||
$('.category-filter-dropdown').not($(this).siblings('.order-dropdown')).removeClass('show');
|
||||
$('.category-filter-toggle').not($(this)).removeClass('active');
|
||||
|
||||
$(this).toggleClass('active');
|
||||
$(this).siblings('.order-dropdown').toggleClass('show');
|
||||
});
|
||||
|
||||
// 点击外部关闭下拉菜单
|
||||
$(document).click(function(e) {
|
||||
if (!$(e.target).closest('.category-filters').length) {
|
||||
$('.category-filter-dropdown').removeClass('show');
|
||||
if (!$(e.target).closest('.category-filters, .sort-filters, .order-filters').length) {
|
||||
$('.category-filter-dropdown, .sort-dropdown, .order-dropdown').removeClass('show');
|
||||
$('.category-filter-toggle').removeClass('active');
|
||||
}
|
||||
});
|
||||
@ -251,6 +278,21 @@ $(document).ready(function() {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加下拉菜单的 z-index 样式，解决被图书挡住的问题 */
|
||||
.filter-section {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.category-filter-dropdown, .sort-dropdown, .order-dropdown {
|
||||
z-index: 31;
|
||||
}
|
||||
|
||||
.books-grid {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
`;
|
||||
|
||||
$('<style>').text(notificationCSS).appendTo('head');
|
||||
|
||||
@ -47,19 +47,49 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group filter-group">
|
||||
<select name="sort" class="form-control" onchange="this.form.submit()">
|
||||
<option value="id" {% if sort == 'id' %}selected{% endif %}>默认排序</option>
|
||||
<option value="created_at" {% if sort == 'created_at' %}selected{% endif %}>入库时间</option>
|
||||
<option value="title" {% if sort == 'title' %}selected{% endif %}>书名</option>
|
||||
<option value="stock" {% if sort == 'stock' %}selected{% endif %}>库存</option>
|
||||
</select>
|
||||
|
||||
<!-- 修改默认排序下拉列表 -->
|
||||
<div class="sort-filters">
|
||||
<button type="button" class="category-filter-toggle sort-toggle">
|
||||
<i class="fas fa-sort"></i> {{ '入库时间' if sort == 'created_at' else '书名' if sort == 'title' else '库存' if sort == 'stock' else '默认排序' }}
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="category-filter-dropdown sort-dropdown">
|
||||
<a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort='id', order=order) }}"
|
||||
class="category-item {% if sort == 'id' %}active{% endif %}">
|
||||
<i class="fas fa-sort-numeric-down"></i> 默认排序
|
||||
</a>
|
||||
<a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort='created_at', order=order) }}"
|
||||
class="category-item {% if sort == 'created_at' %}active{% endif %}">
|
||||
<i class="fas fa-calendar-alt"></i> 入库时间
|
||||
</a>
|
||||
<a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort='title', order=order) }}"
|
||||
class="category-item {% if sort == 'title' %}active{% endif %}">
|
||||
<i class="fas fa-font"></i> 书名
|
||||
</a>
|
||||
<a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort='stock', order=order) }}"
|
||||
class="category-item {% if sort == 'stock' %}active{% endif %}">
|
||||
<i class="fas fa-warehouse"></i> 库存
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group filter-group">
|
||||
<select name="order" class="form-control" onchange="this.form.submit()">
|
||||
<option value="desc" {% if order == 'desc' %}selected{% endif %}>降序</option>
|
||||
<option value="asc" {% if order == 'asc' %}selected{% endif %}>升序</option>
|
||||
</select>
|
||||
|
||||
<!-- 修改升降序下拉列表 -->
|
||||
<div class="order-filters">
|
||||
<button type="button" class="category-filter-toggle order-toggle">
|
||||
<i class="fas fa-{{ 'sort-amount-down' if order == 'desc' else 'sort-amount-up' }}"></i> {{ '降序' if order == 'desc' else '升序' }}
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="category-filter-dropdown order-dropdown">
|
||||
<a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort=sort, order='desc') }}"
|
||||
class="category-item {% if order == 'desc' %}active{% endif %}">
|
||||
<i class="fas fa-sort-amount-down"></i> 降序
|
||||
</a>
|
||||
<a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort=sort, order='asc') }}"
|
||||
class="category-item {% if order == 'asc' %}active{% endif %}">
|
||||
<i class="fas fa-sort-amount-up"></i> 升序
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user