<template>
  <view class="container">
    <meet-sticky :bg="bg">
      <meet-navbar title="意见反馈" :isFixed="false"></meet-navbar>
    </meet-sticky>
    <view class="content">
      <view class="title"> 问题反馈 </view>
      <view class="mb-24">
        <u--textarea
          v-model="value2"
          placeholder="请输入内容"
          count
          :maxlength="150"
          :height="215"
          :border="border"
        ></u--textarea>
      </view>
      <view class="mb-48">
        <u-upload
          :fileList="fileList6"
          @afterRead="afterRead"
          @delete="deletePic"
          name="6"
          multiple
          :maxCount="1"
          width="156"
          height="156"
        >
          <view class="push">
            <image
              src="/static/image/user/push.png"
              mode="scaleToFill"
              class="icon"
            />
            <view class="txt">添加截图</view>
          </view>
        </u-upload>
      </view>
      <view class="title"> 联系方式 </view>
      <view>
        <u--input
          placeholder="请输入手机号"
          border="surround"
          v-model="value"
          clearable
        ></u--input>
      </view>
      <!-- <view class="mb-30">
        <u-search
          placeholder="日照香炉生紫烟"
          v-model="keyword"
          :showAction="false"
          :bgColor="bgColor"
          borderColor="#fff"
        ></u-search>
      </view> -->
    </view>
  </view>
</template>
  
   <script>
export default {
  data() {
    return {
      value2: "",
      value: "",
      border: "none",
      keyword: "遥看瀑布挂前川",
      bg: "",
      popup: false,
      bgColor: "#eef8fe05",
      fileList6: [],
    };
  },
  methods: {
    upMask() {
      this.popup = !this.popup;
    },
    afterRead(e) {
      console.log(e);
    },
    deletePic(e) {
      console.log(e);
    },
  },
};
</script>
      
  <style lang="scss" scoped>
@import "../common.scss";
.push {
  width: 156rpx;
  height: 156rpx;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  border: 2rpx solid #ffffff;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .txt {
    font-weight: 400;
    font-size: 24rpx;
    color: #93999f;
  }
}
.title {
  font-weight: 700;
  font-size: 32rpx;
  color: #23262b;
  margin-bottom: 24rpx;
}
.icon {
  width: 40rpx;
  height: 40rpx;
}
.content {
  padding: 0 24rpx;
}
.container {
  min-height: 100vh;
  background-color: #d1dcfe;
  padding: 20rpx 0;
}
::v-deep .u-search__content {
  background-color: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  ) !important;
}
::v-deep .u-search__content__input {
  background-color: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  ) !important;
}
::v-deep .u-textarea {
  border-radius: 24rpx !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  ) !important;
  border: 2rpx solid #ffffff;
}
::v-deep .u-textarea__count {
  background-color: transparent !important;
}
::v-deep .u-input {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  ) !important;
  border-radius: 24rpx !important;
  border: 2rpx solid #ffffff !important;
  height: 96rpx !important;
box-sizing: border-box !important;
}
</style>