Add StatusBar GUI Style
This commit is contained in:
parent
af2d88f651
commit
8d08589b4c
@ -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 {
|
page {
|
||||||
background-color: #f4f0f1;
|
background-color: #f4f0f1;
|
||||||
color: rgba(0, 0, 0, .55);
|
color: $theme-color-light-text;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
font-family: 'Lucida Sans',
|
font-family: Hiragino Sans GB, MicroSoft YaHei;
|
||||||
'Lucida Sans Regular', 'Lucida Grande',
|
|
||||||
'Lucida Sans Unicode', 'Geneva', 'Verdana', 'sans-serif';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark){
|
@media (prefers-color-scheme: dark){
|
||||||
page {
|
page {
|
||||||
background-color: #1f1f1f;
|
background-color: #1f1f1f;
|
||||||
color: rgba(255, 255, 255, .55);
|
color: $theme-color-dark-text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
17
miniprogram/image/ui/last_semester_0.svg
Normal file
17
miniprogram/image/ui/last_semester_0.svg
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#3EA3D8;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M839.8,71.8H715.5c-18.5-34.5-55.1-58.2-96.9-58.2H414.1c-41.9,0-78.3,23.6-96.9,58.2H192.9
|
||||||
|
C131,71.8,80.8,122.2,80.8,184v711.4c0,61.9,50.2,112.1,112.1,112.1h646.9c61.9,0,112.1-50.2,112.1-112.1V184
|
||||||
|
C951.8,122.1,901.6,71.8,839.8,71.8L839.8,71.8z M414.1,72.2h204.5c28.3,0,51.4,23.1,51.4,51.4S646.9,175,618.6,175H414.1
|
||||||
|
c-28.3,0-51.4-23.1-51.4-51.4C362.6,95.3,385.8,72.2,414.1,72.2L414.1,72.2z M893.4,895.4c0,29.6-24,53.6-53.6,53.6H192.9
|
||||||
|
c-29.6,0-53.6-24-53.6-53.6V184c0-29.6,24-53.6,53.6-53.6h111.6c3.5,57.5,51.4,103.1,109.6,103.1h204.5
|
||||||
|
c58.3,0,106.1-45.6,109.6-103.1h111.6c29.6,0,53.6,24,53.6,53.6L893.4,895.4L893.4,895.4z"/>
|
||||||
|
<path class="st0" d="M314.6,730.6H459v-350c0-15.8,9.9-24.4,29.7-25.7c19.8,1.3,30.3,9.9,31.6,25.7v96.9h172
|
||||||
|
c17.1,1.3,26.4,11.2,27.7,29.7c-1.3,19.8-10.6,29.7-27.7,29.7h-172v193.8H722c14.5,1.3,22.4,9.9,23.7,25.7
|
||||||
|
c-1.3,18.4-9.2,28.3-23.7,29.7H314.6c-15.8-1.3-24.4-11.2-25.7-29.7C290.2,740.4,298.8,731.9,314.6,730.6L314.6,730.6z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
18
miniprogram/image/ui/next_semester_0.svg
Normal file
18
miniprogram/image/ui/next_semester_0.svg
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#3EA3D8;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M838.4,71.7H713.8c-18.5-34.6-55.2-58.3-97.1-58.3H412c-42,0-78.4,23.7-97,58.3H190.4
|
||||||
|
c-62,0-112.2,50.5-112.2,112.3v712.6c0,62,50.3,112.2,112.2,112.2h648c62,0,112.2-50.3,112.2-112.2V184.1
|
||||||
|
C950.6,122.1,900.3,71.7,838.4,71.7z M412,72.1h204.8c28.4,0,51.4,23.1,51.4,51.4c0,28.4-23.1,51.5-51.4,51.5H412
|
||||||
|
c-28.4,0-51.4-23.1-51.4-51.5C360.4,95.2,383.6,72.1,412,72.1z M892,896.6c0,29.6-24.1,53.7-53.7,53.7h-648
|
||||||
|
c-29.6,0-53.7-24.1-53.7-53.7V184.1c0-29.6,24.1-53.7,53.7-53.7h111.8c3.5,57.6,51.4,103.3,109.8,103.3h204.8
|
||||||
|
c58.4,0,106.3-45.7,109.8-103.3h111.8c29.6,0,53.7,24.1,53.7,53.7C892,184.1,892,896.6,892,896.6z"/>
|
||||||
|
<path class="st0" d="M308.4,358h411.9c15.8,1.3,25.1,11.2,27.7,29.7c-1.3,18.5-9.9,27.7-25.7,27.7H528.2V461
|
||||||
|
c52.8,33,103.6,72,152.5,116.8c18.5,19.8,21.8,38.3,9.9,55.4c-13.2,11.9-30.4,8.6-51.5-9.9c-42.3-39.6-79.2-71.3-110.9-95.1V764
|
||||||
|
c-1.3,14.5-11.2,22.4-29.7,23.8c-18.5-1.3-27.7-9.3-27.7-23.8V415.4H310.4c-15.8,0-24.4-9.2-25.7-27.7
|
||||||
|
C284.7,369.2,292.6,359.3,308.4,358z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
15
miniprogram/image/ui/selectArror_0.svg
Normal file
15
miniprogram/image/ui/selectArror_0.svg
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#3EA3D8;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M352.1,384V217.9c0-19.8-23.9-29.7-38-15.7L4.6,511.7v0.1l309.6,309.6c14,14,38,4.1,38-15.7V639.5
|
||||||
|
c0,0,0-0.1,0.1-0.1l260.9,49.2c0,0,0,0,0,0.1v80.1c0,16.8,13.7,30.5,30.5,30.5s30.5-13.7,30.5-30.5V254.9
|
||||||
|
c0-16.8-13.7-30.5-30.5-30.5s-30.5,13.7-30.5,30.5v79.9c0,0,0,0,0,0.1L352.1,384L352.1,384z M291.1,712.3L90.7,511.8v-0.1
|
||||||
|
l200.5-200.5h0.1v145.4c0,0,0,0.1,0.1,0.1L613,396.6c0,0,0.1,0,0.1,0.1v230.1c0,0,0,0.1-0.1,0.1l-321.7-60c0,0-0.1,0-0.1,0.1
|
||||||
|
L291.1,712.3C291.2,712.3,291.2,712.3,291.1,712.3z M796,696.8V327.3c0-16.6-13-30.7-29.6-31.2c-17.2-0.5-31.3,13.4-31.3,30.5
|
||||||
|
l0.1,370.3c0,16.8,13.7,30.5,30.5,30.5C782.3,727.3,796,713.6,796,696.8L796,696.8z M917.7,603.6V420c0-16.8-13.7-30.5-30.5-30.5
|
||||||
|
s-30.5,13.7-30.5,30.5l0.1,183.7c0,16.8,13.7,30.5,30.5,30.5C904.1,634.1,917.7,620.4,917.7,603.6L917.7,603.6z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
105
miniprogram/pages/Timetable/StatusBar.scss
Normal file
105
miniprogram/pages/Timetable/StatusBar.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -3,12 +3,40 @@ import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetL
|
|||||||
import { LogLabel } from "../../core/LogLabel";
|
import { LogLabel } from "../../core/LogLabel";
|
||||||
import { Logger } from "../../core/Logger";
|
import { Logger } from "../../core/Logger";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 在 UI 中显示的数据
|
||||||
|
*/
|
||||||
|
type DisplayData = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示内容
|
||||||
|
*/
|
||||||
|
val:string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 唯一键值 用来做判断
|
||||||
|
*/
|
||||||
|
key:string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 模组事件
|
||||||
|
*/
|
||||||
|
type StatusBarEvent = {
|
||||||
|
m: DisplayData
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 顶部状态栏
|
* 顶部状态栏
|
||||||
*/
|
*/
|
||||||
class StatusBar<M extends Manager> extends Modular<M, {}>
|
class StatusBar<M extends Manager> extends Modular<M, {}, StatusBarEvent>
|
||||||
implements Partial<ILifetime> {
|
implements Partial<ILifetime> {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导航栏高度补偿
|
||||||
|
*/
|
||||||
|
public static readonly StatusBarHeightExtend:number = 5;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 页面日志输出标签
|
* 页面日志输出标签
|
||||||
*/
|
*/
|
||||||
@ -18,9 +46,15 @@ implements Partial<ILifetime> {
|
|||||||
|
|
||||||
data = {
|
data = {
|
||||||
|
|
||||||
// 状态栏高度
|
// 导航栏高度
|
||||||
barHeight: 65,
|
barHeight: 65,
|
||||||
}
|
|
||||||
|
// 状态栏高度
|
||||||
|
barTop: 20,
|
||||||
|
|
||||||
|
// 胶囊占位
|
||||||
|
capsule: 94
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 设置顶部状态栏高度
|
* 设置顶部状态栏高度
|
||||||
@ -51,22 +85,29 @@ implements Partial<ILifetime> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 计算顶部导航栏高度
|
// 计算顶部导航栏高度
|
||||||
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({
|
this.setData({
|
||||||
|
|
||||||
// 不知道为什么总是差 4px 距离
|
// 不知道为什么总是差 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);
|
LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public onLoad() {
|
public onLoad() {
|
||||||
Logger.log("StatusBar模块加载...",
|
|
||||||
|
Logger.log("StatusBar 模块加载...",
|
||||||
LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel);
|
LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel);
|
||||||
|
|
||||||
this.setHeight();
|
this.setHeight();
|
||||||
|
|||||||
@ -1,9 +1,2 @@
|
|||||||
view.status-bar {
|
@import "./StatusBar.scss"
|
||||||
background-color: #F8F8F8;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark){
|
|
||||||
view.status-bar {
|
|
||||||
background-color: #191919;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,5 +1,30 @@
|
|||||||
|
|
||||||
<!-- 顶部状态栏 -->
|
<!-- 顶部状态栏 -->
|
||||||
<view class="status-bar" style="height: {{ statusBar$barHeight }}px"></view>
|
<view class="status-bar" style="height:{{ statusBar$barHeight }}px; padding-top:{{ statusBar$barTop }}px;">
|
||||||
|
|
||||||
<text>afdff</text>
|
<!-- 学期选择 -->
|
||||||
|
<view class="select">
|
||||||
|
<image src="/image/ui/last_semester_0.svg" />
|
||||||
|
<view class="semester">
|
||||||
|
<view class="semester-title">大四</view>
|
||||||
|
<view class="semester-intro">2021-2022</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 周选择 -->
|
||||||
|
<view class="content">
|
||||||
|
|
||||||
|
<view class="week">
|
||||||
|
<view class="week-title">第1周</view>
|
||||||
|
<view class="week-intro">非本周</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 胶囊占位 -->
|
||||||
|
<view class="capsule-holder" style="width: {{ statusBar$capsule }}px"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态栏占位 -->
|
||||||
|
<view class="status-bar-blank" style="height: {{ statusBar$barHeight + statusBar$barTop }}px"></view>
|
||||||
|
|
||||||
|
<!-- <text>afdff</text> -->
|
||||||
Loading…
Reference in New Issue
Block a user