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

Merged
MrKBear merged 3 commits from dev-gia_jie into master 2022-01-18 21:18:47 +08:00
2 changed files with 43 additions and 43 deletions
Showing only changes of commit 196be3099a - Show all commits

View File

@ -39,30 +39,27 @@
</view> </view>
</view> </view>
</view>
<view class="container">
<!--主要功能--> <!--主要功能-->
<view class="MainFuction card"><!--四个功能合在一起的容器--> <view class="card main-function"><!--四个功能合在一起的容器-->
<view class="BranchFuntion"><!--每个功能的容器--> <view class="branch-funtion"><view><!--每个功能的容器-->
<image class="MFimage" src="../../image/account/Account_UserInfo.svg"></image><!--每个功能的图片--> <image class="icon" src="../../image/account/Account_UserInfo.svg"></image><!--每个功能的图片-->
<view class="MFfont">账号信息</view><!--每个功能的文字--> <view>账号信息</view><!--每个功能的文字-->
</view> </view></view>
<view class="BranchFuntion"> <view class="branch-funtion"><view>
<image class="MFimage" src="../../image/account/Account_DateList.svg"></image> <image class="icon" src="../../image/account/Account_DateList.svg"></image>
<view class="MFfont">课表缓存</view> <view>课表缓存</view>
</view> </view></view>
<view class="BranchFuntion"> <view class="branch-funtion"><view>
<image class="MFimage" src="../../image/account/Account_Customer.svg"></image> <image class="icon" src="../../image/account/Account_Customer.svg"></image>
<view class="MFfont">功能定制</view> <view>功能定制</view>
</view> </view></view>
<view class="BranchFuntion" style="border-right: 0px;"> <view class="branch-funtion"><view style="border-right: 0px;">
<image class="MFimage" src="../../image/account/Account_Settings.svg"></image> <image class="icon" src="../../image/account/Account_Settings.svg"></image>
<view class="MFfont">更多设置</view> <view>更多设置</view>
</view> </view></view>
</view> </view>
</view> </view>

View File

@ -1,36 +1,39 @@
@import "../../app.scss"; @import "../../app.scss";
//主要功能 //主要功能
view.MainFuction { view.main-function {
height: 80px;
display: flex; display: flex;
padding-top: 10px; margin-top: 20px;
padding-bottom: 8px; padding: 0 !important;
width: 100% !important;
view.BranchFuntion { view.branch-funtion {
margin-top: 12px; padding: 13px 0;
margin-bottom: 12px; width: 100%;
float: left;
width: 25%;
border-right: 1px solid gainsboro;
image.MFimage{ > view {
padding-top: 3%; display: flex;
padding-left: 25%; flex-direction: column;
height: 50%; align-items: center;
width: 50%; justify-self: center;
border-right: 1px solid rgba($color: #000000, $alpha: .1);
image {
height: 35px;
width: 35px;
} }
view.MFfont { view {
text-align: center; text-align: center;
font-size: 10px; margin-top: 5px;
margin: 5px 0; font-size: .8em;
letter-spacing:2px; }
} }
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
view.container view.user-card view.avatar{ view.main-function view.branch-funtion > view {
filter: brightness(.8); border-right: 1px solid rgba($color: #ffffff, $alpha: .1);
} }
} }