连云港陪玩陪聊
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
chunwan/pages/users/edit/index.vue

1020 lines
27 KiB

<template>
<view class="edit">
<view class="edit-navbar">
<u-navbar title="编辑资料" back-icon-color="#333333" title-color="#333333" :background="background">
<view class="slot-wrap" slot="right">
<view class="btn" @click="toSave()">保存</view>
</view>
</u-navbar>
</view>
<view class="edit-user">
<view class="user">
<view class="pic" @click="toNext(userInfo.faceImage?1:3)">
<image class="avatar" v-if="userInfo.faceImage" :src="userInfo.faceImage"></image>
<image class="avatar" v-else :src="userInfo.img"></image>
<image class="xiangji" src="@/static/xiangji.png"></image>
</view>
</view>
<view class="tips">
<text>尊敬的用户,个人资料内容必须遵守相关法规和平台规则,上传过于暴露的照片、违规昵称宣言将会被封禁。\n\n您的头像会用于进行实名认证图片比对,若比对不通过,则修改失败。</text>
</view>
</view>
<view class="edit-hd">
<view class="title">交友宣言</view>
<view class="xuanyan">
<image class="icon" src="@/static/editor.png"></image>
<textarea v-model="userInfo.declaration" placeholder="介绍一下自己"></textarea>
</view>
</view>
<view class="edit-hd">
<view class="title">语音签名</view>
<view class="qianming">
<view class="box" v-if="userInfo.voiceTime">
{{userInfo.voiceTime?userInfo.voiceTime+"″":'暂无录音'}}
</view>
<view class="icon" @click="toPage()">
{{userInfo.voiceTime?"重新录制":'立即录制'}}<image src="@/static/icon-arrow.png"></image>
</view>
</view>
</view>
<view class="edit-bd">
<view class="title">基本信息<text>完善基本资料,让Ta了解你多一点</text></view>
<view class="content">
<view class="item">
<view class="a">昵称</view>
<view class="b" @click="openPage()">
<view class="txt" :class="userInfo.nickname?'txt-on':''">{{userInfo.nickname?userInfo.nickname:'请选择'}}</view>
<image src="@/static/icon-arrow.png"></image></view>
</view>
<view class="item">
<view class="a">出生日期</view>
<view class="b">
<picker fields="day" mode="date" :end="endDate" :value="userInfo.birthday" @change="pickerDate1">
{{userInfo.birthday}}
</picker>
<image src="@/static/icon-arrow.png"></image></view>
</view>
<view class="item">
<view class="a">性别</view>
<view class="b">{{userInfo.sex==1?'男':'女'}}</view>
</view>
<view class="item">
<view class="a">身高</view>
<view class="b"><picker :range="pickerList1" :value="pickerIndex1" @change="pickerDate2">
<view class="txt" :class="userInfo.height?'txt-on':''">{{userInfo.height?userInfo.height:'请选择'}}</view>
</picker><image src="@/static/icon-arrow.png"></image></view>
</view>
<view class="item">
<view class="a">体重</view>
<view class="b"><picker :range="pickerList2" :value="pickerIndex2" @change="pickerDate3">
<view class="txt" :class="userInfo.weight?'txt-on':''">{{userInfo.weight?userInfo.weight:'请选择'}}</view>
</picker><image src="@/static/icon-arrow.png"></image></view>
</view>
<view class="item">
<view class="a">年收入</view>
<view class="b"><picker :range="pickerList3" range-key="dictLabel" :value="pickerIndex3" @change="pickerDate4">
<view class="txt" :class="userInfo.annualIncome?'txt-on':''">{{userInfo.annualIncome?userInfo.annualIncome:'请选择'}}</view>
</picker><image src="@/static/icon-arrow.png"></image>
</view>
</view>
<view class="item">
<view class="a">学历</view>
<view class="b"><picker :range="pickerList4" range-key="dictLabel" :value="pickerIndex4" @change="pickerDate5">
<view class="txt" :class="userInfo.xueli?'txt-on':''">{{userInfo.xueli?userInfo.xueli:'请选择'}}</view>
</picker><image src="@/static/icon-arrow.png"></image>
</view>
</view>
<view class="item">
<view class="a">职业</view>
<view class="b"><input type="text" v-model="userInfo.post" placeholder="请输入" /></view>
</view>
<view class="item">
<view class="a">现居城市</view>
<view class="b"><view class="txt" @click="openCity(1)" :class="userInfo.province?'txt-on':''">{{userInfo.province?(userInfo.province+"-"+userInfo.city+"-"+userInfo.district):'请选择'}}</view><image src="@/static/icon-arrow.png"></image></view>
</view>
<view class="item">
<view class="a">家乡</view>
<view class="b"><view class="txt" @click="openCity(2)" :class="userInfo.province?'txt-on':''">{{userInfo.home?userInfo.home:'请选择'}}</view><image src="@/static/icon-arrow.png"></image></view>
</view>
<view class="item">
<view class="a">星座</view>
<view class="b">
<picker :range="pickerList5" range-key="dictLabel" :value="pickerIndex5" @change="pickerDate6">
<view class="txt" :class="userInfo.constellation?'txt-on':''">{{userInfo.constellation?userInfo.constellation:'请选择'}}</view>
</picker><image src="@/static/icon-arrow.png"></image>
</view>
</view>
</view>
</view>
<view class="edit-bd">
<view class="title">情感喜好</view>
<view class="content">
<view class="item">
<view class="a">情感状态</view>
<view class="b"><picker :range="pickerList6" range-key="dictLabel" :value="pickerIndex6" @change="pickerDate7">
<view class="txt" :class="userInfo.emotion?'txt-on':''">{{userInfo.emotion?userInfo.emotion:'请选择'}}</view>
</picker><image src="@/static/icon-arrow.png"></image></view>
</view>
<view class="item">
<view class="a">喜欢什么样的异性</view>
<view class="b">
<view class="txt" @click="show = true" v-if="!userInfo.sexFlag">请选择</view>
<view class="list" v-else>
<view class="li" v-for="(a,i) in userInfo.sexFlag" :key="i" @click="show = true">{{a}}</view>
</view>
<image src="@/static/icon-arrow.png"></image>
</view>
</view>
</view>
</view>
<view class="edit-hd">
<view class="title">相册</view>
<view class="content">
<view class="items" v-for="(a,i) in userInfo.xiangce" :key="i">
<image class="del" @click.stop="toDel(i)" src="@/static/icon-del.png"></image>
<image class="pic" :src="a"></image>
</view>
<view class="upload" @click="uploadImg(2)">
<image src="@/static/jia.png"></image>
</view>
</view>
</view>
<u-popup v-model="show" mode="center" border-radius="20">
<view class="tiao">
<view class="title">喜欢的异性</view>
<view class="content">
<view class="item" v-for="(a,i) in pickerList7" :class="a.isSelect?'item-on':''" @click="tabItem(i)">{{a.dictLabel}}</view>
</view>
<view class="btn" @click="toClick()">确认</view>
</view>
</u-popup>
<u-picker mode="region" v-model="show1" :defaultRegion="defaultRegion" @cancel="cancel" @confirm="confirm" ></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
show1: false,
tabIndex: 1,
show: false,
background: {
"background": "#ffffff"
},
baseUrl: "",
userInfo: {},
pickerList1: [],
pickerList2: [],
pickerList3: [],
pickerList4: [],
pickerList5: [],
pickerList6: [],
pickerList7: [],
pickerList8: [],
pickerIndex1: 0,
pickerIndex2: 0,
pickerIndex3: 0,
pickerIndex4: 0,
pickerIndex5: 0,
pickerIndex6: 0,
cityType: 1,
defaultRegion: [],
uploadType: 1
};
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
onReady() {
const that = this;
that.baseUrl = that.$baseUrl;
that.getUserInfo();
uni.$on("changVioce",res=>{
that.getUserInfo();
})
uni.$on("changNickname",res=>{
that.userInfo.nickname = res
})
// 监听从裁剪页发布的事件,获得裁剪结果
uni.$on('uAvatarCropper1', path => {
if(that.uploadType == 2 || that.uploadType == 3){
// 可以在此上传到服务端
uni.uploadFile({
url: that.$baseUrl+'/prod-api/common/upload',
filePath: path,
name: 'file',
complete: (res) => {
if(res.statusCode == 200){
const {code, fileName, url, msg} = JSON.parse(res.data);
if(code == 200){
uni.showToast({
title: "上传成功"
})
if(that.uploadType == 2){
that.userInfo.xiangce.push(url);
}else{
that.userInfo.img = url;
}
that.$forceUpdate();
}else{
uni.showToast({
icon: "error",
title: "上传失败"
})
}
}else{
uni.showToast({
icon: "error",
title: "上传失败"
})
}
}
});
}else{
// 可以在此上传到服务端
uni.uploadFile({
url: that.$baseUrl+'/prod-api/api/user/uploadOSSFile',
filePath: path,
name: 'file',
formData: {
"userId": uni.getStorageSync("userInfo").id
},
complete: (res) => {
if(res.statusCode == 200){
const {code, data, msg} = JSON.parse(res.data);
if(code == 200){
that.toReg(data)
}else{
uni.showToast({
icon: "error",
title: "上传失败"
})
}
}else{
uni.showToast({
icon: "error",
title: "上传失败"
})
}
}
});
}
})
},
methods: {
//上传图片
uploadImg() {
const that = this
uni.chooseImage({
count: 9-that.userInfo.xiangce.length,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"],
success: (res) => {
console.log(res)
for(var i = 0; i<res.tempFilePaths.length;i++){
// 可以在此上传到服务端
uni.uploadFile({
url: that.$baseUrl+'/prod-api/common/upload',
filePath: res.tempFilePaths[i],
name: 'file',
complete: (res1) => {
console.log(res1)
if(res1.statusCode == 200){
const {code, fileName, url, msg} = JSON.parse(res1.data);
if(code == 200){
uni.showToast({
title: "上传成功"
})
that.userInfo.xiangce.push(url);
that.$forceUpdate();
}else{
uni.showToast({
icon: "error",
title: "上传失败"
})
}
}else{
uni.showToast({
icon: "error",
title: "上传失败"
})
}
}
});
}
},
fail(err){
console.log("fail",err)
}
});
},
openPage() {
uni.navigateTo({
url: "/pages/users/nickname/index?nickname="+this.userInfo.nickname
})
},
openCity(index) {
this.cityType = index;
if(index == 1){
this.defaultRegion = this.userInfo.province?[this.userInfo.province,this.userInfo.city,this.userInfo.district]:[]
}else{
this.defaultRegion = this.userInfo.home?this.userInfo.home.split("-"):[]
}
console.log(this.defaultRegion)
this.show1 = true;
},
cancel() {
this.show1 = false
},
confirm(e){
this.show1 = false
console.log(e)
if(this.cityType == 1){
this.userInfo.province = e.province.name;
this.userInfo.city = e.city.name;
this.userInfo.district = e.area.name;
this.defaultRegion = [e.province.name,e.city.name,e.area.name]
}else{
this.userInfo.home = e.province.name+"-"+e.city.name+"-"+e.area.name;
this.defaultRegion = [e.province.name,e.city.name,e.area.name]
}
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
async getUserInfo() {
const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
if(code == 200){
this.userInfo = data;
this.userInfo.xiangce = []
if(data.reserved1){
this.userInfo.xiangce = data.reserved1.split(",")
}
if(data.province){
this.defaultRegion = [data.province, data.city, data.district]
}else{
this.defaultRegion = uni.getStorageSync("jingweiInfo").province?[uni.getStorageSync("jingweiInfo").province, uni.getStorageSync("jingweiInfo").city, uni.getStorageSync("jingweiInfo").district]:[]
}
this.userInfo.province = this.defaultRegion[0];
this.userInfo.city = this.defaultRegion[1];
this.userInfo.district = this.defaultRegion[2];
console.log(this.defaultRegion)
this.getDictDataByType();
}else{
uni.showToast({
title: msg,
position: "bottom",
icon: "none",
})
}
},
//字典查询
async getDictDataByType() {
const that = this;
for(let i = 150;i<=210;i++){
if((i+"cm") == that.userInfo.height){
that.pickerIndex1 = (i-150)
}
that.pickerList1.push(i+"cm")
}
for(let i = 40;i<=120;i++){
if((i+"kg") == that.userInfo.weight){
that.pickerIndex2 = (i-40)
}
that.pickerList2.push(i+"kg")
}
let res1 = await that.$api.getDictDataByType({dictType: 'salary_type'});
let res2 = await that.$api.getDictDataByType({dictType: 'education_type'});
let res3 = await that.$api.getDictDataByType({dictType: 'constellation_type'});
let res4 = await that.$api.getDictDataByType({dictType: 'marriage_type'});
let res5 = await that.$api.getDictDataByType({dictType: that.userInfo.sex == 1?'sex_type_2':'sex_type_1'});
if(res1.data && res1.data.length > 0){
res1.data.map((a,index)=>{
if(that.userInfo.annualIncome == a.dictValue){
that.userInfo.annualIncome = a.dictLabel
that.userInfo.annualIncomeId = a.dictValue
that.pickerIndex3 = index;
}
})
}
if(res2.data && res2.data.length > 0){
res2.data.map((a,index)=>{
if(that.userInfo.xueli == a.dictValue){
that.userInfo.xueli = a.dictLabel
that.userInfo.xueliId = a.dictValue
that.pickerIndex4 = index
}
})
}
if(res3.data && res3.data.length > 0){
res3.data.map((a,index)=>{
if(that.userInfo.constellation == a.dictValue){
that.userInfo.constellation = a.dictLabel;
that.userInfo.constellationId = a.dictValue;
that.pickerIndex5 = index
}
})
}
if(res4.data && res4.data.length > 0){
res4.data.map((a,index)=>{
if(that.userInfo.emotion == a.dictValue){
that.userInfo.emotion = a.dictLabel;
that.userInfo.emotionId = a.dictValue;
that.pickerIndex6 = index
}
})
}
this.pickerList3 = res1.data;
this.pickerList4 = res2.data;
this.pickerList5 = res3.data;
this.pickerList6 = res4.data;
let sexFlag = "",arr=[],arr1=[];
if(res5.data && res5.data.length > 0){
res5.data.map(a=>{
a.isSelect = false;
if(that.userInfo.sexFlag ){
sexFlag = that.userInfo.sexFlag.split(",")
sexFlag.map(b=>{
if(b== a.dictValue){
arr.push(a.dictLabel)
arr1.push(a.dictValue)
a.isSelect = true
}
})
}
})
}
if(that.userInfo.sexFlag ){
that.userInfo.sexFlag = arr;
that.userInfo.sexFlagIds = arr1;
}
this.pickerList7 = res5.data;
},
tabItem(index){
this.pickerList7[index].isSelect = !this.pickerList7[index].isSelect;
},
toClick(){
this.show = false
let arr = [],arr1=[];
if(this.pickerList7 && this.pickerList7.length > 0){
this.pickerList7.map(a=>{
if(a.isSelect){
arr.push(a.dictLabel)
arr1.push(a.dictValue)
}
})
}
this.userInfo.sexFlag = arr.length>=1?arr:""
this.userInfo.sexFlagIds = arr1.length>=1?arr1:""
},
pickerDate1(e){
this.userInfo.birthday = e.detail.value
},
pickerDate2(e){
this.userInfo.height = this.pickerList1[e.detail.value]
},
pickerDate3(e){
this.userInfo.weight = this.pickerList2[e.detail.value]
},
pickerDate4(e){
this.userInfo.annualIncome = this.pickerList3[e.detail.value].dictLabel
this.userInfo.annualIncomeId = this.pickerList3[e.detail.value].dictValue;
this.pickerIndex3 = e.detail.value;
},
pickerDate5(e){
this.userInfo.xueli = this.pickerList4[e.detail.value].dictLabel
this.userInfo.xueliId = this.pickerList4[e.detail.value].dictValue
this.pickerIndex4 = e.detail.value;
},
pickerDate6(e){
this.userInfo.constellation = this.pickerList5[e.detail.value].dictLabel
this.userInfo.constellationId = this.pickerList5[e.detail.value].dictValue
this.pickerIndex5 = e.detail.value;
},
pickerDate7(e){
this.userInfo.emotion = this.pickerList6[e.detail.value].dictLabel
this.userInfo.emotionId = this.pickerList6[e.detail.value].dictValue
this.pickerIndex6 = e.detail.value;
},
toDel(i){
this.userInfo.xiangce.splice(i,1);
this.$forceUpdate();
},
toNext(index) {
this.uploadType=index;
this.$u.route({
// 关于此路径,请见下方"注意事项"
url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-shiming',
// 内部已设置以下默认参数值,可不传这些参数
params: {
// 输出图片宽度,高等于宽,单位px
destWidth: 700,
// 裁剪框宽度,高等于宽,单位px
rectWidth: 300,
// 输出的图片类型,如果'png'类型发现裁剪的图片太大,改成"jpg"即可
fileType: 'jpg',
}
})
},
//去登录
async toReg(faceImage) {
console.log(faceImage)
const {code, data, msg} = await this.$api.detectLivingFace({
userId: uni.getStorageSync("userInfo").id,
faceImage
})
console.log(code, data, msg)
if(code == 200){
uni.showToast({
title: "上传成功"
})
this.userInfo.faceImage = faceImage
this.$forceUpdate();
}else{
uni.showToast({
icon: "none",
position: "bottom",
title: msg
})
}
},
toPage() {
uni.setStorageSync("yuyinInfo",{
voice: this.userInfo.voice,
voiceTime: this.userInfo.voiceTime,
})
uni.navigateTo({
url: "/pages/users/yuyin/index"
})
},
async toSave() {
if(!this.userInfo.declaration){
uni.showToast({
icon: "none",
position: "bottom",
title: "交友宣言不能为空!"
})
return ;
}
if(!this.userInfo.nickname){
uni.showToast({
icon: "none",
position: "bottom",
title: "昵称不能为空!"
})
return ;
}
if(!this.userInfo.birthday){
uni.showToast({
icon: "none",
position: "bottom",
title: "出生日期不能为空!"
})
return ;
}
if(!this.userInfo.height){
uni.showToast({
icon: "none",
position: "bottom",
title: "请选择身高"
})
return ;
}
if(!this.userInfo.weight){
uni.showToast({
icon: "none",
position: "bottom",
title: "请选择体重"
})
return ;
}
if(!this.userInfo.annualIncome){
uni.showToast({
icon: "none",
position: "bottom",
title: "请选择年收入"
})
return ;
}
if(!this.userInfo.xueli){
uni.showToast({
icon: "none",
position: "bottom",
title: "请选择学历"
})
return ;
}
if(!this.userInfo.post){
uni.showToast({
icon: "none",
position: "bottom",
title: "职业不能为空!"
})
return ;
}
if(!this.userInfo.city){
uni.showToast({
icon: "none",
position: "bottom",
title: "请选择现居城市"
})
return ;
}
if(!this.userInfo.home){
uni.showToast({
icon: "none",
position: "bottom",
title: "请选择家乡"
})
return ;
}
if(!this.userInfo.emotion){
uni.showToast({
icon: "none",
position: "bottom",
title: "请选择情感状态"
})
return ;
}
if(!this.userInfo.sexFlag){
uni.showToast({
icon: "none",
position: "bottom",
title: "请选择喜欢什么异性"
})
return ;
}
if(this.userInfo.xiangce.length == 0){
uni.showToast({
icon: "none",
position: "bottom",
title: "请上传照片"
})
return ;
}
const {code, data, msg} = await this.$api.editUser({
id: uni.getStorageSync("userInfo").id,
nickname: this.userInfo.nickname,
faceImage: this.userInfo.faceImage,
xueli: this.userInfo.xueliId,
img: this.userInfo.img,
birthday: this.userInfo.birthday,
declaration: this.userInfo.declaration,
voice: this.userInfo.voice,
voiceTime: this.userInfo.voiceTime,
height: this.userInfo.height,
weight: this.userInfo.weight,
post: this.userInfo.post,
emotion: this.userInfo.emotionId,
annualIncome: this.userInfo.annualIncomeId,
home: this.userInfo.home,
constellation: this.userInfo.constellationId,
sexFlag: this.userInfo.sexFlagIds.join(","),
province: this.userInfo.province,
district: this.userInfo.district,
city: this.userInfo.city,
address: this.userInfo.address,
reserved1: this.userInfo.xiangce.join(","),
})
if(code == 200){
uni.showToast({
title: "保存成功"
})
// this.getUserInfo();
// this.$forceUpdate();
setTimeout(()=>{
uni.navigateBack({
delta: 1
})
},2000)
}else{
uni.showToast({
icon: "none",
position: "bottom",
title: msg
})
}
},
}
}
</script>
<style scoped lang="scss">
.edit{
padding: 0 25rpx 25rpx;
overflow: hidden;
.tiao{
width: 670rpx;
min-height: 570rpx;
background: #FFFFFF;
border-radius: 20rpx;
.title{
font-weight: 500;
font-size: 36rpx;
padding: 50rpx 0;
color: #333333;
text-align: center;
}
.content{
width: 110%;
overflow: hidden;
.item{
min-width: 180rpx;
line-height: 80rpx;
background: #EBEBEB;
border-radius: 80rpx;
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 35rpx;
margin-top: 30rpx;
float: left;
&-on{
background-color: #222222;
color: #fff;
}
}
}
.btn{
width: 520rpx;
line-height: 100rpx;
background: linear-gradient(0deg, #000000, #3D3B38);
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
border-radius: 100rpx;
text-align: center;
margin: 0 auto;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 80rpx;
}
}
&-navbar{
.btn{
font-weight: 500;
font-size: 30rpx;
color: #222222;
margin-right: 30rpx;
}
}
&-bd{
width: 100%;
background: #FFFFFF;
border-radius: 20rpx;
padding: 25rpx 30rpx 0;
box-sizing: border-box;
margin-top: 20rpx;
overflow: hidden;
.title{
font-weight: 500;
font-size: 30rpx;
color: #222222;
text{
float: right;
font-weight: 500;
font-size: 24rpx;
color: #999999;
}
}
.content {
width: 100%;
box-sizing: border-box;
.item{
padding: 40rpx 0;
border-top: 1px solid #EAEAEA;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 30rpx;
&:first-child{
border-top-color: #FFFFFF;
}
.a{
color: #999999;
}
.b{
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
color: #222222;
font-size: 30rpx;
.list{
max-width: 360rpx;
.li{
float: left;
padding: 0 20rpx;
line-height: 50rpx;
background: #000000;
border-radius: 50rpx;
font-weight: 500;
font-size: 24rpx;
text-align: center;
color: #FFFFFF;
margin-top: 10rpx;
margin-right: 10rpx;
}
}
.txt{
color: #a3a3a3;
&-on{
color: #222222;
}
}
image{
width: 30rpx;
height: 30rpx;
display: block;
position: relative;
top: 5rpx;
}
input{
flex: 1;
text-align: right;
}
}
}
}
}
&-hd{
width: 100%;
background: #FFFFFF;
border-radius: 20rpx;
padding: 25rpx 30rpx 30rpx;
box-sizing: border-box;
margin-top: 20rpx;
overflow: hidden;
.title{
font-weight: 500;
font-size: 30rpx;
color: #222222;
text{
float: right;
font-weight: 500;
font-size: 24rpx;
color: #999999;
}
}
.content{
width: 110%;
.items{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
float: left;
position: relative;
margin-top: 20rpx;
margin-right: 20rpx;
.pic{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.del{
width: 40rpx;
height: 40rpx;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
}
.upload{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
float: left;
position: relative;
margin-top: 20rpx;
background: #F3F4F5;
display: flex;
align-items: center;
justify-content: center;
image{
width: 45rpx;
height: 45rpx;
}
}
}
.qianming{
margin-top: 20rpx;
width: 100%;
height: 80rpx;
border-radius: 20rpx;
border: 1px solid #EAEAEA;
display: flex;
align-items: center;
justify-content: space-between;
padding: 25rpx 20rpx;
box-sizing: border-box;
font-size: 24rpx;
color: #999999;
image{
width: 25rpx;
height: 25rpx;
vertical-align: middle;
}
}
.xuanyan{
margin-top: 20rpx;
width: 100%;
height: 120rpx;
border-radius: 20rpx;
border: 1px solid #EAEAEA;
display: flex;
align-items: flex-start;
padding: 25rpx;
box-sizing: border-box;
.icon{
width: 24rpx;
height: 24rpx;
margin-right: 25rpx;
display: block;
margin-top: 5rpx;
}
textarea{
display: block;
flex: 1;
font-size: 24rpx;
color: #222222;
height: 100%;
}
}
}
&-user{
width: 100%;
background: #FFFFFF;
border-radius: 20rpx;
padding: 25rpx 30rpx 30rpx;
box-sizing: border-box;
margin-top: 20rpx;
.tips{
width: 100%;
background: #F3F4F5;
border-radius: 20rpx;
padding: 25rpx;
box-sizing: border-box;
font-weight: 500;
font-size: 22rpx;
color: #999999;
line-height: 36rpx;
margin-top: 30rpx;
}
.user{
width: 100%;
height: 160rpx;
text-align: center;
position: relative;
.pic{
width: 160rpx;
height: 160rpx;
position: relative;
margin: 0 auto;
.avatar{
width: 160rpx;
height: 160rpx;
border-radius: 50%;
}
.xiangji{
width: 85rpx;
height: 85rpx;
position: absolute;
right: 0;
bottom: -10rpx;
z-index: 2;
}
}
}
}
}
</style>