page.wxml
<view class="topRightMenu">
<wux-icon class="addIcon text-right" type="ios-add-circle-outline" color="#39b54a " />
<view class="iconMenu text-df light bg-green">
<text class="menuItem cuIcon-friendfill"><text>创建班级</text></text>
<text class="menuItem cuIcon-friendaddfill"><text>添加学生</text></text>
<text class="menuItem cuIcon-formfill"><text>信息采集</text></text>
<text class="menuItem cuIcon-newsfill"><text>每日发布</text></text>
</view>
</view>
page.wxss
.topRightMenu {
position: absolute;
right: 15rpx;
top: 5rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: left;
}
.addIcon {
padding: 10rpx 20rpx 20rpx 0;
}
.iconMenu {
padding: 20rpx 10rpx;
border-radius: 5%;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: left;
}
.iconMenu:after {
content: '';
width: 20rpx;
height: 20rpx;
position: absolute;
top: -10rpx;
right: 35rpx;
transform: rotate(-45deg);
background-color: #d7f0dbff;
border: 1px #d7f0dbff;
border-style: solid none none solid ;
}
.menuItem {
padding: 20rpx 20rpx;
}
.menuItem text {
padding-left: 20rpx;
}
效果
捕获.PNG
网友评论