MrKBear/mini-dlpu-v3
MrKBear/mini-dlpu-v3
8
10
Fork 0
Code Issues 11 Pull Requests Projects 6 Releases Wiki Activity

(#37)Style optimization

Browse Source
This commit is contained in:
MrKBear 2022-01-18 17:56:44 +08:00
parent 84bc1c6fbc
commit d70ead2f77
3 changed files with 77 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
miniprogram/app.scss
View File

@ -14,7 +14,7 @@ $theme-color-dark-text: rgba(255, 255, 255, .5);
$black-filter: brightness(0) opacity(.65);
$white-filter: brightness(100) opacity(.65);
$blue-filter: opacity(.65);
$blue-filter: opacity(1);
// 页面容器外边距
view.container {
@ -24,18 +24,23 @@ view.container {
// 带阴影的 card
view.card {
width: calc( 100% - 36px );
padding: 0 18px;
width: calc( 100% - 40px );
padding: 0 20px;
border-radius: 15px;
background-color: $theme-color-light-layout;
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .08),
0 0.3px 0.9px 0 rgba(0, 0, 0, .05);
}
image {
image.icon {
filter: $black-filter;
}
image.icon-sub {
filter: $black-filter;
opacity: .6;
}
// 顶部导航栏阴影
view.top-shadow {
position: fixed;
@ -52,23 +57,27 @@ page {
}
view, text {
font-size: .99em;
font-size: .97em;
letter-spacing: .1em;
font-family: Hiragino Sans GB, MicroSoft YaHei;
}
view.h1 {
color: $theme-color-light-title;
font-size: 1.5em;
letter-spacing: .1em;
}
view.h2 {
color: $theme-color-light-title;
font-size: 1.3em;
letter-spacing: .1em;
}
view.h3 {
color: $theme-color-light-title;
font-size: 1em;
letter-spacing: .1em;
}
@media (prefers-color-scheme: dark){
@ -81,7 +90,11 @@ view.h3 {
background-color: $theme-color-dark-layout;
}
image {
image.icon {
filter: $white-filter;
}
image.icon-sub {
filter: $white-filter;
}

20
miniprogram/pages/Account/Account.wxml
View File

@ -14,14 +14,28 @@
<!-- 主题变换按钮 -->
<view class="theme">
<image src="../../image/account/Account_Theme.svg" />
<image class="icon-sub" src="../../image/account/Account_Theme.svg" />
</view>
<!-- 用户昵称 -->
<view class="nick h1">
<open-data type="userNickName" />
</view>
<view class="student">秦浩轩</view>
<view class="student">1806240113</view>
<!-- 学生信息 -->
<view class="student">
<view class="name">秦浩轩</view>
<view class="certified">
<view class="certifi-info">已认证</view>
<view class="text-icon">√</view>
</view>
</view>
<!-- 学号信息 -->
<view class="student-id">1806240113</view>
<!-- 学校 -->
<view class="school">大连工业大学</view>
</view>
</view>

47
miniprogram/pages/Account/UserCard.scss
View File

@ -8,33 +8,68 @@ view.user-card {
padding-bottom: 20px;
view.avatar {
width: 70px;
height: 70px;
flex-basis: 80px;
width: 80px;
height: 80px;
border-radius: 1000px;
flex-shrink: 0;
overflow: hidden;
}
view.info {
flex-grow: 1;
padding-left: 20px;
max-width: calc(100% - 80px - 20px);
view.theme {
width: 100%;
padding: 20px 0 10px 0;
display: flex;
justify-content: flex-end;
image {
width: 25px;
height: 25px;
width: 23px;
height: 23px;
}
}
view.nick {
margin: 4px 0;
margin-bottom: 6px;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
view.student {
margin: 1px 0;
display: flex;
align-items: center;
view.certified {
color: $theme-color-blue;
border: 1px solid $theme-color-blue;
border-radius: 4px;
margin-left: .3em;
font-size: .85em;
height: 1.2em;
padding: 0 2px;
display: flex;
justify-content: center;
align-items: center;
view.text-icon {
margin-left: .3em;
}
}
}
view.student-id {
margin-bottom: 3px;
}
view.school {
text-align: right;
padding: 10px 0 20px 0;
}
}
}