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

用户界面实现(#37)dev-gia_jie #41

Merged
MrKBear merged 3 commits from dev-gia_jie into master 2022-01-18 21:18:47 +08:00
Conversation 0 Commits 3 Files Changed 3 +205 -16
6 changed files with 205 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 87d33bb1df - Show all commits

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

62
miniprogram/image/account/Account_Arrow.svg Normal file
View File

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F4F0F1;}
.st1{fill:#FFFFFF;}
.st2{fill:#3EA3D8;}
.st3{fill:#CCCCCC;}
.st4{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
.st5{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
.st6{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
.st7{fill:#1A1A1A;}
.st8{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
.st9{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
.st10{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
.st11{fill:#666666;}
.st12{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st13{fill:#B3B3B3;}
.st14{opacity:0.05;}
.st15{clip-path:url(#SVGID_00000148643560888163687730000014354677953684036249_);}
.st16{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st17{opacity:0.4;fill:#3EA3D8;}
.st18{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
.st19{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g id="A1">
<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
</g>
<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
</g>
<g id="FUNC_x5F_LIST">
</g>
<g id="MAIN_x5F_FUNC">
</g>
<g id="USER_x5F_CARD">
<g id="BG" class="st14">
</g>
</g>
</g>
<g id="ICON">
<polyline class="st19" points="17.39,10.88 83.65,50 17.39,89.12 "/>
</g>
<g id="DEFAULT_x5F_AVATOR">
</g>
<g id="COLOR">
</g>
<g id="NAV_x5F_BAR">
<g id="ICON_x5F_SETTING">
</g>
<g id="ICON_x5F_INFO">
</g>
<g id="ICON_x5F_KCB">
</g>
</g>
<g id="HEADER_x5F_BAR">
<g id="BUTTON">
</g>
<g id="TOP">
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

65
miniprogram/image/account/Account_NO.svg Normal file
View File

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F4F0F1;}
.st1{fill:#FFFFFF;}
.st2{fill:#3EA3D8;}
.st3{fill:#CCCCCC;}
.st4{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
.st5{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
.st6{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
.st7{fill:#1A1A1A;}
.st8{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
.st9{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
.st10{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
.st11{fill:#666666;}
.st12{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st13{fill:#B3B3B3;}
.st14{opacity:0.05;}
.st15{clip-path:url(#SVGID_00000174590641328129768410000008888487617591348397_);}
.st16{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st17{opacity:0.4;fill:#3EA3D8;}
.st18{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
.st19{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g id="A1">
<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
</g>
<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
</g>
<g id="FUNC_x5F_LIST">
</g>
<g id="MAIN_x5F_FUNC">
</g>
<g id="USER_x5F_CARD">
<g id="BG" class="st14">
</g>
</g>
</g>
<g id="ICON">
<g>
<line class="st19" x1="10.88" y1="10.88" x2="89.12" y2="89.12"/>
<line class="st19" x1="89.12" y1="10.88" x2="10.88" y2="89.12"/>
</g>
</g>
<g id="DEFAULT_x5F_AVATOR">
</g>
<g id="COLOR">
</g>
<g id="NAV_x5F_BAR">
<g id="ICON_x5F_SETTING">
</g>
<g id="ICON_x5F_INFO">
</g>
<g id="ICON_x5F_KCB">
</g>
</g>
<g id="HEADER_x5F_BAR">
<g id="BUTTON">
</g>
<g id="TOP">
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

2
miniprogram/image/account/Account_OK.svg
View File

@ -18,7 +18,7 @@
.st12{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st13{fill:#B3B3B3;} .st13{fill:#B3B3B3;}
.st14{opacity:0.05;} .st14{opacity:0.05;}
.st15{clip-path:url(#SVGID_00000119811792014936471320000011453116645578675119_);} .st15{clip-path:url(#SVGID_00000000193655916124849200000001531564748471850152_);}
.st16{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;} .st16{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st17{opacity:0.4;fill:#3EA3D8;} .st17{opacity:0.4;fill:#3EA3D8;}
.st18{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;} .st18{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

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