Optimize TopBar style
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@ implements Partial<ILifetime> {
|
||||
/**
|
||||
* 导航栏高度补偿
|
||||
*/
|
||||
public static readonly StatusBarHeightExtend:number = 5;
|
||||
public static readonly StatusBarHeightExtend:number = 2;
|
||||
|
||||
/**
|
||||
* 页面日志输出标签
|
||||
|
||||
@@ -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>
|
||||
|
||||
<!-- 胶囊占位 -->
|
||||
|
||||
Reference in New Issue
Block a user