Commit 803d8c98 authored by Mac's avatar Mac

1

parent 08003008
<template>
</template>
<script>
</script>
<style>
</style>
<style>
.persondetails{
width: 100%;
height: 100vh;
}
.persondetails .pd-box{
background:linear-gradient( #9EE3E1,5%, #FFF);
height: 100%;
}
.persondetails .titlenav {
width: 100%;
text-align: center;
font-size: 16px;
color: #FFFFFF;
}
.persondetails .headStatus {
overflow: hidden;
position: relative;
width: 140vw;
padding-right: 40vw;
padding-bottom: 10px;
position: fixed;
left: 0;
right: 0;
top: 0;
display: flex;
background: #FFFFFF;
align-items: center;
justify-content: space-between;
}
.persondetails .headStatus .arrow {
height: 24px;
margin: 5px 10px;
width: 24px;
}
.persondetails .sharebox_top_nav {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 10px;
}
.persondetails .headStatus .title {
font-size: 16px;
color: #000;
flex: 1;
width: 1px;
margin-left: 10px;
line-height: 34px;
}
.persondetails .pd-box-center{
padding: 0 15px;
margin-bottom: 30px;
}
.persondetails .pd-portrait{
display: flex;
flex-direction: row;
margin-top: 15px;
}
.persondetails .pd-portrait-l{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
position: relative;
}
.persondetails .pd-portrait-c{
width: calc(100vw - 30px - 70px - 15px);
height: 66px;
margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.persondetails .pd-portrait-ct{
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
.persondetails .pd-p-text{
width: 100%;
font-size: 20px;
color: #000000;
overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;
}
.persondetails .guanzhu{
width: 70px;
height: 25px;
border-radius: 12px;
font-size: 13px;
color: #FFF;
text-align: center;
line-height: 25px;
}
.persondetails .pd-title{
margin-top: 20px;
font-size: 15px;
color: #111111;
}
.persondetails .pd-bubble{
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.pd-bubble .bubble{
height: 27px;
border-radius: 13px;
line-height: 27px;
padding: 0 16px;
margin: 15px 15px 0 0;
background: #EDEDED;
}
.pd-abouthim{
width: 100%;
border-radius: 13px;
font-size: 12px;
color: #000000;
padding: 15px;
margin-top: 15px;
background: #EDEDED;
}
.persondetails .zhezao{
width: 100%;
height: 100%;
border-radius: 15px;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: #FFFFFC;
font-family: aa;
}
.persondetails .edit{
width: 100%;
height: 44px;
border-radius: 22px;
margin: 45px 0 20px;
font-size: 16px;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<template>
<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
<view class="persondetails" >
<view class="headStatus" v-if="scrollTop > 50" :style="[headStyle,
{
zIndex: scrollTop < 10 ? 'unset' : 2,
opacity: scrollTop < 10 ? '100' : scrollTop,
},
]">
<view class="arrow" @click="redirectPrev">
<u-icon name="arrow-left" size="48" color="#000"></u-icon>
</view>
<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
<view class="arrow"></view>
</view>
<view class="pd-box" >
<view class="sharebox_top_nav" :style="{paddingTop:nav}">
<view class="arrow" @click="redirectPrev">
<u-icon name="arrow-left" size="48" color="#111"></u-icon>
</view>
<view class="title" style="color: #111111;font-size: 16px;">{{pageTitle}}</view>
<view style="width: 24px;height: 24px;"></view>
</view>
<view class="pd-box-center">
<view class="pd-portrait">
<view class="pd-portrait-l">
<u-avatar src="https://thirdwx.qlogo.cn/mmopen/vi_32/qttlbBnRrYLIT2jCpebJp8Ku6iaiaVpf49Fs6TPKmLP4bwsQTVNLpibA3gsJDaGohchRNYmVM9LyvCC4UjFqxyDRA/132" size="140" ></u-avatar>
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan.png" style="width: 36rpx;height: 36rpx;position: absolute;right: 0;bottom: 0;"></image>
<!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv.png" style="width: 36rpx;height: 36rpx;position: absolute;right: 0;bottom: 0;"></image> -->
</view>
<view class="pd-portrait-c">
<view class="pd-portrait-ct">
<view class="pd-p-text" >Alice Camber</view>
</view>
<view class="pd-portrait-ct">
<view style="display: flex;flex-direction: row;align-items: center;">
<view style="width: 40px;height: 15px;font-size: 10px;color: #555555;border-radius: 7px;border: 1px solid #999999;display: flex;align-items: center;justify-content: center;">
未认证
</view>
</view>
<view class="guanzhu" :style="{background:mainColor}">
已关注
</view>
</view>
</view>
</view>
<!-- 基础资料 -->
<view class="pd-title">基础资料</view>
<view class="pd-bubble">
<view class="bubble"></view>
<view class="bubble">29岁</view>
<view class="bubble">天蝎座</view>
<view class="bubble">1.62米</view>
<view class="bubble">属羊</view>
<view class="bubble">94斤</view>
<view class="bubble">未婚</view>
<view class="bubble">年收入(税后):15万元</view>
</view>
<view class="pd-title">其他资料</view>
<view class="pd-bubble">
<view class="bubble">户口:成都市</view>
<view class="bubble">籍贯:成都市</view>
<view class="bubble">全款2套房</view>
<view class="bubble">德瑞拉大学(硕士)</view>
<view class="bubble">金融专业</view>
<view class="bubble">财务管理</view>
<view class="bubble">有车</view>
<view class="bubble">父亲:华西医生</view>
<view class="bubble">母亲:央企工程师</view>
</view>
<view class="pd-title">关于她(他)</view>
<view class="pd-abouthim">
<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
<rich-text :nodes="content"></rich-text>
</u-read-more>
</view>
<view class="pd-title">理想中的爱情</view>
<view class="pd-abouthim">
相互欣赏,相互珍惜,既是独立的个体,又可以彼此依靠,双方用心经营家庭,携手共渡漫长的人生之路
</view>
<view class="pd-title">相册</view>
<view class="pd-img" style="margin-top: 15px;" >
<view v-if="imgs.length==1" style="width: 100%;height: 690rpx;border-radius: 15px;" @click="previewImage(0,imgs)">
<image :src="imgs[0]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
</view>
<view v-if="imgs.length==2" style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
<view v-for='(x,y) in imgs' :key='y' style="width: calc(50vw - 20px);height: 335rpx;border-radius: 15px;" @click="previewImage(y,imgs)">
<image :src="x" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
</view>
</view>
<view v-if="imgs.length==3" style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
<view style="width: 448rpx;height: 448rpx;border-radius: 15px;" @click="previewImage(0,imgs)">
<image :src="imgs[0]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
</view>
<view style="margin-left: 20rpx;">
<view style="width: 220rpx;height: 214rpx;border-radius: 15px;" @click="previewImage(1,imgs)">
<image :src="imgs[1]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
</view>
<view style="width: 220rpx;height: 214rpx;border-radius: 15px;margin-top: 20rpx;" @click="previewImage(2,imgs)">
<image :src="imgs[2]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
</view>
</view>
</view>
<view v-if="imgs.length>3" style="display: flex;flex-direction: row;align-items: center;">
<view >
<view style="width: 448rpx;height: 448rpx;border-radius: 15px;" @click="previewImage(0,imgs)">
<image :src="imgs[0]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
</view>
<view style="width: 448rpx;height: 260rpx;border-radius: 15px;margin-top: 20rpx;" @click="previewImage(2,imgs)">
<image :src="imgs[2]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
</view>
</view>
<view style="margin-left: 20rpx;">
<view style="width: 220rpx;height: 260rpx;border-radius: 15px;position: relative;" @click="previewImage(1,imgs)">
<image :src="imgs[1]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
<view class="zhezao" v-if="imgs.length>4">+{{imgs.length}}</view>
</view>
<view style="width: 220rpx;height: 458rpx;border-radius: 15px;margin-top: 20rpx;" @click="previewImage(3,imgs)">
<image :src="imgs[3]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
<view class="edit" :style="{background:mainColor}">
编辑资料
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script>
export default{
data(){
return{
pageTitle: '个人详情',
headStyle: {},
scrollTop: 0,
nav:0,
mainColor: '',
secondary: '',
shadowStyle: {
backgroundImage: "none",
paddingTop: "0",
marginTop: "20rpx"
},
// imgs:['https://t7.baidu.com/it/u=2878377037,2986969897&fm=193&f=GIF'],
// imgs:['https://t7.baidu.com/it/u=3522949495,3570538969&fm=193&f=GIF','https://t7.baidu.com/it/u=2253011977,2934623845&fm=193&f=GIF'],
// imgs:['https://t7.baidu.com/it/u=3522949495,3570538969&fm=193&f=GIF','https://t7.baidu.com/it/u=2878377037,2986969897&fm=193&f=GIF','https://t7.baidu.com/it/u=2253011977,2934623845&fm=193&f=GIF'],
imgs:['https://t7.baidu.com/it/u=2010803885,3614601600&fm=193&f=GIF','https://t7.baidu.com/it/u=3522949495,3570538969&fm=193&f=GIF','https://t7.baidu.com/it/u=2878377037,2986969897&fm=193&f=GIF','https://t7.baidu.com/it/u=2253011977,2934623845&fm=193&f=GIF','https://t7.baidu.com/it/u=3522949495,3570538969&fm=193&f=GIF','https://t7.baidu.com/it/u=2878377037,2986969897&fm=193&f=GIF'],
content:'山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?',
}
},
created() {
this.nav = uni.getMenuButtonBoundingClientRect().top + 'px';
this.headStyle.background = `linear-gradient(#9EE3E1 5%, #f3f4f6)`;
this.headStyle.paddingTop = this.nav;
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
},
methods:{
scrollHandler(e) {
this.scrollTop = e.detail.scrollTop;
},
scrollTopHandler() {
this.scrollTop = 0;
},
redirectPrev() {
uni.navigateBack({
delta: 1,
});
},
//图片预览
previewImage(index, images) {
uni.previewImage({
urls: images,
current: index,
});
},
}
}
</script>
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
<template> <template>
<view class="release"> <view class="release">
<view class="release-box"> <view class="release-box">
<textarea placeholder="今天什么可以给大家分享呢?" style="width: 100%;height: 100px;" maxlength='-1' confirm-type='done' v-model="addMsg.Content"> <textarea placeholder="今天什么可以给大家分享呢?" style="width: 100%;height: 100px;" maxlength='-1' confirm-type='done' v-model="addMsg.Content">
</textarea> </textarea>
<text v-if='addMsg.FileType==1 ' style="font-size: 12px;color: #333333">上传图片<span style='color: ;#A9A9A9'>(图片无上限)</span> </text> <text v-if='addMsg.FileType==1 ' style="font-size: 12px;color: #333333">上传图片<span style='color: ;#A9A9A9'>(图片无上限)</span> </text>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment