uni-Identify-quality/pages/mine/set-up.vue

<template>
<div class="set-up" :style="{background:'url('+'../../static/bbj1@3x.png'+')'}">
  <div class="content1">
    <div class="wrap1">
      <image src="../../static/zu506@3x.png"></image>
    </div>
    <div class="wrap2">设置</div>
    <div class="wrap3"></div>
  </div>
  <div class="content2">
    <div class="wrap1">
      <image src="../../static/06@3x.png"></image>
    </div>
    <div class="wrap2">
      <div class="wrap2_1">恢复默认头像</div>
      <div class="wrap2_2">更换头像</div>
    </div>
  </div>
  <div class="content3">
    <div class="wrap1">
      <div class="wrap1_1">
        <div class="wrap1_1_1">画作编号</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="画作编号" />
        </div>
        <div class="wrap1_1_4"></div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">画作名称</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="画作名称" />
        </div>
        <div class="wrap1_1_4"></div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">画家名称</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="画家名称" />
        </div>
        <div class="wrap1_1_4">
        </div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">画作平尺数</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input placeholder-style="color: #939393;font-size: 24rpx;"  placeholder="画作平尺数" />
        </div>
      </div>
    </div>
    <div class="wrap2"></div>
  </div>
  <div class="content4">
    <div class="wrap1">注销账号</div>
    <div class="wrap2">退出登录</div>
  </div>
</div>
</template>
<script>
export default {
  name: "set-up"
}
</script>



<style scoped lang="scss">
.set-up{
  position: relative;
  box-sizing: border-box;
  padding-top: 46rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  .content4{
left: 50%;
    transform: translateX(-50%);
    bottom: 104rpx;
    position: absolute;
    display: flex;
    .wrap2{
      margin-left: 38rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      border-radius: 40rpx;
      width: 292rpx;
      height: 56rpx;
      background: #3E3E3E;
    }
    .wrap1{
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      border-radius: 40rpx;
      width: 292rpx;
      height: 56rpx;
      background: #ED6666;
    }
  }
  .content2{
    margin-top: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .wrap1{
      image{
        height: 154rpx;
        width: 154rpx;
      }
    }
    .wrap2{
      margin-left: 42rpx;

      .wrap2_2{
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 348rpx;
        height: 56rpx;
        color: #fff;
        font-size: 32rpx;
        background: #76C458;
        border-radius: 40rpx;
      }
.wrap2_1{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 348rpx;
  height: 56rpx;
  color: #fff;
  font-size: 32rpx;
  background: #000;
  border-radius: 40rpx;
}
    }
  }
  .content1{
    display: flex;
    justify-content: space-between;
    .wrap3{
      width: 130rpx;
    }
    .wrap2{
      color:#4E964D ;
      font-size: 32rpx;
    }
    .wrap1{
      image{
        width: 112rpx;
        height: 52rpx;
      }
    }
  }
  .content3{
    margin-top: 60rpx;
    .wrap1{
      border: 1rpx dashed #DFE9F0;
      background-color: #fff;
      .wrap1_1{
        position: relative;
        height: 114rpx;
        display: flex;
        align-items: center;
        .wrap1_1_4{
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          position: absolute;
          height: 0;
          width: 636rpx;
          border-bottom: 0.5px solid #626262;
        }
        .wrap1_1_2{
          margin-right: 36rpx;
          width: 0;
          height: 66rpx;
          border-left: 0.5px solid #626262;

        }
        .wrap1_1_1{
          width: 210rpx;
          padding-left: 32rpx;

          color: #626262;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>