提交
This commit is contained in:
A1300399510
202
src/components/edit/choosingIdentity.vue
Normal file
202
src/components/edit/choosingIdentity.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="pop-mask flexcenter">
|
||||
<div class="pop-box">
|
||||
<div v-if="popType == 'choice'">
|
||||
<img class="close-icon" src="@/assets/img/edit/close-icon.svg" />
|
||||
<div class="pop-header flexcenter">发布房源</div>
|
||||
<div class="please-choose">请选择：</div>
|
||||
<div class="choice-box flexflex flex1">
|
||||
<div v-for="(item, index) in identityList" :key="index">
|
||||
<div v-if="index != identityList.length - 1" class="choice-item" @click="choiceItem(item.key)">
|
||||
<div class="choice-name">{{ item.value }}</div>
|
||||
<div class="choice-explain">{{ item.desc }}</div>
|
||||
<div class="choice-arrows"></div>
|
||||
</div>
|
||||
<div v-else class="choice-long-item flexacenter" @click="choiceItem(item.key)">
|
||||
<div class="choice-long-left">
|
||||
<div class="choice-name">{{ item.value }}</div>
|
||||
<div class="choice-explain">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="choice-arrows"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GterFangChoosingIdentity',
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
choiceTypeState: true,
|
||||
popType: "choice", //
|
||||
identityList: [{
|
||||
desc: "出租自有物业",
|
||||
key: 3,
|
||||
value: "我是房东",
|
||||
}, {
|
||||
desc: "持有房产代理牌照",
|
||||
key: 1,
|
||||
value: "我是中介",
|
||||
}, {
|
||||
desc: "我已租房，需要招室友",
|
||||
key: 4,
|
||||
value: "有房招室友",
|
||||
}, {
|
||||
desc: "二房东、物业租赁公司等",
|
||||
key: 5,
|
||||
value: "其他",
|
||||
}, {
|
||||
desc: "发布找房源的需求",
|
||||
key: 6,
|
||||
value: "求房源",
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pop-mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.117647058823529);
|
||||
}
|
||||
.pop-box {
|
||||
// position: fixed;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
z-index: 1111;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16px;
|
||||
padding-top: 48px;
|
||||
background-color: #ffffff;
|
||||
width: 520px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
}
|
||||
|
||||
.pop-header {
|
||||
font-size: 24px;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.please-choose {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.choice-box {
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 35px 49px;
|
||||
|
||||
.choice-item,
|
||||
.choice-long-item {
|
||||
background-color: #f6f6f6;
|
||||
height: 160px;
|
||||
width: 220px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 18px;
|
||||
|
||||
.choice-name {
|
||||
font-weight: 650;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
padding-left: 34px;
|
||||
text-align: left;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 16px;
|
||||
transform: translateY(-50%);
|
||||
background-color: #50e3c2;
|
||||
width: 6px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgb(242, 242, 242);
|
||||
|
||||
.choice-arrows {
|
||||
background-color: #000;
|
||||
background-image: url('@/assets/img/edit/selectArrow-white.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choice-long-item {
|
||||
width: 450px;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
padding-right: 20px;
|
||||
|
||||
.choice-arrows {
|
||||
margin: 0;
|
||||
margin-top: -18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.choice-explain {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 21px;
|
||||
padding-left: 34px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.choice-arrows {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fddf6d;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
background-image: url('@/assets/img/edit/selectArrow.png');
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user