邓平艺
5 years ago
9 changed files with 727 additions and 11 deletions
-
24pages.json
-
166pages/my/contact.vue
-
4pages/my/editInfo.vue
-
10pages/my/index.vue
-
140pages/my/matePerfance.vue
-
2pages/my/memberDetails.vue
-
30pages/my/qzone.vue
-
6pages/my/setting.vue
-
356pages/my/workEconomy.vue
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<view> |
|||
<view class="cu-chat"> |
|||
<view class="cu-info round lf-m-t-30">此小程序是一个半开放的本地陌生人交友相亲平台，请注意文明相亲交友，不违公序良俗!</view> |
|||
<view class="cu-info round">请谨慎沟通，若收到借款，投资，索要礼物等行为，请马上<text style="color: red;">投诉举报</text>，谨防诈骗，平台求证后会做永久封号处理。</view> |
|||
<view class="cu-item lf-m-t-40"> |
|||
<view class="cu-avatar radius"> |
|||
<image class="lf-w-100 lf-h-100" src="../../static/logo.png" mode="aspectFill" ></image> |
|||
</view> |
|||
<view class="main"> |
|||
<view class="content shadow"> |
|||
<view class="lf-font-32 lf-color-222 lf-p-b-20 lf-w-100 lf-row-center" style="border-bottom: 1rpx solid #F5F5F5;">需要帮你联系吗?</view> |
|||
<view class="lf-m-t-30 lf-p-b-30" style="border-bottom: 1rpx solid #F5F5F5;"> |
|||
<view class="lf-font-28">温馨提示</view> |
|||
<view class="lf-font-28">申请对方联系方式将消耗一条红线</view> |
|||
</view> |
|||
|
|||
<view class="lf-row-round lf-w-100 lf-p-t-20"> |
|||
<view class="lf-font-28" style="color: #E21196;">是的</view> |
|||
<view class="lf-font-28">不了</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="date "> 13:23</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
padding-bottom: 100upx; |
|||
background-color: #F5F5F5; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.cu-chat { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.cu-chat .cu-item { |
|||
display: flex; |
|||
padding: 30upx 30upx 70upx; |
|||
position: relative; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.cu-avatar { |
|||
width: 80upx; |
|||
height: 80upx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.main { |
|||
max-width: calc(100% - 200rpx); |
|||
margin: 0 40upx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.cu-chat .cu-item>image { |
|||
height: 320upx; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.main .content { |
|||
padding: 20upx; |
|||
border-radius: 6upx; |
|||
display: inline-flex; |
|||
width: 600rpx; |
|||
align-items: center; |
|||
font-size: 30upx; |
|||
position: relative; |
|||
min-height: 80upx; |
|||
line-height: 40upx; |
|||
text-align: left; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.main .content:not([class*="bg-"]) { |
|||
background-color: #ffffff; |
|||
color: #333333; |
|||
} |
|||
|
|||
.cu-chat .cu-item .date { |
|||
position: absolute; |
|||
font-size: 24upx; |
|||
color: #8799a3; |
|||
width: calc(100% - 320upx); |
|||
bottom: 20upx; |
|||
left: 160upx; |
|||
} |
|||
|
|||
.cu-chat .cu-item .action { |
|||
padding: 0 30upx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.main .content::after { |
|||
content: ""; |
|||
top: 27upx; |
|||
transform: rotate(45deg); |
|||
position: absolute; |
|||
z-index: 100; |
|||
display: inline-block; |
|||
overflow: hidden; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
left: -12upx; |
|||
right: initial; |
|||
background-color: inherit; |
|||
} |
|||
|
|||
.cu-chat .cu-item.self>.main .content::after { |
|||
left: auto; |
|||
right: -12upx; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.main .content::before { |
|||
content: ""; |
|||
top: 30upx; |
|||
transform: rotate(45deg); |
|||
position: absolute; |
|||
z-index: -1; |
|||
display: inline-block; |
|||
overflow: hidden; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
left: -12upx; |
|||
right: initial; |
|||
background-color: inherit; |
|||
filter: blur(5upx); |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.main .content:not([class*="bg-"])::before { |
|||
background-color: #333333; |
|||
opacity: 0.1; |
|||
} |
|||
|
|||
.cu-chat .cu-item.self>.main .content::before { |
|||
left: auto; |
|||
right: -12upx; |
|||
} |
|||
|
|||
.cu-chat .cu-item.self { |
|||
justify-content: flex-end; |
|||
text-align: right; |
|||
} |
|||
|
|||
.cu-chat .cu-info { |
|||
display: inline-block; |
|||
margin: 20upx auto; |
|||
font-size: 24upx; |
|||
padding: 8upx 12upx; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
border-radius: 6upx; |
|||
color: #ffffff; |
|||
max-width: 690rpx; |
|||
line-height: 1.4; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,140 @@ |
|||
<template> |
|||
<view> |
|||
<view class="work-tag"> |
|||
<view class="lf-row-between lf-m-b-30"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>婚史要求</view> |
|||
|
|||
<picker mode='selector' @change="getValue('index', $event)" :value="index" :range="array" range-key="name"> |
|||
<view> |
|||
{{array[index].name}} |
|||
<u-icon name="arrow-right lf-color-777"></u-icon> |
|||
</view> |
|||
</picker> |
|||
|
|||
</view> |
|||
|
|||
<view class="lf-row-between lf-m-b-30"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>最低身高</view> |
|||
|
|||
<picker mode='selector' @change="getValue('index', $event)" :value="index" :range="array" range-key="name"> |
|||
<view> |
|||
{{array[index].name}} |
|||
<u-icon name="arrow-right lf-color-777"></u-icon> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<view class="lf-flex-column lf-m-b-30"> |
|||
<view class="lf-font-28 lf-color-333 lf-m-b-20 lf-row-between"> |
|||
<view><text class="lf-font-28" style="color: #E21196;">*</text>其他要求</view> |
|||
<view class="lf-m-r-10">{{ contentArea.length }}/200</view> |
|||
</view> |
|||
<view> |
|||
<textarea class="perfance-area" maxlength="200" v-model="contentArea" placeholder="请输入" /> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view class="work-btn"> |
|||
保存 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
array: [ |
|||
{name: '6万到8万'}, |
|||
{name: '十万到十二万'}, |
|||
], |
|||
index: 0, |
|||
selectname: '', |
|||
arra1y: [ |
|||
{name: '父亲'}, |
|||
{name: '母亲'}, |
|||
], |
|||
index1: 1, |
|||
contentArea: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
getValue(current, e) { |
|||
// this[name] = e.target.value |
|||
console.log(e) |
|||
this[current] = e.target.value |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.perfance-area { |
|||
background-color: #F5F5F5; |
|||
width: 560rpx; |
|||
border-radius: 10rpx; |
|||
padding: 30rpx; |
|||
} |
|||
.work-btn { |
|||
width: 626rpx; |
|||
height: 90rpx; |
|||
background: #E21196; |
|||
border-radius: 45rpx; |
|||
color: white; |
|||
font-size: 32rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
text-align: center; |
|||
align-items: center; |
|||
margin-top: 40rpx; |
|||
} |
|||
.tag-content { |
|||
width: 600rpx; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
} |
|||
|
|||
.personal-tag { |
|||
width: max-content; |
|||
padding: 8rpx 25rpx; |
|||
height: 55rpx; |
|||
border-radius: 28rpx; |
|||
border: 1rpx solid #E21196; |
|||
color: #E21196; |
|||
font-size: 28rpx; |
|||
margin-right: 15rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
&:nth-child(4n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 5) { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.work-tag { |
|||
height: 100%!important; |
|||
} |
|||
.work-tag { |
|||
width: 686rpx; |
|||
height: 215rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
margin: 30rpx auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
/* justify-content: space-around; */ |
|||
padding: 30rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<view> |
|||
<view class="lf-row-between lf-m-t-40"> |
|||
<view class="lf-font-32 lf-color-222 lf-p-l-30 lf-text-center">7月</view> |
|||
<view class="lf-row-between lf-p-r-30"> |
|||
<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image> |
|||
<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image> |
|||
<image src="../../static/logo.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-m-t-40"> |
|||
<view class="lf-font-32 lf-color-222 lf-p-l-30 lf-text-center">8月</view> |
|||
<view class="lf-row-between lf-p-r-30"> |
|||
<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image> |
|||
<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image> |
|||
<image src="../../static/logo.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style scoped="scoped"> |
|||
.qzone-img { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,356 @@ |
|||
<template> |
|||
<view> |
|||
<view class="work-tag"> |
|||
<view class="lf-row-between lf-m-b-30"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>年薪</view> |
|||
|
|||
<picker mode='selector' @change="getValue('index', $event)" :value="index" :range="array" range-key="name"> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
{{array[index].name}} |
|||
<u-icon name="arrow-right lf-color-777"></u-icon> |
|||
</view> |
|||
</picker> |
|||
|
|||
</view> |
|||
|
|||
<view class="lf-row-between lf-m-b-30"> |
|||
<view class="lf-font-28 lf-color-333" style="margin-left: 14rpx;">职务</view> |
|||
|
|||
<view> |
|||
<input type="text" placeholder="请输入" style="text-align: right;" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lf-row-between lf-m-b-30"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>家庭成员</view> |
|||
<view @tap="showModal" data-target="ChooseModal" class="lf-font-28 lf-color-777"> |
|||
请选择 |
|||
</view> |
|||
</view> |
|||
<view class="tag-content"> |
|||
<view class="personal-tag" :class="item.hot?'personal-special1':'personal-active1'" v-for="item of chooseList">{{item.name}}</view> |
|||
</view> |
|||
|
|||
<view class="cu-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal"> |
|||
<view class="cu-dialog"> |
|||
<view class="lf-p-b-30 lf-font-32" style="color: #E21196;"> |
|||
请选择你的家庭成员 |
|||
</view> |
|||
|
|||
<view class="tag-content1"> |
|||
<view class="personal-tag1" :class="item.checked?'personal-active':''" :data-value="item.value" v-for="(item,index) of checkbox" @tap.stop="ChooseCheckbox">{{item.name}}</view> |
|||
</view> |
|||
|
|||
<view class="lf-row-center"> |
|||
<view class="work-btn1 work-btn" @click.stop="makeSure()"> |
|||
确认选择 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="work-btn"> |
|||
保存 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
array: [ |
|||
{name: '6万到8万'}, |
|||
{name: '十万到十二万'}, |
|||
], |
|||
index: 0, |
|||
selectname: '', |
|||
|
|||
modalName: null, |
|||
checkbox: [{ |
|||
value: 0, |
|||
name: '父亲', |
|||
checked: true, |
|||
hot: false, |
|||
}, { |
|||
value: 1, |
|||
name: '母亲', |
|||
checked: true, |
|||
hot: false, |
|||
}, { |
|||
value: 2, |
|||
name: '哥哥', |
|||
checked: false, |
|||
hot: false, |
|||
}, { |
|||
value: 3, |
|||
name: '姐姐', |
|||
checked: false, |
|||
hot: false, |
|||
}, { |
|||
value: 4, |
|||
name: '儿子', |
|||
checked: false, |
|||
hot: false, |
|||
}, { |
|||
value: 5, |
|||
name: '儿子(离异归对方)', |
|||
checked: false, |
|||
hot: true, |
|||
}], |
|||
chooseList: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
getValue(current, e) { |
|||
this[current] = e.target.value |
|||
}, |
|||
showModal(e) { |
|||
this.modalName = e.currentTarget.dataset.target |
|||
}, |
|||
hideModal(e) { |
|||
this.modalName = null |
|||
}, |
|||
makeSure(e) { |
|||
this.chooseList = []; |
|||
this.checkbox.forEach(item => { |
|||
if(item.checked == true) { |
|||
this.chooseList.push(item) |
|||
} |
|||
}); |
|||
this.modalName = null |
|||
}, |
|||
ChooseCheckbox(e) { |
|||
let items = this.checkbox; |
|||
let values = e.currentTarget.dataset.value; |
|||
for (let i = 0, lenI = items.length; i < lenI; ++i) { |
|||
if (items[i].value == values) { |
|||
items[i].checked = !items[i].checked; |
|||
break |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
/deep/.input-placeholder { |
|||
/* placeholder颜色 */ |
|||
color: #777777; |
|||
/* placeholder字体大小 */ |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.work-btn1 { |
|||
border-radius: 10rpx!important; |
|||
} |
|||
.work-btn { |
|||
width: 626rpx; |
|||
height: 90rpx; |
|||
background: #E21196; |
|||
border-radius: 45rpx; |
|||
color: white; |
|||
font-size: 32rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
text-align: center; |
|||
align-items: center; |
|||
margin-top: 60rpx; |
|||
} |
|||
.tag-content { |
|||
width: 600rpx; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
} |
|||
|
|||
.personal-tag { |
|||
margin: 10rpx 4rpx; |
|||
width: max-content; |
|||
padding: 2rpx 20rpx; |
|||
height: 55rpx; |
|||
border-radius: 28rpx; |
|||
border: 1rpx solid #E21196; |
|||
color: #E21196; |
|||
font-size: 28rpx; |
|||
margin-right: 15rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
&:nth-child(5n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 6) { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.tag-content1 { |
|||
width: 600rpx; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
} |
|||
|
|||
.personal-tag1 { |
|||
width: max-content; |
|||
padding: 8rpx 25rpx; |
|||
height: 55rpx; |
|||
border-radius: 10rpx; |
|||
border: 1rpx solid #ccc; |
|||
color: #969090; |
|||
font-size: 28rpx; |
|||
margin-right: 15rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
&:nth-child(5n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 6) { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.personal-active { |
|||
border: 1rpx solid #E21196!important; |
|||
color: #E21196!important; |
|||
} |
|||
|
|||
.personal-special { |
|||
border: 1rpx solid orange!important; |
|||
color: orange!important; |
|||
} |
|||
|
|||
.personal-active1 { |
|||
border: none!important; |
|||
background-color: #E21196!important; |
|||
color: #fff!important; |
|||
} |
|||
|
|||
.personal-special1 { |
|||
border: none!important; |
|||
background-color: orange!important; |
|||
color: #fff!important; |
|||
} |
|||
|
|||
|
|||
.work-tag { |
|||
height: 100%!important; |
|||
} |
|||
.work-tag { |
|||
width: 686rpx; |
|||
height: 215rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
margin: 30rpx auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
/* justify-content: space-around; */ |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
//窗口 |
|||
.cu-modal { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1110; |
|||
opacity: 0; |
|||
outline: 0; |
|||
text-align: center; |
|||
-ms-transform: scale(1.185); |
|||
transform: scale(1.185); |
|||
backface-visibility: hidden; |
|||
perspective: 2000upx; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
transition: all 0.3s ease-in-out 0s; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.cu-modal::before { |
|||
content: "\200B"; |
|||
display: inline-block; |
|||
height: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.cu-modal.show { |
|||
opacity: 1; |
|||
transition-duration: 0.3s; |
|||
-ms-transform: scale(1); |
|||
transform: scale(1); |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.cu-dialog { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
width: 680upx; |
|||
max-width: 100%; |
|||
background-color: #f8f8f8; |
|||
border-radius: 10upx; |
|||
overflow: hidden; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.cu-modal.bottom-modal::before { |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
.cu-modal.bottom-modal .cu-dialog { |
|||
width: 100%; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.cu-modal.bottom-modal { |
|||
margin-bottom: -1000upx; |
|||
} |
|||
|
|||
.cu-modal.bottom-modal.show { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.cu-modal.drawer-modal { |
|||
transform: scale(1); |
|||
display: flex; |
|||
} |
|||
|
|||
.cu-modal.drawer-modal .cu-dialog { |
|||
height: 100%; |
|||
min-width: 200upx; |
|||
border-radius: 0; |
|||
margin: initial; |
|||
transition-duration: 0.3s; |
|||
} |
|||
|
|||
.cu-modal.drawer-modal.justify-start .cu-dialog { |
|||
transform: translateX(-100%); |
|||
} |
|||
|
|||
.cu-modal.drawer-modal.justify-end .cu-dialog { |
|||
transform: translateX(100%); |
|||
} |
|||
|
|||
.cu-modal.drawer-modal.show .cu-dialog { |
|||
transform: translateX(0%); |
|||
} |
|||
.cu-modal .cu-dialog>.cu-bar:first-child .action{ |
|||
min-width: 100rpx; |
|||
margin-right: 0; |
|||
min-height: 100rpx; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue