<template>
  <div class="context">
    <div class="ContextBox">
      <div class="uploadimg">
        <img :src="FamilyPortraitIcon">
        <span>上传您认为最美的全家福照片</span>
      </div>
      <img class="uploadimgbox" :src="uploadimg">
      <div class="WriteWord">
        <img :src="WriteWordIcon">
        <span>寄语</span>
      </div>
      <div class="input_content">
        <textarea id="textArea" class="content_txt" maxlength="200"></textarea>
        <span class="number">
          <span id="textNum">0</span>
          <span class="totalnum" >/200</span>
        </span>
      </div>
      <div class="ContactInformation">
          <img :src="ContactInformationIcon"/>
          <span>联系方式</span>
      </div>
      <input placeholder="输入手机号"/>
      <input placeholder="输入姓名"/>
      <!-- <textarea class="addressarea" placeholder="所在社区"></textarea> -->
      <div class="btn">
          <button class="SubmitBtn">提交</button>
      </div>
      
    </div>
  </div>
</template>

<script>
import FamilyPortraitIcon from "../../common/icon/xin.png";
import WriteWordIcon from "../../common/icon/xiegenjin.png";
import ContactInformationIcon from "../../common/icon/dianhua.png"
import uploadimg from "../../images/uploadimg.png";
export default {
  name: "signup",
  data() {
    return {
      FamilyPortraitIcon,
      WriteWordIcon,
      uploadimg,
      ContactInformationIcon
    };
  }
};
</script>

<style lang="scss" scoped>
.context {
  width: 100%;
  height: 100%;
  background-color: rgba(209,220,228,1);
  display: flex;
  justify-content: center;

  .ContextBox {
    width: 94%;
    height: 5.85rem;
    border-radius: 0.06rem;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 0.7rem;

    .uploadimg {
      display: flex;
      flex-direction: row;
      padding: 0.3rem 0 0.16rem 0.08rem;

      img {
        width: 0.22rem;
        height: 0.2rem;
      }

      span {
        font-size: 0.16rem;
        font-family: PingFangSC-Medium;
        font-weight: bold;
        color:rgba(112,125,138,1);
        line-height: 0.22rem;
        padding-left: 0.03rem;
      }
    }

    .uploadimgbox {
      width: 1.1rem;
      height: 1.1rem;
      margin-left: 0.23rem;
    }

    .WriteWord {
      display: flex;
      flex-direction: row;
      padding: 0.17rem 0 0.08rem 0.1rem;

      img {
        width: 0.22rem;
        height: 0.2rem;
      }
      span {
        font-size: 0.16rem;
        font-family: PingFangSC-Medium;
        font-weight: bold;
        color:rgba(112,125,138,1);
        line-height: 0.22rem;
        padding-left: 0.03rem;
      }
    }

    .input_content {
      width: 90%;
      height: 1.17rem;
      position: relative;

      .content_txt {
        width: 95%;
        height: 100%;
        padding: 2% 3% 0 3%;
        margin-left: 5%;
        border: none;
        font-size: 0.16rem;
        font-weight: 400;
        background:rgba(220,229,236,0.63);
        line-height: 0.22rem;
        border-radius: 0.06rem;
        font-weight:bold;
color:rgba(112,125,138,1);
      }
      .number {
        position: absolute;
        bottom: 0;
        right: -0.1rem;

        #textNum{
color:#707D8A;
font-size:0.14rem;
font-family:PingFangSC-Medium;
font-weight:bold;
line-height:0.2rem;
        }

        .totalnum{
color:#B8C2CB;
font-size:0.14rem;
font-family:PingFangSC-Medium;
font-weight:bold;
line-height:0.2rem;
        }
      }
    }

    .ContactInformation{
        display: flex;
      flex-direction: row;
      padding: 0.15rem 0 0.08rem 0.1rem;

      img{
          width: 0.22rem;
        height: 0.2rem;
      }
      span{
          font-size: 0.16rem;
        font-family: PingFangSC-Medium;
        font-weight: bold;
        color:rgba(112,125,138,1);
        line-height: 0.22rem;
        padding-left: 0.03rem;
      }
    }
    input{
        width: 84%;
        height: 0.4rem;
        background-color:rgba(220,229,236,0.63);
border-radius:0.06rem;
padding: 0.02rem 0.1rem;
    margin: 0 0 2% 5%;
    }

    input::-webkit-input-placeholder {
     font-size:0.16rem;
font-family:PingFangSC-Medium;
font-weight:bold;
color:rgba(117,132,146,1);
line-height:0.22rem;
    }

    .addressarea{
         width: 84%;
        height: 0.8rem;
        background-color:rgba(255,241,241,1);;
border-radius:0.06rem;
padding: 0.02rem 0.1rem;
    margin: 0 0 2% 5%;
    }
     textarea::-webkit-input-placeholder {
     font-size:0.16rem;
font-family:PingFangSC-Medium;
font-weight:bold;
color:rgba(112,125,138,1);
line-height:0.22rem;
    }
.btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;

       .SubmitBtn{
        width: 44%;
    height: 0.5rem;
    border-radius: 0.23rem;
   background:rgba(166,184,201,1);
box-shadow:0px 2px 10px 0px rgba(207,217,227,1);
    border: none;
    font-size: 0.2rem;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 0.28rem;
    }

}
 
  }
}
</style>


