<template> <div class="set-up" > <title-block title="设置"> <template #left> <div> <image style="width: 112rpx;height: 52rpx" src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/785cf885-c4c9-44b3-8155-4b39988c7ef8.png"></image></div> </template> </title-block> <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", data(){ return{ statusBarHeight:uni.getSystemInfoSync().statusBarHeight+10 } }, mounted(){ } } </script> <style scoped lang="scss"> .set-up{ background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png"); position: relative; box-sizing: border-box; overflow: hidden; 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; } } } .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>