Add StatusBar Modular #9

Merged
MrKBear merged 3 commits from dev-mrkbear into master 2021-12-07 15:52:28 +08:00
7 changed files with 37 additions and 25 deletions
Showing only changes of commit 82f438056e - Show all commits

View File

@ -0,0 +1,12 @@
<?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="D" 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="M474.1,995.9l5.4,4.9c33.6,27.3,86.1,4,86.1-41.4V729.7h371.2c29.3,0,53-23.7,53-53V346.7l-0.5-7.1
c-3.6-26.3-26-45.9-52.5-45.9l-371.2,0.1V64c0-21.7-13.2-41.2-33.4-49.2c-20.2-8-43.2-3-58.1,12.8L49.9,475.3
c-19.3,20.4-19.3,52.4,0,72.9L474.1,995.9z M161.4,511.7l298.1-314.7v149.7l0.5,7.2c3.6,26.3,26,45.8,52.5,45.8l371.1,0.1v223.8
H512.5l-7.2,0.5c-26.3,3.6-45.8,26-45.8,52.5v149.8L161.4,511.7z M161.4,511.7"/>
</svg>

After

Width:  |  Height:  |  Size: 837 B

View File

@ -1,15 +0,0 @@
<?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>

View File

@ -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;
}

View File

@ -35,7 +35,7 @@ implements Partial<ILifetime> {
/**
*
*/
public static readonly StatusBarHeightExtend:number = 5;
public static readonly StatusBarHeightExtend:number = 2;
/**
*

View File

@ -4,20 +4,20 @@
<!-- 学期选择 -->
<view class="select">
<image src="/image/ui/last_semester_0.svg" />
<image src="/image/ui/last_semester.svg"/>
<view class="semester">
<view class="semester-title">大四</view>
<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 class="week-intro">双击返回本周</view>
</view>
<image src="/image/ui/selectArror.svg"/>
</view>
<!-- 胶囊占位 -->