lcoco/pages/my/edit/age.vue

<template>
  <view class="form-box" >
    <en-nav title="年龄&星座" :title-color="'#333'" :right-show="true" :right-type="2" @navHeight="setNavHeight" >
      <template v-slot:right>
        <text class="nav-right sys-weight-600 sys-color-white">保存</text>
      </template>
    </en-nav>
    <view :style="{'height':'calc(100vh - '+navHeight+'px)'}">
      <view class="from-data" >
        <view class="from-input">
          <view class="from-item-title sys-height-44 sys-weight-400" >出生日期</view>
          <view class="from-item-data">
            <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">1995-9-16</view>
            <view class="item-data-icon">
              <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
            </view>
          </view>
        </view>
        <view class="from-input">
          <view class="from-item-title sys-height-44 sys-weight-400" >年龄</view>
          <view class="from-item-data">
            <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">27</view>
            <view class="item-data-icon">
              <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
            </view>
          </view>
        </view>
        <view class="from-input">
          <view class="from-item-title sys-height-44 sys-weight-400" >星座</view>
          <view class="from-item-data">
            <view class="item-data-text  sys-height-44 sys-color-gray-9 sys-weight-400">处女座</view>
            <view class="item-data-icon">
              <text class="iconfont  sys-color-gray-9 sys-weight-400"> &#xe62b;</text>
            </view>
          </view>
        </view>
      </view>

      <view class="from-text sys-color-gray-9">
        1.输入出生时间(公历)，系统自动计算年龄和星座， 匹配也会 更加准确。
      </view>
      <view class="from-text sys-color-gray-9">
        2.此应用需年满18周岁使用
      </view>
    </view>

  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
export default {
  components: {EnNav},
  data() {
    return {
      navHeight:0
    }
  },
  methods: {
    setNavHeight(navHeight){
      this.navHeight=navHeight
    },
  }
}
</script>

<style scoped lang="scss">
.form-box{

  background: #F8F8F8;
  .nav-right{
    font-size: 28rpx;
    line-height: 44rpx;
    color: #333;
  }
  .from-data{
    margin: 32rpx;
    border-radius: 20rpx;
    background-color: #fff;
    .from-input{
      padding: 32rpx 28rpx;
      border-bottom: 1rpx solid #F2F2F2;
      display: flex;
      justify-content: space-between;
      .from-item-title{
        color: #000000;
        font-size: 28rpx;
      }
      .from-item-data{
        display: flex;
        justify-content: space-between;
        .item-data-text{
          font-size: 28rpx;
        }
        .item-data-icon{
          .iconfont{
            font-size: 28rpx;
            line-height: 50rpx;
          }
        }
      }

    }
  }

  .from-text{
    margin-top: 24rpx;
    padding: 0 32rpx;
    font-size: 24rpx;
  }

}

</style>