邓平艺
5 years ago
16 changed files with 994 additions and 56 deletions
-
37pages.json
-
12pages/find/find.vue
-
9pages/index/index.vue
-
48pages/messageCenter/index.vue
-
56pages/my/contact.vue
-
2pages/my/exclusiveMatch.vue
-
28pages/my/index.vue
-
11pages/my/likeMe.vue
-
9pages/my/memberDetails.vue
-
11pages/my/seeMe.vue
-
2pages/register/basicInfo.vue
-
385pages/register/chooseMate.vue
-
4pages/register/perfectInfo.vue
-
409pages/register/workFamily.vue
-
13pages/userList/filter.json
-
14pages/userList/userList.vue
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<view> |
|||
<lf-userList></lf-userList> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style scoped="scoped"> |
|||
</style> |
|||
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<view> |
|||
<lf-userList></lf-userList> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style scoped="scoped"> |
|||
</style> |
|||
@ -0,0 +1,385 @@ |
|||
<template> |
|||
<view class="lf-p-30"> |
|||
<view class="up-the-wall"> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>婚史要求</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>最低身高</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>最低学历要求</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<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-333"> |
|||
请选择 |
|||
</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> |
|||
<button class="btn" hover-class="lf-opacity">最后一步</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
marriage: ['已婚', '未婚'], |
|||
marriage_index: null, |
|||
birth_date: '', |
|||
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: [] |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
getValue(current, event){ |
|||
this[current +'_index'] = event.detail.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 scoped lang="scss"> |
|||
.perfance-area { |
|||
background-color: #F5F5F5; |
|||
width: 560rpx; |
|||
border-radius: 10rpx; |
|||
padding: 30rpx; |
|||
} |
|||
.up-the-wall { |
|||
width: 100%; |
|||
height: max-content; |
|||
padding: 21rpx 32rpx 21rpx; |
|||
background-color: white; |
|||
border-radius: 10rpx; |
|||
} |
|||
/deep/.input-placeholder { |
|||
/* placeholder颜色 */ |
|||
color: #777777; |
|||
/* placeholder字体大小 */ |
|||
font-size: 28rpx; |
|||
} |
|||
.border-register { |
|||
border-bottom: 1px solid #f5f5f5; |
|||
} |
|||
.btn{ |
|||
width: 100%; |
|||
height: 90rpx; |
|||
line-height: 90rpx; |
|||
margin-top: 20rpx; |
|||
padding-bottom: 10rpx; |
|||
background: #E21196; |
|||
border-radius: 46rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.tag-content { |
|||
width: 600rpx; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.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-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; |
|||
} |
|||
|
|||
.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> |
|||
@ -0,0 +1,409 @@ |
|||
<template> |
|||
<view class="lf-p-30"> |
|||
<view class="up-the-wall"> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>单位性质</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>所属行业</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>户籍地</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>居住情况</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>住房情况</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>购房情况</view> |
|||
<view class="lf-font-28 lf-color-333"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text>{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> |
|||
<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-333"> |
|||
请选择 |
|||
</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> |
|||
<button class="btn" hover-class="lf-opacity" @click="$url('/pages/register/chooseMate')">不错,下一步</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
marriage: ['已婚', '未婚'], |
|||
marriage_index: null, |
|||
birth_date: '', |
|||
contentArea: '', |
|||
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: [] |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
getValue(current, event){ |
|||
this[current +'_index'] = event.detail.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 scoped lang="scss"> |
|||
.perfance-area { |
|||
background-color: #F5F5F5; |
|||
width: 560rpx; |
|||
border-radius: 10rpx; |
|||
padding: 30rpx; |
|||
} |
|||
.up-the-wall { |
|||
width: 100%; |
|||
height: max-content; |
|||
padding: 21rpx 32rpx 21rpx; |
|||
background-color: white; |
|||
border-radius: 10rpx; |
|||
} |
|||
/deep/.input-placeholder { |
|||
/* placeholder颜色 */ |
|||
color: #777777; |
|||
/* placeholder字体大小 */ |
|||
font-size: 28rpx; |
|||
} |
|||
.border-register { |
|||
border-bottom: 1px solid #f5f5f5; |
|||
} |
|||
.btn{ |
|||
width: 100%; |
|||
height: 90rpx; |
|||
line-height: 90rpx; |
|||
margin-top: 20rpx; |
|||
padding-bottom: 10rpx; |
|||
background: #E21196; |
|||
border-radius: 46rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.tag-content { |
|||
width: 600rpx; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.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-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; |
|||
} |
|||
|
|||
.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