Optimize TopBar style

This commit is contained in:
2021-12-07 15:49:26 +08:00
parent 8d08589b4c
commit 82f438056e
7 changed files with 37 additions and 25 deletions
+20 -5
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;
}
+1 -1
View File
@@ -35,7 +35,7 @@ implements Partial<ILifetime> {
/**
* 导航栏高度补偿
*/
public static readonly StatusBarHeightExtend:number = 5;
public static readonly StatusBarHeightExtend:number = 2;
/**
* 页面日志输出标签
+4 -4
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>
<!-- 胶囊占位 -->