右上角+号菜单,仿微信

2021-08-20  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读