<template>
  <div class="app-container">
    <van-nav-bar
      title="我要反馈"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <p class="headTit">为保障您的安全，请勿在此提交个人敏感信息，如身份证、账户密码等</p>

    <div class="textareaBox">
      <p class="title">问题类型（必填）</p>
      <van-row>
        <van-col :span="6"><p class="active">我要反馈</p></van-col>
        <van-col :span="6"><p>我要反馈</p></van-col>
        <van-col :span="6"><p>我要反馈</p></van-col>
        <van-col :span="6"><p>我要反馈</p></van-col>
      </van-row>
      <van-field
        v-model="message"
        rows="10"
        type="textarea"
        placeholder="请输入您的反馈意见（字数1000字以内）"
      />
    </div>

    <div class="textareaBox">
      <van-uploader v-model="fileList" multiple />
    </div>
    <van-button type="default" class="loginOut">提交</van-button>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      active:0,
      message:'',
      password:'',
      newPassword:'',
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: 'https://cloud-image', isImage: true },
      ],
    };
  },
  created() {

  },
  methods: {

  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.headTit{
  font-size: 12PX;
  color: rgba(102,102,102,0.5);
  width: 90%;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
  .textareaBox{
    width: 94%;
    margin: 0 auto;
    background-color: #FFF;
    padding: 15PX 4%;
    border-radius: 8PX;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    margin-bottom: 15PX;
    .van-field{
      padding: 5PX 0 0;
      border-top: 1px solid #eee;
    }
    .title{
      font-size: 0.45rem;
      margin-bottom: 15PX;
    }
    .van-row{
      text-align: center;
      margin-bottom: 10PX;
      .active{
        background-color: #1D6FE9;
        color: #FFF;
      }
      p{
        display: inline-block;
        padding: 5PX 12PX;
        border-radius: 5PX;
        border: 1px solid #1D6FE9;
        color: #1D6FE9;
      }
    }
  }
.loginOut{
     width: 88%;
     margin: 10PX 6%;
     border-radius: 8Px;
     box-shadow: 0PX 5PX 5PX #cccccc;
     border: none;
     background-color: #1D6FE9;
     color: #FFF;
   }
</style>
