From af2d88f6517b59df63f3b0cbf1e74f3a874765d5 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Wed, 1 Dec 2021 21:13:15 +0800 Subject: [PATCH 1/3] Add StatusBar Modular Fix some BUG Add LoggerText feature --- miniprogram/app.ts | 5 +- miniprogram/core/Config.ts | 7 ++ miniprogram/core/Logger.ts | 58 ++++++++++---- miniprogram/core/Module.ts | 4 +- miniprogram/core/PresetLogLabel.ts | 8 +- miniprogram/pages/Timetable/StatusBar.ts | 78 +++++++++++++++++++ miniprogram/pages/Timetable/Timetable.scss | 12 ++- miniprogram/pages/Timetable/Timetable.ts | 91 ++-------------------- miniprogram/pages/Timetable/Timetable.wxml | 6 +- miniprogram/theme.json | 2 +- 10 files changed, 159 insertions(+), 112 deletions(-) create mode 100644 miniprogram/pages/Timetable/StatusBar.ts diff --git a/miniprogram/app.ts b/miniprogram/app.ts index a769922..eb3c646 100644 --- a/miniprogram/app.ts +++ b/miniprogram/app.ts @@ -1,6 +1,5 @@ -import { Logger } from "./logger/Logger"; -import { LevelLogLabel } from "./logger/LevelLogLabel"; -import { LifeCycleLogLabel } from "./logger/LifeCycleLogLabel"; +import { Logger } from "./core/Logger"; +import { LevelLogLabel, LifeCycleLogLabel } from "./core/PresetLogLabel"; App({ diff --git a/miniprogram/core/Config.ts b/miniprogram/core/Config.ts index 823c874..d019c94 100644 --- a/miniprogram/core/Config.ts +++ b/miniprogram/core/Config.ts @@ -10,6 +10,13 @@ */ export const LOGGER_CONSOLE:boolean = true; +/** + * 是否在控制台输出时启用标签样式 + * 如果在手机上调试可以关闭此选项 + * 因为手机上的控制台无法正确显示样式 + */ +export const LOGGER_STYLE:boolean = true; + /** * 调试过滤器 * 按照 LogLabel 进行过滤 diff --git a/miniprogram/core/Logger.ts b/miniprogram/core/Logger.ts index de64257..c1c5b0a 100644 --- a/miniprogram/core/Logger.ts +++ b/miniprogram/core/Logger.ts @@ -1,4 +1,4 @@ -import { LOGGER_FILTER, LOGGER_CONSOLE } from "./Config"; +import { LOGGER_FILTER, LOGGER_CONSOLE, LOGGER_STYLE } from "./Config"; import { StackLogLabel } from "./PresetLogLabel"; import { LogLabel } from "./LogLabel"; @@ -82,30 +82,41 @@ class Logger { */ public static calcStyle(...labels:LogLabel[]):[string[], string[]] { - // 过滤出需要显示的 Labels - let labelsNeedRender:LogLabel[] = labels.filter((label:LogLabel)=>{ - return label.display - }); - let consoleLabels:string[] = []; let consoleStyles:string[] = []; // 放置标签 - for(let i = 0; i < labelsNeedRender.length; i++) { + for(let i = 0; i < labels.length; i++) { consoleLabels.push(labels[i].getLoggerOutput()); - if (i !== ( labelsNeedRender.length - 1)) + if (i !== ( labels.length - 1)) consoleLabels.push("%c "); - consoleStyles.push(labelsNeedRender[i].getStyleOutput()); + consoleStyles.push(labels[i].getStyleOutput()); - if (i !== ( labelsNeedRender.length - 1)) + if (i !== ( labels.length - 1)) consoleStyles.push(""); } return [consoleLabels, consoleStyles]; } + /** + * 收集计算标签没有样式 + * @param labels 标签 + */ + public static calcLabel(...labels:LogLabel[]):string[] { + + let consoleLabels:string[] = []; + + // 放置标签 + for(let i = 0; i < labels.length; i++) { + consoleLabels.push(labels[i].getTextOutput()); + } + + return consoleLabels + } + /** * 基础调试输出 * 其他的 Log 函数都是基于此封装 @@ -122,11 +133,30 @@ class Logger { if(!Logger.testLog(...labels, ...attachLabel, StackLogLabel.filterUrlLabel)) return content.getContent(); - // 计算收集样式 - let [consoleLabels, consoleStyles]= Logger.calcStyle(...labels, ...attachLabel); + // 过滤出需要渲染的 Labels + let labelsNeedRender:LogLabel[] = [...labels, ...attachLabel].filter((label:LogLabel)=>{ + return true + }); - // 调试输出 - console.log(consoleLabels.join(""), ...consoleStyles, ...content.getContent()); + // 使用样式输出 + if(LOGGER_STYLE) { + + // 计算收集样式 + let [consoleLabels, consoleStyles]= Logger.calcStyle(...labelsNeedRender); + + // 调试输出 + console.log(consoleLabels.join(""), ...consoleStyles, ...content.getContent()); + + } else { + + // 计算收集标签 + let consoleLabels= Logger.calcLabel(...labelsNeedRender); + + // 输出 + console.log(consoleLabels.join(" "), ...content.getContent()); + } + + return content.getContent(); } diff --git a/miniprogram/core/Module.ts b/miniprogram/core/Module.ts index 802563f..6fdf8c2 100644 --- a/miniprogram/core/Module.ts +++ b/miniprogram/core/Module.ts @@ -400,7 +400,7 @@ class Manager { if(this.modules[i].data !== void 0) { this.context.data[`${ this.modules[i].nameSpace }$${ key }`] = ( this.modules[i].data as IAnyTypeObject )[key]; - // this.modules[i] + this.modules[i].paramList.add(key); } } } @@ -425,7 +425,7 @@ class Manager { func.push(`[${ key }]`); } - let log:string = `模块 [${ this.modules[i].nameSpace }] 加载完成...\n`; + let log:string = `模块 [${ this.modules[i].nameSpace }] 完成绑定...\n`; if(data.length > 0) log += `Using Props: ${ data.join(", ") }\n`; if(func.length > 0) log += `Using Function: ${ func.join(", ") }\n`; diff --git a/miniprogram/core/PresetLogLabel.ts b/miniprogram/core/PresetLogLabel.ts index f456418..b2c5cd7 100644 --- a/miniprogram/core/PresetLogLabel.ts +++ b/miniprogram/core/PresetLogLabel.ts @@ -99,7 +99,7 @@ class StackInfo { /** * 排除的 */ - public static readonly excludeFile:RegExp = /^.*(\\|\/)logger(\\|\/).+\.js:\d+:\d+/; + public static readonly excludeFile:RegExp = /^.*(\\|\/)core(\\|\/)(.*Log.*).js:\d+:\d+/; /** * 获取第一个调用栈 @@ -179,7 +179,7 @@ class StackLogLabel { /** * 生成圆角颜色标签样式 */ - const normalLevelStyleGen = (color:string):LogStyle => { +const normalLevelStyleGen = (color:string):LogStyle => { return new LogStyle().setBorder("4px", `1px solid ${color}`) .setColor(color).setBlank("0 5px"); } @@ -235,7 +235,7 @@ class LevelLogLabel { /** * 生成圆角颜色标签样式 */ - const normalLifeStyleGen = (r:number, g:number, b:number):LogStyle => { +const normalLifeStyleGen = (r:number, g:number, b:number):LogStyle => { return new LogStyle().setBorder("4px", `1px solid rgb(${ r }, ${ g }, ${ b })`) .setColor(`rgb(${ r }, ${ g }, ${ b })`, `rgba(${ r }, ${ g }, ${ b }, .1)`) .setBlank("0 5px"); @@ -310,4 +310,4 @@ class LifeCycleLogLabel { ); } -export { StackInfo, StackLogLabel, LevelLogLabel, LifeCycleLogLabel }; \ No newline at end of file +export { StackInfo, StackLogLabel, LevelLogLabel, LifeCycleLogLabel, normalLifeStyleGen as colorRadio }; \ No newline at end of file diff --git a/miniprogram/pages/Timetable/StatusBar.ts b/miniprogram/pages/Timetable/StatusBar.ts new file mode 100644 index 0000000..a0f2b96 --- /dev/null +++ b/miniprogram/pages/Timetable/StatusBar.ts @@ -0,0 +1,78 @@ +import { Modular, Manager, ILifetime } from "../../core/Module"; +import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetLogLabel"; +import { LogLabel } from "../../core/LogLabel"; +import { Logger } from "../../core/Logger"; + +/** + * 顶部状态栏 + */ +class StatusBar extends Modular +implements Partial { + + /** + * 页面日志输出标签 + */ + public static readonly StatusBarLabel = new LogLabel( + "StatusBar", colorRadio(255, 230, 222) + ); + + data = { + + // 状态栏高度 + barHeight: 65, + } + + /** + * 设置顶部状态栏高度 + */ + public setHeight() { + + let systemInfo = wx.getSystemInfoSync(); + let headerPos = wx.getMenuButtonBoundingClientRect(); + + //状态栏高度 + let statusBarHeight = Number(systemInfo.statusBarHeight); + + // 胶囊实际位置，坐标信息不是左上角原点 + let btnPosI = { + + // 胶囊实际高度 + height: headerPos.height, + width: headerPos.width, + + // 胶囊top - 状态栏高度 + top: headerPos.top - statusBarHeight, + + // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） + bottom: headerPos.bottom - headerPos.height - statusBarHeight, + + // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right + right: systemInfo.windowWidth - headerPos.right + } + + // 计算顶部导航栏高度 + let barHeight = btnPosI.height + btnPosI.top + statusBarHeight + btnPosI.bottom + + this.setData({ + + // 不知道为什么总是差 4px 距离 + // 别问为什么 加上就对了 + barHeight: barHeight + 4 + }); + + Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px`, + LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel); + + } + + public onLoad() { + Logger.log("StatusBar模块加载...", + LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel); + + this.setHeight(); + } + +} + +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 ba845f6..b47f370 100644 --- a/miniprogram/pages/Timetable/Timetable.scss +++ b/miniprogram/pages/Timetable/Timetable.scss @@ -1,3 +1,9 @@ -// view.status-bar { -// // background-color: antiquewhite; -// } +view.status-bar { + background-color: #F8F8F8; +} + +@media (prefers-color-scheme: dark){ + view.status-bar { + background-color: #191919; + } +} diff --git a/miniprogram/pages/Timetable/Timetable.ts b/miniprogram/pages/Timetable/Timetable.ts index d39adb2..82a4874 100644 --- a/miniprogram/pages/Timetable/Timetable.ts +++ b/miniprogram/pages/Timetable/Timetable.ts @@ -1,85 +1,10 @@ -import { Logger } from "../../core/Logger"; -import { LevelLogLabel, LifeCycleLogLabel } from "../../core/PresetLogLabel"; -import { Manager, Modular, AnyWXContext, ILifetime } from "../../core/Module"; - -let manager; - -// Page({ - -// /** -// * 课程表页面加载 -// */ -// onLoad: async function (query) { - -// manager = new Manager(this); -// console.log(manager); - - -// // this.setData; - -// // Logger.log("课程表 (Timetable) 页面加载...", -// // LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel); - -// // let systemInfo = wx.getSystemInfoSync(); - -// // //状态栏高度 -// // let statusBarHeight = Number(systemInfo.statusBarHeight); - -// // let menu = wx.getMenuButtonBoundingClientRect() - -// // //导航栏高度 -// // let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2 - -// // //状态栏加导航栏高度 -// // let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2 - -// // console.log('状态栏高度',statusBarHeight) - -// // console.log('导航栏高度',navBarHeight) - -// // console.log('状态栏加导航栏高度',navStatusBarHeight) - -// // this.setData({barh: navStatusBarHeight}); - -// } - -// }) - +import { Manager} from "../../core/Module"; +import { StatusBar } from "./StatusBar"; +/** + * 此页面使用 Manager 进行模块化管理 + * 若要添加先功能请先定义 Modular 并添加至 Manager + */ Manager.Page((manager)=>{ - let m1 = manager.addModule(M1, "m1"); - let m2 = manager.addModule(M2, "m2", {m1}); -}) - - -class M1 extends Modular implements Partial { - - data = { - a:1, - b:{} - } - - public onLoad(){ - - } - - public onReady() { - console.log(this); - this.emit("lll", {a:1}) - } -} - -class M2 extends Modular}> { - - data = { - a: 1 - } - - public onLoad() { - this.setData({a:1}); - this.depends?.m1.on("lll", (e)=>{ - console.log(e) - }) - console.log(this); - } -} \ No newline at end of file + manager.addModule(StatusBar, "statusBar"); +}) \ No newline at end of file diff --git a/miniprogram/pages/Timetable/Timetable.wxml b/miniprogram/pages/Timetable/Timetable.wxml index 94c4bb7..72d1bdf 100644 --- a/miniprogram/pages/Timetable/Timetable.wxml +++ b/miniprogram/pages/Timetable/Timetable.wxml @@ -1,3 +1,5 @@ - -pages/Timetable/Timetable.wxml{{m1$a}} + + + +afdff \ No newline at end of file diff --git a/miniprogram/theme.json b/miniprogram/theme.json index 0a12255..f7a1521 100644 --- a/miniprogram/theme.json +++ b/miniprogram/theme.json @@ -1,6 +1,6 @@ { "light": { - "navigationBarBackgroundColor": "#f6f6f6", + "navigationBarBackgroundColor": "#f8f8f8", "navigationBarTextStyle": "black", "backgroundColor": "#f4f0f1", -- 2.45.2 From 8d08589b4c0faaddecd3aa36a262bd34d28c73a2 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Thu, 2 Dec 2021 20:50:04 +0800 Subject: [PATCH 2/3] Add StatusBar GUI Style --- miniprogram/app.scss | 27 +++++- miniprogram/image/ui/last_semester_0.svg | 17 ++++ miniprogram/image/ui/next_semester_0.svg | 18 ++++ miniprogram/image/ui/selectArror_0.svg | 15 +++ miniprogram/pages/Timetable/StatusBar.scss | 105 +++++++++++++++++++++ miniprogram/pages/Timetable/StatusBar.ts | 57 +++++++++-- miniprogram/pages/Timetable/Timetable.scss | 9 +- miniprogram/pages/Timetable/Timetable.wxml | 29 +++++- 8 files changed, 254 insertions(+), 23 deletions(-) create mode 100644 miniprogram/image/ui/last_semester_0.svg create mode 100644 miniprogram/image/ui/next_semester_0.svg create mode 100644 miniprogram/image/ui/selectArror_0.svg create mode 100644 miniprogram/pages/Timetable/StatusBar.scss 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 -- 2.45.2 From 82f438056e5179033a251892c6e0cc9305e7031a Mon Sep 17 00:00:00 2001 From: MrKBear Date: Tue, 7 Dec 2021 15:49:26 +0800 Subject: [PATCH 3/3] Optimize TopBar style --- ...{last_semester_0.svg => last_semester.svg} | 0 ...{next_semester_0.svg => next_semester.svg} | 0 miniprogram/image/ui/selectArror.svg | 12 +++++++++ miniprogram/image/ui/selectArror_0.svg | 15 ----------- miniprogram/pages/Timetable/StatusBar.scss | 25 +++++++++++++++---- miniprogram/pages/Timetable/StatusBar.ts | 2 +- miniprogram/pages/Timetable/Timetable.wxml | 8 +++--- 7 files changed, 37 insertions(+), 25 deletions(-) rename miniprogram/image/ui/{last_semester_0.svg => last_semester.svg} (100%) rename miniprogram/image/ui/{next_semester_0.svg => next_semester.svg} (100%) create mode 100644 miniprogram/image/ui/selectArror.svg delete mode 100644 miniprogram/image/ui/selectArror_0.svg diff --git a/miniprogram/image/ui/last_semester_0.svg b/miniprogram/image/ui/last_semester.svg similarity index 100% rename from miniprogram/image/ui/last_semester_0.svg rename to miniprogram/image/ui/last_semester.svg diff --git a/miniprogram/image/ui/next_semester_0.svg b/miniprogram/image/ui/next_semester.svg similarity index 100% rename from miniprogram/image/ui/next_semester_0.svg rename to miniprogram/image/ui/next_semester.svg diff --git a/miniprogram/image/ui/selectArror.svg b/miniprogram/image/ui/selectArror.svg new file mode 100644 index 0000000..33e99ef --- /dev/null +++ b/miniprogram/image/ui/selectArror.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/miniprogram/image/ui/selectArror_0.svg b/miniprogram/image/ui/selectArror_0.svg deleted file mode 100644 index ce8565e..0000000 --- a/miniprogram/image/ui/selectArror_0.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - diff --git a/miniprogram/pages/Timetable/StatusBar.scss b/miniprogram/pages/Timetable/StatusBar.scss index 02b431a..3e5863f 100644 --- a/miniprogram/pages/Timetable/StatusBar.scss +++ b/miniprogram/pages/Timetable/StatusBar.scss @@ -1,5 +1,7 @@ @import "../../app.scss"; + $status-bar-left-top-icon-width: 30px; +$status-bar-middle-icon-width: 15px; view.status-bar { top: 0; @@ -31,10 +33,15 @@ view.status-bar { view.semester-title { @extend %status-bar-title; + font-size: .9em; + line-height: .9em; + margin-bottom: 5px; } view.semester-intro { @extend %status-bar-subtitle; + font-size: .9em; + line-height: .9em; } } } @@ -48,8 +55,15 @@ view.status-bar { flex: 1; height: 100%; display: flex; + align-items: center; justify-content: center; + image { + width: $status-bar-middle-icon-width; + height: $status-bar-middle-icon-width; + filter: $black-filter; + } + view.week { display: flex; flex-direction: column; @@ -59,10 +73,16 @@ view.status-bar { view.week-title { @extend %status-bar-title; + font-weight: 600; + font-size: 1.15em; + line-height: 1.15em; + margin-bottom: 5px; } view.week-intro { @extend %status-bar-subtitle; + font-size: .85em; + line-height: .85em; } } } @@ -73,15 +93,10 @@ view.status-bar-blank { } %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; } diff --git a/miniprogram/pages/Timetable/StatusBar.ts b/miniprogram/pages/Timetable/StatusBar.ts index a72f395..380a6b9 100644 --- a/miniprogram/pages/Timetable/StatusBar.ts +++ b/miniprogram/pages/Timetable/StatusBar.ts @@ -35,7 +35,7 @@ implements Partial { /** * 导航栏高度补偿 */ - public static readonly StatusBarHeightExtend:number = 5; + public static readonly StatusBarHeightExtend:number = 2; /** * 页面日志输出标签 diff --git a/miniprogram/pages/Timetable/Timetable.wxml b/miniprogram/pages/Timetable/Timetable.wxml index 5f761d9..b94473d 100644 --- a/miniprogram/pages/Timetable/Timetable.wxml +++ b/miniprogram/pages/Timetable/Timetable.wxml @@ -4,20 +4,20 @@ - + - 大四 + 大四-上 2021-2022 - 第1周 - 非本周 + 双击返回本周 + -- 2.45.2