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.
741 lines
20 KiB
741 lines
20 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="toReg()">保存</view>
|
|
</view>
|
|
</u-navbar>
|
|
</view>
|
|
<view class="edit-user">
|
|
<view class="user">
|
|
<view class="pic" @click="toNext(1)">
|
|
<image class="avatar" v-if="userInfo.faceImage" :src="userInfo.faceImage"></image>
|
|
<image class="avatar" v-else :src="baseUrl+userInfo.img"></image>
|
|
<image class="xiangji" src="@/static/xiangji.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="tips">
|
|
尊敬的用户，个人资料内容必须遵守相关法规和平台规则，上传过于暴露的照片、违规昵称宣言将会被封禁。您的头像会用于进行实名认证图片比对，若比对不通过，则修改失败。
|
|
</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">
|
|
<input type="text" v-model="userInfo.nickname" placeholder="请输入" />
|
|
<image src="@/static/icon-arrow.png"></image></view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="a">出生日期</view>
|
|
<view class="b">
|
|
<picker 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="userInfo.height" @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="userInfo.weight" @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="userInfo.annualIncome" @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="userInfo.xueli" @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="请输入" /><image src="@/static/icon-arrow.png"></image></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="userInfo.constellation" @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="userInfo.emotion" @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" @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="baseUrl+a"></image>
|
|
</view>
|
|
<view class="upload" @click="toNext(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: [],
|
|
cityType: 1,
|
|
defaultRegion: [],
|
|
uploadType: 1
|
|
};
|
|
},
|
|
computed: {
|
|
startDate() {
|
|
return this.getDate('start');
|
|
},
|
|
endDate() {
|
|
return this.getDate('end');
|
|
}
|
|
},
|
|
onReady() {
|
|
const that = this;
|
|
that.baseUrl = that.$baseUrl;
|
|
for(let i = 150;i<=210;i++){
|
|
that.pickerList1.push(i+"cm")
|
|
}
|
|
for(let i = 40;i<=120;i++){
|
|
that.pickerList2.push(i+"kg")
|
|
}
|
|
that.getUserInfo();
|
|
that.getDictDataByType();
|
|
uni.$on("yuyin",res=>{
|
|
|
|
})
|
|
// 监听从裁剪页发布的事件，获得裁剪结果
|
|
uni.$on('uAvatarCropper', path => {
|
|
if(that.uploadType == 2){
|
|
// 可以在此上传到服务端
|
|
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: "上传成功"
|
|
})
|
|
that.userInfo.xiangce.push(fileName);
|
|
that.$forceUpdate();
|
|
}else{
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: "上传失败"
|
|
})
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: "上传失败"
|
|
})
|
|
}
|
|
|
|
}
|
|
});
|
|
}else{
|
|
// 监听从裁剪页发布的事件，获得裁剪结果
|
|
uni.$on('uAvatarCropper', path => {
|
|
const that = this;
|
|
// 可以在此上传到服务端
|
|
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){
|
|
uni.showToast({
|
|
title: "上传成功"
|
|
})
|
|
that.toReg(data)
|
|
}else{
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: "上传失败"
|
|
})
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: "上传失败"
|
|
})
|
|
}
|
|
|
|
}
|
|
});
|
|
})
|
|
}
|
|
|
|
})
|
|
},
|
|
methods: {
|
|
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)
|
|
}else{
|
|
uni.showToast({
|
|
title: mgs,
|
|
position: "bottom",
|
|
icon: "none",
|
|
})
|
|
}
|
|
},
|
|
//字典查询
|
|
async getDictDataByType() {
|
|
const res1 = await this.$api.getDictDataByType({dictType: 'salary_type'});
|
|
const res2 = await this.$api.getDictDataByType({dictType: 'education_type'});
|
|
const res3 = await this.$api.getDictDataByType({dictType: 'constellation_type'});
|
|
const res5 = await this.$api.getDictDataByType({dictType: this.userInfo.sex == 1?'sex_type_2':'sex_type_1'});
|
|
const res4 = await this.$api.getDictDataByType({dictType: 'marriage_type'});
|
|
const res6 = await this.$api.getDictDataByType({dictType: 'live_type'});
|
|
this.pickerList3 = res1.data;
|
|
this.pickerList4 = res2.data;
|
|
this.pickerList5 = res3.data;
|
|
this.pickerList6 = res4.data;
|
|
let arr = res5.data;
|
|
if(arr && arr.length > 0){
|
|
arr.map(a=>{
|
|
a.isSelect = false
|
|
})
|
|
}
|
|
|
|
this.pickerList7 = arr;
|
|
this.pickerList8 = res6.data;
|
|
},
|
|
tabItem(index){
|
|
this.pickerList7[index].isSelect = !this.pickerList7[index].isSelect;
|
|
},
|
|
toClick(){
|
|
this.show = false
|
|
let arr = [];
|
|
if(this.pickerList7 && this.pickerList7.length > 0){
|
|
this.pickerList7.map(a=>{
|
|
if(a.isSelect){
|
|
arr.push(a.dictLabel)
|
|
}
|
|
})
|
|
}
|
|
this.userInfo.sexFlag = arr.length>=1?arr:""
|
|
},
|
|
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
|
|
},
|
|
pickerDate5(e){
|
|
this.userInfo.xueli = this.pickerList4[e.detail.value].dictLabel
|
|
},
|
|
pickerDate6(e){
|
|
this.userInfo.constellation = this.pickerList5[e.detail.value].dictLabel
|
|
},
|
|
pickerDate7(e){
|
|
this.userInfo.emotion = this.pickerList6[e.detail.value].dictLabel
|
|
},
|
|
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-cropper',
|
|
// 内部已设置以下默认参数值，可不传这些参数
|
|
params: {
|
|
// 输出图片宽度，高等于宽，单位px
|
|
destWidth: 700,
|
|
// 裁剪框宽度，高等于宽，单位px
|
|
rectWidth: 300,
|
|
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
|
fileType: 'jpg',
|
|
}
|
|
})
|
|
},
|
|
//去登录
|
|
async toReg(faceImage) {
|
|
const {code, data, msg} = await this.$api.detectLivingFace({
|
|
userId: uni.getStorageSync("userInfo").id,
|
|
faceImage
|
|
})
|
|
if(code == 200){
|
|
this.userInfo.faceImage = faceImage
|
|
this.$forceUpdate();
|
|
}else{
|
|
uni.showToast({
|
|
icon: "none",
|
|
position: "bottom",
|
|
title: msg
|
|
})
|
|
}
|
|
|
|
},
|
|
toPage() {
|
|
uni.setStorageSync("yuyinInfo",{
|
|
voice: this.userInfo.voice,
|
|
voiceTime: Math.floor(this.userInfo.voiceTime/60)+":"+(this.userInfo.voiceTime-Math.floor(this.userInfo.voiceTime/60)*60),
|
|
})
|
|
uni.navigateTo({
|
|
url: "/pages/users/yuyin/index"
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</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>
|
|
|