diff --git a/miniprogram/app.scss b/miniprogram/app.scss index a622558..50e6753 100644 --- a/miniprogram/app.scss +++ b/miniprogram/app.scss @@ -1,17 +1,34 @@ +$theme-color-blue: #3EA3D8; +$theme-color-red: #FF9393; + +$theme-color-light-layout: #F8F8F8; +$theme-color-light-background: #f4f0f1; +$theme-color-light-title: rgba(0, 0, 0, .65); +$theme-color-light-text: rgba(0, 0, 0, .55); + +$theme-color-dark-layout: #191919; +$theme-color-dark-background: #1f1f1f; +$theme-color-dark-title: rgba(255, 255, 255, .65); +$theme-color-dark-text: rgba(255, 255, 255, .55); + +$black-filter: brightness(0) opacity(.65); +$white-filter: brightness(100) opacity(.65); +$blue-filter: opacity(.65); + + + page { background-color: #f4f0f1; - color: rgba(0, 0, 0, .55); + color: $theme-color-light-text; font-weight: 500; font-size: .9em; - font-family: 'Lucida Sans', - 'Lucida Sans Regular', 'Lucida Grande', - 'Lucida Sans Unicode', 'Geneva', 'Verdana', 'sans-serif'; + font-family: Hiragino Sans GB, MicroSoft YaHei; } @media (prefers-color-scheme: dark){ page { background-color: #1f1f1f; - color: rgba(255, 255, 255, .55); + color: $theme-color-dark-text; } } \ No newline at end of file diff --git a/miniprogram/image/ui/last_semester_0.svg b/miniprogram/image/ui/last_semester_0.svg new file mode 100644 index 0000000..3b6c848 --- /dev/null +++ b/miniprogram/image/ui/last_semester_0.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/miniprogram/image/ui/next_semester_0.svg b/miniprogram/image/ui/next_semester_0.svg new file mode 100644 index 0000000..c04e4dc --- /dev/null +++ b/miniprogram/image/ui/next_semester_0.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/miniprogram/image/ui/selectArror_0.svg b/miniprogram/image/ui/selectArror_0.svg new file mode 100644 index 0000000..ce8565e --- /dev/null +++ b/miniprogram/image/ui/selectArror_0.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/miniprogram/pages/Timetable/StatusBar.scss b/miniprogram/pages/Timetable/StatusBar.scss new file mode 100644 index 0000000..02b431a --- /dev/null +++ b/miniprogram/pages/Timetable/StatusBar.scss @@ -0,0 +1,105 @@ +@import "../../app.scss"; +$status-bar-left-top-icon-width: 30px; + +view.status-bar { + top: 0; + width: 100%; + display: flex; + position: fixed; + justify-content: space-between; + background-color: #F8F8F8; + + view.select { + flex: 1; + display: flex; + height: 100%; + align-items: center; + padding-left: 18px; + + image { + width: $status-bar-left-top-icon-width; + height: $status-bar-left-top-icon-width; + filter: $black-filter; + } + + view.semester { + height: 100%; + display: flex; + padding-left: 5px; + flex-direction: column; + justify-content: center; + + view.semester-title { + @extend %status-bar-title; + } + + view.semester-intro { + @extend %status-bar-subtitle; + } + } + } + + view.capsule-holder { + flex: 1; + height: 100%; + } + + view.content { + flex: 1; + height: 100%; + display: flex; + justify-content: center; + + view.week { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + height: 100%; + + view.week-title { + @extend %status-bar-title; + } + + view.week-intro { + @extend %status-bar-subtitle; + } + } + } +} + +view.status-bar-blank { + width: 100%; +} + +%status-bar-title { + font-size: 1.15em; + line-height: 1.15em; + margin-bottom: 5px; + color: $theme-color-light-title; +} + +%status-bar-subtitle { + font-size: .85em; + line-height: .85em; + color: $theme-color-light-text; +} + +@media (prefers-color-scheme: dark){ + + %status-bar-title { + color: $theme-color-dark-title; + } + + %status-bar-subtitle { + color: $theme-color-dark-text; + } + + view.status-bar { + background-color: #191919; + + view.select image { + filter: $white-filter; + } + } +} diff --git a/miniprogram/pages/Timetable/StatusBar.ts b/miniprogram/pages/Timetable/StatusBar.ts index a0f2b96..a72f395 100644 --- a/miniprogram/pages/Timetable/StatusBar.ts +++ b/miniprogram/pages/Timetable/StatusBar.ts @@ -3,12 +3,40 @@ import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetL import { LogLabel } from "../../core/LogLabel"; import { Logger } from "../../core/Logger"; +/** + * 在 UI 中显示的数据 + */ +type DisplayData = { + + /** + * 显示内容 + */ + val:string; + + /** + * 唯一键值 用来做判断 + */ + key:string; +}; + +/** + * 模组事件 + */ +type StatusBarEvent = { + m: DisplayData +}; + /** * 顶部状态栏 */ -class StatusBar extends Modular +class StatusBar extends Modular implements Partial { + /** + * 导航栏高度补偿 + */ + public static readonly StatusBarHeightExtend:number = 5; + /** * 页面日志输出标签 */ @@ -18,9 +46,15 @@ implements Partial { data = { - // 状态栏高度 + // 导航栏高度 barHeight: 65, - } + + // 状态栏高度 + barTop: 20, + + // 胶囊占位 + capsule: 94 + }; /** * 设置顶部状态栏高度 @@ -51,22 +85,29 @@ implements Partial { } // 计算顶部导航栏高度 - let barHeight = btnPosI.height + btnPosI.top + statusBarHeight + btnPosI.bottom + let barHeight = btnPosI.height + btnPosI.top + btnPosI.bottom; + + // 计算胶囊展位 + let capsule = btnPosI.right + btnPosI.width; this.setData({ // 不知道为什么总是差 4px 距离 // 别问为什么 加上就对了 - barHeight: barHeight + 4 + barHeight: barHeight + 4 + StatusBar.StatusBarHeightExtend, + barTop: statusBarHeight - StatusBar.StatusBarHeightExtend, + capsule: capsule }); - Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px`, + Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px, ` + + `状态栏高度: ${ statusBarHeight }px, 胶囊占位: ${ capsule }px`, LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel); } public onLoad() { - Logger.log("StatusBar模块加载...", + + Logger.log("StatusBar 模块加载...", LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel); this.setHeight(); @@ -74,5 +115,5 @@ implements Partial { } -export default StatusBar; +export default StatusBar; export { StatusBar }; \ No newline at end of file diff --git a/miniprogram/pages/Timetable/Timetable.scss b/miniprogram/pages/Timetable/Timetable.scss index b47f370..f36c35f 100644 --- a/miniprogram/pages/Timetable/Timetable.scss +++ b/miniprogram/pages/Timetable/Timetable.scss @@ -1,9 +1,2 @@ -view.status-bar { - background-color: #F8F8F8; -} +@import "./StatusBar.scss" -@media (prefers-color-scheme: dark){ - view.status-bar { - background-color: #191919; - } -} diff --git a/miniprogram/pages/Timetable/Timetable.wxml b/miniprogram/pages/Timetable/Timetable.wxml index 72d1bdf..5f761d9 100644 --- a/miniprogram/pages/Timetable/Timetable.wxml +++ b/miniprogram/pages/Timetable/Timetable.wxml @@ -1,5 +1,30 @@ - + + + + + + + 大四 + 2021-2022 + + -afdff \ No newline at end of file + + + + + 第1周 + 非本周 + + + + + + + + + + + \ No newline at end of file