demo_46 问题反馈页面实现

效果图

1. 创建页面并跳转

 2. feedback页面内容及样式实现

<template>
  <view>
    <view class="feedback-title">意见反馈：</view>
    <view class="feedback-content">
      <textarea class="feedback-textarea" placeholder="请输入您要反馈的问题" />
    </view>
    <view class="feedback-title">反馈图片：</view>
    <view class="feedback-image-box">
      <view class="feedback-image-item">
        <view class="close-icon">
          <uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
        </view>
        <view class="image-box">
          <image src="../../static/logo.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="feedback-image-item">
        <view class="image-box">
          <uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
        </view>
      </view>
    </view>
    <button class="feedback-button" type="primary">提交反馈意见</button>
  </view>
</template>

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

<style lang="scss">
.feedback-title {
  margin: 15px;
  margin-bottom: 0;
  font-size: 14px;
  color: #666;
}

.feedback-content {
  margin: 15px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px #eee solid;
  .feedback-textarea {
    font-size: 12px;
    width: 100%;
    height: 100px;
  }
}
.feedback-image-box {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  .feedback-image-item {
    position: relative;
    width: 33.33%;
    height: 0;
    padding-top: 33.33%;
    box-sizing: border-box;
    .close-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 0;
      top: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #ff5a5f;
      z-index: 2;
    }
    .image-box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 5px;
      right: 5px;
      bottom: 5px;
      left: 5px;
      border: 1px #eee solid;
      border-radius: 5px;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.feedback-button {
  margin: 0 15px;
  background-color: $mk-base-color;
}
</style>