美文网首页
右上角+号菜单,仿微信

右上角+号菜单,仿微信

作者: 我的小小笔尖 | 来源:发表于2021-08-20 21:37 被阅读0次

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

相关文章

网友评论

      本文标题:右上角+号菜单,仿微信

      本文链接:https://www.haomeiwen.com/subject/cdlxiltx.html