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

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

@ -14,14 +14,28 @@
<!-- 主题变换按钮 --> <!-- 主题变换按钮 -->
<view class="theme"> <view class="theme">
<image src="../../image/account/Account_Theme.svg" /> <image class="icon-sub" src="../../image/account/Account_Theme.svg" />
</view> </view>
<!-- 用户昵称 -->
<view class="nick h1"> <view class="nick h1">
<open-data type="userNickName" /> <open-data type="userNickName" />
</view> </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>
</view> </view>

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

@ -8,33 +8,68 @@ view.user-card {
padding-bottom: 20px; padding-bottom: 20px;
view.avatar { view.avatar {
width: 70px; flex-basis: 80px;
height: 70px; width: 80px;
height: 80px;
border-radius: 1000px; border-radius: 1000px;
flex-shrink: 0;
overflow: hidden; overflow: hidden;
} }
view.info { view.info {
flex-grow: 1; flex-grow: 1;
padding-left: 20px; padding-left: 20px;
max-width: calc(100% - 80px - 20px);
view.theme { view.theme {
width: 100%; width: 100%;
padding: 20px 0 10px 0;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
image { image {
width: 25px; width: 23px;
height: 25px; height: 23px;
} }
} }
view.nick { view.nick {
margin: 4px 0; margin-bottom: 6px;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
view.student { 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;
} }
} }
} }