<!--adviceAccount.wxml-->

<view class="in">
    <view class="left">
        <text class="left-in">系统通知</text>
    </view>
    <view class="right">
        <text class="right-in">投诉建议</text>
    </view>
</view>

<view class="advice">
  <view class="title-wrap">
    <view class="title">
      <view class="expense_before">
      </view>
      <text class="word">投诉内容</text>
    </view>
  </view>
  <view class="input-group">
  
      <view class="first">
          <text class="label">类别:</text>
          <!-- <input class="first-input" placeholder="这是一个可以自动聚焦的input" auto-focus/> -->
                <radio-group class="radio-group" bindchange="radioChange">
                  <label class="radio" wx:for="{{items}}">
                    <radio name="adtype" value="{{item.name}}" color="#f9364f" checked="{{item.checked}}"/>{{item.value}}
                  </label>
                </radio-group>
      </view>
      <view class="second">
          <text class="label">标题:</text>
          <input class="second-input" placeholder="" name='title' />
      </view>
      <view class="last">
          <text class="label">描述:</text>
          <textarea class="third-input" placeholder="请把你遇到的问题或者建议写出来吧" placeholder-style="color:#999999;" name="description"  />        
      </view>
  </view>
</view>

<view class="submit">
    <button class="left-button">提交问题</button>
    <button class="right-botton">清空问题</button>
</view>

/* adviceAccount.wxss */

.in{
  background-color:#ffffff;
  display:flex;
  justify-content:center;
  padding:15px;
  margin-bottom:15px;

}
.left{
  border-right:1px solid #d6d6d6;
  padding-right:20px;
}
.right{
  padding-left:20px;
}
.left-in{
  color: #9a9a9a
}
.right-in{
  color: #f9364f;

}
.expense_before{
  display: inline-block;
  background-color: red;
  width: 4px;
  height: 10px;
  }
   .word{
    margin-left:10px; 
  }
.title{
  color:#6c6c6c;
  font-size: 16px;
}

/*this about  */

.advice{

  background-color:#ffffff;
padding:10px;

}
.title-wrap{
margin-bottom:20px;


}
.input-group{

  display:flex;
flex-flow:row wrap;


}
.label{

width:15%;
position:relative;
top:5px;
color:#666666;



}
.first{
  width:100%;
display:flex;
margin-bottom:10px;


}
.second{
  width:100%;
display:flex;
margin-bottom:10px;


}
.last{
 width:100%;
display:flex;


}
.first-input{

width:85%;
padding:2px 5px;
}
.second-input{

width:85%;
padding:2px 5px;
border-radius: 3px;
border: 1px solid #999999;
}
.third-input{
width:85%;
border: 1px solid #999999;
padding:2px 5px;
border-radius: 3px;
}
.submit{
  margin-top:15px;
display:flex;
justify-content:center;
padding:0 15%;

}
.left-button{
  line-height:1.5;
padding:5px 15px;
background-color: #0398e7;
color:#ffffff;


}
.right-botton{
   line-height:1.5;
  padding:5px 15px;
  color: #ffffff;
  background-color: #999999;

}
.radio-group{
  display:flex;
justify-content:space-between;
width:90%;
padding:0 10px;
color:#666666;

}

// adviceAccount.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    items: [
      { name: '0', value: '订单', checked: 'true' },
      { name: '1', value: '运单' },
      { name: '2', value: '客服' },
      { name: '3', value: '其他' },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})