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

右上角+号菜单,仿微信

作者: 我的小小笔尖 | 来源:发表于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