Browse Source

[完善] 会员详情页UI

master
邓平艺 5 years ago
parent
commit
f19855ba9a
  1. 42
      pages/my/memberDetails.vue

42
pages/my/memberDetails.vue

@ -1,12 +1,17 @@
<template>
<view class="lf-w-100 lf-h-100">
<view class="content lf-bg-white lf-m-b-30" style="padding: 0rpx">
<view class="content lf-bg-white lf-m-b-30">
<swiper class="swiper">
<swiper-item>
<lf-image src="https://picsum.photos/200"></lf-image>
</swiper-item>
</swiper>
<view class="list lf-p-l-32 lf-p-r-32">
<lf-image class="avatar" src="@/static/logo.png"></lf-image>
<!-- <lf-image class="avatar" src="@/static/logo.png"></lf-image> -->
<view class="info">
<view class="lf-flex-1">
<text>编号83927</text>
<u-icon name="tags" class="lf-m-l-10"></u-icon>
<text class="lf-iconfont icon-nan lf-m-l-10" style="color: #1E77F4;"></text>
</view>
<view class="lf-flex-1 lf-m-t-16">24··180cm·本科·未婚</view>
<view class="lf-flex-1 lf-m-t-16">自有公司·金融/证券/保险·50万以上</view>
@ -15,6 +20,7 @@
<u-icon name="star-fill lf-font-40" style="color: #D1D1D1;"></u-icon>
</view>
</view>
<view class="sketch">大家好我是私人订制红娘-笑笑如果你不想在平台上面曝光需要我为你全程服务精准高效速配脱单的加我微信18399999999</view>
</view>
<view class="info-content">
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">信息资料</view>
@ -72,6 +78,8 @@
<button class="tabbar-btn">联系Ta</button>
</view>
</view>
<!-- 回到顶部 -->
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
</view>
</template>
@ -100,10 +108,12 @@
}
</script>
<style lang="scss">
<style>
page {
background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.tabbar-bottom {
width: 100%;
background-color: white;
@ -157,15 +167,21 @@
}
.content{
width: 100%;
height: max-content;
height: auto;
box-sizing: border-box;
padding-bottom: 30rpx;
.swiper{
width: 750rpx;
height: 750rpx;
}
.list{
padding: 30rpx 0;
padding-top: 30rpx;
display: flex;
width: 100%;
height: max-content;
display: flex;
align-items: center;
justify-content: space-between;
.avatar{
width: 150rpx;
height: 150rpx;
@ -174,15 +190,25 @@
background-color: #EEEEEE;
}
.info{
flex: auto;
min-height: 150rpx;
max-width: 522rpx;
width: 598rpx;
display: flex;
align-content: space-between;
flex-wrap: wrap;
flex-direction: column;
}
}
.sketch{
width: 686rpx;
height: 160rpx;
background: #F5F5F5;
border-radius: 10rpx 30rpx 10rpx 30rpx;
margin: 60rpx auto 0;
box-sizing: border-box;
padding: 30rpx;
font-size: 24rpx;
color: #333333;
}
}
.star {
width: 80rpx;

Loading…
Cancel
Save