(#37)Add main funcion modular

This commit is contained in:
MrKBear 2022-01-18 21:16:08 +08:00
parent 87d33bb1df
commit 196be3099a
2 changed files with 43 additions and 43 deletions

View File

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

View File

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