nsgk_mobile/src/views/sunVillage/user/cooperative.vue

<template>
  <div class="myProfile_main">
    <div class="title_main" @click="skip('/sunVillage/user/index')">
      <div class="return_icon"></div>
      <div class="title">我的资料</div>
    </div>
    <div class="form_main">
      <div class="flex_block">
        <div class="wrap">
          <input type="tel" class="ipt" placeholder="请输入所属合作社名称" />
        </div>
        <div class="btn">完成</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myProfileVisibile: false,
    };
  },
  mounted() {},
  methods: {
    skip(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style scoped lang="scss">
.myProfile_main {
  width: 100vw;
  height: 100vh;
  background: #fff;
  .title_main {
    display: flex;
    height: 90px;
    margin: 0 24px;
    align-items: center; /*  子元素相对父元素垂直居中 */
    border-bottom: 1px solid #e5e5e5;
    .return_icon {
      width: 16px;
      height: 26px;
      background: url("../../../assets/images/sunVillage/headings_return.png")
        no-repeat;
      background-size: 100% 100%;
      margin-right: 16px;
      margin-left: 8px;
    }
    .title {
      font-size: 32px;
    }
  }
  .form_main {
    margin: 20px 57px 0;
    .flex_block {
      height: 112px;
      display: flex;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 20px;
      .wrap {
        flex: 1;
        .ipt {
          height: 100%;
          background: none;
          border: 0 none;
          width: 90%;
          font-size: 34px;
        }
      }
      .btn {
        width: 224px;
        border-left: 1px solid #e6e6e6;
        font-size: 34px;
        color: rgb(7, 193, 96);
        display: flex;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
      }
    }
  }
}
</style>