|
|
@@ -0,0 +1,298 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar :border-bottom="false" :background="navbarBg" back-icon-color="#fff"></u-navbar>
|
|
|
+ <view class="personal">
|
|
|
+ <view class="personalHead">
|
|
|
+ <u-image width="100%" height="375px" src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp-xqjy/user2.jpg"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="personal-main">
|
|
|
+ <view class="personal-name">
|
|
|
+ <span>周群青</span>
|
|
|
+ <u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="personal-space">
|
|
|
+ <view class="personal-info">
|
|
|
+ <span>23岁 · 173cm · 75kg</span>
|
|
|
+ </view>
|
|
|
+ <view class="personal-address">
|
|
|
+ <u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
|
|
|
+ <span>荆州市</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="personal-att">
|
|
|
+ <view class="personal-att-text">
|
|
|
+ <h2>荆州市总工会</h2>
|
|
|
+ <view class="u-flex">
|
|
|
+ <p>实名认证用户</p>
|
|
|
+ <u-icon custom-prefix="custom-icon" name="check-line"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-image width="60px" height="60px" src="/static/img/personal-att.png"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="personal-item">
|
|
|
+ <view class="personal-tit">
|
|
|
+ <u-icon custom-prefix="custom-icon" name="account-box-line" color="#FF5E5E" size="20px"></u-icon>
|
|
|
+ <span>个人资料</span>
|
|
|
+ </view>
|
|
|
+ <view class="personal-con">
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>会员号</p>
|
|
|
+ <h4>N0.0001</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>学历</p>
|
|
|
+ <h4>大学本科</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>行业</p>
|
|
|
+ <h4>IT/互联网</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>职业</p>
|
|
|
+ <h4>软件工程师</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>月薪</p>
|
|
|
+ <h4>4500~6000</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>住房状况</p>
|
|
|
+ <h4>结婚时购房</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>婚姻状况</p>
|
|
|
+ <h4>未婚</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>子女状况</p>
|
|
|
+ <h4>无</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>出生地</p>
|
|
|
+ <h4>荆州市沙市区</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>现工作所在地</p>
|
|
|
+ <h4>荆州市沙市区</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-row">
|
|
|
+ <p>现工作所在地</p>
|
|
|
+ <view class="personal-label">
|
|
|
+ <span>摄影</span>
|
|
|
+ <span>烹饪</span>
|
|
|
+ <span>健身</span>
|
|
|
+ <span>打游戏</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="personal-item">
|
|
|
+ <view class="personal-tit">
|
|
|
+ <u-icon custom-prefix="custom-icon" name="file-list-3-line" color="#FF5E5E" size="20px"></u-icon>
|
|
|
+ <span>自我评价</span>
|
|
|
+ </view>
|
|
|
+ <view class="personal-con">
|
|
|
+ <view class="personal-text">
|
|
|
+ 憧憬“执子之手与子偕老的美好爱情”，对感情忠诚专一，有强烈的责任感，有担当也有一颗浪漫之心。热爱生活，一直相信美好的生活是靠勤奋的双手奋斗出来的，对生活的态度一直是不求飞黄腾达，但求衣食无忧，追求真实平淡。平日爱好书法、运动、电影。对父母孝顺，对家庭懂得家和万事兴。事业上不怕吃苦，兢兢业业，有上进心。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="personal-item">
|
|
|
+ <view class="personal-tit">
|
|
|
+ <u-icon custom-prefix="custom-icon" name="chat-heart-line" color="#FF5E5E" size="20px"></u-icon>
|
|
|
+ <span>择偶标准</span>
|
|
|
+ </view>
|
|
|
+ <view class="personal-con">
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>年龄范围</p>
|
|
|
+ <h4>25~30</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>月薪</p>
|
|
|
+ <h4>不限</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>学历</p>
|
|
|
+ <h4>不限</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-col">
|
|
|
+ <p>职业</p>
|
|
|
+ <h4>不限</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-row">
|
|
|
+ <p>现工作所在地</p>
|
|
|
+ <h4>荆州市沙市区北京路阿萨德阿斯</h4>
|
|
|
+ </view>
|
|
|
+ <view class="personal-row">
|
|
|
+ <p>其他要求</p>
|
|
|
+ <h4>阿萨德阿萨德阿斯</h4>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="personal-btn">
|
|
|
+ <u-button type="error" shape="circle" :custom-style="customStyle">
|
|
|
+ <span>编辑</span>
|
|
|
+ <u-icon custom-prefix="custom-icon" name="edit-2-line"></u-icon>
|
|
|
+ </u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ navbarBg: {
|
|
|
+ background: 'none'
|
|
|
+ },
|
|
|
+ customStyle: {
|
|
|
+ background: '#FF5E5E'
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .personal{
|
|
|
+ margin-top: -44px;
|
|
|
+ }
|
|
|
+ .personal-main{
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius:12px 12px 0 0;
|
|
|
+ margin-top: -12px;
|
|
|
+ padding: 15px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .personal-name{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personal-space{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 8px;
|
|
|
+ .personal-info{
|
|
|
+ span{color:#444953;}
|
|
|
+ }
|
|
|
+ .personal-address{
|
|
|
+ background-color: #F1F3F4;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color:#444953;
|
|
|
+ span{
|
|
|
+ margin-left: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personal-att{
|
|
|
+ background-color: #F1F3F4;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16px;
|
|
|
+ margin: 20px 0;
|
|
|
+ border-radius: 12px;
|
|
|
+ .personal-att-text{
|
|
|
+ h2{
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: normal;
|
|
|
+ color:#555;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .u-flex{
|
|
|
+ color:#27B148;
|
|
|
+ p{
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personal-item{
|
|
|
+ margin-top: 24px;
|
|
|
+ .personal-tit{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personal-con{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .personal-col{
|
|
|
+ width: 48%;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #F1F3F4 ;
|
|
|
+ padding: 12px 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ p{
|
|
|
+ color:#999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ h4{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personal-row{
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #F1F3F4 ;
|
|
|
+ padding: 12px 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ p{
|
|
|
+ color:#999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ h4{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .personal-label{
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ span{
|
|
|
+ margin-right: 8px;
|
|
|
+ background-color: #FFC1BC ;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personal-text{
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 16px;
|
|
|
+ background-color: #F1F3F4;
|
|
|
+ margin-top: 10px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .personal-btn{
|
|
|
+ padding: 15px;
|
|
|
+ span{
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
