(#37)Add Function List

This commit is contained in:
MrKBear 2022-01-18 22:30:05 +08:00
parent fc8aa19c67
commit 23f46a24c9
4 changed files with 104 additions and 91 deletions

View File

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

View File

@ -41,75 +41,75 @@
<!--主要功能-->
<view class="card main-function"><!--四个功能合在一起的容器-->
<view class="branch-funtion"><view><!--每个功能的容器-->
<view class="branch-funtion">
<view><!--每个功能的容器-->
<image class="icon" src="../../image/account/Account_UserInfo.svg"></image><!--每个功能的图片-->
<view>账号信息</view><!--每个功能的文字-->
</view></view>
</view>
</view>
<view class="branch-funtion"><view>
<view class="branch-funtion">
<view>
<image class="icon" src="../../image/account/Account_DateList.svg"></image>
<view>课表缓存</view>
</view></view>
</view>
</view>
<view class="branch-funtion"><view>
<view class="branch-funtion">
<view>
<image class="icon" src="../../image/account/Account_Customer.svg"></image>
<view>功能定制</view>
</view></view>
</view>
</view>
<view class="branch-funtion"><view style="border-right: 0px;">
<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 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 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 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 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 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 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>
</table>
</view>
</view>

View File

@ -1,30 +1,43 @@
@import "../../app.scss";
table.FuncList{
width: 100%;
view.function-list {
margin-top: 50rpx;
margin-bottom: 50rpx;
padding: 0 0 !important;
width: 100% !important;
image.FuncListImg{
width: 25px;
height: 25px;
float: left;
padding-right: 20px;
}
view.tabView1,view.tabView2,view.tabView3,view.tabView4,view.tabView5{
padding-top: 20px;
padding-bottom: 20px;
view.function {
padding: 0 20px;
width: calc( 100% - 40px );
height: 55px;
> 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 ;
padding-top: 20px;
padding-bottom: 20px;
view {
margin-left: 15px;
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);
}
}

View File

@ -3,7 +3,7 @@
//主要功能
view.main-function {
display: flex;
margin-top: 20px;
margin-top: 50rpx;
padding: 0 !important;
width: 100% !important;
@ -26,7 +26,7 @@ view.main-function {
view {
text-align: center;
margin-top: 5px;
font-size: .8em;
font-size: .9em;
}
}
}