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

Compare commits

base: MrKBear:95f1f6d4849c7cfb70a93895ebd38bc3455b48d5
Branches Tags
MrKBear:master
MrKBear:dev-mrkbear
MrKBear:dev-yzy
MrKBear:dev-tamako
MrKBear:dev-zayuhermit
MrKBear:dev-sanaesy
MrKBear:dev-gia_jie
MrKBear:dev-Rachel
MrKBear:dev-lyj
..
compare: MrKBear:23f46a24c99770b25d26008a7cde27fd7f698ed6
Branches Tags
MrKBear:dev-mrkbear
MrKBear:master
MrKBear:dev-yzy
MrKBear:dev-tamako
MrKBear:dev-zayuhermit
MrKBear:dev-sanaesy
MrKBear:dev-gia_jie
MrKBear:dev-Rachel
MrKBear:dev-lyj

10 Commits
95f1f6d484 ... 23f46a24c9

Author SHA1 Message Date
mrkbear
23f46a24c9 (#37)Add Function List 2022-01-18 22:30:05 +08:00
mrkbear
fc8aa19c67 Merge 'master' into dev-sanaesy 2022-01-18 21:36:37 +08:00
熊鲜森
72448038d1 Merge pull request '用户界面实现(#37)dev-gia_jie' (#41) from dev-gia_jie into master 
Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/41
 2022-01-18 21:18:46 +08:00
mrkbear
196be3099a (#37)Add main funcion modular 2022-01-18 21:16:08 +08:00
mrkbear
87d33bb1df Merge branch 'master' into dev-gia_jie 2022-01-18 20:32:01 +08:00
熊鲜森
efd9b9be57 Merge pull request '(#37)Add icon' (#42) from dev-mrkbear into master 
Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/42
 2022-01-18 20:30:53 +08:00
mrkbear
7dd46dbd15 (#37)Add ok no arrow ICON 2022-01-18 20:11:09 +08:00
MrKBear
d70ead2f77 (#37)Style optimization 2022-01-18 17:56:44 +08:00
gia_jie
3bb47109ed (#37) 2022-01-18 10:44:32 +08:00
熊鲜森
84bc1c6fbc Merge pull request '(#37)Mod global image style' (#39) from dev-mrkbear into master 
Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/39
 2022-01-18 08:40:20 +08:00
10 changed files with 404 additions and 146 deletions
Show Stats 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;
} }

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

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

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

2
miniprogram/pages/Account/Account.scss
View File

@ -4,7 +4,7 @@
view.container{ view.container{
padding-top: 20px; padding-top: 50rpx;
} }

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

@ -14,67 +14,102 @@
<!-- 主题变换按钮 --> <!-- 主题变换按钮 -->
<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 class="card main-function"><!--四个功能合在一起的容器-->
<view class="branch-funtion">
<view><!--每个功能的容器-->
<image class="icon" src="../../image/account/Account_UserInfo.svg"></image><!--每个功能的图片-->
<view>账号信息</view><!--每个功能的文字-->
</view>
</view>
<view class="branch-funtion">
<view>
<image class="icon" src="../../image/account/Account_DateList.svg"></image>
<view>课表缓存</view>
</view>
</view>
<view class="branch-funtion">
<view>
<image class="icon" src="../../image/account/Account_Customer.svg"></image>
<view>功能定制</view>
</view>
</view>
<view class="branch-funtion">
<view style="border-right: 0px;">
<image class="icon" src="../../image/account/Account_Settings.svg"></image>
<view>更多设置</view>
</view>
</view>
</view>
<!-- 功能列表 -->
<view class="card function-list">
<view class="function">
<view>
<image class="icon func-icon" src="../../image/account/Account_Sponsor.svg" />
<view>赞助计划</view>
<image class="icon-sub arrow" src="../../image/account/Account_Arrow.svg" />
</view>
</view>
<view class="function">
<view>
<image class="icon func-icon" src="../../image/account/Account_PubilcAccount.svg" />
<view>公众号</view>
<image class="icon-sub arrow" src="../../image/account/Account_Arrow.svg" />
</view>
</view>
<view class="function">
<view>
<image class="icon func-icon" src="../../image/account/Account_FAQ.svg" />
<view>自助问答</view>
<image class="icon-sub arrow" src="../../image/account/Account_Arrow.svg" />
</view>
</view>
<view class="function">
<view>
<image class="icon func-icon" src="../../image/account/Account_AboutUs.svg" />
<view>关于我们</view>
<image class="icon-sub arrow" src="../../image/account/Account_Arrow.svg" />
</view>
</view>
<view class="function">
<view style="border-bottom: 0px;">
<image class="icon func-icon" src="../../image/account/Account_Support.svg" />
<view>联系客服</view>
<image class="icon-sub arrow" src="../../image/account/Account_Arrow.svg" />
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="container">
<view class="user-card card">
<table class="FuncList">
<view class="tabView1">
<th>
<td>
<image class="FuncListImg" src="../../image/account/Account_Sponsor.svg"></image>
<text class="tabTxt">赞助计划</text>
<image class="FuncListImgT"src="../../image/account/Account_PubilcAccount.svg"></image>
</td>
</th>
</view>
<view class="tabView2">
<th>
<td>
<image class="FuncListImg" src="../../image/account/Account_PubilcAccount.svg"></image>
<text class="tabTxt">公众号</text>
<image class="FuncListImgT"src="../../image/account/Account_PubilcAccount.svg"></image>
</td>
</th>
</view>
<view class="tabView3">
<th>
<td>
<image class="FuncListImg" src="../../image/account/Account_FAQ.svg"></image>
<text class="tabTxt">自助问答</text>
<image class="FuncListImgT"src="../../image/account/Account_PubilcAccount.svg"></image>
</td>
</th>
</view>
<view class="tabView4">
<th>
<td>
<image class="FuncListImg" src="../../image/account/Account_AboutUs.svg"></image>
<text class="tabTxt">关于我们</text>
<image class="FuncListImgT"src="../../image/account/Account_PubilcAccount.svg"></image>
</td>
</th>
</view>
<view class="tabView5">
<th>
<td>
<image class="FuncListImg" src="../../image/account/Account_Support.svg"></image>
<text class="tabTxt">联系客服</text>
<image class="FuncListImgT"src="../../image/account/Account_PubilcAccount.svg"></image>
</td>
</th>
</view>
</table>
</view>
</view>

55
miniprogram/pages/Account/FunctionList.scss
View File

@ -1,30 +1,43 @@
@import "../../app.scss"; @import "../../app.scss";
table.FuncList{ view.function-list {
width: 100%; margin-top: 50rpx;
margin-bottom: 50rpx;
padding: 0 0 !important;
width: 100% !important;
image.FuncListImg{ view.function {
width: 25px; padding: 0 20px;
height: 25px; width: calc( 100% - 40px );
float: left; height: 55px;
padding-right: 20px;
}
view.tabView1,view.tabView2,view.tabView3,view.tabView4,view.tabView5{
padding-top: 20px;
padding-bottom: 20px;
> view {
height: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
image.func-icon {
width: 26px;
height: 26px;
} }
view.tabView1,view.tabView2,view.tabView3,view.tabView4{
border-bottom:1px solid gainsboro ; view {
padding-top: 20px; margin-left: 15px;
padding-bottom: 20px; flex-grow: 1;
font-size: .9em;
}
image.arrow {
width: 10px;
height: 10px;
} }
text.tabTxt{
letter-spacing: 1px;
} }
image.FuncListImgT{
float: right;
width: 25px;
height: 25px;
} }
} }
@media (prefers-color-scheme: dark) {
view.function-list view.function > view {
border-bottom: 1px solid rgba($color: #ffffff, $alpha: .1);
}
}

35
miniprogram/pages/Account/MainFunction.scss
View File

@ -1,4 +1,39 @@
@import "../../app.scss"; @import "../../app.scss";
//主要功能
view.main-function {
display: flex;
margin-top: 50rpx;
padding: 0 !important;
width: 100% !important;
view.branch-funtion {
padding: 13px 0;
width: 100%;
> view {
display: flex;
flex-direction: column;
align-items: center;
justify-self: center;
border-right: 1px solid rgba($color: #000000, $alpha: .1);
image {
height: 35px;
width: 35px;
}
view {
text-align: center;
margin-top: 5px;
font-size: .9em;
}
}
}
}
@media (prefers-color-scheme: dark) {
view.main-function view.branch-funtion > view {
border-right: 1px solid rgba($color: #ffffff, $alpha: .1);
}
}

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