Tony 線上美語 - 課程導覽
Tony線上美語家教
--------------------------------------------- CSS-Only 垂直按鈕與公告面板 (左側, 固定關閉按鈕) 📢 最新消息+優惠課程
×
×
📅 2025年5月30日 (星期五) 重要通知

🐲 端午節當日課程公告 粽 端午節龍舟圖示

  • 🕒 上課時間: 當日課程服務時間僅提供至 下午 3 時,敬請同學提前安排上課時段。 ➡️ 立即預約
  • ✅ 訂閱制會員點數說明: 端午節當日扣點標準將依照 平日計算,不另調整,敬請放心使用。

🎉 祝端午安康,期待與您線上相見!

Best regards,
Tony

04/21/2025 Updated News

點數制同學全數升等為VIP學員!

為了感謝一直以來支持Tony線上美語家教、採用「每週扣除固定點數制」上課的同學們,即日起,這些同學全數升等為VIP學員! 🎉 專屬福利將陸續公布,敬請期待!

VIP 學員公告 🔗 詳細公告
04/12/2025 Updated News

請假、調課 適用時段更新

  • 🌟 週一~週五 6pm–10pm
  • 🌟 週五 1pm–6pm(新增)
  • 🌟 週六整天
  • 🌟 國定假日
  • 📌 未提前『24小時』內請假或調課通知,扣除『半堂課』時數。
  • 📌 未提前『12小時』內請假或調課通知,扣除『整堂課』時數。
🔗 請假調課說明連結
03/23/2025 Updated News

全民英檢初級-影片課程

讓你可以無限制觀看影片,贈送 1 線上專業指導課程及四回寫作批改。

🔗 GEPT 影片課程介紹
09/30/2024 Updated News

特殊時段優惠每堂只要 350 點(每堂 50 分)

週一~週五 平常日上午 10am–5pm。最超值的一對一美語課程!

🔗 優惠課程 - 350 點介紹
--------------------------------- 預約按鈕與滑出面板 📅 點選預約體驗課程 --------------------------------------------- /* --- Panel Content --- */ #announcement-panel-content { position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 500px; /* 或你的其他設定 */ background-color: white; box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; /* 為了容納左側的關閉按鈕,增加左邊內距 */ /* 這個值需要根據你的按鈕寬度和期望的間距調整 */ padding-left: 50px; /* << 新增:為按鈕騰出空間 */ box-sizing: border-box; /* << 新增:確保 padding 不會增加總寬度 (如果 max-width 是基於 content-box) */ } /* --- Close Button (NEW POSITION: Inside panel's left padding area) --- */ .panel-close-btn { position: absolute; top: 50%; left: 0; /* 定位到 #announcement-panel-content 的最左邊 (padding 區域的開始) */ transform: translateY(-50%); /* 僅垂直居中 */ /* 不再需要 translateX(-100%) */ width: 50px; /* << 新增/修改:按鈕的寬度,應與 #announcement-panel-content 的 padding-left 匹配或稍小 */ height: auto; /* 或者設定一個固定高度 */ background-color: #e53935; color: white; font-size: 24px; font-weight: bold; text-decoration: none; line-height: 1; /* padding: 12px 0; */ /* 調整 padding 使叉叉在按鈕內居中 */ display: flex; /* << 新增:方便居中叉叉 */ align-items: center; /* << 新增:垂直居中叉叉 */ justify-content: center; /* << 新增:水平居中叉叉 */ border-radius: 0; /* 可以考慮只圓角右邊:border-radius: 0 8px 8px 0; 如果希望它看起來像個tab */ /* 如果希望按鈕是方形的,可以設定 height: 50px; padding: 0; */ z-index: 15; cursor: pointer; box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* 可選,調整陰影方向 */ transition: background-color 0.2s; } .panel-close-btn span { /* 如果叉叉不是直接文字,而是放在span裡 */ display: block; } /* --- Panel Header (Sticky) --- */ #announcement-header { background-color: #e53935; color: white; padding: 10px 15px; font-size: 18px; font-weight: bold; position: sticky; top: 0; z-index: 10; display: flex; justify-content: center; align-items: center; text-align: center; /* 因為父容器有 padding-left,header 和 content 的有效寬度會減少 */ /* 如果 header/content 需要佔滿扣除 padding 後的寬度,它們的 width 預設就是 auto (塊級元素) */ /* 或者如果它們之前有 width: 100%,這裡不需要改,因為它們會是 padding-box 的 100% */ } #announcement-header::before { content: '🏷️ 最新消息+優惠課程'; } #announcement-content { flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; /* 這個 padding 是內容區的 padding,與 panel 的 padding-left 分開 */ font-size: 16px; line-height: 1.6; color: #333; /* 同樣,有效寬度會是父容器 content-box 的寬度 */ } /* 響應式調整中也需要考慮按鈕和 padding */ @media (min-width: 768px) { #announcement-panel-content { padding-left: 55px; /* 可調整 */ max-width: 450px; /* 保持原樣或調整 */ } .panel-close-btn { width: 55px; /* 匹配 padding-left */ font-size: 26px; /* padding: 12px 0; */ } /* ... 其他原有的響應式調整 ... */ } @media (min-width: 1024px) { #announcement-panel-content { padding-left: 60px; /* 可調整 */ max-width: 500px; /* 保持原樣或調整 */ } .panel-close-btn { width: 60px; /* 匹配 padding-left */ font-size: 28px; /* padding: 14px 0; */ } /* ... 其他原有的響應式調整 ... */ } ------------------------------------------- --- -- ------ ------- ------------- --- -- ------------- 上方跑馬燈 (修正 Logo 遮擋)
----