168 lines
4.2 KiB
Vue
168 lines
4.2 KiB
Vue
<template>
|
|
<!-- 关于发布弹窗 -->
|
|
<div class="flexcenter pop-mask" v-if="popState">
|
|
<div class="pop about-pop shadow">
|
|
<div class="about-title">关于发布</div>
|
|
<div class="about-tab flexacenter">
|
|
<div class="about-tab-item flexcenter" :class="{ 'pitch': key === tab }" v-for="(value, key) in tabList"
|
|
:key="key" @click="cutTab(key)">
|
|
{{ value }}
|
|
</div>
|
|
</div>
|
|
<div class="about-list flexflex">
|
|
<div class="about-list-item" v-for="(item, index) in cutTabArray[tab]" :key="index">
|
|
<div v-html="item"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="close flexcenter" @click="$emit('close')">关闭</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, onMounted, getCurrentInstance, watch, computed } from 'vue';
|
|
|
|
export default {
|
|
name: 'GterFangAboutPop',
|
|
props: ['popState', "intermediary"],
|
|
|
|
setup(props) {
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const tabList = {
|
|
person: "个人账号",
|
|
intermediary: "中介账号",
|
|
more: "更多说明",
|
|
};
|
|
|
|
let tab = ref("person"); // person intermediary more
|
|
|
|
if (props['intermediary'] == 1) tab.value = "intermediary"
|
|
else tab.value = "person"
|
|
|
|
const cutTabArray = reactive({});
|
|
|
|
// 监听 prop 变化
|
|
watch(() => props.popState, newValue => {
|
|
if (newValue && Object.keys(cutTabArray).length === 0) init();
|
|
});
|
|
|
|
const init = () => {
|
|
proxy.$post("/tenement/pc/api/publish/about").then(res => {
|
|
cutTabArray['person'] = res.data['person']
|
|
cutTabArray['intermediary'] = res.data['intermediary']
|
|
cutTabArray['more'] = res.data['more']
|
|
});
|
|
};
|
|
|
|
const cutTab = tabvalue => tab.value = tabvalue;;
|
|
|
|
return {
|
|
tabList,
|
|
tab,
|
|
cutTabArray,
|
|
init,
|
|
cutTab,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.close {
|
|
height: 50px;
|
|
width: 180px;
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-radius: 55px;
|
|
margin: 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pop-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.698039215686274);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.pop {
|
|
&.about-pop {
|
|
width: 600px;
|
|
height: 627px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 20px;
|
|
|
|
.about-title {
|
|
color: #000;
|
|
font-size: 24px;
|
|
font-weight: 650;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.about-tab {
|
|
height: 70px;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
justify-content: space-around;
|
|
|
|
.about-tab-item {
|
|
|
|
width: 120px;
|
|
height: 40px;
|
|
border-radius: 60px;
|
|
font-size: 18px;
|
|
color: #555;
|
|
cursor: pointer;
|
|
|
|
&.pitch {
|
|
background: rgba(98, 177, 255, 1);
|
|
font-weight: 650;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.about-list {
|
|
flex-direction: column;
|
|
color: #555;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
padding: 0 30px 0 53px;
|
|
height: 374px;
|
|
|
|
.about-list-item {
|
|
padding: 30px 0;
|
|
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 40px;
|
|
left: -22px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(80, 227, 194, 1);
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
border-bottom: 1px dashed #ebebeb;
|
|
}
|
|
|
|
b {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |