style: 演唱會搜尋橫列
This commit is contained in:
+1
-1
@@ -173,7 +173,7 @@
|
|||||||
|
|
||||||
group.appendChild(toggle);
|
group.appendChild(toggle);
|
||||||
group.appendChild(body);
|
group.appendChild(body);
|
||||||
itineraryList.insertBefore(group, detailPanel);
|
itineraryList.appendChild(group);
|
||||||
dayGroups.set(dayLabel, { group, toggle, body });
|
dayGroups.set(dayLabel, { group, toggle, body });
|
||||||
return dayGroups.get(dayLabel);
|
return dayGroups.get(dayLabel);
|
||||||
}
|
}
|
||||||
|
|||||||
+77
-1
@@ -39,6 +39,73 @@
|
|||||||
body.concert-page .con-4[data-tour="ACCESS"]::after {
|
body.concert-page .con-4[data-tour="ACCESS"]::after {
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 巡迴搜尋：樣式對齊 .search-input；第一列 input+btn，第二列白字結果 */
|
||||||
|
.concert-search-box {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 920px;
|
||||||
|
padding: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concert-search-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concert-search-row .search-input {
|
||||||
|
flex: 1 1 200px;
|
||||||
|
width: auto;
|
||||||
|
max-width: 320px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concert-search-row .search-input:focus {
|
||||||
|
width: auto;
|
||||||
|
max-width: 340px;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concert-search-btn {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 12px 22px;
|
||||||
|
border: 2px solid #ffcc00;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background-color: #ffcc00;
|
||||||
|
color: #2f2f2f;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concert-search-btn:hover {
|
||||||
|
border-color: #e6b800;
|
||||||
|
box-shadow: 0 4px 15px rgba(255, 204, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concert-search-btn:focus {
|
||||||
|
box-shadow: 0 0 10px rgba(255, 204, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
#concert-search-result {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -55,7 +122,16 @@
|
|||||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||||
<canvas id="particles"></canvas>
|
<canvas id="particles"></canvas>
|
||||||
<div class="search-section">
|
<div class="search-section">
|
||||||
<input type="text" class="search-input" placeholder="搜尋曲目或場次...">
|
<div class="concert-search-box">
|
||||||
|
<div class="concert-search-row">
|
||||||
|
<input type="text" class="search-input" id="concert-query"
|
||||||
|
placeholder="搜尋曲目或場次…">
|
||||||
|
<input type="text" class="search-input" id="concert-member"
|
||||||
|
placeholder="成員或段落（可空白）…">
|
||||||
|
<button type="button" class="concert-search-btn" id="concert-search-btn">查這場巡迴</button>
|
||||||
|
</div>
|
||||||
|
<span id="concert-search-result">輸入後按「查這場巡迴」，會顯示比對結果。</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="concert-container">
|
<div class="concert-container">
|
||||||
|
|
||||||
|
|||||||
+29
-16
@@ -8,6 +8,20 @@
|
|||||||
<link rel="stylesheet" href="../assets/css/style.css">
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
<link rel="stylesheet" href="../assets/css/tablet.css">
|
<link rel="stylesheet" href="../assets/css/tablet.css">
|
||||||
|
<style>
|
||||||
|
/* display:grid / flex 會蓋掉 HTML hidden，預設只顯示單張地圖 */
|
||||||
|
body.map-page .map-embed-all[hidden],
|
||||||
|
body.map-page .map-embed-single[hidden],
|
||||||
|
body.map-page .map-links-dual[hidden],
|
||||||
|
body.map-page #open-map-link[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.map-page .detail-panel {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="map-page">
|
<body class="map-page">
|
||||||
@@ -78,7 +92,21 @@
|
|||||||
|
|
||||||
<section class="itinerary-list">
|
<section class="itinerary-list">
|
||||||
<!-- 備註：每張卡的 data-* 是「細節面板的資料來源」。
|
<!-- 備註：每張卡的 data-* 是「細節面板的資料來源」。
|
||||||
你只要改 data-date/title/desc/quote/tag/link 和圖片，就會同步更新下方介紹。 -->
|
你只要改 data-date/title/desc/quote/tag/link 和圖片，就會同步更新上方介紹。 -->
|
||||||
|
<article class="detail-panel" id="detail-panel" aria-live="polite">
|
||||||
|
<div class="detail-photo">
|
||||||
|
<img id="detail-image" src="https://picsum.photos/seed/day1-airport/900/520" alt="行程節目截圖">
|
||||||
|
</div>
|
||||||
|
<div class="detail-content">
|
||||||
|
<span id="detail-date" class="date">Day 1</span>
|
||||||
|
<h3 id="detail-title">臺灣桃園國際機場</h3>
|
||||||
|
<p id="detail-desc">高高父子遊台灣 Day 1 首站，從桃園機場正式開啟三天行程。</p>
|
||||||
|
<blockquote id="detail-quote">「旅程從落地那一刻就開始了。」</blockquote>
|
||||||
|
<div id="detail-tag" class="tag">#高高父子遊台灣 #Day1 #機場</div>
|
||||||
|
<a id="detail-link" class="detail-link" target="_blank"
|
||||||
|
href="https://maps.google.com/?q=臺灣桃園國際機場">查看此地點</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
<article class="polaroid-card active" data-member="eun" data-date="殷志源 Day 1" data-title="仁川國際機場"
|
<article class="polaroid-card active" data-member="eun" data-date="殷志源 Day 1" data-title="仁川國際機場"
|
||||||
data-desc="殷空少搭飛機去台灣高雄 Day 1 起點，從仁川出發。"
|
data-desc="殷空少搭飛機去台灣高雄 Day 1 起點，從仁川出發。"
|
||||||
data-quote="高雄，我們來了。" data-tag="#殷志源 #Day1 #出發"
|
data-quote="高雄，我們來了。" data-tag="#殷志源 #Day1 #出發"
|
||||||
@@ -482,21 +510,6 @@
|
|||||||
<div class="tag">#高高父子遊台灣 #Day3</div>
|
<div class="tag">#高高父子遊台灣 #Day3</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="detail-panel" id="detail-panel" aria-live="polite">
|
|
||||||
<div class="detail-photo">
|
|
||||||
<img id="detail-image" src="https://picsum.photos/seed/day1-airport/900/520" alt="行程節目截圖">
|
|
||||||
</div>
|
|
||||||
<div class="detail-content">
|
|
||||||
<span id="detail-date" class="date">Day 1</span>
|
|
||||||
<h3 id="detail-title">臺灣桃園國際機場</h3>
|
|
||||||
<p id="detail-desc">高高父子遊台灣 Day 1 首站，從桃園機場正式開啟三天行程。</p>
|
|
||||||
<blockquote id="detail-quote">「旅程從落地那一刻就開始了。」</blockquote>
|
|
||||||
<div id="detail-tag" class="tag">#高高父子遊台灣 #Day1 #機場</div>
|
|
||||||
<a id="detail-link" class="detail-link" target="_blank"
|
|
||||||
href="https://maps.google.com/?q=臺灣桃園國際機場">查看此地點</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
|||||||
Reference in New Issue
Block a user