<template>
  <div class="content">
    <van-nav-bar
      title="校长信箱
     "
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group inset>
      <van-field
        vmodel="message"
        type="textarea"
        placeholder="请输入标题..."
        class="hd-title"
      />
    </van-cell-group>
    <van-cell-group inset>
      <van-field
        vmodel="message"
        type="textarea"
        maxlength="500"
        rows="7"
        placeholder="请输入反馈内容..."
        show-word-limit
        class="hd-content"
      />
    </van-cell-group>
    <div class="photo-title">上传照片</div>
    <van-uploader
      v-model="fileList"
      :after-read="afterRead"
      style="margin-left: 0.3 * 13.3vw; margin-right: 0.1 * 13.3vw"
    >
      <template #preview-cover="{}">
        <div class="preview-cover van-ellipsis"></div>
      </template>
    </van-uploader>
    <div class="submit">完成并提交</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    afterRead() {},
  },
};
</script>

<style  lang="scss" scoped>
.content {
  background-color: #fff;
  margin: 0 auto;
}
::v-deep .van-nav-bar {
  width: 100%;
  height: 1 * 13.3vw;
  line-height: 1 * 13.3vw;
  background-color: #003eee;
  .van-nav-bar__title {
    color: #fff !important;
    font-size: 0.36 * 13.3vw;
    font-weight: 350;
  }
  .van-nav-bar__text {
    color: #fff !important;
    font-size: 0.32 * 13.3vw;
    font-weight: 350;
  }
}

.hd-title,
.hd-content {
  box-sizing: borderbox;
  width: 6.7 * 13.3vw;
  height: 0.9 * 13.3vw;
  border: 0.01 * 13.3vw solid #dcdcdc;
  border-radius: 0.1 * 13.3vw;
  font-size: 0.24 * 13.3vw;
  font-family: PingFangSCRegular;
  text-align: left;
  vertical-align: middle;
  color: #999999;
  margin: 0.3 * 13.3vw 0.14 * 13.3vw 0.22 * 13.3vw 0.14 * 13.3vw;
}
.hd-content {
  height: 3.9 * 13.3vw;
  margin: 0 0.14 * 13.3vw;
}
.photo-title {
  height: 0.37 * 13.3vw;
  font-size: 0.28 * 13.3vw;
  font-family: PingFangSCRegular;
  text-align: left;
  color: #000000;
  line-height: 0.4 * 13.3vw;
  margin: 0.3 * 13.3vw;
}
.submit {
  width: 5 * 13.3vw;
  height: 0.68 * 13.3vw;
  line-height: 0.68 * 13.3vw;
  margin: 0 auto;
  background-color: #3b4df5;
  border-radius: 0.34 * 13.3vw;
  font-size: 0.3 * 13.3vw;
  font-family: PingFang-SC-Regular;
  text-align: center;
  color: #ffffff;
  margin-top: 2.3 * 13.3vw;
}

::v-deep .van-uploader__wrapper {
  flex-direction: row-reverse;
  .van-uploader__preview {
    .van-image {
      overflow: unset;
    }
    .van-uploader__preview-delete {
      width: 0.42 * 13.3vw;
      height: 0.42 * 13.3vw;
      border-radius: 50%;
      position: absolute;
      top: -0.15 * 13.3vw;
      right: -0.15 * 13.3vw;
      background-color: #e64545;
      .van-icon-cross {
        display: none;
      }
    }
    .van-uploader__preview-delete::before {
      content: "";
      position: absolute;
      width: 0.26 * 13.3vw;
      height: 0.03 * 13.3vw;
      border-radius: 0.03 * 13.3vw;
      background-color: #fff;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }
}
</style>