微信小程序项目_秋泊优选71

66、意见反馈_静态结构

pages\feedback\index.wxml

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
    <view class="fb_main">
        <view class="fb_title">问题的种类</view>
        <view class="fb_tips">
            <text>功能建议</text>
            <text>购买遇到问题</text>
            <text>性能问题</text>
            <text>其他</text>
        </view>
        <view class="fb_content">
            <textarea placeholder="请描述一下您的问题"></textarea>
            <view class="fb_tool">
                <button>+</button> 
            </view>
        </view>
        <view class="form_btn_wrap">
            <button>
               <icon type="success_no_circle" size="23" color="white"></icon>
               提交
            </button>    
        </view>
    </view>
</Tabs>

给标签快速添加样式的类名（使用vsc中的css tree扩展插件）
选中要添加样式标签——>Ctrl+Shift+p——>选择Generate css tree
pages\feedback\index.less

page{
    background-color:#eeeeee;
}
.fb_main {
    padding: 20rpx;
    color:#666;

    .fb_title {
  
    }
  
    .fb_tips {
      /*伸缩盒子*/
      display: flex;
      /*换行属性*/
      flex-wrap: wrap; 
      text {
        width:30%;
        padding:10rpx;
        text-align: center;
        background-color:#fff;
        margin: 20rpx 10rpx;
      }
    }
  
    .fb_content {
      background-color:#fff;
      margin-top:20rpx;
      textarea {
        padding:10rpx;
      }
  
      .fb_tool {
        /*伸缩盒子*/
        display: flex;
        /*换行属性*/
        flex-wrap: wrap; 
        padding-bottom:30rpx;
        button{
          width: 90rpx;
          height: 90rpx;
          font-size: 60rpx;
          padding: 0;
          /*伸缩盒子*/
          display: flex;
          /*水平居中*/
          justify-content: center;
          /*垂直居中*/
          align-items: center;
          margin-left: 20rpx;
          color:#ccc;
        }
      }
    }
  
    .form_btn_wrap {
      margin-top: 20rpx;
      display: flex;
      /*从右向左对齐*/
      justify-content: flex-end;
      button{
        margin: 0;
        background-color: #66ccff;
        width: 30%;
      }
    }
  }