用户界面实现(#37)dev-gia_jie #41
@ -39,30 +39,27 @@
|
|||||||
</view>
|
</view>
|
||||||
</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="branch-funtion"><view>
|
||||||
<view class="MainFuction card"><!--四个功能合在一起的容器-->
|
<image class="icon" src="../../image/account/Account_DateList.svg"></image>
|
||||||
<view class="BranchFuntion"><!--每个功能的容器-->
|
<view>课表缓存</view>
|
||||||
<image class="MFimage" src="../../image/account/Account_UserInfo.svg"></image><!--每个功能的图片-->
|
</view></view>
|
||||||
<view class="MFfont">账号信息</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_Customer.svg"></image>
|
||||||
<view class="MFfont">课表缓存</view>
|
<view>功能定制</view>
|
||||||
</view>
|
</view></view>
|
||||||
|
|
||||||
<view class="BranchFuntion">
|
<view class="branch-funtion"><view style="border-right: 0px;">
|
||||||
<image class="MFimage" src="../../image/account/Account_Customer.svg"></image>
|
<image class="icon" src="../../image/account/Account_Settings.svg"></image>
|
||||||
<view class="MFfont">功能定制</view>
|
<view>更多设置</view>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</view>
|
</view>
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user