# Hosting Center 手機版設計規範 > 依據現有手機頁（`index_m.html`、`events_m.html`、`album_m.html`、`choose_m.html`、`scan_m.html`）與 `assets/css/style.css` 整理。 --- ## 一、頁面結構 ### HTML 骨架 ```html

...

``` - `` 必須掛 `mobile-hosting-center` class，所有手機專用樣式都在此 scope 下。 - `.site-content` 加 `plus-header` 讓內容區不被 fixed header 蓋住（`padding-top: 45px`）。 - 每個頁面的內容包在 `.page .page-[功能]_m` 裡，CSS class 以 `.page-xxx_m` 對應。 --- ## 二、色彩規範 | 用途 | 色碼 | |------|------| | 主色（品牌綠） | `#05A1AE` | | 主色淺（漸層、hover） | `#90C9CB` | | 主色極淺（背景、輸入框） | `#EEF9F8` | | 輔助綠（開關 checked） | `#44BAB1` | | 相機按鈕 | `#6CBCBF` | | 危險／刪除（次要按鈕紅） | `#ED8989` | | 錯誤邊框 | `#ED1C24` | | 正文深色 | `#333` | | 正文中灰 | `#666` | | 提示淺灰 | `#999` | | 邊框線 | `#C4C4C4` | | 數字卡分隔線 | `#707070` | | 非啟用 tab 背景 | `#bababa` | | 白色 | `#fff` | ### 漸層用法 ```css /* index_m 使用者區塊背景 */ background: linear-gradient(0deg, #ffffff 0%, #90c9cb 100%); /* events_m 事件區塊背景 */ background: linear-gradient(0deg, #ffffff 0%, #efefef 100%); ``` --- ## 三、Header（`.mobile-hosting-center .site-header`） ``` 高度：45px 背景色：#05A1AE（繼承 .site-header） position：fixed，z-index: 100 ``` ### Logo（頁面標題） ``` font-size: 18px font-weight: 500 color: #fff position: absolute，水平置中（translateX(-50%)），top: 8px ``` ### Hamburger 選單按鈕（`.menu-toggle`） ``` position: fixed，top: 0，left: 4px 尺寸：45 × 45px 圖示：icon-menu.svg（24px） ``` ### 選單關閉按鈕（`.menu-close`） ``` position: absolute，top: 0，right: 8px 尺寸：45 × 45px 圖示：menu-close.svg（24px） ``` --- ## 四、側滑選單面板（`.menu-panel`） ``` position: fixed，left: -320px（收起）→ left: 0（展開，加 .is-view）寬度：287px 高度：calc(100svh - 46px) 背景：#fff padding-top: 45px，padding-bottom: 45px box-shadow: 0 0 15px rgba(0,0,0,0.1) transition: ease 0.5s ``` ### 社團名稱區（`.collapse-toggle`） ``` font-size: 18px line-height: 26px color: #05A1AE font-weight: 500 border-bottom: 4px solid #05A1AE 位置：padding: 16px 20px ``` - 右側箭頭圖示：`icon-arrow_down.svg`，24 × 24px，top: 18px / right: 20px。 ### 使用者區塊（`.panel-member-user`） ``` padding: 16px 20px 名稱 (.name): font-size: 15px，line-height: 22px，color: #333，margin-bottom: 12px ``` ### 建立活動按鈕（`.panel-member-user .btn-primary`） ``` width: 100%，height: 44px，font-size: 18px 圖示 icon-paperPlane-outline.svg：20 × 20px，margin-right: 8px ``` ### 子選單（`.panel-member-menu`） ``` border-top: 1px solid #C4C4C4 ``` #### 選單項目（`.panel-member-menu .item`） ``` display: flex，align-items: center padding: 16px 20px border-bottom: 1px solid #C4C4C4 font-size: 18px，line-height: 26px，color: #333 ``` - 啟用狀態（`.active::before`）：左側 4px 豎線，顏色 `#05A1AE`。 - 圖示：width/height 24 × 24px，margin-right: 12px。 ### 子選單子項目（`.main-menu a`） ``` padding: 16px 20px，display: block border-bottom: 1px solid #999 font-size: 18px，line-height: 26px，color: #333 ``` ### 返回連結（`.menu-panel .back`） ``` color: #999，font-size: 15px，line-height: 22px padding: 16px 20px，display: block ``` --- ## 五、Footer（`.mobile-hosting-center .site-footer`） ``` font-size: 12px line-height: 16px padding: 15px 0 背景色：#05A1AE（繼承 .site-footer） color: #fff text-align: center ``` --- ## 六、Section 區塊（`.mobile-hosting-center .page .section`） ### 標題（`.section .title`） ``` color: #05A1AE font-size: 20px，line-height: 29px font-weight: 500 padding-left: 24px 左側豎條 (::before)：寬 10px，高 30px，border-radius: 50px，background-color: #05A1AE ``` ### Section Header 右側連結（`.section-header__right a`） ``` display: flex，align-items: center color: #05A1AE，font-size: 16px，line-height: 30px 圖示 icon-arrow_rigth.svg：16 × 16px ``` ### Section 間距 ``` section-header margin-bottom: 17px（index_m）/ 24px（其他） section-content margin-bottom: 24px section + section margin-top: 24px ``` --- ## 七、Container 寬度 | 頁面 | max-width | |------|-----------| | `.page-index_m .container` | 375px | | `.page-events_m .container` | 375px | | `.page-events_m .events-top .container` | 365px，padding: 0 25px | | `.page-events_m .events-main .container` | 365px，padding: 0 25px | | 全域 `.container` | 1366px，padding: 0 20px | --- ## 八、按鈕規範 ### 主要按鈕（`.btn-primary`） ``` background-color: #05A1AE color: #fff font-size: 16px，line-height: 24px border-radius: 10px display: inline-flex，align-items: center，justify-content: center width: 100%（預設） hover/active：filter: brightness(1.1) ``` ### 次要按鈕（`.btn-secondary`） ``` background-color: #C4C4C4 color: #fff font-size: 16px，line-height: 24px border-radius: 10px hover/active：filter: brightness(1.1) ``` ### 相冊刪除次要按鈕（`.album-modal .album-tool .btn-secondary`） ``` background-color: #ED8989（紅色，刪除用） height: 37px，font-size: 16px ``` ### 掃描按鈕（`.events-top .btn-primary`） ``` width: 100%，height: 40px border-radius: 8px，font-size: 16px，line-height: 40px 圖示 icon-qrcode_scan.svg：24 × 24px，margin-right: 10px ``` ### 新增相簿按鈕（`.section-content .add .btn-primary`） ``` border: 3px dotted #44BAB1 height: 53px，font-size: 16px，line-height: 53px background-color: #EEF9F8，color: #05A1AE margin-bottom: 30px 圖示 icon-plus_circle.svg：20 × 20px，margin-right: 8px ``` ### 相機按鈕（`.btn-camera`） ``` width: 32px，height: 32px background-color: #6CBCBF，border-radius: 50% box-shadow: 0 0 15px rgba(0,0,0,0.1) 圖示 icon-camera.svg：32 × 32px ``` --- ## 九、圖片顯示規則所有圖片區塊統一用 `position: relative` 容器 + `padding-top` 撐比例，圖片 `position: absolute` 填滿： ```css .image { position: relative; overflow: hidden; } .image::before { content: ""; padding-top: 100%; /* 依比例調整 */ display: block; } .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } ``` | 用途 | 尺寸 | border-radius | |------|------|---------------| | 使用者頭像（index_m） | 75 × 75px | 50%（圓形） | | 使用者頭像（events_m） | 60 × 60px | 50%（圓形） | | 活動列表縮圖 | 100 × 100px | 15px | | 活動 Banner | 全寬 | 20px | | 相冊縮圖 | 100 × 100px | 繼承 item | | choose-modal 社團圖 | 75 × 75px | 50%（圓形） | --- ## 十、字級系統 | 層級 | font-size | line-height | font-weight | 常用色 | |------|-----------|-------------|-------------|--------| | 頁面大標 / 社團名稱 | 20px | 29px | 500 | #333 | | Section 標題 | 20px | 29px | 500 | #05A1AE | | Modal 標題 | 20px | 50px | 500 | #333 | | 選單項目 / 建立活動按鈕 | 18px | 26px | 400 | #333 | | Header Logo | 18px | - | 500 | #fff | | 主要文字（列表） | 14px | 20px | 400 | #666 | | 副標 / 使用者 ID | 15px | 22px | 400 | #333 | | 卡片數字大 (.number-lg) | 30px | 44px | 900 | #333 | | 卡片數字中 (.text-md) | 18px | 26px | 500 | #333 | | 卡片標題 (.text-lg) | 20px | 29px | 500 | #333 | | 卡片小字 (.text-small) | 12px | 15px | 400 | #333 | | 日期 / 位置標籤 | 14px | 20px | 400 | #C4C4C4 | | Modal 選項文字 | 17px | 30px | 400 | #666 | | 返回連結 | 15px | 22px | 400 | #999 | | Footer | 12px | 16px | 400 | #fff | | 相簿日期 / 張數 | 15px | 24px | 400 | #C4C4C4 | **字型：** `'Noto Sans TC', 'Microsoft JhengHei', Arial, sans-serif` --- ## 十一、列表項目（`.page-index_m .item`） ``` display: flex + .item：margin-top: 20px .image：100 × 100px，border-radius: 15px，box-shadow: 0 0 10px rgba(0,0,0,0.1) .content：padding-left: 12px，width: calc(100% - 100px) .info-group：flex wrap，font-size: 14px，color: #C4C4C4，margin-bottom: 5px .location：display: flex，margin-right: 8px .main-text：font-size: 14px，line-height: 20px，color: #666 icon-pin：24 × 24px，margin-left: -4px ``` --- ## 十二、活動統計卡片（`.page-events_m`） ``` 整體 item： box-shadow: 0 0 15px rgba(0,0,0,0.2) border-radius: 8px，overflow: hidden text-align: center，background-color: #fff + .item：margin-top: 24px item-header（啟用）：background-color: #90C9CB，font-size: 15px，line-height: 32px，color: #fff item-header-gray（停用）：background-color: #bababa，同上 item-content：padding: 8px block-group（雙欄分隔）：display: flex，margin: -12px .block：margin: 12px，width: calc(50% - 24px) 分隔線 (::before)：left: -12px，寬 1px，height: calc(100% - 6px)，color: #707070 item-group（並排卡片）：display: flex，margin: -12px，margin-top: 12px item：寬 calc(50% - 24px) ``` ### Tab 切換卡（`.item-tab`） ``` box-shadow: 0 0 15px rgba(0,0,0,0.2)，border-radius: 8px margin-bottom: 30px item-header-container：display: flex 啟用 tab：background-color: #90C9CB，::before 內容 "▶"，left: 10px 非啟用：background-color: #bababa item-content：display: none；.active 改 display: block border-top: 1px solid #ccc，padding: 10px ``` ### 表格（`.events-main table`） ``` font-size: 15px th：border-bottom: 2px #eee solid，font-weight: bold，color: #333 td：color: #333 ``` --- ## 十三、掃描頁（`.page-scan_m`） ``` position: relative，width: 100vw，height: calc(100svh - 45px)，overflow: hidden 背景圖（img）：position: absolute，top: 40%，left: 50%，translate(-50%,-50%)，2000 × 2000px .scan-main：position: absolute，top: 40%，left: 50%，translate(-50%,-50%) height: 330px，width: 210px color: #fff，text-align: center display: flex，flex-direction: column，justify-content: space-between，align-items: center .top-text：font-size: 17px，line-height: 24px .main-text：font-size: 20px，line-height: 27px ``` --- ## 十四、Modal 燈箱 ### 共用規則 ``` .modal-content：border-radius: 0，padding: 0，border: 0 .modal .btn-close：位置：top: 0，right: 0，width/height: 50px background-color: #05A1AE 圖示：modal-close.svg（20px） ``` ### 選擇社團燈箱（`.choose-modal`） ``` .modal-dialog：max-width: 325px .title：font-size: 20px，line-height: 50px，font-weight: 500 padding: 0 20px，border-bottom: 1px solid #666 .item：display: flex，align-items: center，margin: 20px + .item：margin-top: 20px .image：75 × 75px，border-radius: 50%，border: 1px solid #C4C4C4 .main-text：font-size: 17px，line-height: 30px，color: #666，padding-left: 16px ``` ### 相簿 Modal（`.album-modal`） ``` .modal-dialog：max-width: 325px .title：同 choose-modal .item：display: flex，align-items: center，width: calc(50% - 14px)，margin: 7px .image：300 × 135px，border: 1px solid #C4C4C4 .main-text：font-size: 17px，line-height: 30px，color: #666 .album-tool .btn-primary：width: 100%，height: 37px，font-size: 16px .album-tool .btn-secondary：width: 100%，height: 37px，background-color: #ED8989 ``` ### 刪除確認 Modal（`.album-delete-modal`） ``` .title：同 choose-modal 樣式 .inner .main-text：說明文字 .inner .sub-text：補充說明（#C4C4C4） .action：兩個按鈕並排（.btn-secondary 取消 + .btn-primary 確認） ``` --- ## 十五、表單元件 ### 輸入框（`.form-control`） ``` padding: 8px 20px font-size: 16px，line-height: 24px，color: #333 background-color: #EEF9F8，border: 0，border-radius: 10px placeholder：color: #333 :focus：background-color: #fff，box-shadow: 0 0 0 1px #C4C4C4 inset .is-invalid：box-shadow: 0 0 0 1px #ED1C24 inset，background: none ``` ### 下拉選單（`.form-select`） ``` padding: 8px 20px（右側 40px） font-size: 16px，background-color: #EEF9F8 border: 0，border-radius: 10px 箭頭圖示：select-arrow.svg，right 16px，16px ``` ### 開關（`.form-switch`） ``` 寬：42px，高：20px，border-radius: 16px 預設：background-color: #999 checked：background-color: #44BAB1 ``` --- ## 十六、分頁（`.pagination`） ``` .page-link：min-width 26px，height 26px，font-size 14px，border-radius 50%，color #999，border: 0 .active .page-link：background-color #05A1AE，color #fff hover：color #05A1AE，background transparent icon-prev / icon-next：24 × 24px .page-item：margin: 0 6px 相簿分頁：margin-top: 40px ``` --- ## 十七、Side Sticky（回頂部按鈕） ``` position: fixed，bottom: 80px（手機 < 750px 改 55px），right: 20px（手機改 10px） display: none；加 .is-view 才顯示 .totop：width/height 55px，border-radius 50%，background-color #05A1AE color #fff，font-size 15px，line-height 24px，padding 4px 0 icon-top.svg：24 × 24px ``` --- ## 十八、互動效果所有互動元素統一用以下模式，不使用 `:hover` 覆蓋色值： ```css /* 點擊 */ .element:active { filter: brightness(1.1); } /* 滑鼠 hover（非觸控裝置） */ @media (hover: hover) { .element:hover { filter: brightness(1.1); } } ``` --- ## 十九、圖示（Icon）系統所有圖示用 `