fix: 优化规格选择器样式 - 处理长名称显示和添加 tooltip
parent
dce3c45b23
commit
fdd89fbb70
|
|
@ -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; }
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue