lcoco/pages/my/editInformation.vue

<template>
  <view class="information-box" :style="{'background-image': 'url('+headPortrait+')'}">
    <en-nav :title="title" bgckground-box="rgba(0, 0, 0, 0.6)" :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>
    <scroll-view class="information-data" :scroll-y="true" :style="{'height':'calc(100% - '+navHeight+'px)'}">
      <view class="information-top">
        <view class="top-head">
            <view class="head-box">
               <image class="head-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
            </view>
        </view>
        <view class="information-proportion">
          <view class="proportion-text sys-color-white sys-weight-400">资料已完善20%</view>
        </view>
        <view class="information-text sys-color-white sys-weight-400">
          资料完整度越高，匹配率越高，社交能力越强哦
        </view>
      </view>
      <view class="edit-data ">
        <view class="photograph-data">
          <view class="photograph-title">
            <view class="title-data">
              <text class="title-text sys-height-44 sys-color-black sys-weight-600">个人照片</text>
              <text class="num-text sys-height-44 sys-color-gray-9">（1/9)</text>
            </view>
            <view class="proportion-data sys-height-44 sys-color-gray-9">
              +20%
            </view>
          </view>
          <view class="photograph-list">
            <view class="photograph-item" v-for="i in 1">
              <image class="photograph-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
            </view>
            <view class="photograph-add">
              <text class="iconfont"> &#xe627;</text>
            </view>
          </view>
          <view class="photograph-describe sys-weight-600">完成头像认证，收获更多曝光与喜欢</view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">关于我</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
          </view>
          <view class="item-data">
            <view class="row-text sys-height-44 sys-color-gray-9">来写个性宣言，完成你的社交第一步</view>
            <view class="row-icon">
              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
            </view>
          </view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">交友目的</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
          </view>
          <view class="item-data">
            <view class="row-text sys-height-44 sys-color-gray-9">认识朋友</view>
            <view class="row-icon">
              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
            </view>
          </view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">添加微信</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
          </view>
          <view class="item-data">
            <view class="row-text sys-height-44 sys-color-gray-9">上传微信，赚取奖励</view>
            <view class="row-icon">
              <text class="iconfont sys-height-44 sys-color-gray-9"> &#xe62b;</text>
            </view>
          </view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">兴趣</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
          </view>
          <view class="item-interest">
            <view class="interest-item" v-for="i in 2">
              <image class="interest-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
              <view class="interest-text sys-height-44">游泳</view>
            </view>
            <view class="interest-add">
              <view class="interest-add-icon">  <text class="iconfont"> &#xe627;</text></view>
              <view class="interest-text sys-height-44">添加</view>
            </view>
          </view>
        </view>
        <view class="edit-item">
          <view class="item-title">
            <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">基础信息</view>
            <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+30%</view>
          </view>
          <view class="item-from">
           <view class="from-item">
              <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 class="from-item">
              <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 class="from-item">
              <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 class="from-item">
              <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 class="from-item">
              <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 class="from-item">
              <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 class="from-item">
              <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>
        <view class="edit-but sys-background-black sys-weight-600 sys-color-white">保存</view>
      </view>

    </scroll-view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
export default {
  components: {EnNav},
  data() {
    return {
      title:'编辑资料',
      headPortrait:'/static/img/temporary/3.png',
      navHeight:0
    }
  },
  methods: {
    setNavHeight(navHeight){
      this.navHeight=navHeight
    }
  }
}
</script>

<style scoped lang="scss">

.information-box{
  background-repeat: no-repeat;//不平铺
  background-position: top center;//居中
  background-size: contain;//随容器大小
  width: 100vw;
  height: 100vh;
  .nav-right{
    font-size: 32rpx;
  }
  .information-data{
    background-color: rgba(0,0,0,0.6);

    .information-top{
      padding-bottom: 34rpx;
      //height: 444rpx;
      .top-head{
        margin-top: 70rpx;
        display: flex;
        justify-content: center;
        .head-box{
          width: 200rpx;
          height: 200rpx;
          border-radius: 50%;
        }
        .head-img{
          margin:22rpx ;
          width: 156rpx;
          height: 156rpx;
          border-radius: 50%;
        }
      }
      .information-proportion{
        margin-top: 16rpx;
        display: flex;
        justify-content: center;
        .proportion-text{
          background: rgba(0,0,0,0.29);
          border-radius: 20rpx;
          height: 56rpx;
          line-height: 56rpx;
          font-size: 28rpx;
          text-align: center;
          padding: 0 16rpx;
        }

      }
      .information-text{
        margin-top: 24rpx;
        text-align: center;
        font-size: 24rpx;
      }

    }
    .edit-data{
      border-radius: 30rpx 30rpx 0 0;
      background-color: #fff;
      padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom)) 32rpx;
      .photograph-title{
        display: flex;
        justify-content: space-between;
        .title-data{
          .title-text{
            font-size: 32rpx;
            margin-right: 16rpx;
          }
          .num-text{
            font-size: 28rpx;
          }

        }
        .proportion-data{
          font-size: 28rpx;
        }
      }
      .photograph-list{
        margin-top: 26rpx;
        overflow-x: auto;
        display: flex;
        justify-content: flex-start;
        overflow-y: scroll;
        .photograph-item{
          margin-right: 16rpx;
          .photograph-img{
            width: 240rpx;
            height: 316rpx;
            border-radius: 16rpx;
          }
        }
        .photograph-add{
          width: 240rpx;
          height: 316rpx;
          border-radius: 16rpx;
          background-color: #F9F9F9;
          text-align: center;
          line-height: 316rpx;
          .iconfont{
            font-size: 70rpx;
            color: #999;
          }
        }
      }
      .photograph-describe{
        margin-top: 32rpx;
        font-size: 28rpx;
        text-align: center;
        color: #2F80ED;
      }
      .edit-item{
        margin-top: 40rpx;
        .item-title{
          display: flex;
          justify-content: space-between;
          height: 44rpx;
          .item-title-text{
            font-size: 32rpx;
          }
          .item-title-proportion{
            font-size: 28rpx;
          }

        }
        .item-data{
          background-color: #F9F9F9;
          border-radius: 12rpx;
          display: flex;
          justify-content: space-between;
          padding: 24rpx;
          height: 44rpx;
          .row-text{
            font-size: 28rpx;
          }
          .row-icon{
            .iconfont{
              font-size: 28rpx;
            }
          }


        }
        .item-interest{
          padding: 24rpx;
          height: 172rpx;
          background: #F9F9F9;
          border-radius: 12rpx;
          overflow-x: auto;
          display: flex;
          justify-content: flex-start;
          .interest-item{
            margin-right: 16rpx;
            .interest-img{
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
            }
            .interest-text{
              text-align: center;
              font-size: 26rpx;
              color: #BDBDBD;
            }
          }
          .interest-add{
            .interest-add-icon{
              background-color: #E0E0E0;
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
              text-align: center;
              line-height: 120rpx;
              .iconfont{
                font-size:60rpx ;
                color: #999;
              }
            }
            .interest-text{
              text-align: center;
              font-size: 26rpx;
              color: #BDBDBD;
              margin-top: 8rpx;
            }
          }


        }
        .item-from{
          border-radius: 16rpx;
          background: #F9F9F9;
          .from-item{
            height: 44rpx;
            padding: 22rpx 24rpx;
            display: flex;
            justify-content: space-between;

            border-bottom: 1rpx solid #F2F2F2;
            .from-item-title{
              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-item:last-child{
            border-bottom: none;
          }
        }

      }
      .edit-but{
        border-radius: 16rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 32rpx;
      }

    }
  }

}

</style>