fix: 优化规格选择器样式 - 处理长名称显示和添加 tooltip

pull/19/head
Council 2026-04-21 13:09:48 +08:00
parent dce3c45b23
commit fdd89fbb70
2 changed files with 9 additions and 4 deletions

View File

@ -108,10 +108,15 @@
.vr-spec-label { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; } .vr-spec-label { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; }
.vr-spec-options { display: flex; flex-wrap: wrap; gap: 8px; } .vr-spec-options { display: flex; flex-wrap: wrap; gap: 8px; }
.vr-spec-option { .vr-spec-option {
border: 1px solid #ddd; border-radius: 6px; padding: 8px 16px; border: 1px solid #ddd; border-radius: 6px; padding: 6px 12px;
cursor: pointer; font-size: 13px; color: #333; cursor: pointer; font-size: 12px; color: #333;
transition: all 0.15s; transition: all 0.15s;
white-space: nowrap;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
} }
.vr-spec-option:hover { border-color: #409eff; } .vr-spec-option:hover { border-color: #409eff; }
.vr-spec-option.selected { border-color: #409eff; background: #ecf5ff; color: #409eff; } .vr-spec-option.selected { border-color: #409eff; background: #ecf5ff; color: #409eff; }
.vr-spec-option:hover { background: #f5f7fa; }

View File

@ -130,7 +130,7 @@
var venueHtml = '<div class="vr-spec-selector"><div class="vr-spec-label">选择场馆</div><div class="vr-spec-options">'; var venueHtml = '<div class="vr-spec-selector"><div class="vr-spec-label">选择场馆</div><div class="vr-spec-options">';
if (specTypeList['$vr-场馆']) { if (specTypeList['$vr-场馆']) {
specTypeList['$vr-场馆'].options.forEach(function(venue) { specTypeList['$vr-场馆'].options.forEach(function(venue) {
venueHtml += '<div class="vr-spec-option" data-venue="' + venue + '" onclick="vrTicketApp.selectVenue(this)">' + venue + '</div>'; venueHtml += '<div class="vr-spec-option" data-venue="' + venue + '" title="' + venue + '" onclick="vrTicketApp.selectVenue(this)">' + venue + '</div>';
}); });
} }
venueHtml += '</div></div>'; venueHtml += '</div></div>';
@ -140,7 +140,7 @@
var sectionHtml = '<div class="vr-spec-selector"><div class="vr-spec-label">选择分区</div><div class="vr-spec-options">'; var sectionHtml = '<div class="vr-spec-selector"><div class="vr-spec-label">选择分区</div><div class="vr-spec-options">';
if (specTypeList['$vr-分区']) { if (specTypeList['$vr-分区']) {
specTypeList['$vr-分区'].options.forEach(function(section) { specTypeList['$vr-分区'].options.forEach(function(section) {
sectionHtml += '<div class="vr-spec-option" data-section="' + section + '" onclick="vrTicketApp.selectSection(this)">' + section + '</div>'; sectionHtml += '<div class="vr-spec-option" data-section="' + section + '" title="' + section + '" onclick="vrTicketApp.selectSection(this)">' + section + '</div>';
}); });
} }
sectionHtml += '</div></div>'; sectionHtml += '</div></div>';